@extends('layouts.app')

@section('title', 'Leave Calendar')

@php
use Carbon\Carbon;
@endphp

@section('content')
<div class="p-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h5 class="text-lg font-semibold text-gray-900">Leave Calendar - {{ Carbon::create($year, $month, 1)->format('F Y') }}</h5>
            <div class="flex gap-2">
                <a href="{{ route('leave.index') }}" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-list mr-2"></i> List View
                </a>
                <a href="{{ route('leave.balance') }}" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-chart-pie mr-2"></i> Leave Balance
                </a>
            </div>
        </div>
        <div class="p-6">
            <!-- Filters -->
            <form method="GET" action="{{ route('leave.calendar') }}" class="mb-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="month" class="block text-sm font-medium text-gray-700 mb-2">Month</label>
                        <select name="month" id="month" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            @for($m = 1; $m <= 12; $m++)
                                <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>
                                    {{ Carbon::create(null, $m, 1)->format('F') }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label for="year" class="block text-sm font-medium text-gray-700 mb-2">Year</label>
                        <select name="year" id="year" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            @for($y = date('Y') - 2; $y <= date('Y') + 2; $y++)
                                <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>
                                    {{ $y }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    <div>
                        <label for="department_id" class="block text-sm font-medium text-gray-700 mb-2">Department</label>
                        <select name="department_id" id="department_id" class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            <option value="">All Departments</option>
                            @foreach($departments as $id => $name)
                                <option value="{{ $id }}" {{ $departmentId == $id ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex items-end gap-2">
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <i class="fas fa-filter mr-2"></i> Filter
                        </button>
                        <a href="{{ route('leave.calendar') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <i class="fas fa-times mr-2"></i> Clear
                        </a>
                    </div>
                </div>
            </form>

            <!-- Calendar Grid -->
            <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
                <!-- Calendar Header -->
                <div class="grid grid-cols-7 bg-gray-50">
                    <div class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Sun</div>
                    <div class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Mon</div>
                    <div class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Tue</div>
                    <div class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Wed</div>
                    <div class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Thu</div>
                    <div class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Fri</div>
                    <div class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Sat</div>
                </div>

                <!-- Calendar Days -->
                <div class="grid grid-cols-7 divide-x divide-gray-200">
                    @php
                        $firstDay = Carbon::create($year, $month, 1);
                        $lastDay = Carbon::create($year, $month, 1)->endOfMonth();
                        $daysInMonth = $lastDay->day;
                        $startingDayOfWeek = $firstDay->dayOfWeek;
                        
                        // Group leave requests by date
                        $leavesByDate = [];
                        foreach($leaveRequests as $leave) {
                            $currentDate = $leave->from_date->copy();
                            while($currentDate <= $leave->to_date) {
                                $dateKey = $currentDate->format('Y-m-d');
                                if(!isset($leavesByDate[$dateKey])) {
                                    $leavesByDate[$dateKey] = [];
                                }
                                $leavesByDate[$dateKey][] = $leave;
                                $currentDate->addDay();
                            }
                        }
                    @endphp

                    <!-- Empty cells before first day -->
                    @for($i = 0; $i < $startingDayOfWeek; $i++)
                        <div class="h-24 border-r border-b border-gray-200 bg-gray-50"></div>
                    @endfor

                    <!-- Calendar days -->
                    @for($day = 1; $day <= $daysInMonth; $day++)
                        @php
                            $currentDate = Carbon::create($year, $month, $day);
                            $dateKey = $currentDate->format('Y-m-d');
                            $isToday = $currentDate->isToday();
                            $leavesForDay = $leavesByDate[$dateKey] ?? [];
                        @endphp
                        
                        <div class="h-24 border-r border-b border-gray-200 {{ $isToday ? 'bg-blue-50' : '' }} p-1">
                            <div class="text-sm {{ $isToday ? 'font-bold text-blue-600' : 'text-gray-900' }}">
                                {{ $day }}
                            </div>
                            
                            @if(!empty($leavesForDay))
                                <div class="space-y-1 mt-1">
                                    @foreach($leavesForDay as $leave)
                                        <div class="text-xs p-1 rounded bg-blue-100 text-blue-800 truncate" 
                                             title="{{ $leave->user->full_name }} - {{ $leave->leaveType->name }}">
                                            {{ $leave->user->full_name }}
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endfor

                    <!-- Empty cells after last day -->
                    @php
                        $totalCells = $startingDayOfWeek + $daysInMonth;
                        $remainingCells = 7 - ($totalCells % 7);
                    @endphp
                    @if($remainingCells < 7)
                        @for($i = 0; $i < $remainingCells; $i++)
                            <div class="h-24 border-r border-b border-gray-200 bg-gray-50"></div>
                        @endfor
                    @endif
                </div>
            </div>

            <!-- Legend -->
            <div class="mt-6 flex items-center space-x-6 text-sm">
                <div class="flex items-center">
                    <div class="w-4 h-4 bg-blue-100 rounded mr-2"></div>
                    <span class="text-gray-600">Approved Leave</span>
                </div>
                <div class="flex items-center">
                    <div class="w-4 h-4 bg-blue-50 rounded mr-2 border border-blue-200"></div>
                    <span class="text-gray-600">Today</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Add any interactive features if needed
</script>
@endsection