@extends('layouts.app')

@section('title', $employee->full_name . ' — Attendance History')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('attendance.dashboard') }}">Attendance</a>
        <span class="separator">/</span>
        <span class="current">{{ $employee->full_name }}</span>
    </div>
@endsection

@section('content')
<div class="space-y-6">
    {{-- Employee Header --}}
    <div class="card">
        <div class="card-body">
            <div class="flex items-center gap-4">
                <div class="avatar avatar-lg {{ \App\Helpers\AvatarHelper::gradient($employee->first_name) }}">
                    @if($employee->profile_photo)
                        <img src="{{ Storage::url($employee->profile_photo) }}" class="w-full h-full rounded-full object-cover" alt="">
                    @else
                        {{ strtoupper(substr($employee->first_name, 0, 1) . substr($employee->last_name, 0, 1)) }}
                    @endif
                </div>
                <div>
                    <h1 class="font-display text-xl font-semibold text-gray-900">{{ $employee->full_name }}</h1>
                    <p class="text-sm text-gray-500">{{ $employee->employee_code }} · {{ $employee->department?->name ?? 'No Department' }} · {{ $employee->designation?->name ?? '' }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Month/Year Selector --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <form method="GET" action="{{ route('attendance.employee', $employee->id) }}" 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>
        <a href="{{ route('attendance.export', ['month' => $month, 'year' => $year]) }}" class="btn-secondary">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export
        </a>
    </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') }} Calendar</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>
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-orange-400"></span> Late</span>
            </div>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-7 gap-1">
                {{-- Day headers --}}
                @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

                {{-- Empty cells for start of month --}}
                @for($i = 0; $i < $startOfMonth->dayOfWeek; $i++)
                    <div class="aspect-square"></div>
                @endfor

                {{-- Day cells --}}
                @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';
                        $dotClass = '';

                        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 relative cursor-default"
                         title="{{ $record ? $record->status_label . ($record->is_late ? ' (Late)' : '') : 'No record' }}">
                        {{ $day }}
                    </div>
                @endfor
            </div>
        </div>
    </div>

    {{-- Detailed 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>
                        <th>Source</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>
                                @if($record && $record->clock_in)
                                    <span class="text-sm text-gray-700">{{ $record->formatted_clock_in }}</span>
                                @else
                                    <span class="text-sm text-gray-400">—</span>
                                @endif
                            </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 font-medium">{{ $record->late_minutes }}m</span>
                                @else
                                    <span class="text-sm text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="text-xs text-gray-500">{{ $record ? $record->source_label : '—' }}</td>
                        </tr>
                    @endfor
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection