@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('attendance-sessions.index', ['attendance_id' => request('attendance_id')]) }}"
            class="btn btn-ghost btn-sm btn-square">
            <span class="icon-[tabler--arrow-left] size-5"></span>
        </a>
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Edit Session</h1>
            <p class="text-sm text-base-content/50 mt-0.5">
                {{ $attendanceSession->attendance->date->format('l, d M Y') }}
            </p>
        </div>
    </div>

    {{-- ── Form Card ── --}}
    <div class="card bg-base-100 border border-base-200 shadow-sm w-full max-w-xl">
        <div class="card-body p-4 sm:p-6 md:p-8">

            {{-- Summary bar --}}
            <div class="flex flex-wrap items-center gap-3 p-3 bg-base-200 rounded-xl mb-5 text-sm">
                <div class="flex items-center gap-1.5 text-success font-medium">
                    <span class="icon-[tabler--clock-play] size-4"></span>
                    {{ $attendanceSession->session_from->format('h:i A') }}
                </div>
                <span class="icon-[tabler--arrow-right] size-4 text-base-content/30"></span>
                <div class="flex items-center gap-1.5 text-error font-medium">
                    <span class="icon-[tabler--clock-stop] size-4"></span>
                    {{ $attendanceSession?->session_to?->format('h:i A') ?? '-' }}
                </div>
                <div class="ms-auto flex items-center gap-1 text-primary font-semibold">
                    <span class="icon-[tabler--hourglass] size-4"></span>
                    {{ $attendanceSession->formatted_duration }}
                </div>
            </div>

            <form method="POST" action="{{ route('attendance-sessions.update', $attendanceSession) }}" class="space-y-5">
                @csrf
                @method('PUT')

                {{-- Attendance Record --}}
                <div class="space-y-1.5">
                    <label for="attendance_id" class="label label-text font-medium flex items-center gap-1.5">
                        <span class="icon-[tabler--calendar] size-4 text-base-content/50"></span>
                        Attendance Date: ({{ $attendance?->date->format('D, d M Y') }})
                    </label>
                    <input type="hidden" name="attendance_id" value="{{ $attendance->id }}"
                        class="grow bg-transparent outline-none text-sm min-w-0" />
                    {{-- <select id="attendance_id" name="attendance_id"
                        class="select select-bordered w-full {{ $errors->has('attendance_id') ? 'select-error' : '' }}">
                        @foreach ($attendances as $attendance)
                            <option value="{{ $attendance->id }}"
                                {{ old('attendance_id', $attendanceSession->attendance_id) == $attendance->id ? 'selected' : '' }}>
                                {{ $attendance->date->format('D, d M Y') }}
                                @if ($attendance->date->isToday())
                                    (Today)
                                @endif
                            </option>
                        @endforeach
                    </select> --}}
                    @error('attendance_id')
                        <p class="flex items-center gap-1 text-error text-xs mt-1">
                            <span class="icon-[tabler--alert-circle] size-3.5 shrink-0"></span>
                            {{ $message }}
                        </p>
                    @enderror
                </div>

                {{-- Session From + To side by side on sm+ --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                    {{-- Session From --}}
                    <div class="space-y-1.5">
                        <label for="session_from" class="label label-text font-medium flex items-center gap-1.5">
                            <span class="icon-[tabler--clock-play] size-4 text-base-content/50"></span>
                            Session Start
                        </label>
                        <div class="flex gap-2">
                            <div
                                class="input input-bordered flex items-center gap-2 flex-1 {{ $errors->has('session_from') ? 'input-error' : '' }}">
                                <input type="time" id="session_from" name="session_from"
                                    value="{{ old('session_from', $attendanceSession->session_from->format('H:i')) }}"
                                    class="grow bg-transparent outline-none text-sm min-w-0" />
                                <span class="icon-[tabler--clock-play] text-base-content/40 size-4 shrink-0"></span>
                            </div>
                            <button type="button"
                                onclick="document.getElementById('session_from').value = new Date().toTimeString().slice(0,5); updateDuration()"
                                class="btn btn-soft btn-success btn-square shrink-0" title="Set to now">
                                <span class="icon-[tabler--current-location] size-4"></span>
                            </button>
                        </div>
                        @error('session_from')
                            <p class="flex items-center gap-1 text-error text-xs mt-1">
                                <span class="icon-[tabler--alert-circle] size-3.5 shrink-0"></span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    {{-- Session To --}}
                    <div class="space-y-1.5">
                        <label for="session_to" class="label label-text font-medium flex items-center gap-1.5">
                            <span class="icon-[tabler--clock-stop] size-4 text-base-content/50"></span>
                            Session End
                        </label>
                        <div class="flex gap-2">
                            <div
                                class="input input-bordered flex items-center gap-2 flex-1 {{ $errors->has('session_to') ? 'input-error' : '' }}">
                                <input type="time" id="session_to" name="session_to"
                                    value="{{ old('session_to', $attendanceSession?->session_to?->format('H:i')) ?? '-' }}"
                                    class="grow bg-transparent outline-none text-sm min-w-0" />
                                <span class="icon-[tabler--clock-stop] text-base-content/40 size-4 shrink-0"></span>
                            </div>
                            <button type="button"
                                onclick="document.getElementById('session_to').value = new Date().toTimeString().slice(0,5); updateDuration()"
                                class="btn btn-soft btn-error btn-square shrink-0" title="Set to now">
                                <span class="icon-[tabler--current-location] size-4"></span>
                            </button>
                        </div>
                        @error('session_to')
                            <p class="flex items-center gap-1 text-error text-xs mt-1">
                                <span class="icon-[tabler--alert-circle] size-3.5 shrink-0"></span>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                </div>

                {{-- Live duration preview --}}
                <div id="duration-preview" class="flex items-center gap-2 p-3 bg-base-200 rounded-xl text-sm">
                    <span class="icon-[tabler--hourglass] size-4 text-primary shrink-0"></span>
                    <span class="text-base-content/60">Duration:</span>
                    <span id="duration-text" class="font-semibold text-primary">
                        {{ $attendanceSession->formatted_duration }}
                    </span>
                </div>

                <div class="divider my-1"></div>

                {{-- Actions --}}
                <div class="flex justify-end gap-3">
                    <div class="flex flex-col-reverse sm:flex-row gap-3">
                        <a href="{{ route('attendance-sessions.index') }}"
                            class="btn btn-soft btn-secondary gap-2 w-full sm:w-auto">
                            <span class="icon-[tabler--x] size-4"></span>
                            Cancel
                        </a>
                        <button type="submit" class="btn btn-primary gap-2 w-full sm:w-auto">
                            <span class="icon-[tabler--device-floppy] size-4"></span>
                            Update
                        </button>
                    </div>

                </div>

            </form>

        </div>
    </div>

    <script>
        function updateDuration() {
            const from = document.getElementById('session_from').value;
            const to = document.getElementById('session_to').value;
            const text = document.getElementById('duration-text');

            if (!from || !to || from >= to) return;

            const [fh, fm] = from.split(':').map(Number);
            const [th, tm] = to.split(':').map(Number);
            const total = (th * 60 + tm) - (fh * 60 + fm);

            if (total <= 0) return;

            const hours = Math.floor(total / 60);
            const minutes = total % 60;
            text.textContent = hours > 0 ?
                (minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`) :
                `${minutes}m`;
        }

        document.getElementById('session_from').addEventListener('change', updateDuration);
        document.getElementById('session_to').addEventListener('change', updateDuration);
    </script>
@endsection