@extends('layouts.app')

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

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('leave.requests') }}">Leave</a>
        <span class="separator">/</span>
        <span class="current">Calendar</span>
    </div>
@endsection

@section('content')
<div class="space-y-5 animate-fade-up">

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Leave Calendar</h1>
            <p class="text-sm text-gray-500 mt-1">{{ $startDate->format('F Y') }} — Team leave overview</p>
        </div>
    </div>

    {{-- Navigation + Filters --}}
    <div class="card">
        <div class="card-body">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div class="flex items-center gap-2">
                    @php
                        $prevMonth = $startDate->copy()->subMonth();
                        $nextMonth = $startDate->copy()->addMonth();
                    @endphp
                    <a href="{{ route('leave.calendar', ['month' => $prevMonth->month, 'year' => $prevMonth->year, 'department_id' => $departmentId]) }}"
                       class="btn-icon">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                    </a>
                    <span class="font-display text-lg font-semibold text-gray-800 min-w-[160px] text-center">
                        {{ $startDate->format('F Y') }}
                    </span>
                    <a href="{{ route('leave.calendar', ['month' => $nextMonth->month, 'year' => $nextMonth->year, 'department_id' => $departmentId]) }}"
                       class="btn-icon">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                    </a>
                    <a href="{{ route('leave.calendar') }}" class="btn-ghost ml-2">Today</a>
                </div>

                <form method="GET" action="{{ route('leave.calendar') }}" class="flex items-center gap-2">
                    <input type="hidden" name="month" value="{{ $month }}">
                    <input type="hidden" name="year" value="{{ $year }}">
                    <select name="department_id" class="form-select w-auto" onchange="this.form.submit()">
                        <option value="">All Departments</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ $departmentId == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                        @endforeach
                    </select>
                </form>
            </div>
        </div>
    </div>

    {{-- Legend --}}
    <div class="flex flex-wrap items-center gap-4 px-1">
        @foreach($leaveTypes as $type)
            <div class="flex items-center gap-1.5">
                <div class="w-3 h-3 rounded-sm" style="background-color: {{ $type->color }}"></div>
                <span class="text-xs text-gray-500">{{ $type->name }}</span>
            </div>
        @endforeach
    </div>

    {{-- Calendar Grid --}}
    <div class="card overflow-hidden">
        {{-- Day headers --}}
        <div class="grid grid-cols-7 bg-gray-50 border-b border-gray-200">
            @foreach(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as $dayName)
                <div class="px-2 py-2.5 text-center text-xxs font-semibold text-gray-500 uppercase tracking-wider">{{ $dayName }}</div>
            @endforeach
        </div>

        {{-- Calendar cells --}}
        <div class="grid grid-cols-7">
            {{-- Empty cells for days before month starts --}}
            @for($i = 0; $i < $startDate->dayOfWeek; $i++)
                <div class="min-h-[80px] md:min-h-[100px] border-b border-r border-gray-100 bg-gray-50/50"></div>
            @endfor

            {{-- Actual days --}}
            @foreach($calendarData as $day => $leaves)
                @php
                    $date = Carbon\Carbon::create($year, $month, $day);
                    $isToday = $date->isToday();
                    $isWeekend = in_array($date->dayOfWeek, [5, 6]); // Fri, Sat for Oman
                @endphp
                <div class="min-h-[80px] md:min-h-[100px] border-b border-r border-gray-100 p-1.5 {{ $isWeekend ? 'bg-gray-50/70' : '' }} {{ $isToday ? 'bg-primary-50/30' : '' }}">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-xs font-medium {{ $isToday ? 'bg-primary-600 text-white w-6 h-6 rounded-full flex items-center justify-center' : 'text-gray-600' }}">
                            {{ $day }}
                        </span>
                        @if(count($leaves) > 0)
                            <span class="text-xxs text-gray-400">{{ count($leaves) }}</span>
                        @endif
                    </div>
                    <div class="space-y-0.5">
                        @foreach(array_slice($leaves, 0, 3) as $leave)
                            <div class="text-xxs rounded px-1 py-0.5 truncate text-white"
                                 style="background-color: {{ $leave->leaveType?->color ?? "#64748B" }}"
                                 title="{{ $leave->employee->first_name }} {{ $leave->employee->last_name }} — {{ $leave->leaveType?->name ?? "Unknown" }}">
                                {{ $leave->employee->first_name }}
                            </div>
                        @endforeach
                        @if(count($leaves) > 3)
                            <div class="text-xxs text-gray-400 px-1">+{{ count($leaves) - 3 }} more</div>
                        @endif
                    </div>
                </div>
            @endforeach

            {{-- Empty cells for remaining --}}
            @php
                $totalCells = $startDate->dayOfWeek + $endDate->day;
                $remainingCells = (7 - ($totalCells % 7)) % 7;
            @endphp
            @for($i = 0; $i < $remainingCells; $i++)
                <div class="min-h-[80px] md:min-h-[100px] border-b border-r border-gray-100 bg-gray-50/50"></div>
            @endfor
        </div>
    </div>
</div>
@endsection