@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4">

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 text-sm font-semibold">
            <i class="fa-solid fa-circle-check mr-1"></i> {{ session('success') }}
        </div>
    @endif

    <div class="bg-white shadow-sm border border-gray-200">
        <!-- Header -->
        <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl">
            <span><i class="fa-solid fa-calendar-days mr-2"></i>List of Holidays</span>
            <a href="{{ route('holidays.create') }}" class="bg-white text-cyan-600 text-xs font-bold px-4 py-1 rounded shadow hover:bg-orange-50 transition">
                <i class="fa-solid fa-plus mr-1"></i>Add Holiday
            </a>
        </div>

        <div class="overflow-x-auto p-3">
            <table class="w-full border-collapse text-xs">
                <thead>
                    <tr class="bg-[#ff7043] text-white text-left">
                        <th class="border border-gray-300 px-3 py-2 w-10 text-center">#</th>
                        <th class="border border-gray-300 px-3 py-2">Holiday Name</th>
                        <th class="border border-gray-300 px-3 py-2">Date</th>
                        <th class="border border-gray-300 px-3 py-2">Type</th>
                        <th class="border border-gray-300 px-3 py-2">Include Weekly Off</th>
                        <th class="border border-gray-300 px-3 py-2">Applies To</th>
                        <th class="border border-gray-300 px-3 py-2 text-center w-24">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($holidays as $i => $holiday)
                    <tr class="hover:bg-orange-50 border-b border-gray-200">
                        <td class="border border-gray-300 px-3 py-2 text-center text-gray-500">{{ $i + 1 }}</td>
                        <td class="border border-gray-300 px-3 py-2 font-bold text-[#e64a19]">{{ $holiday->holiday_name }}</td>
                        <td class="border border-gray-300 px-3 py-2">{{ $holiday->holiday_date->format('d/m/Y') }}</td>
                        <td class="border border-gray-300 px-3 py-2">
                            <span class="px-2 py-0.5 rounded text-white text-[10px] font-bold {{ $holiday->holiday_type === 'Full Day' ? 'bg-green-500' : 'bg-blue-400' }}">
                                {{ $holiday->holiday_type }}
                            </span>
                        </td>
                        <td class="border border-gray-300 px-3 py-2 font-bold">
                            {{ $holiday->include_weekly_off ? 'Yes' : 'No' }}
                        </td>
                        <td class="border border-gray-300 px-3 py-2 capitalize text-gray-600">
                            {{ ucwords(str_replace('_', ' ', $holiday->selection_type)) }}
                        </td>
                        <td class="border border-gray-300 px-3 py-2 text-center space-x-2">
                            <a href="{{ route('holidays.edit', $holiday->id) }}" class="text-blue-500 hover:text-blue-700" title="Edit">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                            <form action="{{ route('holidays.destroy', $holiday->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Delete this holiday?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-700" title="Delete">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-4 py-6 text-center text-gray-400 font-bold">No holidays found. Click "Add Holiday" to create one.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="px-3 pb-4 flex justify-center">
            <a href="{{ route('admin.dashboard') }}" class="bg-[#dc3545] hover:bg-[#c82333] text-white px-6 py-1.5 rounded shadow text-sm font-semibold transition">Close</a>
        </div>
    </div>
</div>
@endsection