@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex flex-col gap-3 mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl md:text-3xl font-extrabold tracking-tight">My Attendance</h1>
                <p class="text-base-content/60 mt-1 text-sm">Manage and track your work hours</p>
            </div>
            <a href="{{ route('attendance.create') }}" class="btn btn-primary btn-sm md:btn-md gap-2">
                <span class="icon-[tabler--plus] size-4 md:size-5"></span>
                <span class="hidden sm:inline">Add Record</span>
                <span class="sm:hidden">Add</span>
            </a>
        </div>

        {{-- Filter Row --}}
        <form method="GET" action="{{ route('attendance.index') }}" id="month-filter-form">
            <div class="flex items-center gap-2">
                <select name="month" onchange="this.form.submit()" class="select select-bordered select-sm flex-1">
                    @foreach (range(1, 12) as $m)
                        <option value="{{ $m }}" {{ (int) $month === $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::create()->month($m)->format('F') }}
                        </option>
                    @endforeach
                </select>

                <select name="date" onchange="this.form.submit()" class="select select-bordered select-sm flex-1">
                    <option value="">All Days</option>
                    @foreach (range(1, \Carbon\Carbon::create($year, $month)->daysInMonth) as $d)
                        @php $val = \Carbon\Carbon::create($year, $month, $d)->toDateString(); @endphp
                        <option value="{{ $val }}" {{ ($date ?? '') === $val ? 'selected' : '' }}>
                            {{ $d }}
                        </option>
                    @endforeach
                </select>

                <a href="{{ route('attendance.index') }}" class="btn btn-ghost btn-sm shrink-0">
                    <span class="icon-[tabler--x] size-4"></span>
                    <span class="hidden sm:inline">Reset</span>
                </a>

                <input type="hidden" name="year" value="{{ $year }}">
            </div>
        </form>
    </div>

    {{-- ── Today Action Card ── --}}
    <div class="card bg-primary text-primary-content shadow-xl mb-8 overflow-hidden">
        <div class="card-body p-4 md:p-6">
            <div class="flex flex-col lg:flex-row justify-between items-center gap-4 lg:gap-6">
                <div class="flex items-center gap-3 w-full lg:w-auto">
                    <div class="bg-white/20 p-2.5 md:p-3 rounded-2xl shrink-0">
                        <span class="icon-[tabler--calendar-event] size-6 md:size-8 text-white"></span>
                    </div>
                    <div>
                        <p class="text-primary-content/70 text-xs font-bold uppercase tracking-widest">Today's Overview</p>
                        <h2 class="text-lg md:text-2xl font-bold text-white">{{ today()->format('l, d M Y') }}</h2>
                    </div>
                </div>

                <div class="flex justify-around w-full lg:w-auto gap-4 text-center">
                    <div>
                        <p class="text-xs opacity-70 mb-1 uppercase">Check-in</p>
                        <p class="text-base md:text-lg font-bold">
                            {{ $today?->checkin_at ? $today->checkin_at->format('h:i A') : '--:--' }}</p>
                    </div>
                    <div class="w-px h-10 bg-white/20"></div>
                    <div>
                        <p class="text-xs opacity-70 mb-1 uppercase">Check-out</p>
                        <p class="text-base md:text-lg font-bold">
                            {{ $today?->checkout_at ? $today->checkout_at->format('h:i A') : '--:--' }}</p>
                    </div>
                    @if ($today?->net_worked_mins > 0)
                        <div class="w-px h-10 bg-white/20"></div>
                        <div>
                            <p class="text-xs opacity-70 mb-1 uppercase">Total</p>
                            <p class="text-base md:text-lg font-bold">{{ round($today->net_worked_mins / 60, 1) }}h</p>
                        </div>
                    @endif
                </div>

                <div class="w-full lg:w-auto">
                    @if (!$today || !$today->checkin_at)
                        <form method="POST" action="{{ route('attendance.checkin') }}">
                            @csrf
                            <button type="submit" class="btn btn-white w-full lg:px-8">Check In Now</button>
                        </form>
                    @elseif ($today->checkin_at && !$today->checkout_at)
                        <form method="POST" action="{{ route('attendance.checkout') }}">
                            @csrf
                            <button type="submit" class="btn btn-error w-full lg:px-8 text-white border-white/20">
                                Check Out
                            </button>
                        </form>
                    @else
                        <div
                            class="badge badge-lg bg-white/20 text-white gap-2 border-none py-5 px-6 w-full lg:w-auto justify-center">
                            <span class="icon-[tabler--circle-check-filled] size-5"></span>
                            Shift Completed
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- ── Stats Grid ── --}}
    {{-- ── Stats Grid ── --}}
    <div class="space-y-4 mb-8">

        {{-- Row 1: Count stats --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
            @php
                $statConfigs = [
                    [
                        'label' => 'Total Days',
                        'val' => $stats['total_days'],
                        'icon' => 'icon-[tabler--calendar]',
                        'color' => 'bg-base-200 text-base-content',
                    ],
                    [
                        'label' => 'Working Days',
                        'val' => $stats['working_days'],
                        'icon' => 'icon-[tabler--briefcase]',
                        'color' => 'bg-success/10 text-success',
                    ],
                    [
                        'label' => 'Late Days',
                        'val' => $stats['late_days'],
                        'icon' => 'icon-[tabler--clock-exclamation]',
                        'color' => 'bg-warning/10 text-warning',
                    ],
                    [
                        'label' => 'Leave Days',
                        'val' => $stats['leave_days'],
                        'icon' => 'icon-[tabler--user-off]',
                        'color' => 'bg-error/10 text-error',
                    ],
                ];
            @endphp
            @foreach ($statConfigs as $stat)
                <div class="card bg-base-100 border border-base-content/5 shadow-sm">
                    <div class="card-body p-3 md:p-4 flex-row items-center gap-3 md:gap-4">
                        <div class="{{ $stat['color'] }} p-2 md:p-2.5 rounded-xl hidden sm:block shrink-0">
                            <span class="{{ $stat['icon'] }} size-5 md:size-6"></span>
                        </div>
                        <div>
                            <p class="text-[10px] md:text-xs text-base-content/50 font-bold uppercase">{{ $stat['label'] }}
                            </p>
                            <p class="text-lg md:text-xl font-bold">{{ $stat['val'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Row 2: Hours stats --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">

            {{-- Actual vs Expected Hours (progress card) --}}
            @php
                $workedH = round($stats['total_worked_mins'] / 60, 1);
                $expectedH = $stats['total_expected_mins'] > 0 ? round($stats['total_expected_mins'] / 60, 1) : 0;
                $progress = $expectedH > 0 ? min(100, round(($workedH / $expectedH) * 100)) : 0;
                $progressColor =
                    $progress >= 100 ? 'progress-success' : ($progress >= 70 ? 'progress-warning' : 'progress-error');
            @endphp
            <div class="card bg-base-100 border border-base-content/5 shadow-sm sm:col-span-2">
                <div class="card-body p-3 md:p-4 gap-2">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="bg-primary/10 text-primary p-2 rounded-xl hidden sm:block shrink-0">
                                <span class="icon-[tabler--clock-hour-4] size-5 md:size-6"></span>
                            </div>
                            <p class="text-[10px] md:text-xs text-base-content/50 font-bold uppercase">Hours Progress</p>
                        </div>
                        <span
                            class="badge badge-sm {{ $progress >= 100 ? 'badge-success' : ($progress >= 70 ? 'badge-warning' : 'badge-error') }} badge-soft font-bold">
                            {{ $progress }}%
                        </span>
                    </div>
                    <div class="flex items-end justify-between gap-2">
                        <div>
                            <p class="text-xl md:text-2xl font-black text-primary">{{ $workedH }}h</p>
                            <p class="text-[10px] text-base-content/40">worked of <span
                                    class="font-bold text-base-content/60">{{ $expectedH }}h</span> expected</p>
                        </div>
                        @php $diff = round($workedH - $expectedH, 1); @endphp
                        <div class="text-right">
                            <p class="text-sm font-bold {{ $diff >= 0 ? 'text-success' : 'text-error' }}">
                                {{ $diff >= 0 ? '+' : '' }}{{ $diff }}h
                            </p>
                            <p class="text-[10px] text-base-content/40">{{ $diff >= 0 ? 'ahead' : 'behind' }}</p>
                        </div>
                    </div>
                    <progress class="progress {{ $progressColor }} h-2 w-full" value="{{ $progress }}"
                        max="100"></progress>
                </div>
            </div>

            {{-- Total Break --}}
            @php
                $breakH = floor($stats['total_break_mins'] / 60);
                $breakM = $stats['total_break_mins'] % 60;
            @endphp
            <div class="card bg-base-100 border border-base-content/5 shadow-sm">
                <div class="card-body p-3 md:p-4 flex-row items-center gap-3 md:gap-4">
                    <div class="bg-info/10 text-info p-2 md:p-2.5 rounded-xl hidden sm:block shrink-0">
                        <span class="icon-[tabler--coffee] size-5 md:size-6"></span>
                    </div>
                    <div>
                        <p class="text-[10px] md:text-xs text-base-content/50 font-bold uppercase">Total Break</p>
                        <p class="text-lg md:text-xl font-bold">{{ $breakH }}h {{ $breakM }}m</p>
                        <p class="text-[10px] text-base-content/40">{{ $stats['total_break_mins'] }} mins total</p>
                    </div>
                </div>
            </div>

            {{-- Late Time --}}
            @php
                $lateH = floor($stats['total_late_mins'] / 60);
                $lateM = $stats['total_late_mins'] % 60;
            @endphp
            <div class="card bg-base-100 border border-base-content/5 shadow-sm">
                <div class="card-body p-3 md:p-4 flex-row items-center gap-3 md:gap-4">
                    <div class="bg-warning/10 text-warning p-2 md:p-2.5 rounded-xl hidden sm:block shrink-0">
                        <span class="icon-[tabler--alarm] size-5 md:size-6"></span>
                    </div>
                    <div>
                        <p class="text-[10px] md:text-xs text-base-content/50 font-bold uppercase">Late Time</p>
                        <p class="text-lg md:text-xl font-bold">{{ $lateH }}h {{ $lateM }}m</p>
                        <p class="text-[10px] text-base-content/40">across {{ $stats['late_days'] }} late days</p>
                    </div>
                </div>
            </div>

        </div>

        {{-- Row 3: On-time rate --}}
        @php
            $onTimeRate =
                $stats['working_days'] > 0 ? round(($stats['on_time_days'] / $stats['working_days']) * 100) : 0;
        @endphp
        <div class="card bg-base-100 border border-base-content/5 shadow-sm">
            <div class="card-body p-3 md:p-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <div class="bg-success/10 text-success p-2 md:p-2.5 rounded-xl shrink-0">
                            <span class="icon-[tabler--circle-check] size-5 md:size-6"></span>
                        </div>
                        <div>
                            <p class="text-[10px] md:text-xs text-base-content/50 font-bold uppercase">On-Time Rate</p>
                            <p class="text-lg md:text-xl font-bold">
                                {{ $stats['on_time_days'] }} / {{ $stats['working_days'] }} days
                                <span class="text-sm font-normal text-base-content/50 ml-1">on time</span>
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-3 sm:min-w-[200px]">
                        <progress class="progress progress-success h-3 flex-1" value="{{ $onTimeRate }}"
                            max="100"></progress>
                        <span class="text-lg font-black text-success shrink-0">{{ $onTimeRate }}%</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- ── Attendance Grid ── --}}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6">
        @forelse ($attendance as $record)
            @php
                $isToday = $record->date->isToday();
                $totalMins = $record->sessions_sum_time_in_minutes ?? 0;
                $hours = floor($totalMins / 60);
                $minutes = $totalMins % 60;
                $breakFormatted = sprintf('%02d:%02d:00', $hours, $minutes);
                $breakColorClass = $totalMins > 60 ? 'text-error' : 'text-base-content/70';
            @endphp

            <div
                class="card bg-base-100 transition-all duration-200
                {{ $isToday ? 'border-2 border-primary shadow-md' : 'border border-base-200 shadow-sm' }}
                {{ $record->is_day_off ? 'opacity-70 grayscale-[0.5]' : '' }}">

                <div class="card-body p-4 md:p-5">
                    @if ($isToday)
                        <div class="badge badge-primary badge-sm font-bold mb-2">TODAY</div>
                    @endif

                    <div class="flex justify-between items-start mb-3 md:mb-4">
                        <div class="flex gap-2 md:gap-3">
                            <div class="bg-base-200 text-center rounded-lg px-2.5 py-1.5 min-w-[2.75rem]">
                                <span class="text-[10px] block font-bold text-base-content/40 uppercase leading-tight">
                                    {{ $record->date->format('M') }}
                                </span>
                                <span class="text-lg md:text-xl block font-black leading-tight">
                                    {{ $record->date->format('d') }}
                                </span>
                            </div>
                            <div>
                                <h3 class="font-bold text-base md:text-lg leading-tight">{{ $record->date->format('l') }}
                                </h3>
                                <p class="text-xs text-base-content/50">{{ $record->date->format('Y') }}</p>
                            </div>
                        </div>

                        @php
                            $statusClass = match ($record->status) {
                                'working' => 'badge-success',
                                'late' => 'badge-warning',
                                'leave' => 'badge-error',
                                default => 'badge-ghost',
                            };
                        @endphp
                        <span class="badge {{ $statusClass }} badge-soft font-bold text-xs uppercase px-2.5 py-2.5">
                            {{ $record->status }}
                        </span>
                    </div>

                    <div class="divider my-0 opacity-50"></div>

                    <div class="grid grid-cols-2 gap-3 md:gap-4 my-3 md:my-4">
                        <div class="space-y-1">
                            <p class="text-[10px] text-base-content/40 font-bold uppercase tracking-wider">Check-in</p>
                            <div class="flex items-center gap-1.5">
                                <span class="icon-[tabler--login] text-success size-4 shrink-0"></span>
                                <span
                                    class="font-bold text-sm md:text-base">{{ $record->checkin_at?->format('h:i A') ?? '--:--' }}</span>
                            </div>
                        </div>
                        <div class="space-y-1 border-s border-base-200 ps-3 md:ps-4">
                            <p class="text-[10px] text-base-content/40 font-bold uppercase tracking-wider">Check-out</p>
                            <div class="flex items-center gap-1.5">
                                <span class="icon-[tabler--logout] text-error size-4 shrink-0"></span>
                                <span
                                    class="font-bold text-sm md:text-base">{{ $record->checkout_at?->format('h:i A') ?? '--:--' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="bg-base-200/50 rounded-xl p-3 grid grid-cols-3 gap-2 text-center mb-3 md:mb-4">
                        <div>
                            <p class="text-[9px] text-base-content/50 font-bold uppercase mb-1">Worked</p>
                            <p class="text-sm font-bold text-primary">{{ round($record->net_worked_mins / 60, 1) }}h</p>
                        </div>
                        <div>
                            <p class="text-[9px] text-base-content/50 font-bold uppercase mb-1">Late</p>
                            <p
                                class="text-sm font-bold {{ $record->late_minutes > 0 ? 'text-warning' : 'text-base-content/30' }}">
                                {{ $record->late_minutes > 0 ? $record->late_minutes . 'm' : '0m' }}
                            </p>
                        </div>
                        <div>
                            <p class="text-[9px] text-base-content/50 font-bold uppercase mb-1">Break</p>
                            <p class="text-[10px] font-mono font-bold {{ $breakColorClass }}">{{ $breakFormatted }}</p>
                        </div>
                    </div>

                    @if ($record->notes)
                        <div class="mb-3 md:mb-4">
                            <p class="text-[10px] text-base-content/40 font-bold uppercase mb-1">Notes</p>
                            <p class="text-xs text-base-content/80 italic line-clamp-2">"{{ $record->notes }}"</p>
                        </div>
                    @endif

                    <div class="card-actions justify-between items-center mt-auto pt-2 border-t border-base-content/5">
                        <div class="flex gap-1">
                            <a href="{{ route('attendance.edit', $record) }}" class="btn btn-ghost btn-xs btn-square">
                                <span class="icon-[tabler--edit] size-4"></span>
                            </a>
                            <a href="{{ route('attendance-sessions.index', ['attendance_id' => $record->id]) }}"
                                class="btn btn-ghost btn-xs btn-square">
                                <span class="icon-[tabler--clock-play] size-4"></span>
                            </a>
                        </div>
                        <form method="POST" action="{{ route('attendance.destroy', $record) }}"
                            onsubmit="return confirm('Delete?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-ghost btn-xs btn-square text-error">
                                <span class="icon-[tabler--trash] size-4"></span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @empty
            <div
                class="col-span-full py-16 md:py-20 text-center bg-base-100 rounded-3xl border-2 border-dashed border-base-300">
                <span class="icon-[tabler--calendar-off] size-12 md:size-16 text-base-content/20 mb-4"></span>
                <p class="text-base-content/40 text-sm">No attendance records found.</p>
            </div>
        @endforelse
    </div>
@endsection