@extends('admin.layout')

@section('content')
<div class="page-header">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 page-title">Holidays</h1>
        <p class="text-gray-600 mt-1">Manage holiday schedules and special dates</p>
    </div>
    <a href="{{ route('holidays.create') }}" style="background-color: #2563eb;" class="inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
        <svg class="w-5 h-5 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path>
        </svg>
        Create Holiday
    </a>
</div>

@if(session('success'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg shadow-sm">
        <div class="flex items-start p-4">
            <svg class="w-5 h-5 mr-3 mt-0.5" style="fill: #10b981;" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <p class="text-green-800 font-medium">{{ session('success') }}</p>
        </div>
    </div>
@endif

{{-- Filter Form --}}
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="px-6 py-4">
        <h2 class="text-xl font-bold text-white flex items-center">
            <svg class="w-6 h-6 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd"></path>
            </svg>
            Filter Holidays
        </h2>
    </div>

    <form method="GET" action="{{ route('holidays.index') }}" class="p-6">
        <div class="flex items-center gap-4">
            <div class="flex-1">
                <label for="filter" class="block text-sm font-medium text-gray-700 mb-2">Display</label>
                <select name="filter" id="filter" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" onchange="this.form.submit()">
                    <option value="upcoming" {{ $filter === 'upcoming' ? 'selected' : '' }}>Upcoming Holidays (from last week onwards)</option>
                    <option value="all" {{ $filter === 'all' ? 'selected' : '' }}>All Holidays</option>
                </select>
            </div>
        </div>
    </form>
</div>

{{-- Results Count --}}
<div class="mb-4 flex items-center justify-between">
    <p class="text-sm text-gray-600">
        Showing <span class="font-semibold text-gray-900">{{ $holidays->count() }}</span>
        @if($filter === 'upcoming')
            upcoming holiday(s)
        @else
            holiday(s)
        @endif
    </p>
</div>

{{-- Holidays Table --}}
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <div class="overflow-x-auto table-container">
        <table class="w-full">
            <thead style="background-color: #f9fafb;">
                <tr>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Title</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Start Date</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">End Date</th>
                    <th class="px-6 py-4 text-center text-sm font-semibold text-gray-700">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($holidays as $holiday)
                <tr class="hover:bg-gray-50 border-b border-gray-100 transition">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            @if($holiday->emoji)
                                <span class="text-3xl mr-3">{{ $holiday->emoji }}</span>
                            @else
                                <div class="flex-shrink-0 h-10 w-10 rounded-lg flex items-center justify-center mr-3" style="background-color: #f59e0b;">
                                    <svg class="w-6 h-6" style="fill: #ffffff;" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            @endif
                            <div>
                                <p class="text-sm font-semibold text-gray-900">{{ $holiday->title }}</p>
                                @php
                                    $startDate = \Carbon\Carbon::parse($holiday->start_date);
                                    $endDate = \Carbon\Carbon::parse($holiday->end_date);
                                    $now = now();
                                    $isPast = $endDate->lt($now);
                                    $isActive = $startDate->lte($now) && $endDate->gte($now);
                                    $isUpcoming = $startDate->gt($now);
                                @endphp
                                @if($isPast)
                                    <span class="inline-block px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-600 mt-1">Past</span>
                                @elseif($isActive)
                                    <span class="inline-block px-2 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 mt-1">Active Now</span>
                                @elseif($isUpcoming)
                                    <span class="inline-block px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 mt-1">Upcoming</span>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm">
                        <div class="flex items-center text-gray-700">
                            <svg class="w-4 h-4 mr-2" style="fill: #10b981;" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                            </svg>
                            <div>
                                <span class="font-medium">{{ $holiday->start_date->format('M d, Y') }}</span>
                                <span class="text-gray-500 block text-xs">{{ $holiday->start_date->format('g:i A T') }}</span>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm">
                        <div class="flex items-center text-gray-700">
                            <svg class="w-4 h-4 mr-2" style="fill: #ef4444;" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                            </svg>
                            <div>
                                <span class="font-medium">{{ $holiday->end_date->format('M d, Y') }}</span>
                                <span class="text-gray-500 block text-xs">{{ $holiday->end_date->format('g:i A T') }}</span>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <div class="flex items-center justify-center gap-3">
                            {{-- Edit Button --}}
                            <a href="{{ route('holidays.edit', $holiday) }}" style="background-color: #3b82f6;" class="inline-flex items-center px-3 py-2 rounded-lg text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                                </svg>
                                Edit
                            </a>

                            {{-- Delete Button --}}
                            <form action="{{ route('holidays.destroy', $holiday) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this holiday? This action cannot be undone.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" style="background-color: #ef4444;" class="inline-flex items-center px-3 py-2 rounded-lg text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                    <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                    </svg>
                                    Delete
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-16 text-center">
                        <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                        </svg>
                        <p class="text-gray-500 text-lg font-medium">
                            @if($filter === 'upcoming')
                                No upcoming holidays found
                            @else
                                No holidays found
                            @endif
                        </p>
                        <p class="text-gray-400 text-sm mt-1">
                            @if($filter === 'upcoming')
                                Try viewing <a href="{{ route('holidays.index', ['filter' => 'all']) }}" class="text-blue-600 hover:underline font-medium">all holidays</a> or <a href="{{ route('holidays.create') }}" class="text-blue-600 hover:underline font-medium">create a new one</a>
                            @else
                                Get started by <a href="{{ route('holidays.create') }}" class="text-blue-600 hover:underline font-medium">adding your first holiday</a>
                            @endif
                        </p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection