@extends('dashboard.includes.master')
@section('title', 'Email Report')

@section('css')
<style>
#searchInput {
    max-width: 350px;
    margin: 2rem 2rem 1rem auto !important;
    box-shadow: 0 1px 1px #eee7ee99, 0 -1px 1px #eee7ee99;
}
.sort-icon {
    cursor: pointer;
    margin-left: 5px;
}
.sort-asc::after {
    content: '↑';
}
.sort-desc::after {
    content: '↓';
}
.sort-none::after {
    content: '↕';
}
th.sortable {
    cursor: pointer;
    user-select: none;
}
.loader {
    display: none;
    position: absolute;
    right: 45px;
    top: 50%;
    transform: translateY(-50%);
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #3498db;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg) translateY(-50%); }
    100% { transform: rotate(360deg) translateY(-50%); }
}
.search-container {
    position: relative;
}
.search-results {
    display: none;
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
}
</style>
@endsection

@section('content')
<div class="container mt-4">
    <h2 class="mb-4 text-center">Email Sending Report</h2>

    @if(isset($error))
        <div class="alert alert-danger">{{ $error }}</div>
    @endif

    <!-- Statistics Section -->
    <div class="row text-center mb-4" id="stats-cards">
        <div class="col-md-4">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <h5 class="card-title">Sent Messages</h5>
                    <p class="card-text fs-2" id="sent-count">{{ $sent }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-warning">
                <div class="card-body">
                    <h5 class="card-title">Pending Messages</h5>
                    <p class="card-text fs-2" id="pending-count">{{ $pending }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-danger">
                <div class="card-body">
                    <h5 class="card-title">Failed Messages</h5>
                    <p class="card-text fs-2" id="failed-count">{{ $failed }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Search Input -->
    <input type="text" id="searchInput" class="form-control" placeholder="Search by name, email, subject, or status...">

    <div class="table-responsive">
        <table id="file-export" class="table table-bordered text-nowrap w-100">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th class="sortable" data-sort="sender_name">Sender Name <span class="sort-icon sort-none"></span></th>
                    <th class="sortable" data-sort="sender_email">Sender Email <span class="sort-icon sort-none"></span></th>
                    <th class="sortable" data-sort="receiver_email">Receiver Email <span class="sort-icon sort-none"></span></th>
                    <th class="sortable" data-sort="receiver_email">Receiver Email Count <span class="sort-icon sort-none"></span></th>
                    <th class="sortable" data-sort="subject">Subject <span class="sort-icon sort-none"></span></th>
                    <th class="sortable" data-sort="send_at">Send At <span class="sort-icon sort-desc"></span></th>
                    <th class="sortable" data-sort="status">Status <span class="sort-icon sort-none"></span></th>
                </tr>
            </thead>
            <tbody id="messagesTableBody">
               @forelse($messages as $index => $message)
                    <tr>
                        <td>{{ ($messages->currentPage() - 1) * $messages->perPage() + $index + 1 }}</td>
                        <td>{{ $message->sender->isNotEmpty() ? $message->sender[0]->name : 'N/A' }}</td>
                        <td>{{ $message->sender->isNotEmpty() ? $message->sender[0]->email : 'N/A' }}</td>
                        <td>{{ $message->reciever->isNotEmpty() ? $message->reciever[0]->email : 'N/A' }}</td>
                        <td>({{ $MessageToReciever[$index] }})</td>
                        <td>{{ $message->subject ?? 'N/A' }}</td>
                        <td>{{ $message->send_at ? \Carbon\Carbon::parse($message->send_at)->format('Y-m-d H:i') : 'N/A' }}</td>
                        <td>
                            @if ($message->status == 'sent')
                                <span class="badge bg-success">Sent</span>
                            @elseif ($message->status == 'pending')
                                <span class="badge bg-warning">Pending</span>
                            @else
                                <span class="badge bg-danger">Failed</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center">No messages found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center mt-3 pagination">
        {{ $messages->links('vendor.pagination.bootstrap-4') }}
    </div>
</div>
@endsection

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
    // Debounce function to limit AJAX requests
    function debounce(func, wait) {
        let timeout;
        return function() {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, arguments), wait);
        };
    }

    // Get current URL parameters
    function getURLParameters() {
        const searchParams = new URLSearchParams(window.location.search);
        return {
            search: searchParams.get('search') || '',
            sort: searchParams.get('sort') || 'send_at',
            order: searchParams.get('order') || 'desc',
            page: searchParams.get('page') || '1'
        };
    }

    // AJAX search on keyup with debounce
    $('#searchInput').val(getURLParameters().search); // Set initial value from URL
    
    $('#searchInput').on('keyup', debounce(function() {
        var searchTerm = $(this).val();
        var params = getURLParameters();
        
        // Reset to page 1 when searching
        fetchData({
            search: searchTerm,
            sort: params.sort,
            order: params.order,
            page: 1
        });
    }, 500));

    // Handle sorting
    $('.sortable').on('click', function() {
        const column = $(this).data('sort');
        const params = getURLParameters();
        let order = 'asc';
        
        // Toggle order if clicking the same column
        if (params.sort === column) {
            order = params.order === 'asc' ? 'desc' : 'asc';
        }
        
        fetchData({
            search: params.search,
            sort: column,
            order: order,
            page: params.page
        });
    });

    // Handle pagination clicks
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        const href = $(this).attr('href');
        const page = new URLSearchParams(href.split('?')[1]).get('page');
        const params = getURLParameters();
        
        fetchData({
            search: params.search,
            sort: params.sort,
            order: params.order,
            page: page
        });
    });

    // Function to fetch data and update the page
    function fetchData(params) {
        // Show loading indicator if needed
        
        // Build query string
        const queryString = Object.entries(params)
            .filter(([_, value]) => value !== null && value !== '')
            .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
            .join('&');
            
        const url = `{{ route('message.index') }}?${queryString}`;
        
        // Update browser URL without reload
        window.history.pushState({}, '', url);
        
        $.ajax({
            url: url,
            method: 'GET',
            success: function(response) {
                // Parse the HTML response
                const $response = $(response);
                
                // Update table body
                $('#messagesTableBody').html($response.find('#messagesTableBody').html());
                
                // Update pagination
                $('.pagination').html($response.find('.pagination').html());
                
                // Update stats
                $('#sent-count').text($response.find('#sent-count').text());
                $('#pending-count').text($response.find('#pending-count').text());
                $('#failed-count').text($response.find('#failed-count').text());
                
                // Update sort icons
                $('.sort-icon').removeClass('sort-asc sort-desc').addClass('sort-none');
                $(`.sortable[data-sort="${params.sort}"] .sort-icon`)
                    .removeClass('sort-none')
                    .addClass(params.order === 'asc' ? 'sort-asc' : 'sort-desc');
            },
            error: function(xhr) {
                console.error('Error fetching data:', xhr);
            }
        });
    }

    // Initialize sort icons based on URL parameters
    const initialParams = getURLParameters();
    $(`.sortable[data-sort="${initialParams.sort}"] .sort-icon`)
        .removeClass('sort-none')
        .addClass(initialParams.order === 'asc' ? 'sort-asc' : 'sort-desc');
});
</script>
@endsection