@extends('layouts.app')

@section('title', \App\Helpers\TranslationHelper::transFromDatabase('Official Holidays', __('Official Holidays')))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8" x-data="{ addModalOpen: false, editModalId: null }">
    <div class="max-w-7xl mx-auto">
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">{{ \App\Helpers\TranslationHelper::transFromDatabase('Official Holidays', __('Official Holidays')) }}</h1>
                    <p class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Manage official holidays for the facility', __('Manage official holidays for the facility')) }}</p>
                </div>
                <button type="button" @click="addModalOpen = true" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105">
                    <i class="fas fa-plus ml-2"></i>
                    <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Add Holiday', __('Add Holiday')) }}</span>
                </button>
            </div>

            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif
        </div>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                        <tr>
                            <th class="px-6 py-4 text-right font-semibold text-sm">#</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Name', __('Name')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Start Date', __('Start Date')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('End Date', __('End Date')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Type', __('Type')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Status', __('Status')) }}</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Actions', __('Actions')) }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($holidays as $holiday)
                        <tr class="hover:bg-blue-50 transition-colors duration-150 border-b border-gray-100">
                            <td class="px-6 py-4 text-black font-medium">{{ ($holidays->currentPage() - 1) * $holidays->perPage() + $loop->iteration }}</td>
                            <td class="px-6 py-4 font-semibold text-black">{{ $holiday->name }}</td>
                            <td class="px-6 py-4 text-black">{{ $holiday->start_date->format('Y-m-d') }}</td>
                            <td class="px-6 py-4 text-black">{{ $holiday->end_date->format('Y-m-d') }}</td>
                            <td class="px-6 py-4 text-black">
                                {{ \App\Helpers\TranslationHelper::transFromDatabase($holiday->type, __($holiday->type)) }}
                            </td>
                            <td class="px-6 py-4">
                                @if($holiday->active)
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700">
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Active', __('Active')) }}
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-700">
                                        {{ \App\Helpers\TranslationHelper::transFromDatabase('Inactive', __('Inactive')) }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <button type="button" @click="editModalId = {{ $holiday->id }}" class="inline-flex items-center px-2 py-1 rounded-lg bg-amber-100 text-amber-600 hover:bg-amber-200 transition-all duration-150 text-xs font-medium whitespace-nowrap">
                                        <i class="fas fa-edit mr-1"></i>
                                        <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Edit', __('Edit')) }}</span>
                                    </button>
                                    
                                    <form action="{{ route('healthcare.settings.holidays.destroy', $holiday) }}" method="POST" class="inline" onsubmit="return confirm('{{ \App\Helpers\TranslationHelper::transFromDatabase('Are you sure?', __('Are you sure?')) }}');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="inline-flex items-center px-2 py-1 rounded-lg bg-red-100 text-red-600 hover:bg-red-200 transition-all duration-150 text-xs font-medium whitespace-nowrap">
                                            <i class="fas fa-trash mr-1"></i>
                                            <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Delete', __('Delete')) }}</span>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center justify-center">
                                    <i class="fas fa-calendar-times text-black text-4xl mb-3"></i>
                                    <p class="text-black font-medium">{{ \App\Helpers\TranslationHelper::transFromDatabase('No holidays found', __('No holidays found')) }}</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-6">
            {{ $holidays->links() }}
        </div>
    </div>

    <!-- Modals Overlay -->
    <div x-show="addModalOpen || editModalId !== null" 
         class="fixed inset-0 z-[9999] overflow-y-auto" 
         x-cloak>
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="addModalOpen || editModalId !== null" 
                 @click="addModalOpen = false; editModalId = null"
                 x-transition:enter="ease-out duration-300" 
                 x-transition:enter-start="opacity-0" 
                 x-transition:enter-end="opacity-100" 
                 x-transition:leave="ease-in duration-200" 
                 x-transition:leave-start="opacity-100" 
                 x-transition:leave-end="opacity-0" 
                 class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <!-- Add Modal Content -->
            <div x-show="addModalOpen" 
                 x-transition:enter="ease-out duration-300" 
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
                 x-transition:leave="ease-in duration-200" 
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                 class="inline-block align-middle bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
                 @click.away="addModalOpen = false">
                <form action="{{ route('healthcare.settings.holidays.store') }}" method="POST">
                    @csrf
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="flex justify-between items-center mb-4 border-b pb-2">
                            <h3 class="text-lg leading-6 font-bold text-black">
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('Add New Holiday', __('إضافة إجازة جديدة')) }}
                            </h3>
                            <button type="button" @click="addModalOpen = false" class="text-black hover:text-black">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Holiday Name', __('اسم الإجازة')) }}</label>
                                <input type="text" name="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Start Date', __('تاريخ البدء')) }}</label>
                                    <input type="date" name="start_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('End Date', __('تاريخ الانتهاء')) }}</label>
                                    <input type="date" name="end_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Type', __('النوع')) }}</label>
                                <select name="type" class="select2 mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                                    <option value="national">{{ \App\Helpers\TranslationHelper::transFromDatabase('National', __('وطنية')) }}</option>
                                    <option value="religious">{{ \App\Helpers\TranslationHelper::transFromDatabase('Religious', __('دينية')) }}</option>
                                    <option value="other">{{ \App\Helpers\TranslationHelper::transFromDatabase('Other', __('أخرى')) }}</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Notes', __('ملاحظات')) }}</label>
                                <textarea name="notes" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Save', __('حفظ')) }}
                        </button>
                        <button type="button" @click="addModalOpen = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-black hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Cancel', __('إلغاء')) }}
                        </button>
                    </div>
                </form>
            </div>

            <!-- Edit Modal Contents -->
            @foreach($holidays as $holiday)
            <div x-show="editModalId === {{ $holiday->id }}" 
                 x-transition:enter="ease-out duration-300" 
                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
                 x-transition:leave="ease-in duration-200" 
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                 class="inline-block align-middle bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
                 @click.away="editModalId = null">
                <form action="{{ route('healthcare.settings.holidays.update', $holiday) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="flex justify-between items-center mb-4 border-b pb-2">
                            <h3 class="text-lg leading-6 font-bold text-black">
                                {{ \App\Helpers\TranslationHelper::transFromDatabase('Edit Holiday', __('تعديل الإجازة')) }}
                            </h3>
                            <button type="button" @click="editModalId = null" class="text-black hover:text-black">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Holiday Name', __('اسم الإجازة')) }}</label>
                                <input type="text" name="name" value="{{ $holiday->name }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Start Date', __('تاريخ البدء')) }}</label>
                                    <input type="date" name="start_date" value="{{ $holiday->start_date->format('Y-m-d') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('End Date', __('تاريخ الانتهاء')) }}</label>
                                    <input type="date" name="end_date" value="{{ $holiday->end_date->format('Y-m-d') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Type', __('النوع')) }}</label>
                                <select name="type" class="select2 mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" required>
                                    <option value="national" {{ $holiday->type == 'national' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('National', __('وطنية')) }}</option>
                                    <option value="religious" {{ $holiday->type == 'religious' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('Religious', __('دينية')) }}</option>
                                    <option value="other" {{ $holiday->type == 'other' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('Other', __('أخرى')) }}</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Notes', __('ملاحظات')) }}</label>
                                <textarea name="notes" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">{{ $holiday->notes }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Update', __('تحديث')) }}
                        </button>
                        <button type="button" @click="editModalId = null" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-black hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                            {{ \App\Helpers\TranslationHelper::transFromDatabase('Cancel', __('إلغاء')) }}
                        </button>
                    </div>
                </form>
            </div>
            @endforeach
        </div>
    </div>
</div>

<style>
    [x-cloak] { display: none !important; }
</style>
@endsection