@extends('layouts.main')

@section('title')
    {{ __('events.title') }}
@endsection

@section('page_title')
    {{ __('events.title') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => '', 'label' => __('events.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-calendar-alt 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">{{ __('events.management') }}</h1>
                        <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('events.management_description') }}</p>
                    </div>
                </div>
                @can('create', App\Models\Event::class)
                <button type="button" class="btn btn-primary shadow-lg hover:shadow-xl w-full sm:w-auto justify-center" data-modal-target="#addEventModal">
                    <i class="fas fa-plus mr-2"></i>
                    <span class="hidden sm:inline whitespace-nowrap">{{ __('events.create_new') }}</span>
                    <span class="sm:hidden">{{ __('events.create') }}</span>
                </button>
                @endcan
            </div>
        </div>

        <!-- Events Table 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="eventsControlsTop" 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>{{ __('events.show') }}</span>
                            <select id="eventsLength" 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">{{ __('events.all') }}</option>
                            </select>
                            <span>{{ __('events.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>{{ __('events.search') }}:</span>
                            <input id="eventsSearch" 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="{{ __('events.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="eventsTable">
                        <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">{{ __('events.event_details') }}</th>
                                <th class="min-w-[150px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('events.contact') }}</th>
                                <th class="min-w-[120px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('events.created') }}</th>
                                <th class="min-w-[120px] px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('events.status') }}</th>
                                <th class="min-w-[200px] px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">{{ __('events.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($events ?? [] as $event)
                                <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-calendar-alt 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]">{{ $event->name }}</h4>
                                                <p class="text-xs text-gray-500">{{ __('events.id') }}: #{{ $event->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">+{{ $event->mobile_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>
                                            <div class="text-sm text-gray-600 whitespace-nowrap">
                                                @localDateTime($event->created_at)
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        @if ($event->device_connected == 1)
                                            <span class="badge bg-light-success flex items-center w-fit space-x-1">
                                                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                                                <span>{{ __('events.device_connected') }}</span>
                                            </span>
                                        @else
                                            <span class="badge bg-light-warning flex items-center w-fit space-x-1">
                                                <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                                                <span>{{ __('events.device_disconnected') }}</span>
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <div class="action-buttons justify-center">
                                            @can('update', $event)
                                            @if ($event->device_connected == 0)
                                                <button type="button" 
                                                        class="btn btn-outline-success btn-action"
                                                        data-tooltip="{{ __('events.connect_device') }}"
                                                        data-tooltip-placement="top"
                                                        data-modal-target="#addEventModal"
                                                        data-modal-mode="reconnect"
                                                        data-event-id="{{ $event->id }}"
                                                        data-event-name="{{ $event->name }}"
                                                        data-event-mobile="{{ $event->mobile_number }}">
                                                    <i class="fas fa-mobile-alt"></i>
                                                </button>
                                            @endif
                                            @endcan
                                            @can('create', App\Models\Campaign::class)
                                            <a href="{{ route('campaigns.create', $event->id) }}"
                                               class="btn btn-outline-warning btn-action"
                                               data-tooltip="{{ __('campaigns.create') }}"
                                               data-tooltip-placement="top">
                                                <i class="fas fa-plus-circle"></i>
                                            </a>
                                            @endcan
                                            @can('viewAny', App\Models\Campaign::class)
                                            <a href="{{ route('campaigns.index', $event->id) }}"
                                               class="btn btn-outline-info btn-action"
                                               data-tooltip="{{ __('events.view_campaigns') }}"
                                               data-tooltip-placement="top">
                                                <i class="fas fa-list"></i>
                                            </a>
                                            @endcan
                                            @can('update', $event)
                                            <button type="button" 
                                                    class="btn btn-outline-primary btn-action"
                                                    data-tooltip="{{ __('events.edit_event') }}"
                                                    data-tooltip-placement="top"
                                                    data-modal-target="#editEventModal"
                                                    data-event-id="{{ $event->id }}"
                                                    data-event-name="{{ $event->name }}">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            @endcan
                                            @can('delete', $event)
                                            <form action="{{ route('events.destroy', $event->id) }}" 
                                                  method="POST" 
                                                  class="inline-block"
                                                  onsubmit="return confirm('{{ __('events.delete_confirmation') }}');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="btn btn-outline-danger btn-action" 
                                                        data-tooltip="{{ __('events.delete_event') }}"
                                                        data-tooltip-placement="top">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" 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">{{ __('events.no_data_found') }}</h3>
                                                <p class="text-gray-500">{{ __('events.no_matching_records') }}</p>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Bottom Controls (info + pagination) -->
                <div id="eventsControlsBottom" 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="eventsInfo" class="text-sm text-gray-600"></div>
                    <div id="eventsPagination" class="flex items-center gap-1"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Add Event Modal -->
    <div class="modal" id="addEventModal" tabindex="-1" aria-labelledby="addEventModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-narrow">
            <div class="modal-content">
                <div class="modal-header">
                    <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-plus text-primary" id="modal-header-icon"></i>
                        </div>
                        <div>
                            <h5 class="text-xl font-semibold" id="addEventModalLabel">{{ __('events.create_new') }}</h5>
                            <p class="text-sm text-gray-600" id="modal-subtitle">{{ __('events.setup_whatsapp') }}</p>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="node_qr_url" value="{{ config('whatsapp.node_qr_url') }}">
                    <input type="hidden" name="app_url" value="{{ config('app.url') }}">
                    <input type="hidden" name="whatsapp_auth_token" value="{{ config('whatsapp.auth_token', 'your-secret-token-change-in-production') }}">

                    <form class="space-y-6" method="post" action="{{ route('events.store') }}" id="event-form">
                        @csrf
                        <input type="hidden" name="session_id" id="modal_session_id" value="{{ $sessionId }}">
                        <input type="hidden" name="event_id" id="modal_event_id" value="">
                        
                        <!-- Event Name -->
                        <div class="space-y-2 !mt-0">
                            <label class="form-label" for="modal_name">
                                <i class="fas fa-calendar-alt mr-2"></i>
                                {{ __('events.name') }}
                            </label>
                            <input type="text" id="modal_name" class="form-control !mt-0 @error('name') is-invalid @enderror" 
                                   oninput="validateModalFormInputs()" onkeypress="handleModalEnterKey(event)" name="name" 
                                   placeholder="{{ __('events.name_placeholder') }}" />
                            @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Mobile Number & QR Generation -->
                        <div class="space-y-2 !mb-6">
                            <label class="form-label" for="modal_mobile_number">
                                <i class="fas fa-phone mr-2"></i>
                                {{ __('events.whatsapp_number') }}
                            </label>
                            <div class="flex gap-3">
                                <div class="flex-1">
                                    <input type="number" id="modal_mobile_number" 
                                           oninput="validateModalFormInputs()" onkeypress="handleModalEnterKey(event)"
                                           class="form-control @error('phone') is-invalid @enderror" 
                                           name="mobile_number" 
                                           placeholder="{{ __('events.whatsapp_number_placeholder') }}" />
                                    <p id="modal_wa-login-msg" class="text-green-600 text-sm mt-2 hidden items-center">
                                        <i class="fas fa-check-circle mr-1"></i>
                                        {{ __('events.whatsapp_logged_in') }}
                                    </p>
                                    @error('phone')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                                
                                {{-- <button type="button" onclick="submitModalEventData()" id="modal_submitButton" 
                                        disabled class="btn btn-success whitespace-nowrap hidden">
                                    <i data-feather="check" class="w-4 h-4 mr-2"></i>
                                    Submit
                                </button> --}}
                            </div>
                        </div>
                        <!-- Connection Instructions Accordion (Only for Reconnect Mode) -->
                        <div id="modal_instructions_accordion" class="hidden !mt-0">
                            <div class="border border-gray-200 rounded-lg overflow-hidden bg-white">
                                <button type="button" 
                                        onclick="toggleModalInstructions()" 
                                        id="modal_instructions_button"
                                        class="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors text-left">
                                    <div class="flex items-center">
                                        <i class="fas fa-info-circle text-primary mr-2"></i>
                                        <span class="font-semibold text-gray-700">{{ __('events.connection_instructions') }}</span>
                                    </div>
                                    <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200" id="modal_instructions_arrow"></i>
                                </button>
                                <div id="modal_instructions_content" class="hidden overflow-hidden" style="max-height: 0px; opacity: 0;">
                                    <div class="p-4 bg-white border-t border-gray-200">
                                        {{-- <h5 class="font-semibold text-gray-700 mb-3 flex items-center">
                                            <i class="fas fa-mobile-alt text-primary mr-2"></i>
                                            {{ __('events.how_to_connect_device') }}
                                        </h5> --}}
                                        <div class="space-y-4">
                                            <div class="flex items-start space-x-3">
                                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                    <span class="text-primary font-semibold text-sm">1</span>
                                                </div>
                                                <div class="flex-1">
                                                    <h6 class="font-semibold text-gray-700 mb-1">{{ __('events.instruction_step_1') }}</h6>
                                                    <p class="text-sm text-gray-600">{{ __('events.instruction_step_1_desc') }}</p>
                                                </div>
                                            </div>
                                            <div class="flex items-start space-x-3">
                                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                    <span class="text-primary font-semibold text-sm">2</span>
                                                </div>
                                                <div class="flex-1">
                                                    <h6 class="font-semibold text-gray-700 mb-1">{{ __('events.instruction_step_2') }}</h6>
                                                    <p class="text-sm text-gray-600">{{ __('events.instruction_step_2_desc') }}</p>
                                                </div>
                                            </div>
                                            <div class="flex items-start space-x-3">
                                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                    <span class="text-primary font-semibold text-sm">3</span>
                                                </div>
                                                <div class="flex-1">
                                                    <h6 class="font-semibold text-gray-700 mb-1">{{ __('events.instruction_step_3') }}</h6>
                                                    <p class="text-sm text-gray-600">{{ __('events.instruction_step_3_desc') }}</p>
                                                </div>
                                            </div>
                                            <div class="flex items-start space-x-3">
                                                <div class="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                                                    <span class="text-primary font-semibold text-sm">4</span>
                                                </div>
                                                <div class="flex-1">
                                                    <h6 class="font-semibold text-gray-700 mb-1">{{ __('events.instruction_step_4') }}</h6>
                                                    <p class="text-sm text-gray-600">{{ __('events.instruction_step_4_desc') }}</p>
                                                </div>
                                            </div>
                                            <div class="flex items-start space-x-3">
                                                <div class="flex-shrink-0 w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                                    <i class="fas fa-check text-green-600 text-xs"></i>
                                                </div>
                                                <div class="flex-1">
                                                    <h6 class="font-semibold text-gray-700 mb-1">{{ __('events.instruction_step_5') }}</h6>
                                                    <p class="text-sm text-gray-600">{{ __('events.instruction_step_5_desc') }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- QR Code Section -->
                        <div class="hidden" id="modal_qr-div">
                            <div class="bg-gray-50 rounded-lg p-6 text-center">
                                <div id="modal_loader" class="flex flex-col items-center justify-center">
                                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
                                    <p class="text-gray-600 text-sm">{{ __('events.generating_qr') }}</p>
                                    <p class="text-gray-500 text-xs mt-1">{{ __('events.may_take_seconds') }}</p>
                                </div>
                                <div id="modal_qr-code-container" class="hidden">
                                    <div class="bg-white rounded-lg p-4 inline-block shadow-sm">
                                        <img src="" alt="QR code" id="modal_qr-code" class="mx-auto">
                                    </div>
                                    <p class="text-gray-600 mt-3 flex items-center justify-center">
                                        <i class="fas fa-mobile-alt mr-2"></i>
                                        {{ __('events.scan_qr_whatsapp') }}
                                    </p>
                                    <!-- <button type="button" onclick="checkModalConnectionStatus()" 
                                            class="btn btn-sm btn-outline-primary mt-3">
                                        <i class="fas fa-sync mr-2"></i>
                                        Check Connection (iOS: Tap after scanning)
                                    </button> -->
                                </div>
                            </div>
                            
                            
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-modal-close>
                        <i class="fas fa-times mr-2"></i>
                        {{ __('events.close') }}
                    </button>
                    <button type="button" onclick="generateModalQRCode()" id="modal_generateQRButton" 
                            disabled class="btn btn-primary">
                        <i class="fas fa-qrcode mr-2"></i>
                        {{ __('events.generate_qr') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Event Modal -->
    <div class="modal" id="editEventModal" tabindex="-1" aria-labelledby="editEventModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-narrow">
            <div class="modal-content">
                <div class="modal-header">
                    <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-edit text-primary"></i>
                        </div>
                        <div>
                            <h5 class="text-xl font-semibold" id="editEventModalLabel">{{ __('events.edit_event') }}</h5>
                            <p class="text-sm text-gray-600">{{ __('events.update_event') }}</p>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <form class="space-y-6" method="post" id="edit-event-form">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="event_id" id="edit_event_id" value="">
                        
                        <!-- Event Name -->
                        <div class="space-y-2 !mt-0">
                            <label class="form-label" for="edit_name">
                                <i class="fas fa-calendar-alt mr-2"></i>
                                {{ __('events.name') }}
                            </label>
                            <input type="text" id="edit_name" class="form-control !mt-0 @error('name') is-invalid @enderror" 
                                   name="name" placeholder="{{ __('events.name_placeholder') }}" required />
                            @error('name')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-modal-close>
                        <i class="fas fa-times mr-2"></i>
                        {{ __('events.cancel') }}
                    </button>
                    <button type="button" onclick="updateEventName()" class="btn btn-primary">
                        <i class="fas fa-save mr-2"></i>
                        {{ __('events.update_event') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_styles')
<style>
    /* Ensure table structure is unified - thead and tbody inside single table */
    #eventsTable {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        display: table !important;
    }
    
    #eventsTable thead {
        display: table-header-group !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: auto !important;
    }
    
    #eventsTable tbody {
        display: table-row-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #eventsTable tr {
        display: table-row;
    }
    
    #eventsTable th,
    #eventsTable td {
        display: table-cell;
    }
    
    /* Table horizontal scroll container */
    .table-responsive.overflow-x-auto {
        overflow-x: auto !important;
        overflow-y: visible;
        max-width: 100%;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure table is wider than container for scroll */
    .table-responsive.overflow-x-auto table {
        min-width: 800px;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
    }
    
    /* Prevent table header from being sticky/fixed - must scroll with tbody */
    #eventsTable thead {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        transform: none !important;
    }
    
    #eventsTable thead th {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
    }
    
    /* Custom scrollbar for table */
    .table-responsive.overflow-x-auto::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-responsive.overflow-x-auto::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }
    
    .table-responsive.overflow-x-auto::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    
    .table-responsive.overflow-x-auto::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
    
    /* Prevent DataTable controls from scrolling */
    .dataTables_wrapper {
        overflow: visible !important;
    }
    
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        overflow: visible !important;
    }
    
    /* Ensure DataTables wrapper doesn't split the table */
    #eventsTable_wrapper #eventsTable {
        display: table !important;
        border-collapse: collapse !important;
    }
    
    #eventsTable_wrapper #eventsTable thead {
        display: table-header-group !important;
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
    }
    
    #eventsTable_wrapper #eventsTable thead th {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
    }
    
    #eventsTable_wrapper #eventsTable tbody {
        display: table-row-group !important;
    }
    
    /* Do not force-hide DataTables scroll wrappers; we handle unwrapping in JS */
    
    /* 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);
    }
    
    /* Smooth Accordion Animation */
    #modal_instructions_content {
        transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }
    
    #modal_instructions_content:not(.hidden) {
        opacity: 1;
    }
    
    #modal_instructions_arrow {
        transition: transform 0.3s ease-in-out;
    }
    
    /* Mobile responsive - ensure thead and tbody scroll together */
    @media (max-width: 768px) {
        .table-responsive.overflow-x-auto {
            -webkit-overflow-scrolling: touch;
            overflow-x: scroll !important;
            overflow-y: visible;
            /* Ensure scroll container wraps entire table */
            position: relative;
        }
        
        /* Force table to be wider than container for scroll */
        #eventsTable {
            min-width: 900px;
            width: auto;
        }
        
        /* Critical: thead must scroll with tbody, NOT sticky */
        #eventsTable thead {
            position: relative !important;
            top: auto !important;
            z-index: auto !important;
            transform: none !important;
            background: transparent !important;
        }
        
        #eventsTable thead th {
            position: relative !important;
            top: auto !important;
            z-index: auto !important;
            background: #f9fafb !important;
        }
        
        /* Ensure tbody scrolls with thead */
        #eventsTable tbody {
            position: relative !important;
        }
        
        /* Hide DataTables scroll wrappers completely on mobile */
        .dataTables_scroll,
        .dataTables_scrollHead,
        .dataTables_scrollHeadInner,
        .dataTables_scrollBody {
            display: none !important;
        }
        
        /* Show the actual table */
        #eventsTable_wrapper #eventsTable {
            display: table !important;
            visibility: visible !important;
        }
    }
