@php
    $departmentOptions = $departments->pluck('name', 'id')->toArray();
    $employeeOptions = $employees->pluck('name', 'id')->toArray();
    $hasActiveFilters = filled($filterDepartment) || filled($filterLabel) || filled($filterStatus) || filled($filterStartDate) || filled($filterEndDate) || filled($filterCreatedDate) || filled($filterMinAmount) || filled($filterMaxAmount);
@endphp

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

    @if($status != 'need_action')
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
            <i class="fas fa-cart-shopping mr-2"></i> {{ __('Purchases') }}
        </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 dark:hover:bg-gray-500">
                <i class="fas fa-search"></i> {{ __('Filter') }}
            </button>

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

            @can('purchases create')
                <button @click="isEditMode=false; showModal=true; $wire.setCreate()"
                        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-500">
                    <i class="fas fa-plus-circle"></i> {{ __('Add') }}
                </button>
            @endcan
        </div>
    </div>
    @endif

    <!-- Filters -->
    <div x-show="showFilters" x-transition class="mb-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <div>
            <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Department') }}</label>
            <x-searchable-select wire:model.live="filterDepartment" :options="$departmentOptions" :placeholder="__('All')" />
        </div>
        <div>
            <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Label') }}</label>
            <input type="text" wire:model.defer="filterLabel"
                   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">
        </div>
        <div>
            <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Status') }}</label>
            <x-searchable-select
                wire:model.defer="filterStatus"
                :options="[
                    'pending' => __('Pending'),
                    'approved' => __('Approved'),
                    'rejected' => __('Rejected'),
                    'paid' => __('Paid'),
                    'canceled' => __('Canceled'),
                ]"
                :placeholder="__('All')"
            />
        </div>
        <div>
            <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('From Date') }}</label>
            <x-date-picker wire:model.live="filterStartDate" max-model="filterEndDate" />
        </div>
        <div>
            <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('To Date') }}</label>
            <x-date-picker wire:model.live="filterEndDate" min-model="filterStartDate" />
        </div>
        <div>
            <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Min Amount') }}</label>
            <input type="number" step="0.01" wire:model.defer="filterMinAmount"
                   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">
        </div>
        <div>
            <label class="text-sm text-gray-700 dark:text-gray-300">{{ __('Max Amount') }}</label>
            <input type="number" step="0.01" wire:model.defer="filterMaxAmount"
                   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">
        </div>

        <div class="col-span-full flex gap-2 pt-2">
            <button wire:click="search"
                    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 dark:hover:bg-blue-500">
                <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 dark:hover:bg-gray-400">
                <i class="fas fa-undo"></i> {{ __('Reset') }}
            </button>
        </div>
    </div>

    <!-- Table -->
    <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="text-center">
                <th class="px-4 py-2">#</th>
                <th class="px-4 py-2">{{ __('Employee') }}</th>
                <th class="px-4 py-2">{{ __('Department') }}</th>
                <th class="px-4 py-2">{{ __('Label') }}</th>
                <th class="px-4 py-2">{{ __('Purchase Date') }}</th>
                <th class="px-4 py-2">{{ __('Due Date') }}</th>
                <th class="px-4 py-2">{{ __('Amount') }}</th>
                <th class="px-4 py-2">{{ __('Status') }}</th>
                <th class="px-4 py-2">{{ __('File') }}</th>
                <th class="px-4 py-2">{{ __('Actions') }}</th>
            </tr>
            </thead>
            <tbody class="text-gray-700 dark:text-gray-300">
            @forelse($purchases as $p)
                <tr class="border-t border-gray-200 dark:border-gray-700 text-center">
                    <td class="px-4 py-2" data-label="#">{{ $loop->iteration + ($purchases->currentPage() - 1) * $purchases->perPage() }}</td>
                    <td class="px-4 py-2" data-label="{{ __('Employee') }}">{{ $p->employee->name ?? '—' }}</td>
                    <td class="px-4 py-2" data-label="{{ __('Department') }}">{{ $p->department->name ?? '—' }}</td>
                    <td class="px-4 py-2" data-label="{{ __('Label') }}">{{ $p->label }}</td>
                    <td class="px-4 py-2" data-label="{{ __('Purchase Date') }}">{{ $p->purchase_date }}</td>
                    <td class="px-4 py-2" data-label="{{ __('Due Date') }}">{{ $p->due_date }}</td>
                    <td class="px-4 py-2" data-label="{{ __('Amount') }}">{{ number_format($p->amount,2) }}</td>
                    <td class="px-4 py-2" data-label="{{ __('Status') }}">
                        <span class="inline-block text-white px-2 py-1 rounded text-xs {{
                            match($p->status) {
                                'pending' => 'bg-yellow-500',
                                'approved'=> 'bg-blue-600',
                                'rejected'=> 'bg-red-600',
                                'paid'    => 'bg-green-600',
                                'canceled'=> 'bg-gray-400',
                                default   => 'bg-gray-400'
                            }
                        }}">
                            {{ ucfirst($p->status) }}
                        </span>
                    </td>
                    <td class="px-4 py-2" data-label="{{ __('File') }}">
                        @if($p->file_url)
                            <a href="{{ $p->file_url }}" target="_blank"
                               class="text-blue-600 dark:text-blue-400 underline">{{ __('View') }}</a>
                        @else
                            <span class="text-gray-400 dark:text-gray-500">{{ __('No File') }}</span>
                        @endif
                    </td>
                    <td class="px-4 py-2 flex justify-center gap-2" data-label="{{ __('Actions') }}">
                        @can('purchases edit')
                            <button @click="isEditMode=true; showModal=true; $wire.setEdit({{ $p->id }})"
                                    class="text-blue-600 dark:text-blue-400 hover:underline">
                                <i class="fas fa-edit"></i> {{__("Edit")}}
                            </button>
                        @endcan
                        @can('purchases delete')
                            <button wire:click="confirmDelete({{ $p->id }})"
                                    class="text-red-600 hover:underline">
                                <i class="fas fa-trash"></i>
                            </button>
                        @endcan
                        @can('purchases approve')
                            @if($p->status === 'pending')
                                <button wire:click="markApproved({{ $p->id }})"
                                        class="text-green-600 hover:underline">
                                    <i class="fas fa-check-circle"></i>
                                </button>
                            @endif
                        @endcan
                        @can('purchases pay')
                            @if(in_array($p->status, ['approved']))
                                <button wire:click="markPaid({{ $p->id }})"
                                        class="text-emerald-600 hover:underline">
                                    <i class="fas fa-dollar-sign"></i>
                                </button>
                            @endif
                        @endcan

                            <a  href="{{route('purchases.show', $p->id )}}"
                                    class="text-emerald-600 hover:underline">
                                <i class="fas fa-eye"></i> {{__("View")}}
                            </a>

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

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

    <!-- Modal -->
    <div x-show="showModal" x-transition 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-2xl shadow-xl">
            <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}" class="space-y-4">
                @if (session()->has('message'))
                    <div class="bg-green-100 dark:bg-green-200/10 border border-green-400 dark:border-green-700
                                text-green-700 dark:text-green-300 px-4 py-2 rounded text-sm">
                        <i class="fas fa-check-circle mr-2"></i> {{ session('message') }}
                    </div>
                @endif

                <div class="flex items-center justify-between mb-2 border-b pb-1 border-gray-200 dark:border-gray-600">
                    <h2 class="text-xl font-bold text-gray-700 dark:text-gray-100">
                        <i class="fas fa-cart-shopping mr-2"></i>
                        {{ $isEditMode ? __('Edit Purchase') : __('Add Purchase') }}
                    </h2>
                    <button @click="showModal=false"
                            class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
                        <i class="fas fa-times fa-lg"></i>
                    </button>
                </div>

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

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-800 dark:text-gray-100">


                    <div class="col-span-full">
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Label') }}</label>
                        <input type="text" wire:model.defer="label"
                               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">
                    </div>

                    @if($showEmployeeList)
                        <div class="mb-4">
                            <label for="employee_id" 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-600 text-sm">{{ $message }}</span>
                            @enderror
                        </div>
                    @endif

                    <div>
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Department') }}</label>
                        <x-searchable-select wire:model.defer="department_id" :options="$departmentOptions" :placeholder="__('Choose department')" />
                    </div>

                    <div>
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Amount') }}</label>
                        <input type="number" step="0.01" wire:model.defer="amount"
                               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">
                    </div>

