@php
    $employeeOptions = $employees->pluck('name', 'id')->toArray();
    $filterEmployeeOptions = $filterEmployees->pluck('name', 'id')->toArray();
    $leaveTypeOptions = $leaveTypes->pluck('name', 'id')->toArray();
    $hasActiveFilters = filled($filter_leave_type) || filled($filter_employee_id) || filled($filter_start_date) || filled($filter_end_date) || filled($filter_resume_date) || filled($filter_within_balance) || filled($filter_min_duration) || filled($filter_has_documents);
@endphp

<div
    x-data="{ showModal: @entangle('showModal'), showFilters: @js($hasActiveFilters) , showApproveModal: false, showRejectModal: false, confirmApproveId: @entangle('confirmApproveId'), confirmRejectId: @entangle('confirmRejectId'), selectedLeave: null, showResultModal: false, resultData: null }"
    x-on:close-modal.window="showModal = false"
    x-on:leave-result.window="resultData = $event.detail;showResultModal = true;"
    x-on:leave-updated.window="setTimeout(() => window.location.reload(), 250)">


    @if($this->status != 'need_action')
        <div class="mb-6 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">
                <i class="fas fa-leaf mr-2"></i> {{ __('Leaves') }}
            </h1>
            <div class="flex gap-2">
                <button @click="showFilters = !showFilters"
                        class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 flex items-center gap-2">
                    <i class="fas fa-search"></i> {{ __('Filter') }}
                </button>
                @can("leaves create")
                    <button @click="$wire.call('resetInput').then(() => { showModal = true; $wire.set('showModal', true); $wire.set('isEditMode', false); })"
                            wire:loading.attr="disabled" wire:target="resetInput"
                            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2">
                        <i class="fas fa-plus-circle"></i> {{ __('Add Leave') }}
                        <svg wire:loading wire:target="resetInput" 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

                @can("leave_types create")
                    <a href="{{ route('leave-types') }}"
                       class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2">
                        <i class="fas fa-plus-circle"></i> {{ __('Leave Types') }}
                    </a>
                @endcan
            </div>
        </div>
        <div x-show="showFilters" x-transition>
            <!-- Filters Form -->
            <form wire:submit.prevent="filter"
                  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 mb-6 items-end">

                @if($ShowEmployeeInForm)
                    <div>
                        <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Employee') }}</label>
                        <x-searchable-select wire:model.live="filter_employee_id" :options="$filterEmployeeOptions" :placeholder="__('All Employees')" />
                    </div>
                @endif

                <div>
                    <label class="text-sm">{{ __('Leave Type') }}</label>
                    <x-searchable-select wire:model.live="filter_leave_type" :options="$leaveTypeOptions" :placeholder="__('Select Leave Type')" />
                </div>

                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Start Date') }}</label>
                    <x-date-picker wire:model.live="filter_start_date" max-model="filter_end_date" />
                </div>
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('End Date') }}</label>
                    <x-date-picker wire:model.live="filter_end_date" min-model="filter_start_date" />
                </div>
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Resume Date') }}</label>
                    <x-date-picker wire:model.live="filter_resume_date" min-model="filter_end_date" />
                </div>
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Within Balance') }}</label>
                    <x-searchable-select
                        wire:model.defer="filter_within_balance"
                        :options="['1' => __('Yes'), '0' => __('No')]"
                        :placeholder="__('All')"
                    />
                </div>
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Minimum Duration') }}</label>
                    <input type="number" min="1" wire:model.defer="filter_min_duration"
                           class="w-full border rounded px-3 py-2 dark:bg-gray-800 dark:text-white dark:border-gray-600">
                </div>
                <div>
                    <label class="text-sm text-gray-600 dark:text-gray-300">{{ __('Has Documents') }}</label>
                    <x-searchable-select
                        wire:model.defer="filter_has_documents"
                        :options="['1' => __('Yes'), '0' => __('No')]"
                        :placeholder="__('All')"
                    />
                </div>
                <div>
                    <div class="col-span-full flex flex-col sm:flex-row gap-2 mt-2">
                        <button type="submit" wire:loading.attr="disabled" wire:target="filter"
                                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2 justify-center">
                            <i class="fas fa-search"></i>
                            <span>{{ __('Search') }}</span>
                            <i class="fas fa-spinner fa-spin" wire:loading wire:target="filter"></i>
                        </button>
                        <button type="button" wire:click="resetFilters" wire:loading.attr="disabled"
                                class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 flex items-center gap-2 justify-center">
                            <i class="fas fa-sync-alt"></i>
                            <span>{{ __('Reset') }}</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    @endif


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

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

    @if ($errors->any())
        <div class="bg-red-100 text-red-700 p-3 rounded mb-4">
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Approve Modal -->
    <div x-show="showApproveModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" x-transition
         style="display: none;">
        <div class="bg-white dark:bg-gray-800 p-6 rounded shadow max-w-sm w-full text-center">
            <h3 class="text-lg font-semibold text-green-600 mb-4">{{ __('Confirm Approval') }}</h3>
            <p class="mb-4 text-gray-700 dark:text-gray-200">
                {{ __('Are you sure you want to approve this leave?') }}
            </p>

            <template x-if="selectedLeave">
                <div class="text-sm mb-4 border rounded p-3 dark:border-gray-600">
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Leave Number') }}</span><span
                            x-text="selectedLeave.number"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Employee') }}</span><span
                            x-text="selectedLeave.employee"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Leave Type') }}</span><span
                            x-text="selectedLeave.type"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Duration') }}</span><span
                            x-text="selectedLeave.duration"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Start Date') }}</span><span
                            x-text="selectedLeave.start"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('End Date') }}</span><span
                            x-text="selectedLeave.end"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Resume Date') }}</span><span
                            x-text="selectedLeave.resume"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Documents') }}</span><a target="_blank"
                                                                                                    :href="'/storage/'+selectedLeave.documents">{{ __('Click here') }}</a>
                    </div>
                </div>
            </template>

            <div class="flex justify-center gap-4">
                <button @click="showApproveModal = false" wire:click="approveLeave(confirmApproveId)"
                        class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
                    <i class="fas fa-check"></i> {{ __('Yes, Approve') }}
                </button>
                <button @click="showApproveModal = false"
                        class="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
                    {{ __('Cancel') }}
                </button>
            </div>
        </div>
    </div>

    <!-- Reject Modal -->
    <div x-show="showRejectModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" x-transition
         style="display: none;">
        <div class="bg-white dark:bg-gray-800 p-6 rounded shadow max-w-md w-full">
            <h3 class="text-lg font-semibold text-red-600 mb-4">{{ __('Confirm Rejection') }}</h3>

            <template x-if="selectedLeave">
                <div class="text-sm mb-3 border rounded p-3 dark:border-gray-600">
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Leave Number') }}</span><span
                            x-text="selectedLeave.number"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Employee') }}</span><span
                            x-text="selectedLeave.employee"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Leave Type') }}</span><span
                            x-text="selectedLeave.type"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Duration') }}</span><span
                            x-text="selectedLeave.duration"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Start Date') }}</span><span
                            x-text="selectedLeave.start"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('End Date') }}</span><span
                            x-text="selectedLeave.end"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Resume Date') }}</span><span
                            x-text="selectedLeave.resume"></span></div>
                    <div class="flex justify-between py-1"><span
                            class="text-gray-600 dark:text-gray-300">{{ __('Documents') }}</span><a target="_blank"
                                                                                                    :href="'/storage/'+selectedLeave.documents">{{ __('Click here') }}</a>
                    </div>
                </div>
            </template>

            <p class="mb-2 text-gray-700 dark:text-gray-200">
                {{ __('Please specify the reason for rejection:') }}
            </p>

            <textarea wire:model.defer="rejection_reason"
                      class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded px-3 py-2 h-24"></textarea>
            @error('rejection_reason')
            <span class="text-red-600 text-sm">{{ $message }}</span>
            @enderror

            <div class="flex justify-end gap-3 mt-4">
                <button @click="showRejectModal = false" wire:click="rejectLeave(confirmRejectId)"
                        class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">
                    <i class="fas fa-times"></i> {{ __('Reject') }}
                </button>
                <button @click="showRejectModal = false"
                        class="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500">
                    {{ __('Cancel') }}
                </button>
            </div>
        </div>
    </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">#</th>
                <th class="px-3 py-2">{{ __('Employee') }}</th>
                <th class="px-3 py-2">{{ __('Leave Type') }}</th>
                <th class="px-3 py-2">{{ __('Pay Rule') }}</th>
                <th class="px-3 py-2">{{ __('Pay %') }}</th>
                <th class="px-3 py-2">{{ __('Leave Number') }}</th>
                <th class="px-3 py-2">{{ __('Duration') }}</th>
                <th class="px-3 py-2">{{ __('Start Date') }}</th>
                <th class="px-3 py-2">{{ __('End Date') }}</th>
                <th class="px-3 py-2">{{ __('Resume Date') }}</th>
                <th class="px-3 py-2">{{ __('Reason') }}</th>
                <th class="px-3 py-2">{{ __('Status') }}</th>
                <th class="px-3 py-2">{{ __('Actions') }}</th>
            </tr>
            </thead>
            <tbody class="text-gray-800 dark:text-gray-100">
            @forelse ($leaves as $leave)
                <tr class="border border-gray-200 dark:border-gray-700 text-center">
                    <td class="px-3 py-2 whitespace-nowrap"
                        data-label="#">{{ $loop->iteration + ($leaves->currentPage() - 1) * $leaves->perPage() }}</td>
                    <td class="px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Employee') }}">{{ $leave->employee->name ?? '-' }}</td>
                    <td class="px-3 py-2">{{ $leave->leaveType->name ?? '-' }}</td>
                    <td class="px-3 py-2">{{ $leave->pay_rule_applied ?? '-' }}</td>
                    <td class="px-3 py-2">{{ $leave->pay_percent_applied !== null ? $leave->pay_percent_applied.'%' : '-' }}</td>
                    <td class="px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Leave Number') }}">{{ $leave->leave_number }}</td>
                    <td class="px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Duration') }}">{{ $leave->duration }}</td>
                    <td class="px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Start Date') }}">{{ $leave->start_date->format('Y-m-d') }}</td>
                    <td class="px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('End Date') }}">{{ $leave->end_date->format('Y-m-d') }}</td>
                    <td class="px-3 py-2 whitespace-nowrap"
                        data-label="{{ __('Resume Date') }}">{{ $leave->resume_date->format('Y-m-d') }}</td>
                    <td class="px-3 py-2 max-w-xs">
                        <div class="truncate" title="{{ $leave->reason ?? '' }}">
                            {{ $leave->reason ?: '-' }}
                        </div>
                    </td>
                    <td class="px-3 py-2 whitespace-nowrap" data-label="{{ __('Status') }}">
                        @if($leave->status === 'approved')
                            <span class="text-green-600 font-semibold">{{ __('Approved') }}</span>
                        @elseif($leave->status === 'manager_approved')
                            <span class="text-yellow-600 font-semibold">{{ __('Manager Approved') }}</span>
                        @elseif($leave->status === 'hr_approved')
                            <span class="text-blue-600 font-semibold">{{ __('HR Approved') }}</span>
                        @elseif($leave->status === 'rejected')
                            <span class="text-red-600 font-semibold">{{ __('Rejected') }}</span>
                        @else
                            <span class="text-gray-600 dark:text-gray-300 font-semibold">{{ __('Pending') }}</span>
                        @endif
                    </td>
                    <td class="text-center px-3 py-2 whitespace-nowrap" data-label="{{ __('Actions') }}">
                        @php
                            $canApprove = $this->canApproveLeave($leave);
                        @endphp
                        @if($canApprove)
                                <button @click="
                                    confirmApproveId = {{ $leave->id }};
                                    selectedLeave = {
                                        id: {{ $leave->id }},
                                        number: @js($leave->leave_number),
                                        employee: @js($leave->employee->name ?? '-'),
                                        type: @js(__('leave.' . ($leave->leaveType->name ?? '')) ?? ($leave->leaveType->name ?? '')),
                                        duration: @js($leave->duration),
                                        start: @js($leave->start_date->format('Y-m-d')),
                                        end: @js($leave->end_date->format('Y-m-d')),
                                        resume: @js($leave->resume_date->format('Y-m-d')),
                                        status: @js($leave->status),
                                        documents: @js($leave->documents)
                                    };
                                    showApproveModal = true;"
                                        class="text-green-600 hover:underline flex items-center gap-1">
                                    <i class="fas fa-check-circle"></i> {{ $leave->status === 'hr_approved' ? __('Final Approve') : __('Approve') }}
                                    <i class="fas fa-spinner fa-spin" wire:loading wire:target="approveLeave"></i>
                                </button>
                                <button @click="
                                    confirmRejectId = {{ $leave->id }};
                                    selectedLeave = {
                                        id: {{ $leave->id }},
                                        number: @js($leave->leave_number),
                                        employee: @js($leave->employee->name ?? '-'),
                                        type: @js(__('leave.' . ($leave->leaveType->name ?? '')) ?? ($leave->leaveType->name ?? '')),
                                        duration: @js($leave->duration),
                                        start: @js($leave->start_date->format('Y-m-d')),
                                        end: @js($leave->end_date->format('Y-m-d')),
                                        resume: @js($leave->resume_date->format('Y-m-d')),
                                        status: @js($leave->status),
                                        documents: @js($leave->documents)
                                    };
                                    showRejectModal = true;"
                                        class="text-red-600 hover:underline flex items-center gap-1">
                                    <i class="fas fa-times-circle"></i> {{ __('Reject') }}
                                    <i class="fas fa-spinner fa-spin" wire:loading wire:target="rejectLeave"></i>
                                </button>
                        @endif

                        @can('leaves edit')
                            @if(!in_array($leave->status, ['approved', 'rejected']))
                            <button
                                @click="showModal = true; $wire.set('showModal', true); $wire.set('isEditMode', true); $wire.set('leave_id', {{ $leave->id }}); $wire.call('loadLeave', {{ $leave->id }})"
                                wire:loading.attr="disabled"
                                class="text-blue-600 hover:underline flex items-center gap-1">
                                <i class="fas fa-edit"></i> {{ __('Edit') }}
                                <svg wire:loading wire:target="loadLeave({{ $leave->id }})"
                                     class="animate-spin h-4 w-4 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"/>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                                </svg>
                            </button>
                            @endif
                        @endcan

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

                        <a href="{{route('leave.details',$leave->id)}}" wire:loading.attr="disabled"
                           class="text-red-600 hover:underline flex items-center gap-1">
                            <i class="fas fa-eye"></i> {{ __('View') }}
                        </a>

                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="12" class="border px-3 py-4 text-gray-500 dark:text-gray-300 text-center">
                        {{ __('No Leaves found.') }}
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
        <div class="mt-4 px-4">
            {{ $leaves->links() }}
        </div>
    </div>

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

            <div class="flex items-center justify-between mb-6 border-b pb-3 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold flex-grow text-start">
                    {{ $isEditMode ? __('Edit Leave') : __('Add Leave') }}
                </h2>
                <button @click="showModal = false; $wire.set('showModal', false)"
                        class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white cursor-pointer">
                    <i class="fas fa-times fa-lg"></i>
                </button>
            </div>

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

                @if($ShowEmployeeInForm)
                    <div class="mb-4">
                        <label class="block font-medium mb-1">{{ __('Employee') }}</label>
                        <x-searchable-select wire:model.defer="employee_id" :options="$employeeOptions" :placeholder="__('Select Employee')" />

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

                <div class="mb-4">
                    <label class="block font-medium mb-1">{{ __('Leave Type') }}</label>
                    <x-searchable-select wire:model.live="leave_type_id" :options="$leaveTypeOptions" :placeholder="__('Select Leave Type')" />
                    @error('leave_type_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror

                    @if(optional($leaveTypes->firstWhere('id', $leave_type_id))->eligibility || optional($leaveTypes->firstWhere('id', $leave_type_id))->notes)
                        <div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative mt-2"
                             role="alert">
                            <strong
                                class="font-bold">{{ optional($leaveTypes->firstWhere('id', $leave_type_id))->eligibility }}</strong>
                            <span class="block sm:inline"><b>{{ __('Note') }} : </b>{{ optional($leaveTypes->firstWhere('id', $leave_type_id))->notes }}</span>
                        </div>
                    @endif
                </div>

                <div class="mb-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="start_date" class="block font-medium mb-1">{{ __('Start Date') }}</label>
                        <x-date-picker id="start_date" wire:model.live="start_date" max-model="end_date" />
                        @error('start_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label for="end_date" class="block font-medium mb-1">{{ __('End Date') }}</label>
                        <x-date-picker id="end_date" wire:model.live="end_date" min-model="start_date" max-model="resume_date" />
                        @error('end_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label for="resume_date" class="block font-medium mb-1">{{ __('Resume Date') }}</label>
                        <x-date-picker id="resume_date" wire:model.defer="resume_date" min-model="end_date" />
                        @error('resume_date') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Days count notice --}}
                @if($this->daysCount)
                    <div class="bg-blue-50 border border-blue-400 text-blue-700 px-4 py-3 rounded" role="alert">
                        @if(!is_null($available_days))
                            <div>{{ __('Available Days') }}: <strong>{{ $available_days }}</strong></div>
                        @endif

                        <strong class="font-bold">{{ __('Duration:') }}</strong>
                        <span
                            class="sm:inline"> {{ $this->daysCount }} {{ __('days (inclusive of start and end dates)') }}</span>
                    </div>
                @endif

                {{-- Conflicts --}}
                @if(count($conflicts))
                    <div class="bg-red-50 border border-red-400 text-red-700 px-4 py-3 rounded mt-2" role="alert">
                        <strong class="font-bold">{{ __('Date conflict!') }}</strong>
                        <div class="mt-1 text-sm">
                            {{ __('Selected dates overlap with previous leaves:') }}
                            <ul class="list-disc ms-5 mt-1">
                                @foreach($conflicts as $c)
                                    <li>
                                        {{ \Carbon\Carbon::make($c['start_date'])->format('Y-m-d') }}
                                        — {{ \Carbon\Carbon::make($c['end_date'])->format('Y-m-d') }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                {{-- Session success --}}
                @if (session()->has('message'))
                    <div class="bg-green-50 border border-green-400 text-green-700 px-4 py-3 rounded" role="alert">
                        {{ session('message') }}
                    </div>
                @endif

                <div class="mb-4">
                    <label for="documents" class="block font-medium mb-1">{{ __('Documents') }}</label>
                    <input id="documents" type="file" wire:model="documents"
                           class="w-full text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-3 py-2"/>
                    @error('documents') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    <div wire:loading wire:target="documents" class="text-blue-600 mt-1 flex items-center gap-2">
                        <i class="fas fa-spinner fa-spin"></i> {{ __('Uploading file...') }}
                    </div>
                    @if ($isEditMode && $existingDocuments)
                        <div class="mt-2">
                            <a href="{{ $existingDocuments }}" target="_blank"
                               class="text-blue-600 underline flex items-center gap-1">
                                <i class="fas fa-eye"></i> {{ __('View existing documents') }}
                            </a>
                        </div>
                    @endif
                </div>

                <div class="mb-4">
                    <label for="reason" class="block font-medium mb-1">{{ __('Reason') }}</label>
                    <textarea wire:model.defer="reason" rows="3"
                              class="w-full text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded px-3 py-2"></textarea>
                    @error('reason') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                </div>

                <div class="flex justify-end gap-3 mt-6">
                    <button type="submit" @disabled(count($conflicts) > 0)
                    wire:loading.attr="disabled"
                            wire:target="{{ $isEditMode ? 'update' : 'store' }}"
                            class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded flex items-center gap-2">
                        <i class="fas fa-save"></i>
                        <span>{{ $isEditMode ? __('Update') : __('Save') }}</span>
                        <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; $wire.set('showModal', false)"
                            class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-white px-6 py-2 rounded flex items-center gap-2">
                        <i class="fas fa-times"></i> {{ __('Cancel') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    @if($confirmingDeletionId)
        <div class="fixed inset-0 bg-black/40 dark:bg-black/70 flex items-center justify-center z-50">
            <div class="bg-white dark:bg-gray-800 text-center p-6 rounded shadow-lg w-full max-w-sm relative">
                <button wire:click="$set('confirmingDeletionId', null)"
                        class="absolute top-3 left-3 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white cursor-pointer">
                    <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 leave?') }}
                </p>

                <div class="flex justify-center gap-4">
                    <button wire:click="deleteConfirmed" wire:loading.attr="disabled"
                            class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded flex items-center gap-2">
                        <i class="fas fa-trash-alt"></i> {{ __('Yes, Delete') }}
                        <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"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                        </svg>
                    </button>

                    <button wire:click="$set('confirmingDeletionId', null)"
                            class="bg-gray-300 hover:bg-gray-400 text-gray-800 dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white px-4 py-2 rounded flex items-center gap-2">
                        <i class="fas fa-times"></i> {{ __('Cancel') }}
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>