@extends('layouts.user')

@section('title', 'Attendances & Schedules')

@section('content')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        /* Select2 Tailwind Overrides */
        .select2-container .select2-selection--single {
            height: 38px !important;
            border: 1px solid #e5e7eb !important; /* border-gray-200 */
            border-radius: 0.5rem !important; /* rounded-lg */
            background-color: #f9fafb !important; /* bg-gray-50 */
            display: flex;
            align-items: center;
            transition: all 0.2s ease-in-out;
        }
        .select2-container--open .select2-selection--single {
            border-color: #3b82f6 !important; /* border-blue-500 */
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; /* ring-blue-500/20 */
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #374151 !important; /* text-gray-700 */
            font-size: 0.875rem !important; /* text-sm */
            font-weight: 700 !important; /* font-bold */
            padding-left: 1rem !important; /* pl-4 */
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
            right: 8px !important; /* pr-2 */
        }
        
        /* Dropdown Menu Container */
        .select2-dropdown {
            border: 1px solid #f3f4f6 !important; /* border-gray-100 */
            border-radius: 0.5rem !important; /* rounded-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
            overflow: hidden !important;
            background-color: white !important;
            margin-top: 4px !important;
            z-index: 50 !important;
        }
        
        /* Search Box Layer */
        .select2-search--dropdown {
            padding: 0.5rem !important; /* p-2 */
            background-color: #f9fafb !important; /* bg-gray-50 */
            border-bottom: 1px solid #f3f4f6 !important; /* border-gray-100 */
        }
        .select2-search--dropdown .select2-search__field {
            border: 1px solid #e5e7eb !important; /* border-gray-200 */
            border-radius: 0.375rem !important; /* rounded-md */
            padding: 0.375rem 0.75rem !important; /* py-1.5 px-3 */
            font-size: 0.875rem !important; /* text-sm */
            outline: none !important;
            transition: all 0.2s ease-in-out;
        }
        .select2-search--dropdown .select2-search__field:focus {
            border-color: #3b82f6 !important; /* border-blue-500 */
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; /* ring-blue-500/20 */
        }

        /* Results List */
        .select2-results__option {
            padding: 0.5rem 1rem !important; /* py-2 px-4 */
            font-size: 0.875rem !important; /* text-sm */
            color: #4b5563 !important; /* text-gray-600 */
            font-weight: 500 !important; /* font-medium */
            transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
        }
        
        /* Highlighted/Hover Option */
        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #eff6ff !important; /* bg-blue-50 */
            color: #2563eb !important; /* text-blue-600 */
            font-weight: 700 !important; /* font-bold */
        }
        
        /* Selected Option indicator */
        .select2-container--default .select2-results__option--selected {
            background-color: #f3f4f6 !important; /* bg-gray-100 */
            color: #111827 !important; /* text-gray-900 */
            font-weight: 700 !important; /* font-bold */
        }
    </style>

    <div class="p-6" x-data="bulkScheduleEdit()">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">Guard Schedules</h1>
                <p class="text-gray-500">Manage and track guard duties across all sites.</p>
            </div>

            <div class="flex items-center gap-4">
                <a :href="exportUrl('{{ route('schedules.export') }}')" target="_blank"
                    class="flex items-center gap-2 px-4 py-2 bg-slate-800 text-white text-sm font-bold rounded-lg hover:bg-slate-900 transition-all shadow-md">
                    <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                    Export PDF
                </a>
                <a :href="exportUrl('{{ route('schedules.export.excel') }}')" target="_blank"
                    class="flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white text-sm font-bold rounded-lg hover:bg-emerald-700 transition-all shadow-md">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                    Export Excel
                </a>
                <a href="{{ route('schedules.create') }}"
                    class="px-6 py-2 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition-all shadow-md shadow-blue-500/20 flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    Create New Schedule
                </a>
            </div>
        </div>

        <!-- Bulk Action Bar -->
        <div x-show="selectedSchedules.length > 0" x-cloak
            class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-slate-900 text-white px-6 py-3 rounded-2xl shadow-2xl flex items-center gap-6 border border-slate-700"
            x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-full"
            x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-full">
            <div class="flex items-center gap-2">
                <span class="bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded"
                    x-text="selectedSchedules.length"></span>
                <span class="text-sm font-medium text-slate-300">Selected</span>
            </div>
            <div class="h-4 w-px bg-slate-700"></div>
            <button @click="openBulkEditModal"
                class="text-sm font-bold text-blue-500 hover:text-blue-600 transition-colors flex items-center gap-2">
                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
                    </path>
                </svg>
                Bulk Edit
            </button>
            <div class="h-4 w-px bg-slate-700"></div>
            <button @click="confirmBulkDelete"
                class="text-sm font-bold text-red-500 hover:text-red-600 transition-colors flex items-center gap-2">
                <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                    </path>
                </svg>
                Delete
            </button>
            <button @click="selectedSchedules = []" class="text-slate-500 hover:text-white transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Bulk Edit Modal -->
        <div x-show="showBulkEditModal" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak>
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="showBulkEditModal = false"></div>
            <div class="relative bg-white rounded-3xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                <form action="{{ route('schedules.bulk-update') }}" method="POST">
                    @csrf
                    <div class="p-8 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
                        <h2 class="text-xl font-bold text-gray-900">Bulk Edit Schedules</h2>
                        <button type="button" @click="showBulkEditModal = false" class="text-gray-400 hover:text-gray-600">
                            <svg class="w-6 h-6 text-red-400 hover:text-red-600" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <div class="p-8 space-y-6">
                        <input type="hidden" name="schedule_ids" :value="selectedSchedules.join(',')">

                        <div class="p-4 bg-blue-50 border border-blue-100 rounded-xl mb-6">
                            <p class="text-sm text-blue-700 text-center">
                                You are editing <span class="font-bold" x-text="selectedSchedules.length"></span> schedules.
                                Only fill fields you want to update. Leave blank to keep existing values.
                            </p>
                        </div>

                        <!-- Site Selection -->
                        <div>
                            <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Change Site</label>
                            <select name="site_id"
                                class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm font-bold text-gray-700 bg-gray-50">
                                <option value="">No Change</option>
                                @foreach($sites as $site)
                                    <option value="{{ $site->id }}">{{ $site->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="grid grid-cols-2 gap-6">
                            <!-- Date & Time -->
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">New Start
                                    Date/Time</label>
                                <input type="datetime-local" name="from_datetime"
                                    class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm font-bold text-gray-700">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">New End
                                    Date/Time</label>
                                <input type="datetime-local" name="to_datetime"
                                    class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm font-bold text-gray-700">
                            </div>
                        </div>

                        <!-- Guards Update Logic -->
                        <div class="border-t border-gray-100 pt-6">
                            <h3 class="text-sm font-black text-gray-900 uppercase tracking-wide mb-4">Guard Assignment</h3>

                            <div class="mb-4">
                                <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Action</label>
                                <select name="guard_action"
                                    class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm font-bold text-gray-700 bg-gray-50"
                                    x-model="guardAction">
                                    <option value="">No Change</option>
                                    <option value="replace">Replace All Guards (Assign New)</option>
                                    <option value="add">Add Guards (Keep Existing)</option>
                                </select>
                            </div>

                            <div x-show="guardAction === 'replace' || guardAction === 'add'" x-cloak
                                class="space-y-4 p-4 bg-gray-50 rounded-xl border border-gray-200">
                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Select
                                        Employees</label>
                                    <select name="employee_ids[]" multiple
                                        class="w-full h-32 px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm font-bold text-gray-700">
                                        @foreach($employees as $emp)
                                            <option value="{{ $emp->id }}">{{ $emp->first_name }} {{ $emp->last_name }}</option>
                                        @endforeach
                                    </select>
                                    <p class="text-[10px] text-gray-400 mt-1">Hold Ctrl/Cmd to select multiple.</p>
                                </div>

                                <div>
                                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Wage Rate Override
                                        ($/hr)</label>
                                    <input type="number" step="0.01" name="wage_rate" placeholder="Default Employee Rate"
                                        class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none text-sm font-bold text-gray-700">
                                    <p class="text-[10px] text-gray-400 mt-1">Leave blank to use each employee's default
                                        base rate.</p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="p-8 border-t border-gray-100 flex justify-end gap-4 bg-gray-50/50">
                        <button type="button" @click="showBulkEditModal = false"
                            class="px-6 py-2.5 text-gray-600 font-bold hover:bg-gray-100 rounded-xl transition-colors text-sm">Cancel</button>
                        <button type="submit"
                            class="px-6 py-2.5 bg-blue-600 text-white font-bold rounded-xl shadow-lg shadow-blue-500/30 hover:bg-blue-700 transition-all text-sm uppercase tracking-wider">Update
                            Schedules</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Update Payout Modal -->
        <div x-show="showPayoutModal" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak>
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="showPayoutModal = false"></div>
            <div class="relative bg-white rounded-3xl shadow-xl w-full max-w-lg overflow-hidden">
                <form :action="'/schedules/' + payoutData.id + '/update-payout'" method="POST">
                    @csrf
                    <div class="p-8 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
                        <div>
                            <h2 class="text-xl font-bold text-gray-900">Update Payout</h2>
                            <p class="text-xs text-gray-500 font-bold uppercase mt-1" x-text="'Duty #' + payoutData.duty_number"></p>
                        </div>
                        <button type="button" @click="showPayoutModal = false" class="text-gray-400 hover:text-gray-600">
                            <svg class="w-6 h-6 text-red-400 hover:text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <div class="p-8 space-y-6">
                        <div class="grid grid-cols-1 gap-6">
                            <!-- Scheduled Times -->
                            <div class="space-y-4">
                                <h3 class="text-xs font-black text-blue-600 uppercase tracking-widest border-b border-blue-50 pb-2">Scheduled Times</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Schedule Start</label>
                                        <input type="datetime-local" name="from_datetime" x-model="payoutData.scheduled_start" required
                                            class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold text-gray-700 focus:ring-2 focus:ring-blue-500 outline-none">
                                    </div>
                                    <div>
                                        <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Schedule End</label>
                                        <input type="datetime-local" name="to_datetime" x-model="payoutData.scheduled_end" required
                                            class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold text-gray-700 focus:ring-2 focus:ring-blue-500 outline-none">
                                    </div>
                                </div>
                            </div>

                            <!-- Actual Times -->
                            <div class="space-y-4">
                                <h3 class="text-xs font-black text-emerald-600 uppercase tracking-widest border-b border-emerald-50 pb-2">Employee Actual Times</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Actual Start</label>
                                        <input type="datetime-local" name="actual_start_at" x-model="payoutData.actual_start"
                                            class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold text-gray-700 focus:ring-2 focus:ring-blue-500 outline-none">
                                    </div>
                                    <div>
                                        <label class="block text-[10px] font-bold text-gray-400 uppercase mb-1.5">Actual End</label>
                                        <input type="datetime-local" name="actual_end_at" x-model="payoutData.actual_end"
                                            class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl text-sm font-bold text-gray-700 focus:ring-2 focus:ring-blue-500 outline-none">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="p-8 bg-gray-50 border-t border-gray-100 flex justify-end gap-3">
                        <button type="button" @click="showPayoutModal = false"
                            class="px-6 py-2.5 text-sm font-bold text-gray-500 hover:text-gray-700">Cancel</button>
                        <button type="submit"
                            class="px-6 py-2.5 bg-blue-600 text-white text-sm font-bold rounded-xl hover:bg-blue-700 shadow-lg shadow-blue-500/30 transition-all">Update
                            Payout Details</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Labs Container -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-6">
            <div class="flex border-b border-gray-100 overflow-x-auto whitespace-nowrap scrollbar-hide">
                @php
                    $tabs = [
                        'all' => 'All',
                        'active' => 'Active',
                        'upcoming' => 'Upcoming',
                        'completed' => 'Completed',
                        'missed' => 'Missed',
                        'cancelled' => 'Cancelled'
                    ];
                @endphp
                @foreach($tabs as $key => $label)
                    <button type="button" @click="setType('{{ $key }}')"
                        class="px-6 py-4 text-sm font-bold border-b-2 transition-all"
                        :class="type === '{{ $key }}' ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-50'">
                        {{ $label }}
                        <span
                            class="ml-2 px-2 py-0.5 rounded-full text-xs"
                            :class="type === '{{ $key }}' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-600'">
                            {{ $counts[$key] ?? 0 }}
                        </span>
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Filter & Export Toolbar -->
        <!-- Filter & Export Toolbar -->
        <div class="mb-6 bg-white p-4 rounded-xl border border-gray-100 shadow-sm overflow-x-auto scrollbar-hide">
            <form @submit.prevent class="flex items-center gap-4 whitespace-nowrap min-w-max">
                
                <!-- Search Filter -->
                <div class="relative w-[200px] shrink-0">
                    <input type="text" name="search" x-model.debounce.500ms="search"
                        placeholder="Search duty #, employee..."
                        class="w-full pl-9 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                </div>

                <!-- Site Filter -->
                <div class="relative w-[200px] shrink-0">
                    <select name="site_id" x-model="site_id" @change="fetchSchedules()"
                        class="select2 w-full pl-4 pr-10 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 appearance-none">
                        <option value="">All Sites</option>
                        @foreach($sites as $site)
                            <option value="{{ $site->id }}">
                                {{ $site->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                        <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>

                <!-- Employee Filter -->
                <div class="relative w-[200px] shrink-0">
                    <select name="employee_id" x-model="employee_id" @change="fetchSchedules()"
                        class="select2 w-full pl-4 pr-10 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 appearance-none">
                        <option value="">All Employees</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">
                                {{ $emp->first_name }} {{ $emp->last_name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                        <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>

                <!-- Date Range Filter -->
                <div class="flex items-center gap-2 shrink-0">
                    <div class="relative">
                        <input type="date" name="from_date" x-model="from_date" @change="fetchSchedules()"
                            class="pl-4 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 w-[140px]"
                            placeholder="From Date">
                    </div>
                    <span class="text-gray-400 font-bold">-</span>
                    <div class="relative">
                        <input type="date" name="to_date" x-model="to_date" @change="fetchSchedules()"
                            class="pl-4 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-bold text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 w-[140px]"
                            placeholder="To Date">
                    </div>

                    <!-- Quick Date Filters -->
                    <div class="flex items-center gap-1 bg-gray-50 rounded-lg p-1 border border-gray-200">
                        @php
                            $rangeFilters = ['today' => 'Today', 'this_week' => 'This Week', 'this_month' => 'This Month'];
                        @endphp
                        @foreach($rangeFilters as $key => $label)
                            <button type="button" @click="setType('{{ $key }}')"
                                class="px-2 py-1 text-[10px] font-bold uppercase tracking-wider rounded transition-colors"
                                :class="type === '{{ $key }}' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'">
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <template x-if="type === 'completed'">
                    <div class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2">
                        <input type="checkbox" name="is_addon" id="is_addon" x-model="is_addon" @change="fetchSchedules()"
                            class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer">
                        <label for="is_addon" class="text-xs font-bold text-gray-700 cursor-pointer select-none">
                            Manual Addon
                        </label>
                    </div>
                </template>

                <button type="button" @click="resetFilters()"
                    class="text-sm font-bold text-red-400 hover:text-red-600" title="Clear Filters">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>

            </form>
        </div>



        <!-- Sites Table Output -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden relative">
            <!-- Loading Indicator Overlay -->
            <div x-show="loading" class="absolute inset-0 bg-white/60 backdrop-blur-sm z-10 flex items-center justify-center" x-cloak>
                <div class="flex flex-col items-center gap-2 bg-white/80 p-4 rounded-xl shadow-lg border border-gray-100">
                    <svg class="animate-spin h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span class="text-xs font-bold text-gray-600 uppercase tracking-widest">Loading...</span>
                </div>
            </div>
            
            <div id="table-container" :class="{ 'opacity-50 pointer-events-none': loading }" class="transition-opacity duration-200">
                @include('schedules.partials.table', ['schedules' => $schedules])
            </div>
        </div>
        <!-- Map Modal -->
        <div x-show="showMapModal" class="fixed inset-0 z-50 flex items-center justify-center p-4" x-cloak
            style="display: none;">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="showMapModal = false"></div>
            <div class="relative bg-white rounded-3xl shadow-xl w-full max-w-4xl h-[600px] flex flex-col overflow-hidden">
                <div class="p-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
                    <h2 class="text-xl font-bold text-gray-900">Location History</h2>
                    <button type="button" @click="showMapModal = false" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                            </path>
                        </svg>
                    </button>
                </div>
                <div class="flex-1 relative bg-slate-50">
                    <div id="map" class="absolute inset-0 z-10 w-full h-full"></div>
                </div>
            </div>
        </div>
    </div>
    </div>

    @push('scripts')
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    @endpush

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Auto-Refresh Logic
            var refreshEnabled = @json($refreshEnabled ?? 0);
            var refreshInterval = @json($refreshInterval ?? 5);

            // Check loosely for truthy values (1, '1', true, 'true', 'on')
            var isEnabled = refreshEnabled == 1 || refreshEnabled === 'true' || refreshEnabled === true || refreshEnabled === 'on';

            if (isEnabled) {
                var minutes = parseInt(refreshInterval);
                if (isNaN(minutes) || minutes < 1) {
                    minutes = 5; // Fallback default
                }

                var intervalMs = minutes * 60 * 1000;
                console.log('Schedules Auto-Refresh is ACTIVE. Scheduling reload in ' + minutes + ' minutes.');

                setTimeout(function () {
                    console.log('Reloading schedules page...');
                    window.location.reload(); // Reloads the current page with all query parameters (e.g. ?type=upcoming) preserved
                }, intervalMs);
            } else {
                console.log('Schedules Auto-Refresh is DISABLED.');
            }
        });
    </script>

    <script>
        function bulkScheduleEdit() {
            return {
                search: new URLSearchParams(window.location.search).get('search') || '',
                site_id: new URLSearchParams(window.location.search).get('site_id') || '',
                employee_id: new URLSearchParams(window.location.search).get('employee_id') || '',
                from_date: new URLSearchParams(window.location.search).get('from_date') || '',
                to_date: new URLSearchParams(window.location.search).get('to_date') || '',
                type: new URLSearchParams(window.location.search).get('type') || 'all',
                is_addon: new URLSearchParams(window.location.search).get('is_addon') ? true : false,
                loading: false,

                selectedSchedules: [],
                allSelected: false,
                showBulkEditModal: false,
                showPayoutModal: false,
                payoutData: {
                    id: null,
                    duty_number: '',
                    scheduled_start: '',
                    scheduled_end: '',
                    actual_start: '',
                    actual_end: ''
                },
                guardAction: '',
                showMapModal: false,
                map: null,

                init() {
                    this.$watch('search', value => { this.fetchSchedules(); });
                    
                    const container = document.getElementById('table-container');
                    if (container) {
                        this.bindPaginationLinks();
                    }
                },

                exportUrl(baseUrl) {
                    const url = new URL(baseUrl);
                    if (this.search) url.searchParams.set('search', this.search);
                    if (this.site_id) url.searchParams.set('site_id', this.site_id);
                    if (this.employee_id) url.searchParams.set('employee_id', this.employee_id);
                    if (this.from_date) url.searchParams.set('from_date', this.from_date);
                    if (this.to_date) url.searchParams.set('to_date', this.to_date);
                    if (this.type) url.searchParams.set('type', this.type);
                    if (this.is_addon) url.searchParams.set('is_addon', '1');
                    return url.toString();
                },

                fetchSchedules(url = null) {
                    this.loading = true;
                    
                    const fetchUrl = new URL(url || '{{ route('schedules.index') }}');
                    if (this.search) fetchUrl.searchParams.set('search', this.search);
                    if (this.site_id) fetchUrl.searchParams.set('site_id', this.site_id);
                    if (this.employee_id) fetchUrl.searchParams.set('employee_id', this.employee_id);
                    if (this.from_date) fetchUrl.searchParams.set('from_date', this.from_date);
                    if (this.to_date) fetchUrl.searchParams.set('to_date', this.to_date);
                    if (this.type) fetchUrl.searchParams.set('type', this.type);
                    if (this.is_addon) fetchUrl.searchParams.set('is_addon', '1');
                    
                    window.history.pushState({}, '', fetchUrl);

                    fetch(fetchUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.text())
                    .then(html => {
                        document.getElementById('table-container').innerHTML = html;
                        this.allSelected = false;
                        this.selectedSchedules = [];
                    })
                    .catch(error => { console.error("Error fetching schedules:", error); })
                    .finally(() => {
                        this.loading = false;
                        setTimeout(() => { this.bindPaginationLinks(); }, 50);
                    });
                },

                setType(newType) {
                    this.type = newType;
                    this.fetchSchedules();
                },

                resetFilters() {
                    this.search = '';
                    this.site_id = '';
                    this.employee_id = '';
                    this.from_date = '';
                    this.to_date = '';
                    this.is_addon = false;
                    // Keep the type or reset it too? Usually reset keeps the main tab context
                    this.fetchSchedules();
                },

                bindPaginationLinks() {
                    const container = document.getElementById('table-container');
                    if (!container) return;
                    
                    const links = container.querySelectorAll('.pagination a, nav[role="navigation"] a');
                    links.forEach(link => {
                        link.addEventListener('click', (e) => {
                            e.preventDefault();
                            this.fetchSchedules(link.href);
                        });
                    });
                },

                toggleAll() {
                    if (this.allSelected) {
                        this.selectedSchedules = Array.from(document.querySelectorAll('.schedule-checkbox'))
                            .map(el => el.value)
                            .filter(val => val !== 'on');
                    } else {
                        this.selectedSchedules = [];
                    }
                },

                openBulkEditModal() {
                    this.showBulkEditModal = true;
                },

                openPayoutModal(data) {
                    this.payoutData = { ...data };
                    this.showPayoutModal = true;
                },

                confirmBulkDelete() {
                    if (confirm('Are you sure you want to delete ' + this.selectedSchedules.length + ' schedules? This action cannot be undone.')) {
                        let form = document.createElement('form');
                        form.action = "{{ route('schedules.bulk-destroy') }}";
                        form.method = 'POST';
                        form.style.display = 'none';

                        let csrfToken = document.createElement('input');
                        csrfToken.type = 'hidden';
                        csrfToken.name = '_token';
                        csrfToken.value = "{{ csrf_token() }}";
                        form.appendChild(csrfToken);

                        let method = document.createElement('input');
                        method.type = 'hidden';
                        method.name = '_method';
                        method.value = 'DELETE';
                        form.appendChild(method);

                        let ids = document.createElement('input');
                        ids.type = 'hidden';
                        ids.name = 'schedule_ids';
                        ids.value = this.selectedSchedules.join(',');
                        form.appendChild(ids);

                        document.body.appendChild(form);
                        form.submit();
                    }
                },

                viewLocations(scheduleId) {
                    console.log('Opening map for schedule:', scheduleId);
                    this.showMapModal = true;
                    this.$nextTick(() => {
                        if (!this.map) {
                            if (typeof L === 'undefined') {
                                console.error('Leaflet L is undefined');
                                alert('Map library not loaded. Please refresh.');
                                return;
                            }
                            this.map = L.map('map').setView([0, 0], 2);
                            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                attribution: '&copy; OpenStreetMap contributors'
                            }).addTo(this.map);
                        }

                        // Clear layers
                        this.map.eachLayer((layer) => {
                            if (layer instanceof L.Marker || layer instanceof L.Polyline) {
                                this.map.removeLayer(layer);
                            }
                        });

                        fetch(`/schedules/${scheduleId}/locations`)
                            .then(res => res.json())
                            .then(data => {
                                console.log('Locations loaded:', data.length);
                                if (data.length === 0) {
                                    alert('No location history recorded for this schedule.');
                                    return;
                                }

                                const latlngs = data.map(d => [d.lat, d.lng]);
                                const polyline = L.polyline(latlngs, { color: 'blue' }).addTo(this.map);

                                data.forEach(d => {
                                    L.marker([d.lat, d.lng]).addTo(this.map)
                                        .bindPopup(`<b>${d.name}</b><br>${d.time}`);
                                });

                                if (latlngs.length > 0) {
                                    this.map.fitBounds(polyline.getBounds());
                                }
                            })
                            .catch(err => {
                                console.error('Error fetching locations:', err);
                                alert('Failed to load location data.');
                            });

                        setTimeout(() => { this.map.invalidateSize(); }, 200);
                    });
                }
            }
        }
        window.bulkScheduleEdit = bulkScheduleEdit;
    </script>

    <!-- jQuery & Select2 JS -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                width: '100%'
            }).on('select2:select select2:unselect', function() {
                // Dispatch native change event so Alpine's x-model picks it up
                this.dispatchEvent(new Event('change', { bubbles: true }));
            });
            // Hide the SVG arrows since Select2 provides its own
            $('.select2').nextAll('.absolute').hide();
        });
    </script>
@endsection