{{--                    <div>--}}
{{--                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Currency') }}</label>--}}
{{--                        <input type="text" maxlength="3" wire:model.defer="currency" placeholder="USD"--}}
{{--                               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">--}}
{{--                    </div>--}}

                    <div>
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Purchase Date') }}</label>
                        <x-date-picker wire:model.defer="purchase_date" max-model="due_date" />
                    </div>

                    <div>
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Due Date') }}</label>
                        <x-date-picker wire:model.defer="due_date" min-model="purchase_date" />
                    </div>

                    <div>
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Status') }}</label>
                        <x-searchable-select
                            wire:model.defer="status"
                            :options="[
                                'pending' => __('Pending'),
                                'approved' => __('Approved'),
                                'rejected' => __('Rejected'),
                                'paid' => __('Paid'),
                                'canceled' => __('Canceled'),
                            ]"
                            :placeholder="__('Select')"
                        />
                    </div>

                    <div>
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('File') }}</label>
                        <input type="file" wire:model="file"
                               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">
                        <svg wire:loading wire:target="file" class="animate-spin h-5 w-5 text-blue-600 dark:text-blue-400" 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>
                        @if($existingFile)
                            <a href="{{ $existingFile }}" target="_blank"
                               class="text-blue-600 dark:text-blue-400 underline mt-1 inline-block">
                                {{ __('View Existing File') }}
                            </a>
                        @endif
                    </div>

                    <div class="col-span-full">
                        <label class="block text-sm mb-1 dark:text-gray-300">{{ __('Comment') }}</label>
                        <textarea wire:model.defer="comment" rows="3"
                                  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>
                    </div>
                </div>

                <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 dark:hover:bg-gray-300 dark:text-black">
                        {{ __('Cancel') }}
                    </button>
                    <button type="submit" wire:loading.attr="disabled" wire:target="{{ $isEditMode ? 'update' : 'store' }}"
                            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-save"></i>
                        <span>{{ $isEditMode ? __('Update') : __('Save') }}</span>
                        <svg wire:loading wire:target="{{ $isEditMode ? 'update' : 'store' }},file"
                             class="animate-spin h-5 w-5 text-white" 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>
                </div>
            </form>
        </div>
    </div>
</div>