</style>
@endpush

@push('custom_scripts')
<script>
    const appUrl = $('input[name="app_url"]').val();
    const url = $('input[name="node_qr_url"]').val();
    const authToken = $('input[name="whatsapp_auth_token"]').val();
    const DEBUG = {{ config('app.debug') ? 'true' : 'false' }};
    
    // Translations for JavaScript
    const translations = {
        createNewEvent: @json(__('events.create_new')),
        setupWhatsapp: @json(__('events.setup_whatsapp')),
        reconnectDevice: @json(__('events.reconnect_device')),
        reconnectDescription: @json(__('events.reconnect_description'))
    };

    // ==============================================
    // HELPER FUNCTIONS
    // ==============================================

    /**
     * Debug logging - only logs in debug mode
     */
    function debugLog(...args) {
        if (DEBUG) {
            console.log(...args);
        }
    }

    function debugError(...args) {
        if (DEBUG) {
            console.error(...args);
        }
    }

    /**
     * Safe redirect with URL validation
     */
    function safeRedirect(url) {
        try {
            const redirectUrl = new URL(url, window.location.origin);
            if (redirectUrl.origin === window.location.origin) {
                window.location.href = redirectUrl.href;
            } else {
                debugError('Attempted redirect to external URL:', url);
                alert('Invalid redirect URL');
            }
        } catch (error) {
            debugError('Invalid URL:', url, error);
            alert('Invalid redirect URL');
        }
    }

    /**
     * Deactivate modal QR with race condition protection
     */
    function deactivateModalQR() {
        if (!window.isModalQRActive) {
            return false; // Already deactivated
        }
        window.isModalQRActive = false;
        return true; // Successfully deactivated
    }

    /**
     * Safe modal close with error handling
     */
    function safeCloseModal(modal) {
        if (modal) {
            try {
                hideModal(modal);
            } catch (error) {
                debugError('Error closing modal:', error);
                // Continue anyway
            }
        }
    }

    /**
     * Submit event to server with comprehensive error handling
     * Supports both CREATE and UPDATE operations
     */
    async function submitEventFromModal(eventData, isUpdate, eventId, context = '') {
        const csrfToken = $('meta[name="csrf-token"]').attr('content');
        const endpoint = isUpdate ? `${appUrl}/admin/events/${eventId}` : `${appUrl}/admin/events`;
        const method = isUpdate ? 'PUT' : 'POST';
        
        debugLog(`${isUpdate ? 'Updating' : 'Creating'} event (${context})...`, eventData);
        
        try {
            const response = await fetch(endpoint, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify(eventData),
                credentials: 'same-origin'
            });

            debugLog(`Event ${isUpdate ? 'update' : 'create'} response status (${context}):`, response.status);
            
            if (!response.ok) {
                if (response.status === 419) {
                    debugError('CSRF token expired');
                    alert('Your session has expired. Redirecting to refresh the page...');
                    window.location.href = `${appUrl}/admin/events/create`;
                    throw new Error('CSRF token expired');
                }
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            debugError(`Error in ${context}:`, error);
            if (DEBUG && error.stack) {
                debugError('Stack trace:', error.stack);
            }
            throw error;
        }
    }

    /**
     * Redirect to campaign creation page after modal submission
     */
    function redirectToCampaignFromModal(eventData) {
        if (eventData.success && eventData.data && eventData.data.id) {
            const redirectUrl = `${appUrl}/admin/campaigns/create/${eventData.data.id}`;
            debugLog('Redirecting to:', redirectUrl);
            
            // Close modal first
            const modal = document.getElementById('addEventModal');
            safeCloseModal(modal);
            
            safeRedirect(redirectUrl);
            return true;
        } else {
            debugError('Invalid event response:', eventData);
            alert('Failed to create/update event. Please try again.');
            return false;
        }
    }

    // ==============================================
    // ACTIVITY-BASED SESSION KEEP-ALIVE
    // ==============================================
    
    let lastUserActivity = Date.now();
    let sessionKeepAliveInterval = null;
    let keepAliveFailures = 0;
    const ACTIVITY_TIMEOUT = 10 * 60 * 1000; // 10 minutes of inactivity
    const PING_INTERVAL = 2 * 60 * 1000; // 2 minutes
    const MAX_FAILURES = 3;

    // Track user activity
    const userActivityEvents = ['mousedown', 'keydown', 'scroll', 'touchstart'];
    userActivityEvents.forEach(event => {
        document.addEventListener(event, () => {
            lastUserActivity = Date.now();
        }, { passive: true });
    });

    // Only ping if user has been active recently
    function startSmartKeepAlive() {
        sessionKeepAliveInterval = setInterval(() => {
            const timeSinceActivity = Date.now() - lastUserActivity;
            
            if (timeSinceActivity < ACTIVITY_TIMEOUT) {
                fetch(`${appUrl}/admin/dashboard`, {
                    method: 'HEAD',
                    credentials: 'same-origin'
                })
                .then(response => {
                    if (response.ok) {
                        keepAliveFailures = 0;
                        debugLog('Session keep-alive successful');
                    } else {
                        keepAliveFailures++;
                        if (keepAliveFailures >= MAX_FAILURES) {
                            debugError('Session keep-alive failed multiple times');
                        }
                    }
                })
                .catch(err => {
                    keepAliveFailures++;
                    debugLog('Session keep-alive error:', err);
                    if (keepAliveFailures >= MAX_FAILURES) {
                        debugError('Network issues detected, session may have expired');
                    }
                });
            } else {
                debugLog('User inactive, skipping keep-alive ping');
            }
        }, PING_INTERVAL);
    }

    // Stop keep-alive when page is hidden/minimized
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            if (sessionKeepAliveInterval) {
                clearInterval(sessionKeepAliveInterval);
                sessionKeepAliveInterval = null;
            }
        } else {
            startSmartKeepAlive();
        }
    });

    startSmartKeepAlive();

    // Clean up on page unload
    window.addEventListener('beforeunload', () => {
        if (sessionKeepAliveInterval) {
            clearInterval(sessionKeepAliveInterval);
        }
    });

    // Initialize DataTable with enhanced styling
    $(document).ready(function() {
        const ENABLE_EVENTS_DATATABLE = false; // Use custom lightweight controls (no DataTables)
        try {
            const headerCount = $('#eventsTable thead th').length;
            $('#eventsTable tbody tr').each(function() {
                const $tr = $(this);
                // compute effective cell count considering colspan
                let count = 0;
                $tr.children('td').each(function() {
                    const span = parseInt($(this).attr('colspan') || '1', 10);
                    count += isNaN(span) ? 1 : span;
                });
                // expand if fewer, trim if more
                if (count < headerCount) {
                    for (let i = 0; i < (headerCount - count); i++) {
                        $tr.append('<td></td>');
                    }
                } else if (count > headerCount) {
                    let toRemove = count - headerCount;
                    $tr.children('td').get().reverse().forEach(function(td) {
                        if (toRemove <= 0) return;
                        const $td = $(td);
                        const span = parseInt($td.attr('colspan') || '1', 10);
                        if (span > 1) {
                            $td.attr('colspan', span - 1);
                            toRemove -= 1;
                        } else {
                            $td.remove();
                            toRemove -= 1;
                        }
                    });
                }
            });

            // Ensure previous DataTable (if any) is fully destroyed and scroll wrappers removed
            try {
                if ($.fn.DataTable.isDataTable('#eventsTable')) {
                    $('#eventsTable').DataTable().destroy();
                    // Remove inline widths/classes injected by previous DT
                    $('#eventsTable').removeAttr('style').removeClass('dataTable no-footer');
                }
                // If scroll wrappers exist, unwrap to restore plain table structure
                const $scroll = $('#eventsTable').closest('.dataTables_scroll');
                if ($scroll.length) {
                    const $bodyTable = $scroll.find('.dataTables_scrollBody table');
                    if ($bodyTable.length) {
                        // Move the actual table out of the scroll container
                        $scroll.replaceWith($bodyTable);
                        $bodyTable.attr('id', 'eventsTable');
                        $bodyTable.removeAttr('style').removeClass('dataTable no-footer');
                    }
                }
            } catch (e) {
                console.warn('Cleanup before DataTable init failed:', e);
            }

            if (ENABLE_EVENTS_DATATABLE) {
            // Initialize custom DataTable - ensure single unified table structure (no DT scrolling)
            const eventsTable = initCustomDataTable('#eventsTable', {
                scrollX: false,
                scrollY: false,
                scrollCollapse: false,
                responsive: false,
                autoWidth: false,
                // Safety: never enable DT scrolling here
                sScrollX: '',
                sScrollY: '',
                // Prevent DataTables from auto-detecting and enabling scroll
                fixedColumns: false,
                scrollResize: false,
                columnDefs: [
                    { targets: '_all', defaultContent: '' },
                    { orderable: false, targets: 4 }
                ],
                buttons: [
                    {
                        extend: 'collection',
                        className: 'btn btn-outline-secondary dropdown-toggle',
                        text: '<i class="w-4 h-4 mr-2" data-feather="download"></i>Export',
                        buttons: [
                            {
                                extend: 'excel',
                                text: '<i class="w-4 h-4 mr-2" data-feather="file"></i>Excel',
                                className: 'dropdown-item',
                                exportOptions: { columns: [0, 1, 2, 3] }
                            },
                            {
                                extend: 'pdf',
                                text: '<i class="w-4 h-4 mr-2" data-feather="file-text"></i>PDF',
                                className: 'dropdown-item',
                                exportOptions: { columns: [0, 1, 2, 3] }
                            },
                            {
                                extend: 'copy',
                                text: '<i class="w-4 h-4 mr-2" data-feather="copy"></i>Copy',
                                className: 'dropdown-item'
                            }
                        ]
                    },
                    {
                        text: '<i class="w-4 h-4 mr-2" data-feather="refresh-cw"></i>Refresh',
                        className: 'btn btn-outline-primary',
                        action: function(e, dt, node, config) {
                            window.location.reload();
                        }
                    }
                ],
                language: {
                    emptyTable: "No events available",
                    zeroRecords: "No matching events found",
                    searchPlaceholder: "Search Events..."
                }
            });
            }
            
            if (!ENABLE_EVENTS_DATATABLE) {
                // Enforce table visibility if DT is disabled
                const $mainTable = $('#eventsTable');
                $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('#eventsTable', {
                    lengthSelector: '#eventsLength',
                    searchInput: '#eventsSearch',
                    infoLabel: '#eventsInfo',
                    paginationContainer: '#eventsPagination',
                    controlsTop: '#eventsControlsTop',
                    controlsBottom: '#eventsControlsBottom'
                });
            }
        } catch (e) {
            console.error('DataTable init error:', e);
        }

        // Initialize custom tooltips
        initCustomTooltips();
    });

    // Enhanced modal form validation
    const validateModalFormInputs = () => {
        const eventName = $('#modal_name').val().trim();
        const number = $('#modal_mobile_number').val().trim();
        const isNumberValid = /^[0-9]{10,12}$/.test(number);

        if (eventName && isNumberValid && !sessionStorage.getItem('authenticatedNumber')) {
            $('#modal_generateQRButton').attr('disabled', false).removeClass('opacity-50');
        } else {
            $('#modal_generateQRButton').attr('disabled', true).addClass('opacity-50');
            resetModalQRCodeDisplay();
        }
    };

    const handleModalEnterKey = (event) => {
        if (event.key === 'Enter') {
            event.preventDefault();
            const eventName = $('#modal_name').val().trim();
            const number = $('#modal_mobile_number').val().trim();
            const isNumberValid = /^[0-9]{10,12}$/.test(number);
            
            if (eventName && isNumberValid && !sessionStorage.getItem('authenticatedNumber')) {
                generateModalQRCode();
            }
        }
    };

    const resetModalQRCodeDisplay = () => {
        $('#modal_qr-div').addClass('hidden');
        $('#modal_qr-code').attr('src', '');
        $('#modal_qr-code-container').addClass('hidden');
        isModalQRActive = false; // Deactivate QR tracking
    };

    const generateModalQRCode = () => {
        console.log('generateModalQRCode called');
        console.log('Showing QR div and loader, hiding QR container');
        $('#modal_qr-div').removeClass('hidden').show();
        $('#modal_loader').removeClass('hidden').show();
        $('#modal_qr-code-container').addClass('hidden');
        const sessionId = $('#modal_session_id').val().trim();
        const mobileNumber = $('#modal_mobile_number').val().trim();
        console.log('Session ID:', sessionId, 'Mobile Number:', mobileNumber, 'URL:', url);
        console.log('QR div visible:', !$('#modal_qr-div').hasClass('hidden'));
        console.log('Loader visible:', !$('#modal_loader').hasClass('hidden'));
        console.log('QR container hidden:', $('#modal_qr-code-container').hasClass('hidden'));
        console.log('QR div display style:', $('#modal_qr-div').css('display'));
        isModalQRActive = true; // Mark QR as active for visibility detection

        // First, try to initialize the session if Socket.IO failed
        const initializeSession = () => {
            return fetch(`${url}/init-session/${sessionId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                }
            }).then(response => {
                return response;
            }).catch(error => {
                return Promise.resolve();
            });
        };

        // Check if device is connected (polling fallback)
        const checkDeviceConnection = () => {
            fetch(`${url}/check-device/${sessionId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${authToken}`
                },
                body: JSON.stringify({
                    mobileNumber: mobileNumber
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'connected') {
                    console.log('Device connected via polling:', data);
                    // Clear polling interval
                    if (modalDeviceCheckInterval) {
                        clearInterval(modalDeviceCheckInterval);
                        modalDeviceCheckInterval = null;
                    }
                    isModalQRActive = false; // Deactivate QR tracking
                    
                    // Submit the event using dynamic logic
                    const modalMode = $('#addEventModal')[0].getAttribute('data-modal-mode');
                    const eventId = $('#addEventModal')[0].getAttribute('data-event-id');
                    const isUpdate = modalMode === 'reconnect' && eventId;
                    
                    console.log('Modal mode:', modalMode);
                    console.log('Event ID:', eventId);
                    console.log('Is update:', isUpdate);
                    
                    const submitData = {
                        session_id: sessionId,
                        name: $('#modal_name').val(),
                        mobile_number: data.number,
                        device_connected: 1
                    };
                    
                    if (isUpdate) {
                        submitData.event_id = eventId;
                    }
                    
                    debugLog('Auto-submitting event after device connection:', submitData);
                    
                    // Submit event using helper function
                    submitEventFromModal(submitData, isUpdate, eventId, 'auto-submit')
                    .then(eventData => redirectToCampaignFromModal(eventData))
                    .catch(error => {
                        // Error already logged by helper
                    });
                }
            })
            .catch(error => {
                console.error('Error checking device connection:', error);
            });
        };

        // Wait for QR code to be available with retry mechanism
        const fetchQRCode = (retryCount = 0) => {
            console.log(`Fetching QR code (attempt ${retryCount + 1}):`, `${url}/get-qr/${sessionId}`);
            fetch(`${url}/get-qr/${sessionId}`, {
                headers: {
                    'Authorization': `Bearer ${authToken}`
                }
            })
                .then(response => {
                    return response.json();
                })
                .then(data => {
                    if (data.qr) {
                        // QR code is available
                        $('#modal_qr-code').attr('src', data.qr);
                        
                        $('#modal_loader').addClass('hidden');
                        $('#modal_qr-code-container').removeClass('hidden');
                        
                        // Force show the QR div if it's still hidden
                        $('#modal_qr-div').removeClass('hidden').show();
                        $('#modal_qr-code-container').removeClass('hidden').show();                        
                        // Start polling for device connection as fallback
                        // More aggressive on mobile: Check every 1 second
                        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
                        const pollingInterval = isMobile ? 1000 : 2000;
                        console.log('Starting polling, mobile:', isMobile, 'interval:', pollingInterval);
                        
                        if (modalDeviceCheckInterval) {
                            clearInterval(modalDeviceCheckInterval);
                        }
                        modalDeviceCheckInterval = setInterval(checkDeviceConnection, pollingInterval);
                    } else if (data.error && retryCount < 15) {
                        // QR code not ready yet, retry after 2 seconds
                        // Update loading message to show progress
                        const loadingText = $('#modal_loader p').first();
                        if (loadingText.length) {
                            loadingText.text(`Generating QR code...`);
                        }
                        setTimeout(() => fetchQRCode(retryCount + 1), 2000);
                    } else {
                        // Max retries reached or other error
                        $('#modal_loader').addClass('hidden');
                        alert('Failed to generate QR code. Please try again.');
                    }
                })
                .catch(error => {
                    console.error('QR Code generation error:', error);
                    if (retryCount < 15) {
                        // Retry on network error
                        setTimeout(() => fetchQRCode(retryCount + 1), 2000);
                    } else {
                        $('#modal_loader').addClass('hidden');
                        alert('Failed to generate QR code. Please try again.');
                    }
                });
        };

        // Initialize session first, then start fetching QR code
        initializeSession().then(() => {
            // Wait a bit for session to initialize, then start fetching QR code
            setTimeout(() => fetchQRCode(), 3000);
        });
    };

    const submitModalEventData = () => {
        const eventName = $('#modal_name').val().trim();
        const mobileNumber = $('#modal_mobile_number').val().trim();

        fetch(`${appUrl}/admin/events`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            body: JSON.stringify({
                name: eventName,
                mobile_number: mobileNumber
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                $('#addEventModal').modal('hide');
                window.location.reload();
            } else {
                if (data.errors) {
                    displayModalValidationErrors(data.errors);
                } else {
                    alert('Error: ' + error);
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An unexpected error occurred while submitting the event.');
        });
    };

    const displayModalValidationErrors = (errors) => {
        $('.modal-body .invalid-feedback').remove();
        $('.modal-body .is-invalid').removeClass('is-invalid');

        for (const field in errors) {
            const inputField = $(`#modal_${field}`);
            if (inputField.length) {
                inputField.addClass('is-invalid');
                inputField.after(`<span class="invalid-feedback block">${errors[field][0]}</span>`);
            }
        }
    };

    // Custom Modal Functions
    function initCustomModals() {
        // Modal trigger buttons
        document.querySelectorAll('[data-modal-target]').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-modal-target');
                const modal = document.querySelector(targetId);
                if (modal) {
                    // Store modal mode and event data before showing modal
                    const modalMode = this.getAttribute('data-modal-mode');
                    const eventId = this.getAttribute('data-event-id');
                    const eventName = this.getAttribute('data-event-name');
                    const eventMobile = this.getAttribute('data-event-mobile');
                    
                    console.log('Custom modal clicked with mode:', modalMode, 'eventId:', eventId);
                    
                    // Store data on modal element
                    modal.setAttribute('data-modal-mode', modalMode || '');
                    modal.setAttribute('data-event-id', eventId || '');
                    modal.setAttribute('data-event-name', eventName || '');
                    modal.setAttribute('data-event-mobile', eventMobile || '');
                    
                    // Handle edit modal specifically
                    if (targetId === '#editEventModal') {
                        const editEventId = this.getAttribute('data-event-id');
                        const editEventName = this.getAttribute('data-event-name');
                        
                        console.log('Edit modal clicked for event:', editEventId, 'name:', editEventName);
                        
                        // Pre-fill edit form
                        modal.querySelector('#edit_event_id').value = editEventId || '';
                        modal.querySelector('#edit_name').value = editEventName || '';
                        
                        showModal(modal);
                        return;
                    }
                    
                    // Handle modal content update immediately
                    if (modalMode === 'reconnect') {
                        console.log('Setting up reconnect mode for modal');
                        modal.querySelector('#addEventModalLabel').textContent = translations.reconnectDevice;
                        modal.querySelector('#modal-subtitle').textContent = translations.reconnectDescription;
                        modal.querySelector('#modal-header-icon').className = 'fas fa-mobile-alt text-primary';
                        
                        // Hide input fields for reconnect mode
                        const eventNameField = modal.querySelector('#modal_name').closest('.space-y-2');
                        const mobileField = modal.querySelector('#modal_mobile_number').closest('.space-y-2');
                        if (eventNameField) eventNameField.style.display = 'none';
                        if (mobileField) mobileField.style.display = 'none';
                        
                        // Pre-fill form with existing event data (hidden)
                        modal.querySelector('#modal_name').value = eventName || '';
                        modal.querySelector('#modal_mobile_number').value = eventMobile || '';
                        modal.querySelector('#modal_event_id').value = eventId || '';
                        
                        // Show QR section immediately
                        const qrDiv = modal.querySelector('#modal_qr-div');
                        if (qrDiv) {
                            qrDiv.classList.remove('hidden');
                            qrDiv.style.display = 'block';
                        }
                        
                        // Show instructions accordion for reconnect mode
                        const instructionsAccordion = modal.querySelector('#modal_instructions_accordion');
                        if (instructionsAccordion) {
                            instructionsAccordion.classList.remove('hidden');
                        }
                        
                        // Auto-generate QR code for reconnect
                        setTimeout(() => {
                            generateModalQRCode();
                        }, 500);
                    } else {
                        console.log('Setting up create mode for modal');
                        modal.querySelector('#addEventModalLabel').textContent = translations.createNewEvent;
                        modal.querySelector('#modal-subtitle').textContent = translations.setupWhatsapp;
                        modal.querySelector('#modal-header-icon').className = 'fas fa-plus text-primary';
                        
                        // Show input fields for create mode
                        const eventNameField = modal.querySelector('#modal_name').closest('.space-y-2');
                        const mobileField = modal.querySelector('#modal_mobile_number').closest('.space-y-2');
                        if (eventNameField) eventNameField.style.display = 'block';
                        if (mobileField) mobileField.style.display = 'block';
                        
                        // Clear form fields
                        modal.querySelector('#modal_name').value = '';
                        modal.querySelector('#modal_name').disabled = false;
                        modal.querySelector('#modal_mobile_number').value = '';
                        modal.querySelector('#modal_mobile_number').disabled = false;
                        modal.querySelector('#modal_event_id').value = '';
                        
                        // Hide QR section for create mode
                        const qrDiv = modal.querySelector('#modal_qr-div');
                        if (qrDiv) {
                            qrDiv.classList.add('hidden');
                            qrDiv.style.display = 'none';
                        }
                        
                        // Hide instructions accordion for create mode
                        const instructionsAccordion = modal.querySelector('#modal_instructions_accordion');
                        if (instructionsAccordion) {
                            instructionsAccordion.classList.add('hidden');
                        }
                    }
                    
                    showModal(modal);
                }
            });
        });

        // Modal close buttons
        document.querySelectorAll('[data-modal-close]').forEach(button => {
            button.addEventListener('click', function() {
                const modal = this.closest('.modal');
                if (modal) {
                    hideModal(modal);
                }
            });
        });

        // Close modal on backdrop click
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    hideModal(this);
                }
            });
            
            // Reset modal when hidden
            modal.addEventListener('modal.hidden', function() {
                console.log('Modal hidden, resetting to create mode');
                // Reset modal to create mode
                this.querySelector('#addEventModalLabel').textContent = translations.createNewEvent;
                this.querySelector('#modal-subtitle').textContent = translations.setupWhatsapp;
                this.querySelector('#modal-header-icon').className = 'fas fa-plus text-primary';
                
                // Show input fields again
                const eventNameField = this.querySelector('#modal_name').closest('.space-y-2');
                const mobileField = this.querySelector('#modal_mobile_number').closest('.space-y-2');
                if (eventNameField) eventNameField.style.display = 'block';
                if (mobileField) mobileField.style.display = 'block';
                
                // Clear form fields
                this.querySelector('#modal_name').value = '';
                this.querySelector('#modal_name').disabled = false;
                this.querySelector('#modal_mobile_number').value = '';
                this.querySelector('#modal_mobile_number').disabled = false;
                this.querySelector('#modal_event_id').value = '';
                
                // Hide QR section
                const qrDiv = this.querySelector('#modal_qr-div');
                if (qrDiv) {
                    qrDiv.classList.add('hidden');
                    qrDiv.style.display = 'none';
                }
                
                // Hide instructions accordion
                const instructionsAccordion = this.querySelector('#modal_instructions_accordion');
                if (instructionsAccordion) {
                    instructionsAccordion.classList.add('hidden');
                }
                
                const generateBtn = this.querySelector('#modal_generateQRButton');
                if (generateBtn) generateBtn.disabled = true;
                
                // Clear stored data
                this.removeAttribute('data-modal-mode');
                this.removeAttribute('data-event-id');
                this.removeAttribute('data-event-name');
                this.removeAttribute('data-event-mobile');
            });
        });

        // Close modal on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                const openModal = document.querySelector('.modal.show');
                if (openModal) {
                    hideModal(openModal);
                }
            }
        });
    }

    function showModal(modal) {
        modal.classList.add('show');
        modal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
        
        console.log('showModal called for:', modal.id);
        
        // Trigger custom event
        modal.dispatchEvent(new CustomEvent('modal.shown'));
    }

    function hideModal(modal) {
        modal.classList.remove('show');
        modal.style.display = 'none';
        document.body.style.overflow = '';
        
        // Trigger custom event
        modal.dispatchEvent(new CustomEvent('modal.hidden'));
    }

    // Update Event Name Function
    function updateEventName() {
        const eventId = document.querySelector('#edit_event_id').value;
        const eventName = document.querySelector('#edit_name').value.trim();
        
        if (!eventName) {
            alert('Please enter an event name');
            return;
        }
        
        if (!eventId) {
            alert('Event ID not found');
            return;
        }
        
        // Show loading state
        const updateBtn = document.querySelector('button[onclick="updateEventName()"]');
        const originalText = updateBtn.innerHTML;
        updateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>' + @json(__('events.updating'));
        updateBtn.disabled = true;
        
        // Send update request
        const requestData = {
            name: eventName
        };
        
        console.log('Sending update request:', requestData);
        
        fetch(`/admin/events/${eventId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(requestData)
        })
        .then(response => {
            console.log('Response status:', response.status);
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                // Close modal
                const modal = document.querySelector('#editEventModal');
                hideModal(modal);                
                // Reload page to show updated data
                window.location.reload();
            } else {
                // Handle validation errors
                if (data.errors) {
                    let errorMessage = @json(__('events.validation_errors')) + '\n';
                    for (const field in data.errors) {
                        errorMessage += `• ${data.errors[field].join(', ')}\n`;
                    }
                    alert(errorMessage);
                } else {
                    alert(@json(__('events.failed_to_update_event_error', ['error' => ''])) + (data.message || @json(__('events.failed_to_update_event'))));
                }
            }
        })
        .catch(error => {
            console.error('Error updating event:', error);
            alert(@json(__('events.failed_to_update_event')));
        })
        .finally(() => {
            // Reset button state
            updateBtn.innerHTML = originalText;
            updateBtn.disabled = false;
        });
    }

    // Toggle modal instructions accordion with smooth animation
    window.toggleModalInstructions = function() {
        const content = document.getElementById('modal_instructions_content');
        const arrow = document.getElementById('modal_instructions_arrow');
        
        if (content && arrow) {
            if (content.classList.contains('hidden')) {
                // Open accordion smoothly
                content.classList.remove('hidden');
                // Get the actual height of content
                const contentHeight = content.scrollHeight;
                // Start from 0
                content.style.maxHeight = '0px';
                content.style.opacity = '0';
                // Force reflow to ensure transition works
                content.offsetHeight;
                // Animate to full height
                requestAnimationFrame(() => {
                    content.style.maxHeight = contentHeight + 'px';
                    content.style.opacity = '1';
                });
                // Rotate arrow
                arrow.classList.remove('fa-chevron-down');
                arrow.classList.add('fa-chevron-up');
                arrow.style.transform = 'rotate(180deg)';
            } else {
                // Close accordion smoothly
                content.style.maxHeight = '0px';
                content.style.opacity = '0';
                arrow.classList.remove('fa-chevron-up');
                arrow.classList.add('fa-chevron-down');
                arrow.style.transform = 'rotate(0deg)';
                // Hide after animation completes
                setTimeout(() => {
                    content.classList.add('hidden');
                    content.style.maxHeight = '';
                }, 500);
            }
        }
    };

    // Initialize custom modals
    initCustomModals();

    // Enhanced modal event handlers - now handled in initCustomModals()

    // Global socket for modal - initialize once
    let modalSocket = null;
    let modalDeviceCheckInterval = null;
    let isModalQRActive = false; // Track if QR code is active

    // iOS-Specific Event Handlers - Multiple approaches for maximum compatibility
    const checkModalConnectionStatus = () => {
        if (!isModalQRActive) return;
        
        console.log('Checking modal connection status (iOS trigger)');
        const sessionId = $('#modal_session_id').val().trim();
        const mobileNumber = $('#modal_mobile_number').val().trim();
        
        fetch(`${url}/check-device/${sessionId}`, {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${authToken}`
            },
            body: JSON.stringify({ mobileNumber: mobileNumber })
        })
        .then(response => response.json())
        .then(data => {
            console.log('Modal connection check result:', data);
            if (data.status === 'connected') {
                console.log('Device was connected! (iOS detection)');
                // Clear polling interval
                if (modalDeviceCheckInterval) {
                    clearInterval(modalDeviceCheckInterval);
                    modalDeviceCheckInterval = null;
                }
                isModalQRActive = false;
                
                // Submit the event (create or update based on mode)
                const modalMode = $('#addEventModal')[0].getAttribute('data-modal-mode');
                const eventId = $('#addEventModal')[0].getAttribute('data-event-id');
                const isUpdate = modalMode === 'reconnect' && eventId;
                
                const submitData = {
                    session_id: sessionId,
                    name: $('#modal_name').val(),
                    mobile_number: data.number,
                    device_connected: 1
                };
                
                if (isUpdate) {
                    submitData.event_id = eventId;
                }
                
                fetch(`${appUrl}/admin/events${isUpdate ? `/${eventId}` : ''}`, {
                    method: isUpdate ? 'PUT' : 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    body: JSON.stringify(submitData)
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Form submission response:', data);
                    if(data.success) {
                        console.log('Success! Event ID:', data.data.id);
                        const modal = document.getElementById('addEventModal');
                        if (modal) {
                            hideModal(modal);
                        }
                        setTimeout(() => {
                            if (isUpdate) {
                                // For reconnect, redirect to campaign creation page
                                console.log('Redirecting to campaign creation for reconnect:', `${appUrl}/admin/campaigns/create/${data.data.id}`);
                                window.location.reload();
                            } else {
                                // For create, redirect to campaign creation
                                console.log('Redirecting to campaign creation for new event:', `${appUrl}/admin/campaigns/create/${data.data.id}`);
                                window.location.href = `${appUrl}/admin/campaigns/create/${data.data.id}`;
                            }
                        }, 100);
                    } else {
                        console.error('Form submission failed:', data);
                    }
                })
                .catch(error => {
                    console.error('Error saving event:', error);
                });
            }
        })
        .catch(error => {
            console.error('Error checking connection:', error);
        });
    };

    // Page Visibility API - Critical for iOS
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden && isModalQRActive) {
            console.log('visibilitychange: Page became visible');
            setTimeout(checkModalConnectionStatus, 300);
        }
    });

    // Focus event - Additional iOS fallback
    window.addEventListener('focus', function() {
        if (isModalQRActive) {
            console.log('focus: Window gained focus');
            setTimeout(checkModalConnectionStatus, 300);
        }
    });

    // Pageshow event - Handles iOS bfcache restoration
    window.addEventListener('pageshow', function(event) {
        if (isModalQRActive) {
            console.log('pageshow: Page shown, persisted:', event.persisted);
            setTimeout(checkModalConnectionStatus, 300);
        }
    });

    // Resume event - For iOS when coming back from background
    document.addEventListener('resume', function() {
        if (isModalQRActive) {
            console.log('resume: App resumed');
            setTimeout(checkModalConnectionStatus, 300);
        }
    });

    // Reset modal when closed
    $('#addEventModal').on('modal.hidden', function () {
        // Reset modal to create mode
        $('#addEventModalLabel').text(translations.createNewEvent);
        $('#modal-subtitle').text(translations.setupWhatsapp);
        $('#modal-header-icon').removeClass('fa-mobile-alt').addClass('fa-plus');
        
        // Clear form fields
        $('#modal_name').val('').attr('disabled', false);
        $('#modal_mobile_number').val('').attr('disabled', false);
        $('#modal_event_id').val('');
        
        // Hide QR section
        $('#modal_qr-div').addClass('hidden');
        
        // Hide instructions accordion
        $('#modal_instructions_accordion').addClass('hidden');
        
        $('#modal_generateQRButton').attr('disabled', true);
        
        // Clear stored data
        $('#addEventModal').removeData('modal-mode event-id event-name event-mobile');
        $('#addEventModal')[0].removeAttribute('data-modal-mode');
        $('#addEventModal')[0].removeAttribute('data-event-id');
        $('#addEventModal')[0].removeAttribute('data-event-name');
        $('#addEventModal')[0].removeAttribute('data-event-mobile');
    });

    $('#addEventModal').on('modal.shown', function () {
        console.log('modal.shown event triggered!');
        const modalMode = this.getAttribute('data-modal-mode');
        const eventId = this.getAttribute('data-event-id');
        const eventName = this.getAttribute('data-event-name');
        const eventMobile = this.getAttribute('data-event-mobile');
        
        console.log('Modal shown with mode:', modalMode, 'eventId:', eventId, 'eventName:', eventName);
        
        // Update modal title and icon based on mode
        if (modalMode === 'reconnect') {
            $('#addEventModalLabel').text(translations.reconnectDevice);
            $('#modal-subtitle').text(translations.reconnectDescription);
            $('#modal-header-icon').removeClass('fa-plus').addClass('fa-mobile-alt');
            
            // Pre-fill form with existing event data
            $('#modal_name').val(eventName).attr('disabled', true);
            $('#modal_mobile_number').val(eventMobile).attr('disabled', true);
            $('#modal_event_id').val(eventId);
            
            // Show instructions accordion for reconnect mode
            $('#modal_instructions_accordion').removeClass('hidden');
            
            // Auto-generate QR code for reconnect
            setTimeout(() => {
                generateModalQRCode();
            }, 500);
        } else {
            // Reset to create mode
            $('#addEventModalLabel').text(translations.createNewEvent);
            $('#modal-subtitle').text(translations.setupWhatsapp);
            $('#modal-header-icon').removeClass('fa-mobile-alt').addClass('fa-plus');
            
            // Clear form fields
            $('#modal_name').val('').attr('disabled', false);
            $('#modal_mobile_number').val('').attr('disabled', false);
            $('#modal_event_id').val('');
            
            // Hide instructions accordion for create mode
            $('#modal_instructions_accordion').addClass('hidden');
        }
        
        const storedNumber = sessionStorage.getItem('authenticatedNumber');
        const sessionId = $('#modal_session_id').val().trim();

        if (storedNumber) {
            $('#modal_mobile_number').val(storedNumber).attr('disabled', true);
            $('#modal_generateQRButton').attr('disabled', true).addClass('hidden');
            $('#modal_submitButton').attr('disabled', false).removeClass('hidden');
            $('#modal_wa-login-msg').removeClass('hidden');
        }

        // Clear any existing socket and interval
        if (modalSocket) {
            modalSocket.disconnect();
            modalSocket = null;
        }
        if (modalDeviceCheckInterval) {
            clearInterval(modalDeviceCheckInterval);
            modalDeviceCheckInterval = null;
        }

        // Socket connection for modal with proper error handling
        try {
            modalSocket = io(url, { 
                query: { 
                    sessionId: sessionId,
                    token: authToken 
                },
                timeout: 10000,
                forceNew: true
            });
            
            modalSocket.on('connect', () => {
                console.log('Modal Socket.IO connected successfully');
            });
            
            modalSocket.on('connect_error', (error) => {
                console.error('Modal Socket.IO connection error:', error);
            });

            modalSocket.on('device-connected', (data) => {
                console.log('Device connected via socket:', data);
                // Clear polling interval if active
                if (modalDeviceCheckInterval) {
                    clearInterval(modalDeviceCheckInterval);
                    modalDeviceCheckInterval = null;
                }
                if (!deactivateModalQR()) {
                    debugLog('QR already processed, skipping...');
                    return;
                }
                
                // Submit event using helper function
                submitEventFromModal({
                    session_id: data.sessionId,
                    name: $('#modal_name').val(),
                    mobile_number: data.authenticatedNumber,
                    device_connected: 1
                }, false, null, 'socket')
                .then(eventData => redirectToCampaignFromModal(eventData))
                .catch(error => {
                    // Error already logged by helper
                });
            });

            modalSocket.on('disconnected', (sessionId) => {
                fetch(`${appUrl}/admin/events/check-device/${sessionId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    body: JSON.stringify({
                        device_connected: 0
                    })
                }).then(response => response.json()).catch(error => {
                    console.error('Error:', error);
                });
            });
        } catch (error) {
            console.error('Failed to initialize modal Socket.IO:', error);
        }
    });
// Plain table controls: search + pagination + page length (no DataTables)
function initPlainTableControls(tableSelector, cfg) {
    const $table = $(tableSelector);
    const $tbody = $table.find('tbody');
    const $rows = $tbody.find('tr').toArray();
    const $length = $(cfg.lengthSelector);
    const $search = $(cfg.searchInput);
    const $info = $(cfg.infoLabel);
    const $pager = $(cfg.paginationContainer);
    // Reveal controls (they have inline display:none to satisfy linter)
    $(cfg.controlsTop).removeAttr('style');
    $(cfg.controlsBottom).removeAttr('style');

    let pageSize = parseInt($length.val(), 10);
    let currentPage = 1;
    let filteredRows = $rows.slice();

    function applySearch() {
        const term = ($search.val() || '').toString().toLowerCase();
        if (!term) {
            filteredRows = $rows.slice();
        } else {
            filteredRows = $rows.filter(row => row.textContent.toLowerCase().includes(term));
        }
        currentPage = 1;
        render();
    }

    function getPageRows() {
        if (pageSize === -1) return filteredRows;
        const start = (currentPage - 1) * pageSize;
        return filteredRows.slice(start, start + pageSize);
    }

    function renderInfo() {
        const total = filteredRows.length;
        const start = total === 0 ? 0 : (pageSize === -1 ? 1 : (currentPage - 1) * pageSize + 1);
        const end = pageSize === -1 ? total : Math.min(currentPage * pageSize, total);
        @php
            $showingEntriesTemplate = __('events.showing_entries', ['start' => ':start', 'end' => ':end', 'total' => ':total']);
        @endphp
        const showingEntriesTemplate = @json($showingEntriesTemplate);
        $info.text(showingEntriesTemplate.replace(':start', start).replace(':end', end).replace(':total', total));
    }

    function renderPager() {
        $pager.empty();
        const total = filteredRows.length;
        if (pageSize === -1 || total === 0) return;
        const totalPages = Math.max(1, Math.ceil(total / pageSize));

        const btn = (label, disabled, onClick) => {
            const $b = $('<button type="button" class="border border-white/50 rounded-lg px-3 py-2 text-sm bg-fl-gray-extra-light/40 backdrop-blur-sm hover:bg-fl-gray-extra-light/60 transition-all duration-200 text-gray-700">').text(label);
            if (disabled) $b.prop('disabled', true).addClass('opacity-50 cursor-not-allowed');
            $b.on('click', onClick);
            return $b;
        };

        $pager.append(btn(@json(__('events.previous')), currentPage === 1, () => { currentPage = Math.max(1, currentPage - 1); render(); }));
        // Simple numbered pages (up to 7 buttons)
        const maxBtns = 7;
        const half = Math.floor(maxBtns / 2);
        let start = Math.max(1, currentPage - half);
        let end = Math.min(totalPages, start + maxBtns - 1);
        if (end - start + 1 < maxBtns) start = Math.max(1, end - maxBtns + 1);
        for (let p = start; p <= end; p++) {
            const $p = btn(String(p), false, () => { currentPage = p; render(); });
            if (p === currentPage) $p.addClass('bg-primary text-white border-primary shadow-sm');
            $pager.append($p);
        }
        $pager.append(btn(@json(__('events.next')), currentPage === totalPages, () => { currentPage = Math.min(totalPages, currentPage + 1); render(); }));
    }

    function renderBody() {
        $tbody.empty();
        getPageRows().forEach(row => { $tbody.append(row); });
    }

    function render() {
        renderBody();
        renderInfo();
        renderPager();
        if (window.feather && typeof window.feather.replace === 'function') { feather.replace(); }
        // Re-initialize tooltips for dynamically rendered content
        if (window.reinitTooltips && typeof window.reinitTooltips === 'function') {
            window.reinitTooltips();
        }
    }

    // Listeners
    $search.on('input', applySearch);
    $length.on('change', function() {
        pageSize = parseInt($(this).val(), 10);
        currentPage = 1;
        render();
    });

    // Initial render
    render();

    // (Export & Refresh removed)
}
</script>
@endpush