@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">Add Session</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Record a new work session</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">

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

                {{-- 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' : '' }}">
                        <option value="" disabled selected>— Select a date —</option>
                        @foreach ($attendances as $attendance)
                            <option value="{{ $attendance->id }}"
                                {{ old('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 on same row (desktop) / stacked (mobile) --}}
                <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') }}"
                                    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') }}"
                                    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="hidden 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"></span>
                </div>

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

                {{-- Actions --}}
                <div class="flex flex-col-reverse sm:flex-row justify-end gap-3">
                    <a href="{{ route('attendance-sessions.index', ['attendance_id' => $attendance->id]) }}"
                        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>
                        Save Session
                    </button>
                </div>

            </form>

        </div>
    </div>

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

            if (!from || !to || from >= to) {
                preview.classList.add('hidden');
                preview.classList.remove('flex');
                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) {
                preview.classList.add('hidden');
                preview.classList.remove('flex');
                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`;

            preview.classList.remove('hidden');
            preview.classList.add('flex');
        }

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