@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex flex-col gap-3 mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <a href="{{ route('attendance.index') }}" class="btn btn-ghost btn-sm btn-square">
                    <span class="icon-[tabler--arrow-left] size-5"></span>
                </a>
                <div>
                    <h1 class="text-2xl md:text-3xl font-extrabold tracking-tight">Break Sessions</h1>
                    <p class="text-base-content/60 mt-1 text-sm">Manage your break sessions within attendance records</p>
                </div>
            </div>
            <a href="{{ route('attendance-sessions.create', ['attendance_id' => request('attendance_id')]) }}"
                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 Session</span>
                <span class="sm:hidden">Add</span>
            </a>
        </div>
    </div>

    {{-- ── Active Break Card ── --}}
    @php
        $todayAttendance ??= \App\Models\Attendance::where('user_id', auth()->id())
            ->whereDate('date', today())
            ->first();
    @endphp
    <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--coffee] size-6 md:size-8 text-white"></span>
                    </div>
                    <div>
                        <p class="text-primary-content/70 text-xs font-bold uppercase tracking-widest">Break Status</p>
                        <h2 class="text-lg md:text-2xl font-bold text-white">{{ now()->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">Session-in</p>
                        <p class="text-base md:text-lg font-bold">
                            {{ $activeSession ? $activeSession->session_from->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">Session-out</p>
                        <p class="text-base md:text-lg font-bold">
                            {{ $activeSession?->session_to ? $activeSession->session_to->format('h:i A') : '--:--' }}
                        </p>
                    </div>
                    @if ($activeSession && is_null($activeSession->session_to))
                        <div class="w-px h-10 bg-white/20"></div>
                        <div>
                            <p class="text-xs opacity-70 mb-1 uppercase">Running</p>
                            <p class="text-base md:text-lg font-bold">
                                {{ $activeSession->session_from->diffForHumans(short: true) }}
                            </p>
                        </div>
                    @endif
                </div>

                <div class="w-full lg:w-auto">
                    @if ($activeSession && is_null($activeSession->session_to))
                        <form action="{{ route('attendance-sessions.end', $activeSession) }}" method="POST">
                            @csrf @method('PATCH')
                            <button type="submit" class="btn btn-error w-full lg:px-8 text-white border-white/20">
                                <span class="icon-[tabler--player-stop] size-4 me-2"></span>
                                End Break
                            </button>
                        </form>
                    @elseif ($todayAttendance)
                        <form action="{{ route('attendance-sessions.start', $todayAttendance) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-white w-full lg:px-8">
                                <span class="icon-[tabler--coffee] size-4 me-2"></span>
                                Start Break
                            </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>
                            No Active Break
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- ── Stats Grid ── --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-8">
        @php
            $statConfigs = [
                [
                    'label' => 'Total Sessions',
                    'val' => $stats['total_sessions'],
                    'icon' => 'icon-[tabler--list-numbers]',
                    'color' => 'bg-base-200 text-base-content',
                ],
                [
                    'label' => 'Completed',
                    'val' => $stats['completed'],
                    'icon' => 'icon-[tabler--circle-check]',
                    'color' => 'bg-success/10 text-success',
                ],
                [
                    'label' => 'Total Mins',
                    'val' => $stats['total_mins'] . 'm',
                    'icon' => 'icon-[tabler--clock-hour-4]',
                    'color' => 'bg-warning/10 text-warning',
                ],
                [
                    'label' => 'Longest',
                    'val' => $stats['longest_mins'] . 'm',
                    'icon' => 'icon-[tabler--trophy]',
                    'color' => 'bg-secondary/10 text-secondary',
                ],
            ];
        @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>

    {{-- ── Sessions Cards ── --}}
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6">
        @forelse ($sessions as $session)
            @php
                $isToday = $session->attendance->date->isToday();
                $isOngoing = is_null($session->session_to);

                // Logic for HH:MM:SS
                $totalSeconds = ($session->time_in_minutes ?? 0) * 60;
                $formattedDuration = $totalSeconds > 0 ? gmdate('H:i:s', $totalSeconds) : '--';

                // Logic for colors (using minutes for the threshold)
                $mins = $session->time_in_minutes ?? 0;
                $durationColor = $mins > 60 ? 'text-error' : ($mins > 50 ? 'text-warning' : 'text-success');
            @endphp

            <div
                class="card bg-base-100 transition-all duration-200
                {{ $isOngoing ? 'border-2 border-warning shadow-md' : ($isToday ? 'border-2 border-primary shadow-md' : 'border border-base-200 shadow-sm') }}">

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

                    {{-- Date + Status --}}
                    <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">
                                    {{ $session->attendance->date->format('M') }}
                                </span>
                                <span class="text-lg md:text-xl block font-black leading-tight">
                                    {{ $session->attendance->date->format('d') }}
                                </span>
                            </div>
                            <div>
                                <h3 class="font-bold text-base md:text-lg leading-tight">
                                    {{ $session->attendance->date->format('l') }}
                                </h3>
                                <p class="text-xs text-base-content/50">{{ $session->attendance->date->format('Y') }}</p>
                            </div>
                        </div>

                        <span
                            class="badge {{ $isOngoing ? 'badge-warning' : 'badge-success' }} badge-soft font-bold text-xs uppercase px-2.5 py-2.5">
                            {{ $isOngoing ? 'Ongoing' : 'Done' }}
                        </span>
                    </div>

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

                    {{-- Session In / Out --}}
                    <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">Session-in</p>
                            <div class="flex items-center gap-1.5">
                                <span class="icon-[tabler--clock-play] text-success size-4 shrink-0"></span>
                                <span class="font-bold text-sm md:text-base">
                                    {{ $session->session_from->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">Session-out</p>
                            <div class="flex items-center gap-1.5">
                                <span class="icon-[tabler--clock-stop] text-error size-4 shrink-0"></span>
                                <span class="font-bold text-sm md:text-base">
                                    {{ $session->session_to ? $session->session_to->format('h:i A') : '--:--' }}
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- Duration Bar --}}
                    <div class="bg-base-200/50 rounded-xl p-3 grid grid-cols-2 gap-2 text-center mb-3 md:mb-4">
                        <div>
                            <p class="text-[9px] text-base-content/50 font-bold uppercase mb-1">Duration</p>
                            <p class="text-sm font-bold {{ $durationColor }}">
                                {{ $formattedDuration }}
                            </p>
                        </div>
                        <div>
                            <p class="text-[9px] text-base-content/50 font-bold uppercase mb-1">Running</p>
                            <p class="text-sm font-bold text-base-content/60">
                                {{ $isOngoing ? $session->session_from->diffForHumans(short: true) : '--' }}
                            </p>
                        </div>
                    </div>

                    {{-- Actions --}}
                    <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-sessions.edit', ['attendance_session' => $session, 'attendance_id' => request('attendance_id')]) }}"
                                class="btn btn-ghost btn-xs btn-square">
                                <span class="icon-[tabler--edit] size-4"></span>
                            </a>
                        </div>
                        <div class="flex gap-1 items-center">
                            @if ($isOngoing)
                                <form action="{{ route('attendance-sessions.end', $session) }}" method="POST">
                                    @csrf @method('PATCH')
                                    <button type="submit" class="btn btn-warning btn-xs gap-1">
                                        <span class="icon-[tabler--player-stop] size-3"></span>
                                        End
                                    </button>
                                </form>
                            @endif
                            <form method="POST"
                                action="{{ route('attendance-sessions.destroy', ['attendance_session' => $session, 'attendance_id' => request('attendance_id')]) }}"
                                onsubmit="return confirm('Delete this session?')">
                                @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>
            </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--coffee-off] size-12 md:size-16 text-base-content/20 mb-4 block mx-auto"></span>
                <p class="text-base-content/40 text-sm font-semibold">No sessions recorded</p>
                <p class="text-base-content/30 text-xs mt-1">No break sessions found for this attendance record.</p>
                <a href="{{ route('attendance-sessions.create', ['attendance_id' => request('attendance_id')]) }}"
                    class="btn btn-primary btn-sm mt-4 gap-2">
                    <span class="icon-[tabler--plus] size-4"></span>
                    Add Session
                </a>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if ($sessions->hasPages())
        <div class="mt-6">
            {{ $sessions->links() }}
        </div>
    @endif
@endsection