@php
    $violationStatusOptions = collect(\App\Models\Violation::statusOptions())->pluck('name', 'id')->toArray();
    $hasActiveFilters = filled($filterEmployee) || filled($filterReason) || filled($filterPenalty) || filled($filterStatus) || filled($filterFrom) || filled($filterTo);
@endphp

<div
    x-data="{
        showModal: @entangle('showModal'),
        showFilters: @js($hasActiveFilters),
        confirmDeleteId: null,
        filterEmployee: @entangle('filterEmployee'),
        filterReason: @entangle('filterReason'),
        filterPenalty: @entangle('filterPenalty'),
        filterStatus: @entangle('filterStatus'),
        filterFrom: @entangle('filterFrom'),
        filterTo: @entangle('filterTo')
    }"
    x-on:violation-updated.window="setTimeout(() => window.location.reload(), 250)">

    <div class="mb-6 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">{{ __('Violations') }}</h1>

        <div class="flex gap-2">

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

            @can('employees Excel')
                <form wire:submit.prevent="exportExcel">
                    <button type="submit"
                            wire:loading.attr="disabled"
                            class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 dark:hover:bg-green-500 flex items-center gap-2">
                        <i class="fas fa-file-excel"></i> <span>{{ __('Export to Excel') }}</span>
                        <i wire:loading wire:target="exportExcel" class="fas fa-spinner fa-spin"></i>
                    </button>
                </form>
            @endcan

            @can('employees pdf')
                <form wire:submit.prevent="exportPDF">
                    <button type="submit"
                            wire:loading.attr="disabled"
                            class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 dark:hover:bg-red-500 flex items-center gap-2">
                        <i class="fas fa-file-pdf"></i> <span>{{ __('Export to PDF') }}</span>
                        <i wire:loading wire:target="exportPDF" class="fas fa-spinner fa-spin"></i>
                    </button>
                </form>
            @endcan

            @can('violations create')
                <button wire:click="openModalForCreate({{ $employee_id }})"
                        wire:loading.attr="disabled"
                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-500 flex items-center gap-2">
                    <i class="fas fa-plus-circle"></i>
                    <span>{{ __('Add Violation') }}</span>
                    <svg wire:loading wire:target="openModalForCreate" class="animate-spin h-5 w-5 text-white"
                         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-8v8H4z"></path>
                    </svg>
                </button>
            @endcan
        </div>
    </div>


    @if($ShowEmployeeInForm)
        <!-- Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">

            <div
                class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 rounded shadow text-center">
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ __('Total Violations') }}</div>
                <div class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ $violations->total() }}</div>
            </div>

            <div
                class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 rounded shadow text-center">
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ __('Most Common Reason') }}</div>
                <div class="text-xl font-bold text-gray-800 dark:text-gray-100">
                    {{ \App\Models\Violation::where('company_id', session('active_company_id'))
                        ->where('branch_id', session('active_branch_id'))
                        ->select('reason', \DB::raw('count(*) as total'))
                        ->groupBy('reason')->orderByDesc('total')->first()->reason ?? '-' }}
                </div>
            </div>

            <div
                class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 rounded shadow text-center">
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ __('Most Frequent Employee') }}</div>
                <div class="text-xl font-bold text-gray-800 dark:text-gray-100">
                    {{ optional(\App\Models\Violation::where('company_id', session('active_company_id'))
                        ->where('branch_id', session('active_branch_id'))
                        ->select('employee_id', \DB::raw('count(*) as total'))
                        ->groupBy('employee_id')->orderByDesc('total')->first()?->employee)->name ?? '-' }}
                </div>
            </div>

            <div
                class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-4 rounded shadow text-center">
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ __('Most Common Penalty') }}</div>
                <div class="text-xl font-bold text-gray-800 dark:text-gray-100">
                    {{ \App\Models\Violation::where('company_id', session('active_company_id'))
                        ->where('branch_id', session('active_branch_id'))
                        ->select('penalty', \DB::raw('count(*) as total'))
                        ->groupBy('penalty')->orderByDesc('total')->first()->penalty ?? '-' }}
                </div>
            </div>
        </div>

    @endif


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

    <!-- Modal -->
    <div x-show="showModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
         style="display:none;">
        <div
            class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 w-full max-w-lg p-6 rounded shadow-lg overflow-y-auto max-h-[90vh]">

            <div class="flex justify-between items-center mb-4 border-b border-gray-300 dark:border-gray-600 pb-2">
                <h2 class="text-xl font-semibold">{{ $isEditMode ? __('Edit Violation') : __('Add Violation') }}</h2>
                <button @click="showModal = false"
                        class="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            @if ($errors->any())
                <div
                    class="mb-4 bg-red-100 dark:bg-red-200/10 text-red-700 dark:text-red-300 border border-red-400 dark:border-red-500 p-4 rounded">
                    <ul class="mt-2 list-disc list-inside text-sm">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}" enctype="multipart/form-data">
                <div class="space-y-4">

                    @if($ShowEmployeeInForm)
                        <div class="mb-4">

                            <label class="block font-medium dark:text-gray-300">{{ __('Employee') }}</label>
                            <x-searchable-select wire:model.defer="employee_id" :options="$employeesLookup" :placeholder="__('Select Employee')" />

                            @error('employee_id')
                            <span class="text-red-600 text-sm">{{ $message }}</span>
                            @enderror
                        </div>

                    @endif

                    <div>
                        <label class="block font-medium dark:text-gray-300">{{ __('Reason') }}</label>
                        <input type="text" wire:model.defer="reason"
                               class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded px-3 py-2">
                        @error('reason') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block font-medium dark:text-gray-300">{{ __('Date') }}</label>
                        <x-date-picker wire:model.defer="violation_date" />
                        @error('violation_date') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block font-medium dark:text-gray-300">{{ __('Repeat Count') }}</label>
                        <input type="number" wire:model.defer="repeat_count"
                               class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded px-3 py-2">
                        @error('repeat_count') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block font-medium dark:text-gray-300">{{ __('Status') }}</label>
                        <x-searchable-select wire:model.defer="status" :options="$violationStatusOptions" :placeholder="__('Select')" />
                        @error('status') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block font-medium dark:text-gray-300">{{ __('Notes') }}</label>
                        <textarea wire:model.defer="notes"
                                  class="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 rounded px-3 py-2"></textarea>
                        @error('notes') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block font-medium dark:text-gray-300">{{ __('Attachment') }}</label>
                        <input type="file" wire:model="attachment"
                               class="w-full text-gray-800 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded px-3 py-2">
                        @error('attachment') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror

                        <div wire:loading wire:target="attachment" class="text-blue-600 mt-1 flex items-center gap-2">
                            <i class="fas fa-spinner fa-spin"></i> {{ __('Uploading...') }}
                        </div>

                        @if($isEditMode && $existingAttachment)
                            <a href="{{ $existingAttachment }}" target="_blank"
                               class="text-blue-600 dark:text-blue-400 underline mt-2 block">
                                <i class="fas fa-eye"></i> {{ __('View Existing Attachment') }}
                            </a>
                        @endif
                    </div>

                    <div class="flex justify-end gap-2">
                        <button type="submit" wire:loading.attr="disabled"
                                class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 dark:hover:bg-green-500 flex items-center gap-2">
                            <i class="fas fa-save"></i> {{ $isEditMode ? __('Update') : __('Save') }}
                            <svg wire:loading wire:target="{{ $isEditMode ? 'update' : 'store' }}"
                                 class="animate-spin h-5 w-5 text-white"
                                 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-8v8H4z"></path>
                            </svg>
                        </button>

                        <button type="button" @click="showModal = false"
                                class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-100 px-4 py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-500">
                            <i class="fas fa-times"></i> {{ __('Cancel') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div x-show="showFilters" x-transition
         class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <form wire:submit="Filter" class="flex flex-wrap gap-4">

            @if($ShowEmployeeInForm)
                <div class="w-64">
                    <x-searchable-select wire:model.live="filterEmployee" :options="$employeesLookup" :placeholder="__('All Employees')" />
                </div>
            @endif

            <input type="text" wire:model.defer="filterReason" placeholder="{{ __('Filter by Reason') }}"
                   class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 px-3 py-2 rounded">

            <input type="text" wire:model.defer="filterPenalty" placeholder="{{ __('Filter by Penalty') }}"
                   class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 px-3 py-2 rounded">

            <div class="w-48">
                <x-searchable-select wire:model.defer="filterStatus" :options="$violationStatusOptions" :placeholder="__('All Statuses')" />
            </div>

            <div class="w-40">
                <x-date-picker wire:model.live="filterFrom" max-model="filterTo" placeholder="{{ __('From') }}" />
             </div>

             <div class="w-40">
                <x-date-picker wire:model.live="filterTo" min-model="filterFrom" placeholder="{{ __('To') }}" />
             </div>

            <button type="submit"
                    wire:loading.attr="disabled"
                    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-500 flex items-center gap-2">
                <i class="fas fa-search"></i>
                <span>{{ __('Filter') }}</span>
                <i wire:loading wire:target="Filter" class="fas fa-spinner fa-spin"></i>
            </button>

            <button wire:click="resetFilters"
                    type="button"
                    class="text-sm bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-100 hover:bg-gray-400 dark:hover:bg-gray-500 px-4 py-2 rounded">
                <i class="fas fa-times-circle mr-1"></i> {{ __('Reset') }}
            </button>

        </form>
    </div>


    <div class="overflow-x-auto md:shadow md:border border-gray-200 dark:border-gray-600">
        <table class="min-w-full divide-y text-sm divide-gray-200 dark:divide-gray-600 ">
            <thead class="bg-gray-100  text-gray-700 dark:text-gray-100 dark:bg-gray-700">
            <tr class="border border-gray-200 dark:border-gray-600 text-center">
                <th class=" px-3 py-2 whitespace-nowrap">#</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Employee') }}</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Reason') }}</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Date') }}</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Repeat') }}</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Penalty') }}</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Status') }}</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Attachment') }}</th>
                <th class=" px-3 py-2 whitespace-nowrap">{{ __('Actions') }}</th>
            </tr>
            </thead>
            <tbody class="text-gray-800 dark:text-gray-100">
            @forelse ($violations as $violation)
                <tr class="border-b border-gray-200 dark:border-gray-700 border"
                    x-show="
                    (!filterEmployee || filterEmployee == '{{ $violation->employee_id }}') &&
                    (!filterReason || '{{ strtolower($violation->reason) }}'.includes(filterReason.toLowerCase())) &&
                    (!filterPenalty || '{{ strtolower($violation->penalty) }}'.includes(filterPenalty.toLowerCase())) &&
                    (!filterStatus || filterStatus == '{{ $violation->status ?? 'active' }}')
                ">
                    <td class="text-center px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('#') }}">{{ $loop->iteration + ($violations->currentPage() - 1) * $violations->perPage() }}</td>
                    <td class="text-center px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Employee') }}">{{ $violation->employee->name ?? '-' }}</td>
                    <td class="text-center px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Reason') }}">{{ $violation->reason }}</td>
                    <td class="text-center px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Date') }}">{{ $violation->violation_date }}</td>
                    <td class="text-center px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Repeat') }}">{{ $violation->repeat_count }}</td>
                    <td class="text-center px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Penalty') }}">{{ $violation->penalty }}</td>
                    <td class="text-center px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Status') }}">{{ __($violation->status ?? 'active') }}</td>
                    <td class="text-center px-3 py-2 whitespace-nowrap" data-label="{{ __('Attachment') }}">
                        @if($violation->attachment_url)
                            <a href="{{ $violation->attachment_url }}" target="_blank"
                               class="text-blue-600 dark:text-blue-400 underline">
                                <i class="fas fa-eye"></i> {{ __('View') }}
                            </a>
                        @else
                            —
                        @endif
                    </td>
                    <td class="text-center px-3 py-2 whitespace-nowrap flex justify-center gap-2"
                        data-label="{{ __('Actions') }}">

                        <button wire:click="exportSingle({{ $violation->id }})"
                                wire:loading.attr="disabled"
                                class="text-red-600 hover:underline flex items-center gap-1">
                            <i class="fas fa-file-pdf"></i> {{ __('Export') }}
                            <i wire:loading wire:target="exportSingle({{ $violation->id }})"
                               class="fas fa-spinner fa-spin"></i>
                        </button>

                        @can('violations edit')
                            <button wire:click="openModalForEdit({{ $violation->id }})"
                                    class="text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">
                                <i class="fas fa-edit"></i> {{ __('Edit') }}
                            </button>
                        @endcan

                        @can('violations delete')
                            <button @click="confirmDeleteId = {{ $violation->id }}; $wire.confirmDelete({{ $violation->id }})"
                                    class="text-red-600 hover:underline flex items-center gap-1">
                                <i class="fas fa-trash"></i> {{ __('Delete') }}
                            </button>
                        @endcan

                        <a href="{{ route('violations.show', $violation->id) }}"
                           class="text-blue-600 dark:text-blue-400 underline flex items-center gap-1">
                            <i class="fas fa-eye"></i> {{ __('View') }}
                        </a>

                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="text-center py-4 text-gray-500 dark:text-gray-400">
                        {{ __('No violations found.') }}
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

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

    <!-- Confirm Delete Modal -->
    <div x-show="confirmDeleteId" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 p-6 rounded shadow-lg w-full max-w-sm text-center relative">
            <button @click="confirmDeleteId = null"
                    class="absolute top-3 left-3 text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white cursor-pointer"
                    title="{{ __('Cancel') }}">
                <i class="fas fa-times fa-lg"></i>
            </button>

            <h3 class="text-lg font-bold text-red-600 mb-3">{{ __('Confirm Deletion') }}</h3>

            <p class="mb-4 text-gray-700 dark:text-gray-300">
                {{ __('Are you sure you want to delete this violation?') }}
            </p>

            <div class="flex justify-center gap-4">
                <button @click="$wire.deleteConfirmed()"
                        wire:loading.attr="disabled"
                        wire:target="deleteConfirmed"
                        class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 cursor-pointer flex items-center gap-2">
                    <i class="fas fa-trash-alt"></i>
                    <span>{{ __('Yes, Delete') }}</span>
                    <svg wire:loading wire:target="deleteConfirmed" class="animate-spin h-5 w-5 text-white"
                         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-8v8H4z"></path>
                    </svg>
                </button>

                <button @click="confirmDeleteId = null"
                        class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-100 px-4 py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-500 cursor-pointer flex items-center gap-2">
                    <i class="fas fa-times"></i>
                    <span>{{ __('Cancel') }}</span>
                </button>
            </div>
        </div>
    </div>

</div>