@php
    $employeeOptions = $employees->pluck('name', 'id')->toArray();
    $durationTypeOptions = [
        'single_day' => __('Specific Day'),
        'range' => __('Date Range'),
    ];
    $statusOptions = [
        'pending' => __('Pending manager review'),
        'manager_approved' => __('Pending final approval'),
        'approved' => __('Approved'),
        'rejected' => __('Rejected'),
        'cancelled' => __('Cancelled'),
    ];
    $hasActiveFilters = filled($filterEmployee) || filled($filterDurationType) || filled($filterFrom) || filled($filterTo) || filled($filterStatus);
@endphp

<div x-data="{ showModal:false, showFilters:@js($hasActiveFilters), isEditMode:false }"
     x-on:close-modal.window="showModal=false"
     x-on:overtime-updated.window="setTimeout(() => window.location.reload(), 250)">

    <div class="flex flex-wrap justify-between items-center gap-3 mb-4">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
            <i class="fas fa-business-time me-2"></i> {{ __('Overtime') }}
        </h1>

        <div class="flex items-center gap-2">
            <button @click="showFilters=!showFilters"
                    class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">
                <i class="fas fa-search"></i> {{ __('Filter') }}
            </button>

            @can('overtimes excel')
                <button wire:click="export"
                        class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
                    <i class="fas fa-file-excel"></i> {{ __('Export') }}
                </button>
            @endcan

            @if(auth()->user()->can('overtimes request') || auth()->user()->can('overtimes create'))
                <button @click="isEditMode=false; showModal=true; $wire.setCreate()"
                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                    <i class="fas fa-plus-circle"></i> {{ __('Submit overtime request') }}
                </button>
            @endif
        </div>
    </div>

    @if (session()->has('message'))
        <div class="mb-4 bg-green-100 border border-green-300 text-green-800 px-4 py-2 rounded dark:bg-green-900/30 dark:border-green-700 dark:text-green-200">
            {{ session('message') }}
        </div>
    @endif

    <div x-show="showFilters" x-transition
         class="mb-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4 text-gray-800 dark:text-gray-100">
        @unless($contextEmployeeId)
            <div>
                <label class="block font-medium mb-1">{{ __('Employee') }}</label>
                <x-searchable-select wire:model.live="filterEmployee" :options="$employeeOptions" :placeholder="__('All')" />
            </div>
        @endunless

        <div>
            <label class="block font-medium mb-1">{{ __('Duration Type') }}</label>
            <x-searchable-select wire:model.live="filterDurationType" :options="$durationTypeOptions" :placeholder="__('All')" />
        </div>

        <div>
            <label class="block font-medium mb-1">{{ __('From Date') }}</label>
            <x-date-picker wire:model.live="filterFrom" max-model="filterTo" />
        </div>

        <div>
            <label class="block font-medium mb-1">{{ __('To Date') }}</label>
            <x-date-picker wire:model.live="filterTo" min-model="filterFrom" />
        </div>

        <div>
            <label class="block font-medium mb-1">{{ __('Status') }}</label>
            <x-searchable-select wire:model.live="filterStatus" :options="$statusOptions" :placeholder="__('All')" />
        </div>

        <div class="flex items-end gap-2">
            <button wire:click="search" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                <i class="fas fa-search"></i> {{ __('Search') }}
            </button>
            <button wire:click="resetFilters" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                <i class="fas fa-undo"></i> {{ __('Reset') }}
            </button>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4 text-gray-800 dark:text-gray-100">
        <div class="border border-gray-200 dark:border-gray-700 rounded p-3 bg-white dark:bg-gray-900">
            <div class="text-sm text-gray-500 dark:text-gray-400">{{ __('Records') }}</div>
            <div class="text-xl font-semibold">{{ number_format($summary['records']) }}</div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded p-3 bg-white dark:bg-gray-900">
            <div class="text-sm text-gray-500 dark:text-gray-400">{{ __('Approved Hours') }}</div>
            <div class="text-xl font-semibold">{{ number_format($summary['total_hours'], 2) }}</div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded p-3 bg-white dark:bg-gray-900">
            <div class="text-sm text-gray-500 dark:text-gray-400">{{ __('Approved Amount') }}</div>
            <div class="text-xl font-semibold">{{ number_format($summary['total_amount'], 2) }}</div>
        </div>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-5 gap-3 mb-4 text-gray-800 dark:text-gray-100">
        @foreach($statusOptions as $status => $label)
            @php
                $cardClass = match($status) {
                    'approved' => 'border-green-300 dark:border-green-800',
                    'rejected', 'cancelled' => 'border-red-300 dark:border-red-800',
                    'manager_approved' => 'border-blue-300 dark:border-blue-800',
                    default => 'border-yellow-300 dark:border-yellow-800',
                };
            @endphp
            <div class="border rounded p-3 bg-white dark:bg-gray-900 {{ $cardClass }}">
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ $label }}</div>
                <div class="text-xl font-semibold">{{ number_format($statusSummary[$status] ?? 0) }}</div>
            </div>
        @endforeach
    </div>

    <div class="overflow-x-auto md:shadow md:border border-gray-200 dark:border-gray-700 rounded-lg">
        <table class="min-w-full divide-y text-sm divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-100 text-gray-700 dark:text-gray-100 dark:bg-gray-800 sticky top-0">
            <tr class="text-center">
                <th class="px-4 py-2">#</th>
                <th class="px-4 py-2">{{ __('Employee') }}</th>
                <th class="px-4 py-2">{{ __('Duration Type') }}</th>
                <th class="px-4 py-2">{{ __('Date') }}</th>
                <th class="px-4 py-2">{{ __('Days') }}</th>
                <th class="px-4 py-2">{{ __('Overtime Hours') }}</th>
                <th class="px-4 py-2">{{ __('Hourly Wage') }}</th>
                <th class="px-4 py-2">{{ __('Overtime Hourly Wage') }}</th>
                <th class="px-4 py-2">{{ __('Total Amount') }}</th>
                <th class="px-4 py-2">{{ __('Status') }}</th>
                <th class="px-4 py-2">{{ __('Notes') }}</th>
                <th class="px-4 py-2">{{ __('Actions') }}</th>
            </tr>
            </thead>

            <tbody class="text-gray-700 dark:text-gray-300">
            @forelse($overtimes as $overtime)
                <tr class="border-t border-gray-200 dark:border-gray-700 text-center odd:bg-gray-50 even:bg-white dark:odd:bg-gray-900/30 dark:even:bg-gray-900/10 hover:bg-gray-100 dark:hover:bg-gray-800">
                    <td class="px-4 py-2">{{ $loop->iteration + ($overtimes->currentPage() - 1) * $overtimes->perPage() }}</td>
                    <td class="px-4 py-2">{{ $overtime->employee->name ?? '—' }}</td>
                    <td class="px-4 py-2">{{ $durationTypeOptions[$overtime->duration_type] ?? __($overtime->duration_type) }}</td>
                    <td class="px-4 py-2">
                        @if($overtime->duration_type === 'range')
                            {{ $overtime->start_date?->format('Y-m-d') }} - {{ $overtime->end_date?->format('Y-m-d') }}
                        @else
                            {{ $overtime->date?->format('Y-m-d') }}
                        @endif
                    </td>
                    <td class="px-4 py-2">{{ $overtime->days_count }}</td>
                    <td class="px-4 py-2">
                        {{ number_format((float) $overtime->total_hours, 2) }}
                        <span class="text-xs text-gray-500">({{ number_format((float) $overtime->hours_per_day, 2) }} / {{ __('day') }})</span>
                    </td>
                    <td class="px-4 py-2">{{ number_format((float) $overtime->hourly_wage, 2) }}</td>
                    <td class="px-4 py-2">{{ number_format((float) $overtime->overtime_hourly_wage, 2) }}</td>
                    <td class="px-4 py-2 font-semibold">{{ number_format((float) $overtime->total_amount, 2) }}</td>
                    <td class="px-4 py-2">
                        @php
                            $statusClass = match($overtime->status) {
                                'approved' => 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200',
                                'rejected', 'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200',
                                'manager_approved' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
                                default => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-200',
                            };
                        @endphp
                        <span class="px-2 py-1 rounded-full text-xs {{ $statusClass }}">{{ $statusOptions[$overtime->status] ?? $overtime->status }}</span>
                        @if($overtime->status === 'rejected' && $overtime->rejection_reason)
                            <div class="text-xs text-red-600 mt-1" title="{{ $overtime->rejection_reason }}">{{ __('Reason recorded') }}</div>
                        @endif
                    </td>
                    <td class="px-4 py-2 max-w-xs truncate" title="{{ $overtime->notes }}">{{ $overtime->notes ?: '—' }}</td>
                    <td class="px-4 py-2">
                        <div class="flex justify-center gap-3">
                            @can('overtimes edit')
                                @if($overtime->status === 'pending')
                                <button @click="isEditMode=true; showModal=true; $wire.setEdit({{ $overtime->id }})"
                                        class="text-blue-600 dark:text-blue-400 hover:underline">
                                    <i class="fas fa-edit"></i> {{ __('Edit') }}
                                </button>
                                @endif
                            @endcan
                            @if($overtime->status === 'pending' && $this->isDirectManager($overtime))
                                <button wire:click="managerApprove({{ $overtime->id }})" class="text-blue-600 hover:underline">
                                    <i class="fas fa-user-check"></i> {{ __('Manager approve') }}
                                </button>
                            @endif
                            @if(in_array($overtime->status, ['pending', 'manager_approved']) && $this->canFinalApprove($overtime))
                                <button wire:click="finalApprove({{ $overtime->id }})" class="text-green-600 hover:underline">
                                    <i class="fas fa-check-circle"></i> {{ __('Final approve') }}
                                </button>
                            @endif
                            @if(in_array($overtime->status, ['pending', 'manager_approved']) && $this->canReject($overtime))
                                <button wire:click="beginReject({{ $overtime->id }})" class="text-red-600 hover:underline">
                                    <i class="fas fa-times-circle"></i> {{ __('Reject') }}
                                </button>
                            @endif
                            @if($overtime->created_by === auth()->id() && in_array($overtime->status, ['pending', 'manager_approved']))
                                <button wire:click="cancel({{ $overtime->id }})" class="text-gray-600 hover:underline">
                                    {{ __('Cancel') }}
                                </button>
                            @endif
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="12" class="text-center text-gray-500 py-4">{{ __('No records found.') }}</td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">{{ $overtimes->links() }}</div>

    @if($confirmingDeletionId)
        <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
            <div class="bg-white dark:bg-gray-800 p-6 rounded w-full max-w-md shadow-xl">
                <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-3">{{ __('Confirm Delete') }}</h2>
                <p class="text-gray-700 dark:text-gray-300 mb-4">{{ __('Are you sure you want to delete this record?') }}</p>
                <div class="flex justify-end gap-2">
                    <button wire:click="$set('confirmingDeletionId', null)" class="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">
                        {{ __('Cancel') }}
                    </button>
                    <button wire:click="deleteConfirmed" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">
                        {{ __('Delete') }}
                    </button>
                </div>
            </div>
        </div>
    @endif

    <div x-show="showModal" x-transition class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
        <div class="bg-white dark:bg-gray-800 p-6 rounded w-full max-w-3xl shadow-xl max-h-[90vh] overflow-y-auto">
            <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}" class="space-y-4">
                <div class="flex items-center justify-between mb-2 border-b pb-2 border-gray-200 dark:border-gray-700">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                        <i class="fas fa-business-time me-2"></i>
                        {{ $isEditMode ? __('Edit overtime request') : __('Submit overtime request') }}
                    </h2>
                    <button type="button" @click="showModal=false" class="text-gray-600 dark:text-gray-300">
                        <i class="fas fa-times fa-lg"></i>
                    </button>
                </div>

                @if ($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded text-sm dark:bg-red-900/30 dark:border-red-700 dark:text-red-200">
                        <ul class="list-disc ps-5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm mb-1">{{ __('Employee') }}</label>
                        @if($contextEmployeeId || ! $this->canCreateForOthers())
                            <div class="w-full border rounded px-3 py-2 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700">
                                {{ $employeeOptions[$contextEmployeeId] ?? auth()->user()->name }}
                            </div>
                        @else
                            <x-searchable-select wire:model.live="employee_id" :options="$employeeOptions" :placeholder="__('Choose employee')" />
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm mb-1">{{ __('Duration Type') }}</label>
                        <x-searchable-select wire:model.live="duration_type" :options="$durationTypeOptions" :placeholder="__('Select')" />
                    </div>

                    @if($duration_type === 'range')
                        <div>
                            <label class="block text-sm mb-1">{{ __('From Date') }}</label>
                            <x-date-picker wire:model.live="start_date" max-model="end_date" />
                        </div>

                        <div>
                            <label class="block text-sm mb-1">{{ __('To Date') }}</label>
                            <x-date-picker wire:model.live="end_date" min-model="start_date" />
                        </div>
                    @else
                        <div>
                            <label class="block text-sm mb-1">{{ __('Date') }}</label>
                            <x-date-picker wire:model.live="date" />
                        </div>
                    @endif

                    <div>
                        <label class="block text-sm mb-1">{{ $duration_type === 'range' ? __('Daily Overtime Hours') : __('Overtime Hours') }}</label>
                        <input type="number" min="0.01" max="24" step="0.01" wire:model.live="hours_per_day"
                               class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700">
                    </div>

                    <div class="col-span-full">
                        <label class="block text-sm mb-1">{{ __('Notes') }}</label>
                        <textarea wire:model.defer="notes" rows="3"
                                  class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700"></textarea>
                    </div>
                </div>

                @if(!empty($preview))
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Monthly Salary') }}</div>
                            <div class="font-semibold">{{ number_format($preview['monthly_salary'], 2) }}</div>
                        </div>
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Daily Wage') }}</div>
                            <div class="font-semibold">{{ number_format($preview['daily_wage'], 2) }}</div>
                        </div>
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Hourly Wage') }}</div>
                            <div class="font-semibold">{{ number_format($preview['hourly_wage'], 2) }}</div>
                        </div>
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Overtime Hourly Wage') }}</div>
                            <div class="font-semibold">{{ number_format($preview['overtime_hourly_wage'], 2) }}</div>
                        </div>
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Days') }}</div>
                            <div class="font-semibold">{{ $preview['days_count'] }}</div>
                        </div>
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Total Hours') }}</div>
                            <div class="font-semibold">{{ number_format($preview['total_hours'], 2) }}</div>
                        </div>
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Daily Work Hours') }}</div>
                            <div class="font-semibold">{{ number_format($preview['daily_work_hours'], 2) }}</div>
                        </div>
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="text-gray-500 dark:text-gray-400">{{ __('Total Amount') }}</div>
                            <div class="font-semibold">{{ number_format($preview['total_amount'], 2) }}</div>
                        </div>
                    </div>

                    @if(!empty($preview['attendance_evidence']))
                        <div class="border rounded p-3 dark:border-gray-700">
                            <div class="font-semibold mb-2 text-gray-800 dark:text-gray-100">{{ __('Attendance evidence') }}</div>
                            <div class="overflow-x-auto">
                                <table class="min-w-full text-sm text-center">
                                    <thead class="text-gray-500 dark:text-gray-400">
                                    <tr>
                                        <th class="px-2 py-1">{{ __('Date') }}</th>
                                        <th class="px-2 py-1">{{ __('Scheduled end') }}</th>
                                        <th class="px-2 py-1">{{ __('Actual check-out') }}</th>
                                        <th class="px-2 py-1">{{ __('Available after-shift time') }}</th>
                                        <th class="px-2 py-1">{{ __('Review result') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($preview['attendance_evidence'] as $evidence)
                                        @php
                                            $availableMinutes = $evidence['available_minutes'];
                                            $availableDisplay = is_null($availableMinutes) ? '—' : sprintf('%02d:%02d', intdiv($availableMinutes, 60), $availableMinutes % 60);
                                            $verified = $evidence['status'] === 'verified';
                                        @endphp
                                        <tr class="border-t border-gray-200 dark:border-gray-700">
                                            <td class="px-2 py-1">{{ $evidence['date'] }}</td>
                                            <td class="px-2 py-1">{{ $evidence['scheduled_end'] ?? '—' }}</td>
                                            <td class="px-2 py-1">{{ $evidence['check_out'] ?? '—' }}</td>
                                            <td class="px-2 py-1">{{ $availableDisplay }}</td>
                                            <td class="px-2 py-1 {{ $verified ? 'text-green-600' : 'text-amber-600' }}" title="{{ $evidence['message'] }}">
                                                {{ $verified ? __('Supported by attendance') : __('Reason required') }}
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @if(collect($preview['attendance_evidence'])->contains(fn ($day) => $day['status'] !== 'verified'))
                                <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                                    {{ __('Some requested hours are not fully supported by attendance. Enter a clear reason before submitting.') }}
                                </div>
                            @endif
                        </div>
                    @endif
                @endif

                <div class="flex justify-end gap-2 mt-4">
                    <button type="button" @click="$dispatch('close-modal') || (showModal=false)"
                            class="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">
                        {{ __('Cancel') }}
                    </button>
                    <button type="submit"
                            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2">
                        <i class="fas fa-save"></i>
                        <span>{{ $isEditMode ? __('Update') : __('Save') }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    @if($rejectingId)
        <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
            <form wire:submit.prevent="reject" class="bg-white dark:bg-gray-800 p-6 rounded w-full max-w-md shadow-xl">
                <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-3">{{ __('Reject overtime request') }}</h2>
                <label class="block text-sm mb-1">{{ __('Rejection reason') }}</label>
                <textarea wire:model="rejectionReason" rows="4" class="w-full border rounded px-3 py-2 bg-white dark:bg-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-700"></textarea>
                @error('rejectionReason') <div class="text-red-600 text-sm mt-1">{{ $message }}</div> @enderror
                <div class="flex justify-end gap-2 mt-4">
                    <button type="button" wire:click="$set('rejectingId', null)" class="bg-gray-400 text-white px-4 py-2 rounded">{{ __('Cancel') }}</button>
                    <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded">{{ __('Reject') }}</button>
                </div>
            </form>
        </div>
    @endif
</div>