@extends('layouts.main')

@section('title')
{{ __('reports.report_title', ['name' => $campaign->name, 'event' => $campaign->event->name]) }}
@endsection

@section('page_title')
{{ __('reports.campaign_report', ['name' => $campaign->name]) }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('events.index'), 'label' => __('events.title')],
        ['url' => route('campaigns.index', $campaign->event->id), 'label' => $campaign->event->name . ' ' . __('campaigns.title')],
        ['url' => '', 'label' => $campaign->name . ' ' . __('reports.title')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 sm:p-6 shadow-front-box-shadow-glow">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="flex items-center space-x-3 sm:space-x-4">
                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                        <i class="fas fa-chart-line text-white text-lg sm:text-xl"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h1 class="text-xl sm:text-2xl font-semibold text-gray-700 truncate">{{ __('reports.campaign_report', ['name' => $campaign->name]) }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1 truncate">{{ $campaign->name }} - {{ $campaign->event->name }}</p>
                    </div>
                </div>
                <div class="flex items-center space-x-2 sm:space-x-3">
                    <div class="min-w-8 h-8 sm:min-w-10 sm:h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-chart-line text-primary text-xs sm:text-sm"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-medium text-gray-700">{{ __('reports.title') }}</h3>
                        <p class="text-xs text-gray-500">{{ __('reports.campaign_analytics') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Campaign & Event Information Card -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
            <div class="md:p-6 p-4">
                <div class="flex items-center justify-between mb-6 flex-wrap gap-4">
                    <div class="flex sm:items-center items-start space-x-3">
                        <div class="min-w-10 h-10 sm:mt-0 mt-2 bg-primary/10 rounded-lg flex items-center justify-center">
                            <i class="fas fa-info-circle text-primary"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-700">{{ __('reports.campaign_event_info') }}</h3>
                            <p class="text-sm text-gray-600">{{ __('reports.complete_details') }}</p>
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <a href="{{ route('campaigns.index', $campaign->event->id) }}" class="btn btn-outline-primary sm:w-fit w-full">
                            <i class="fas fa-arrow-left mr-2"></i>{{ __('reports.back_to_campaigns') }}
                        </a>
                        <a href="{{ route('events.index') }}" class="btn btn-outline-secondary sm:w-fit w-full">
                            <i class="fas fa-calendar mr-2"></i>{{ __('reports.all_events') }}
                        </a>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 md:gap-6 gap-4">
                    <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                        <div class="flex items-center space-x-3">
                            <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                <i class="fas fa-calendar-alt text-primary"></i>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium mb-1 text-gray-500">{{ __('reports.event') }}</h4>
                                <p class="text-base font-semibold text-gray-700">{{ $campaign->event->name }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                        <div class="flex items-center space-x-3">
                            <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                <i class="fas fa-bullseye text-primary"></i>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium mb-1 text-gray-500">{{ __('reports.campaign') }}</h4>
                                <p class="text-base font-semibold text-gray-700">{{ $campaign->name }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                        <div class="flex items-center space-x-3">
                            <div class="min-w-10 h-10 bg-blue-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-phone text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium mb-1 text-gray-500">{{ __('reports.event_mobile') }}</h4>
                                <p class="text-base font-semibold text-gray-700">{{ $campaign->event->mobile_number ?? __('reports.not_set') }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 p-4 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300">
                        <div class="flex items-center space-x-3">
                            <div class="min-w-10 h-10 bg-yellow-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                                <i class="fas fa-clock text-yellow-600"></i>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium mb-1 text-gray-500">{{ __('reports.campaign_created') }}</h4>
                                <p class="text-base font-semibold text-gray-700">{{ $campaign->created_at->format('M d, Y \a\t h:i A') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 md:gap-6 gap-4">
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300 md:p-6 p-4">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                        <i class="fas fa-users text-primary text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $totalInvitations }}</h3>
                        <p class="text-sm text-gray-600">{{ __('reports.total_invitations') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300 md:p-6 p-4">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-green-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                        <i class="fas fa-check-circle text-green-600 text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $successfulInvitations }}</h3>
                        <p class="text-sm text-gray-600">{{ __('reports.successful') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300 md:p-6 p-4">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-red-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                        <i class="fas fa-times-circle text-red-600 text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $failedInvitations }}</h3>
                        <p class="text-sm text-gray-600">{{ __('reports.failed') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300 md:p-6 p-4">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-yellow-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                        <i class="fas fa-clock text-yellow-600 text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $inProgressInvitations }}</h3>
                        <p class="text-sm text-gray-600">{{ __('reports.in_progress') }}</p>
                    </div>
                </div>
            </div>
            
            <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow hover:shadow-front-large-blur transition-all duration-300 md:p-6 p-4">
                <div class="flex items-center space-x-4">
                    <div class="min-w-12 h-12 bg-blue-100/80 backdrop-blur-sm rounded-lg flex items-center justify-center border border-white/50">
                        <i class="fas fa-chart-line text-blue-600 text-lg"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-gray-700">{{ $successRate }}%</h3>
                        <p class="text-sm text-gray-600">{{ __('reports.success_rate') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters Card -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
            <div class="md:p-6 p-4">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                        <i class="fas fa-filter text-primary"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700">{{ __('reports.filters_search') }}</h3>
                        <p class="text-sm text-gray-600">{{ __('reports.filter_search_invitations') }}</p>
                    </div>
                </div>
                
                <form method="GET" action="{{ route('campaigns.invitation.report', $campaign->id) }}" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-search mr-2"></i>
                                {{ __('reports.search') }}
                            </label>
                            <input type="text" 
                                   class="form-control !mt-0" 
                                   name="search" 
                                   value="{{ request('search') }}" 
                                   placeholder="{{ __('reports.search_placeholder') }}">
                        </div>
                        
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-flag mr-2"></i>
                                {{ __('reports.status') }}
                            </label>
                            <select class="form-control !mt-0" name="status">
                                <option value="">{{ __('reports.all_status') }}</option>
                                <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>{{ __('reports.delivered') }}</option>
                                <option value="2" {{ request('status') == '2' ? 'selected' : '' }}>{{ __('reports.in_progress') }}</option>
                                <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>{{ __('reports.failed') }}</option>
                            </select>
                        </div>
                        
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-calendar mr-2"></i>
                                {{ __('reports.date_from') }}
                            </label>
                            <input type="date" 
                                   class="form-control !mt-0" 
                                   name="date_from" 
                                   value="{{ request('date_from') }}">
                        </div>
                        
                        <div class="space-y-2">
                            <label class="form-label">
                                <i class="fas fa-calendar mr-2"></i>
                                {{ __('reports.date_to') }}
                            </label>
                            <input type="date" 
                                   class="form-control !mt-0" 
                                   name="date_to" 
                                   value="{{ request('date_to') }}">
                        </div>
                        
                        <div class="flex items-end flex-wrap gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search mr-2"></i>{{ __('reports.filter') }}
                            </button>
                            <a href="{{ route('campaigns.invitation.report', $campaign->id) }}" class="btn btn-outline-secondary">
                                <i class="fas fa-refresh mr-2"></i>{{ __('reports.clear') }}
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Results Card -->
        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
            <div class="p-0">
                <!-- Custom Controls (DataTables-like) -->
                <div id="invitationsControlsTop" class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm p-4" style="display:none;">
                    <div class="flex items-center gap-4">
                        <label class="flex items-center gap-2 text-sm text-gray-600 flex-wrap">
                            <span>{{ __('reports.show') }}</span>
                            <select id="invitationsLength" class="events-length-select border border-gray-300 rounded-lg px-3 py-1.5 mx-2 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-fl-gray-extra-light/50 backdrop-blur-sm min-w-[70px]">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="-1">{{ __('reports.all') }}</option>
                            </select>
                            <span>{{ __('reports.entries') }}</span>
                        </label>
                    </div>
                    <div class="flex items-center gap-4">
                        <label class="flex items-center gap-2 text-sm text-gray-600 flex-wrap">
                            <span>{{ __('reports.search') }}:</span>
                            <input id="invitationsSearch" type="text" class="events-search-input border border-gray-300 rounded-lg px-4 py-2 text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-fl-gray-extra-light/50 backdrop-blur-sm" placeholder="{{ __('reports.search_placeholder') }}" />
                        </label>
                    </div>
                </div>

                <!-- Table View with unified structure -->
                <div class="overflow-x-auto">
                    <table class="table min-w-full bg-gray-50" id="invitationsTable">
                        <thead>
                            <tr class="bg-fl-gray-extra-light/30 backdrop-blur-sm">
                                <th class="min-w-[300px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('reports.name') }}</th>
                                <th class="min-w-[180px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('reports.number') }}</th>
                                <th class="min-w-[180px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('reports.date_sent') }}</th>
                                <th class="min-w-[150px] px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('reports.status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($invitations->count() > 0)
                                @foreach ($invitations as $invitation)
                                    @php
                                        if ($invitation->status == 2) {
                                            $badgeClass = 'bg-light-warning';
                                            $statusText = __('reports.in_progress');
                                            $icon = 'fas fa-clock';
                                        } elseif ($invitation->status == 1) {
                                            $badgeClass = 'bg-light-success';
                                            $statusText = __('reports.delivered');
                                            $icon = 'fas fa-check-circle';
                                        } else {
                                            $badgeClass = 'bg-light-danger';
                                            $statusText = __('reports.failed');
                                            $icon = 'fas fa-times-circle';
                                        }
                                    @endphp
                                    <tr class="group border-b border-white/30 hover:bg-fl-gray-extra-light/40 backdrop-blur-sm transition-all duration-200">
                                        <td class="px-4 py-3">
                                            <div class="flex items-center space-x-4">
                                                <div class="avatar bg-light-primary">
                                                    <div class="avatar-content">
                                                        <i class="fas fa-user avatar-icon text-primary"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-1 min-w-0">
                                                    <h4 class="text-sm font-semibold text-gray-700 truncate mb-1 max-w-[300px]">{{ $invitation->row_data['Name'] ?? 'N/A' }}</h4>
                                                    <p class="text-xs text-gray-500">{{ __('reports.id') }}: #{{ $invitation->id }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3">
                                            <div class="flex items-center space-x-2">
                                                <div class="w-8 h-8 bg-green-100/80 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                                    <i class="fas fa-phone text-green-600"></i>
                                                </div>
                                                <span class="text-sm font-medium text-gray-700">{{ $invitation->row_data['Number'] ?? 'N/A' }}</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3">
                                            <div class="flex items-center space-x-2">
                                                <div class="min-w-8 h-8 bg-blue-100/80 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                                    <i class="fas fa-clock text-blue-600"></i>
                                                </div>
                                                <span class="text-sm text-gray-600 whitespace-nowrap">{{ $invitation->created_at->format('d M Y, h:i A') }}</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 text-center">
                                            <div class="flex flex-col items-center gap-2">
                                                <span class="badge flex items-center w-fit space-x-1.5 
                                                    @if($invitation->status == 2) bg-light-warning
                                                    @elseif($invitation->status == 1) bg-light-success
                                                    @else bg-light-danger
                                                    @endif
                                                    @if($invitation->status == 0 && !empty($invitation->failed_reason))
                                                        cursor-help
                                                    @endif
                                                "
                                                @if($invitation->status == 0 && !empty($invitation->failed_reason))
                                                    data-tooltip="{{ e($invitation->failed_reason) }}"
                                                    data-tooltip-placement="top"
                                                @endif
                                                >
                                                    <i class="{{ $icon }} text-xs"></i>
                                                    <span>{{ $statusText }}</span>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4" class="text-center !py-20 px-4">
                                        <div class="flex flex-col items-center space-y-4">
                                            <div class="w-16 h-16 bg-fl-gray-extra-light/50 backdrop-blur-sm rounded-full flex items-center justify-center border border-gray-300">
                                                <i class="fas fa-inbox text-gray-400 text-2xl"></i>
                                            </div>
                                            <div>
                                                <h3 class="text-lg font-medium text-gray-700">{{ __('reports.no_data_found') }}</h3>
                                                <p class="text-gray-500">{{ __('reports.no_matching_records') }}</p>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <!-- Bottom Controls (info + pagination) -->
                <div id="invitationsControlsBottom" class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm px-4 py-3 border-t border-gray-200 bg-fl-gray-extra-light/20 backdrop-blur-sm" style="display:none;">
                    <div id="invitationsInfo" class="text-sm text-gray-600"></div>
                    <div id="invitationsPagination" class="flex items-center gap-1"></div>
                </div>

                    <!-- Mobile/Tablet Card View -->
                    <!-- Mobile Search and Controls -->
                    {{-- <div class="mobile-controls mb-4">
                        <div class="flex flex-row gap-4 items-center justify-between">
                            <div class="flex-1 w-full sm:w-auto">
                                <div class="relative">
                                    <input type="text" 
                                           id="mobileSearchInput" 
                                           placeholder="Search invitations..." 
                                           class="form-control !pl-10 pr-4 py-2 w-full">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-search text-gray-400"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="text-sm text-gray-600" id="mobileResultsCount">0 results</span>
                                <button id="mobileClearSearch" class="btn btn-outline-secondary btn-sm !w-8 !hidden">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div> --}}
                    
                    
                    <!-- Mobile Pagination -->
                    {{-- <div class="mobile-pagination mt-6" id="mobilePagination">
                        <div class="flex flex-row gap-4items-center justify-between gap-4">
                            <div class="flex items-center gap-2">
                                <select id="mobilePageSize" class="form-control !w-16">
                                    <option value="6">6</option>
                                    <option value="12" selected>12</option>
                                    <option value="24">24</option>
                                    <option value="48">48</option>
                                </select>
                            </div>
                            <div class="flex items-center gap-2">
                                <button id="mobilePrevPage" class="btn btn-outline-secondary btn-sm" disabled>
                                    <i class="fas fa-chevron-left"></i>
                                </button>
                                <span class="text-sm text-gray-600" id="mobilePageInfo">Page 1 of 1</span>
                                <button id="mobileNextPage" class="btn btn-outline-secondary btn-sm" disabled>
                                    <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div> --}}
            </div>
        </div>

    </div>
@endsection

@push('custom_scripts')
<script>
    $(document).ready(function() {
        // Translations for JavaScript
        const reportTranslations = {
            inProgress: @json(__('reports.in_progress')),
            delivered: @json(__('reports.delivered')),
            failed: @json(__('reports.failed')),
            noDataFound: @json(__('reports.no_data_found')),
            noMatchingRecords: @json(__('reports.no_matching_records')),
            id: @json(__('reports.id'))
        };
        
        // Configuration
        const POLLING_INTERVAL = {{ config('whatsapp.batch_delay_seconds', 45) }} * 1000; // Convert to milliseconds
        const CHECK_UPDATES_URL = "{{ route('campaigns.report.check-updates', $campaign->id) }}";
        const GET_DATA_URL = "{{ route('campaigns.report.data', $campaign->id) }}";
        const CSRF_TOKEN = "{{ csrf_token() }}";
        
        let lastKnownTimestamp = {{ $invitations->max('updated_at') ? strtotime($invitations->max('updated_at')) : 'null' }};
        let pollingInterval = null;

        function escapeAttribute(value) {
            if (value === null || value === undefined) {
                return '';
            }
            return String(value)
                .replace(/&/g, '&amp;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');
        }

        // Get current filters from URL
        function getCurrentFilters() {
            const urlParams = new URLSearchParams(window.location.search);
            return {
                status: urlParams.get('status') || '',
                date_from: urlParams.get('date_from') || '',
                date_to: urlParams.get('date_to') || '',
                search: urlParams.get('search') || ''
            };
        }

        // Initialize plain table controls (same as campaigns/index page)
        try {
            // Ensure table structure is unified
            const $mainTable = $('#invitationsTable');
            $mainTable.css({ 'display': 'table', 'width': '100%', 'border-collapse': 'collapse' });
            $mainTable.find('thead').css({ 'display': 'table-header-group', 'visibility': 'visible', 'opacity': '1' });
            $mainTable.find('tbody').css({ 'display': 'table-row-group', 'visibility': 'visible', 'opacity': '1' });

            // Initialize custom controls
            initPlainTableControls('#invitationsTable', {
                lengthSelector: '#invitationsLength',
                searchInput: '#invitationsSearch',
                infoLabel: '#invitationsInfo',
                paginationContainer: '#invitationsPagination',
                controlsTop: '#invitationsControlsTop',
                controlsBottom: '#invitationsControlsBottom'
            });
        } catch (e) {
            console.error('Table init error:', e);
        }
        
        // Initialize tooltips for failed badges
        if (typeof initCustomTooltips === 'function') {
            initCustomTooltips();
        }

        // Check for updates
        function checkForUpdates() {
            const filters = getCurrentFilters();
            
            $.ajax({
                url: CHECK_UPDATES_URL,
                method: 'GET',
                data: filters,
                headers: {
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                success: function(response) {
                    if (response.last_updated && lastKnownTimestamp) {
                        if (response.last_updated > lastKnownTimestamp) {
                            console.log('Updates detected, fetching new data...');
                            fetchUpdatedData();
                        }
                    } else if (response.last_updated && !lastKnownTimestamp) {
                        // First time or no data before, update timestamp
                        lastKnownTimestamp = response.last_updated;
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error checking for updates:', error);
                    // Stop polling on authorization errors
                    if (xhr.status === 401 || xhr.status === 403) {
                        stopPolling();
                        console.warn('Authorization error - stopping auto-refresh');
                    }
                }
            });
        }

        // Fetch updated data
        function fetchUpdatedData() {
            const filters = getCurrentFilters();
            
            $.ajax({
                url: GET_DATA_URL,
                method: 'GET',
                data: filters,
                headers: {
                    'X-CSRF-TOKEN': CSRF_TOKEN
                },
                success: function(response) {
                    updateStatistics(response.statistics);
                    updateInvitationsTable(response.invitations);
                    lastKnownTimestamp = response.last_updated;
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching updated data:', error);
                    // Stop polling on authorization errors
                    if (xhr.status === 401 || xhr.status === 403) {
                        stopPolling();
                        console.warn('Authorization error - stopping auto-refresh');
                    }
                }
            });
        }

        // Update statistics cards with animation
        function updateStatistics(stats) {
            updateStatCard('.grid > div:nth-child(1) h3', stats.total);
            updateStatCard('.grid > div:nth-child(2) h3', stats.successful);
            updateStatCard('.grid > div:nth-child(3) h3', stats.failed);
            updateStatCard('.grid > div:nth-child(4) h3', stats.inProgress);
            updateStatCard('.grid > div:nth-child(5) h3', stats.successRate + '%');
        }

        // Update individual stat card with brief highlight
        function updateStatCard(selector, newValue) {
            const $element = $(selector);
            const currentValue = $element.text().trim();
            const newValueStr = String(newValue);
            
            if (currentValue !== newValueStr) {
                $element.text(newValueStr);
                // Add highlight animation
                $element.parent().parent().addClass('bg-yellow-50 transition-colors duration-500');
                setTimeout(function() {
                    $element.parent().parent().removeClass('bg-yellow-50');
                }, 1000);
            }
        }

        // Update invitations table
        function updateInvitationsTable(invitations) {
            // Update table body
            const $tbody = $('#invitationsTable tbody');
            
            if (invitations.length === 0) {
                $tbody.html('<tr><td colspan="4" class="text-center !py-20 px-4"><div class="flex flex-col items-center space-y-4"><div class="w-16 h-16 bg-fl-gray-extra-light/50 backdrop-blur-sm rounded-full flex items-center justify-center border border-gray-300"><i class="fas fa-inbox text-gray-400 text-2xl"></i></div><div><h3 class="text-lg font-medium text-gray-700">' + reportTranslations.noDataFound + '</h3><p class="text-gray-500">' + reportTranslations.noMatchingRecords + '</p></div></div></td></tr>');
            } else {
                let html = '';
                invitations.forEach(function(invitation) {
                    let badgeClass, statusText, icon;
                    
                    if (invitation.status == 2) {
                        badgeClass = 'bg-light-warning';
                        statusText = reportTranslations.inProgress;
                        icon = 'fas fa-clock';
                    } else if (invitation.status == 1) {
                        badgeClass = 'bg-light-success';
                        statusText = reportTranslations.delivered;
                        icon = 'fas fa-check-circle';
                    } else {
                        badgeClass = 'bg-light-danger';
                        statusText = reportTranslations.failed;
                        icon = 'fas fa-times-circle';
                    }

                    const attributeReason = escapeAttribute(invitation.failed_reason || '');
                    const tooltipAttributes = invitation.status == 0 && attributeReason ? `
                        data-tooltip="${attributeReason}"
                        data-tooltip-placement="top"
                    ` : '';
                    const cursorClass = invitation.status == 0 && attributeReason ? 'cursor-help' : '';

                    html += `
                        <tr class="group border-b border-white/30 hover:bg-fl-gray-extra-light/40 backdrop-blur-sm transition-all duration-200">
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-4">
                                    <div class="avatar bg-light-primary">
                                        <div class="avatar-content">
                                            <i class="fas fa-user avatar-icon text-primary"></i>
                                        </div>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <h4 class="text-sm font-semibold text-gray-700 truncate mb-1 max-w-[300px]">${invitation.name}</h4>
                                        <p class="text-xs text-gray-500">${reportTranslations.id}: #${invitation.id}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-2">
                                    <div class="w-8 h-8 bg-green-100/80 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                        <i class="fas fa-phone text-green-600"></i>
                                    </div>
                                    <span class="text-sm font-medium text-gray-700">${invitation.number}</span>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center space-x-2">
                                    <div class="min-w-8 h-8 bg-blue-100/80 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/50">
                                        <i class="fas fa-clock text-blue-600"></i>
                                    </div>
                                    <span class="text-sm text-gray-600 whitespace-nowrap">${invitation.created_at}</span>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-center">
                                <div class="flex flex-col items-center gap-2">
                                    <span class="badge flex items-center w-fit space-x-1.5 ${badgeClass} ${cursorClass}" ${tooltipAttributes}>
                                        <i class="${icon} text-xs"></i>
                                        <span>${statusText}</span>
                                    </span>
                                </div>
                            </td>
                        </tr>
                    `;
                });
                $tbody.html(html);
            }

            // Re-initialize plain table controls
            try {
                initPlainTableControls('#invitationsTable', {
                    lengthSelector: '#invitationsLength',
                    searchInput: '#invitationsSearch',
                    infoLabel: '#invitationsInfo',
                    paginationContainer: '#invitationsPagination',
                    controlsTop: '#invitationsControlsTop',
                    controlsBottom: '#invitationsControlsBottom'
                });
            } catch (e) {
                console.error('Table re-init error:', e);
            }
            
            // Re-initialize tooltips for dynamically added content
            if (typeof reinitTooltips === 'function') {
                reinitTooltips();
            }
        }

        // Start polling
        function startPolling() {
            if (pollingInterval) {
                clearInterval(pollingInterval);
            }
            console.log(`Auto-refresh enabled - checking every ${POLLING_INTERVAL / 1000} seconds`);
            pollingInterval = setInterval(checkForUpdates, POLLING_INTERVAL);
        }

        // Stop polling
        function stopPolling() {
            if (pollingInterval) {
                clearInterval(pollingInterval);
                pollingInterval = null;
                console.log('Auto-refresh stopped');
            }
        }

        // Start polling on page load
        startPolling();

        // Clean up on page unload
        $(window).on('beforeunload', function() {
            stopPolling();
        });
        
        // Mobile Card Search and Pagination
        let mobileCards = [];
        let filteredCards = [];
        let currentPage = 1;
        let pageSize = 12;
        
        // Initialize mobile cards
        function initMobileCards() {
            mobileCards = Array.from(document.querySelectorAll('.mobile-card'));
            filteredCards = [...mobileCards];
            updateMobileDisplay();
        }
        
        // Search functionality
        function searchMobileCards(query) {
            if (!query.trim()) {
                filteredCards = [...mobileCards];
            } else {
                filteredCards = mobileCards.filter(card => {
                    const title = card.querySelector('.mobile-card-title')?.textContent.toLowerCase() || '';
                    const subtitle = card.querySelector('.mobile-card-subtitle')?.textContent.toLowerCase() || '';
                    const value = card.querySelector('.mobile-card-value')?.textContent.toLowerCase() || '';
                    return title.includes(query.toLowerCase()) || 
                           subtitle.includes(query.toLowerCase()) || 
                           value.includes(query.toLowerCase());
                });
            }
            currentPage = 1;
            updateMobileDisplay();
        }
        
        // Update mobile display
        function updateMobileDisplay() {
            const container = document.getElementById('mobileCardsContainer');
            const startIndex = (currentPage - 1) * pageSize;
            const endIndex = startIndex + pageSize;
            const pageCards = filteredCards.slice(startIndex, endIndex);
            
            // Hide all cards
            mobileCards.forEach(card => card.style.display = 'none');
            
            // Show filtered cards for current page
            pageCards.forEach(card => card.style.display = 'block');
            
            // Update pagination
            updateMobilePagination();
            updateMobileResultsCount();
        }
        
        // Update pagination controls
        function updateMobilePagination() {
            const totalPages = Math.ceil(filteredCards.length / pageSize);
            const prevBtn = document.getElementById('mobilePrevPage');
            const nextBtn = document.getElementById('mobileNextPage');
            const pageInfo = document.getElementById('mobilePageInfo');
            
            prevBtn.disabled = currentPage <= 1;
            nextBtn.disabled = currentPage >= totalPages;
            pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
        }
        
        // Update results count
        function updateMobileResultsCount() {
            const resultsCount = document.getElementById('mobileResultsCount');
            resultsCount.textContent = `${filteredCards.length} result${filteredCards.length !== 1 ? 's' : ''}`;
        }
        
        // Event listeners
        document.getElementById('mobileSearchInput').addEventListener('input', function(e) {
            searchMobileCards(e.target.value);
        });
        
        document.getElementById('mobileClearSearch').addEventListener('click', function() {
            document.getElementById('mobileSearchInput').value = '';
            searchMobileCards('');
        });
        
        document.getElementById('mobilePageSize').addEventListener('change', function(e) {
            pageSize = parseInt(e.target.value);
            currentPage = 1;
            updateMobileDisplay();
        });
        
        document.getElementById('mobilePrevPage').addEventListener('click', function() {
            if (currentPage > 1) {
                currentPage--;
                updateMobileDisplay();
            }
        });
        
        document.getElementById('mobileNextPage').addEventListener('click', function() {
            const totalPages = Math.ceil(filteredCards.length / pageSize);
            if (currentPage < totalPages) {
                currentPage++;
                updateMobileDisplay();
            }
        });
        
        // Initialize mobile cards
        initMobileCards();
    });
</script>
@endpush

@push('custom_styles')
<style>
    /* Match DataTables styling for custom controls */
    .events-search-input:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 0.2rem rgb(var(--twc-primary) / 0.15);
    }
    
    .events-length-select:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 0.2rem rgb(var(--twc-primary) / 0.15);
    }
</style>
@endpush