@extends('layouts.app')
@section('title', 'My Attendance')
@section('page-title', 'My Attendance')

@section('content')
<div class="space-y-6">

    {{-- Month Selector --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
        <form method="GET" class="flex items-center gap-4">
            <label class="text-sm font-medium text-gray-700">Month:</label>
            <input type="month" name="month" value="{{ $month }}"
                   class="border border-gray-300 rounded-lg px-3 py-2 text-sm" onchange="this.form.submit()">
            <div class="flex gap-2 ml-auto">
                <a href="{{ route('attendance.index', ['month' => \Carbon\Carbon::parse($month)->subMonth()->format('Y-m')]) }}"
                   class="text-sm text-gray-500 hover:text-gray-700 px-2 py-1"><i class="fas fa-chevron-left"></i> Prev</a>
                <a href="{{ route('attendance.index', ['month' => \Carbon\Carbon::parse($month)->addMonth()->format('Y-m')]) }}"
                   class="text-sm text-gray-500 hover:text-gray-700 px-2 py-1">Next <i class="fas fa-chevron-right"></i></a>
            </div>
        </form>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <div class="flex items-center justify-between">
                <p class="text-xs text-gray-500 uppercase font-medium">Attendance Rate</p>
                <div class="w-8 h-8 rounded-full flex items-center justify-center
                    {{ $stats['percentage'] >= 90 ? 'bg-green-50' : ($stats['percentage'] >= 75 ? 'bg-yellow-50' : 'bg-red-50') }}">
                    <i class="fas fa-chart-line text-xs
                        {{ $stats['percentage'] >= 90 ? 'text-green-500' : ($stats['percentage'] >= 75 ? 'text-yellow-500' : 'text-red-500') }}"></i>
                </div>
            </div>
            <p class="text-2xl font-bold mt-1
                {{ $stats['percentage'] >= 90 ? 'text-green-600' : ($stats['percentage'] >= 75 ? 'text-yellow-600' : 'text-red-600') }}">
                {{ $stats['percentage'] }}%
            </p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Present</p>
            <p class="text-2xl font-bold text-green-600 mt-1">{{ $stats['present'] }}</p>
            <p class="text-xs text-gray-400">of {{ $stats['total'] }} days</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Absent</p>
            <p class="text-2xl font-bold text-red-600 mt-1">{{ $stats['absent'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Late / Half Day</p>
            <p class="text-2xl font-bold text-yellow-600 mt-1">{{ $stats['late'] + $stats['half_day'] }}</p>
        </div>
    </div>

    {{-- Calendar View --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h3 class="font-semibold text-gray-800">
                <i class="fas fa-calendar-alt mr-2 text-gray-400"></i>
                {{ \Carbon\Carbon::parse($month)->format('F Y') }}
            </h3>
        </div>
        <div class="p-4">
            {{-- Day headers --}}
            <div class="grid grid-cols-7 gap-1 mb-1">
                @foreach(['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] as $day)
                <div class="text-center text-xs font-semibold text-gray-500 py-2">{{ $day }}</div>
                @endforeach
            </div>

            {{-- Calendar grid --}}
            <div class="grid grid-cols-7 gap-1">
                @php
                    $firstDay = $startDate->copy()->startOfMonth();
                    $lastDay = $startDate->copy()->endOfMonth();
                    $startPadding = $firstDay->dayOfWeek; // 0=Sun
                @endphp

                {{-- Empty cells for padding --}}
                @for($i = 0; $i < $startPadding; $i++)
                <div class="aspect-square"></div>
                @endfor

                {{-- Day cells --}}
                @for($day = 1; $day <= $lastDay->day; $day++)
                @php
                    $dateStr = $startDate->format('Y-m') . '-' . str_pad($day, 2, '0', STR_PAD_LEFT);
                    $dateObj = \Carbon\Carbon::parse($dateStr);
                    $attendance = $attendances->get($dateStr);
                    $isSunday = $dateObj->isSunday();
                    $isFuture = $dateObj->isFuture();
                    $isToday = $dateObj->isToday();

                    $bgClass = 'bg-gray-50 text-gray-400'; // default (no data)
                    $icon = '';

                    if ($isSunday) {
                        $bgClass = 'bg-gray-100 text-gray-300';
                    } elseif ($isFuture) {
                        $bgClass = 'bg-gray-50 text-gray-300';
                    } elseif ($attendance) {
                        $bgClass = match($attendance->status) {
                            'present' => 'bg-green-50 text-green-700 ring-1 ring-green-200',
                            'absent' => 'bg-red-50 text-red-700 ring-1 ring-red-200',
                            'late' => 'bg-yellow-50 text-yellow-700 ring-1 ring-yellow-200',
                            'half_day' => 'bg-orange-50 text-orange-700 ring-1 ring-orange-200',
                            'excused' => 'bg-blue-50 text-blue-700 ring-1 ring-blue-200',
                            default => 'bg-gray-50 text-gray-400',
                        };
                        $icon = match($attendance->status) {
                            'present' => '✅',
                            'absent' => '❌',
                            'late' => '⏰',
                            'half_day' => '🕐',
                            'excused' => '📋',
                            default => '',
                        };
                    }
                @endphp
                <div class="aspect-square rounded-lg {{ $bgClass }} {{ $isToday ? 'ring-2 ring-primary-500' : '' }} flex flex-col items-center justify-center text-xs relative group cursor-default"
                     title="{{ $attendance ? ucfirst($attendance->status) . ($attendance->remarks ? ': '.$attendance->remarks : '') : ($isSunday ? 'Sunday' : ($isFuture ? '' : 'No record')) }}">
                    <span class="font-semibold {{ $isToday ? 'text-primary-700' : '' }}">{{ $day }}</span>
                    @if($icon)
                    <span class="text-[10px] leading-none mt-0.5">{{ $icon }}</span>
                    @endif
                    @if($isSunday && !$isFuture)
                    <span class="text-[8px] leading-none mt-0.5">OFF</span>
                    @endif
                </div>
                @endfor
            </div>
        </div>

        {{-- Legend --}}
        <div class="px-6 py-3 border-t border-gray-100 bg-gray-50/30 flex flex-wrap gap-4 text-xs text-gray-600">
            <span class="flex items-center gap-1">✅ Present</span>
            <span class="flex items-center gap-1">❌ Absent</span>
            <span class="flex items-center gap-1">⏰ Late</span>
            <span class="flex items-center gap-1">🕐 Half Day</span>
            <span class="flex items-center gap-1">📋 Excused</span>
        </div>
    </div>

    {{-- Daily Log --}}
    @if($attendances->isNotEmpty())
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-list mr-2 text-gray-400"></i>Daily Log</h3>
        </div>
        <div class="divide-y divide-gray-50">
            @foreach($attendances->sortByDesc(fn($a) => $a->date) as $a)
            @php
                $statusColors = [
                    'present' => 'bg-green-100 text-green-700',
                    'absent' => 'bg-red-100 text-red-700',
                    'late' => 'bg-yellow-100 text-yellow-700',
                    'half_day' => 'bg-orange-100 text-orange-700',
                    'excused' => 'bg-blue-100 text-blue-700',
                ];
            @endphp
            <div class="px-6 py-3 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-700 w-24">{{ $a->date->format('D, d M') }}</span>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold {{ $statusColors[$a->status] ?? 'bg-gray-100 text-gray-700' }}">
                        {{ ucfirst($a->status) }}
                    </span>
                </div>
                @if($a->remarks)
                <span class="text-xs text-gray-400 italic">{{ $a->remarks }}</span>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection