@extends('layouts.app')

@section('title', 'My Attendance')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <span class="current">My Attendance</span>
    </div>
@endsection

@section('content')
<div class="space-y-6">
    {{-- Header with Month Selector --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">My Attendance</h1>
            <p class="text-sm text-gray-500 mt-1">{{ \Carbon\Carbon::createFromDate($year, $month, 1)->format('F Y') }}</p>
        </div>
        <form method="GET" action="{{ route('my.attendance.history') }}" class="flex items-center gap-3">
            <select name="month" class="form-select text-sm py-1.5 w-36">
                @foreach($months as $m => $label)
                    <option value="{{ $m }}" {{ $month == $m ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            <select name="year" class="form-select text-sm py-1.5 w-24">
                @foreach($years as $y)
                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn-primary py-1.5">View</button>
        </form>
    </div>

    {{-- Summary Cards --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-7 gap-3">
        <div class="card p-3 text-center">
            <div class="font-display text-2xl font-bold text-success-600">{{ $summary['present'] }}</div>
            <div class="text-xxs text-gray-500 mt-0.5">Present</div>
        </div>
        <div class="card p-3 text-center">
            <div class="font-display text-2xl font-bold text-danger-500">{{ $summary['absent'] }}</div>
            <div class="text-xxs text-gray-500 mt-0.5">Absent</div>
        </div>
        <div class="card p-3 text-center">
            <div class="font-display text-2xl font-bold text-warning-600">{{ $summary['half_day'] }}</div>
            <div class="text-xxs text-gray-500 mt-0.5">Half Day</div>
        </div>
        <div class="card p-3 text-center">
            <div class="font-display text-2xl font-bold text-primary-600">{{ $summary['leave'] }}</div>
            <div class="text-xxs text-gray-500 mt-0.5">Leave</div>
        </div>
        <div class="card p-3 text-center">
            <div class="font-display text-2xl font-bold text-orange-500">{{ $summary['late_days'] }}</div>
            <div class="text-xxs text-gray-500 mt-0.5">Late Days</div>
        </div>
        <div class="card p-3 text-center">
            <div class="font-display text-2xl font-bold text-gray-700">{{ $summary['total_hours'] }}h</div>
            <div class="text-xxs text-gray-500 mt-0.5">Total Hours</div>
        </div>
        <div class="card p-3 text-center">
            <div class="font-display text-2xl font-bold text-accent-500">{{ $summary['total_overtime'] }}h</div>
            <div class="text-xxs text-gray-500 mt-0.5">Overtime</div>
        </div>
    </div>

    {{-- Calendar Grid --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">{{ \Carbon\Carbon::createFromDate($year, $month, 1)->format('F Y') }}</h2>
            <div class="flex items-center gap-3 text-xxs">
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-success-500"></span> Present</span>
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-danger-500"></span> Absent</span>
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-warning-500"></span> Leave/Half</span>
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-gray-200"></span> Weekend</span>
            </div>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-7 gap-1">
                @foreach(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as $dayName)
                    <div class="text-xxs font-semibold text-gray-400 text-center py-1.5 uppercase">{{ $dayName }}</div>
                @endforeach

                @for($i = 0; $i < $startOfMonth->dayOfWeek; $i++)
                    <div class="aspect-square"></div>
                @endfor

                @for($day = 1; $day <= $daysInMonth; $day++)
                    @php
                        $dateKey = \Carbon\Carbon::createFromDate($year, $month, $day)->format('Y-m-d');
                        $record = $records->get($dateKey);
                        $bgClass = 'bg-gray-50';
                        $textClass = 'text-gray-600';

                        if ($record) {
                            switch ($record->status) {
                                case 'present':
                                    $bgClass = $record->is_late ? 'bg-orange-100 border border-orange-300' : 'bg-success-100 border border-success-500/30';
                                    $textClass = $record->is_late ? 'text-orange-700' : 'text-success-700';
                                    break;
                                case 'absent':
                                    $bgClass = 'bg-danger-100 border border-danger-500/30';
                                    $textClass = 'text-danger-600';
                                    break;
                                case 'half_day':
                                    $bgClass = 'bg-warning-100 border border-warning-500/30';
                                    $textClass = 'text-warning-700';
                                    break;
                                case 'leave':
                                    $bgClass = 'bg-primary-100 border border-primary-500/30';
                                    $textClass = 'text-primary-700';
                                    break;
                                case 'weekend':
                                case 'holiday':
                                    $bgClass = 'bg-gray-100';
                                    $textClass = 'text-gray-400';
                                    break;
                            }
                        }
                    @endphp
                    <div class="aspect-square rounded-lg {{ $bgClass }} flex items-center justify-center {{ $textClass }} text-sm font-medium"
                         title="{{ $record ? $record->status_label : 'No record' }}">
                        {{ $day }}
                    </div>
                @endfor
            </div>
        </div>
    </div>

    {{-- Records Table --}}
    <div class="card">
        <div class="card-header">
            <h2 class="card-header-title">Daily Records</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Clock In</th>
                        <th>Clock Out</th>
                        <th>Hours</th>
                        <th>Overtime</th>
                        <th>Status</th>
                        <th>Late</th>
                    </tr>
                </thead>
                <tbody>
                    @for($day = 1; $day <= $daysInMonth; $day++)
                        @php
                            $dateObj = \Carbon\Carbon::createFromDate($year, $month, $day);
                            $dateKey = $dateObj->format('Y-m-d');
                            $record = $records->get($dateKey);
                            if ($dateObj->isFuture()) continue;
                        @endphp
                        <tr>
                            <td class="text-sm text-gray-700 font-medium">{{ $dateObj->format('d M, D') }}</td>
                            <td class="text-sm text-gray-700">{{ $record ? $record->formatted_clock_in : '—' }}</td>
                            <td class="text-sm text-gray-700">{{ $record ? $record->formatted_clock_out : '—' }}</td>
                            <td class="text-sm text-gray-700">{{ $record ? $record->formatted_total_hours : '—' }}</td>
                            <td class="text-sm text-gray-700">{{ $record && $record->overtime_hours > 0 ? $record->overtime_hours . 'h' : '—' }}</td>
                            <td>
                                @if($record)
                                    <span class="badge {{ $record->status_badge_class }}"><span class="badge-dot"></span> {{ $record->status_label }}</span>
                                @else
                                    <span class="text-sm text-gray-400">—</span>
                                @endif
                            </td>
                            <td>
                                @if($record && $record->is_late)
                                    <span class="text-sm text-danger-500">{{ $record->late_minutes }}m</span>
                                @else
                                    <span class="text-sm text-gray-400">—</span>
                                @endif
                            </td>
                        </tr>
                    @endfor
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection