@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex items-center gap-3 mb-6">
        <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 font-bold tracking-tight">Add Attendance</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Create a new attendance record</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.store') }}" class="space-y-5">
                @csrf

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

                    {{-- Date --}}
                    <div class="space-y-1.5">
                        <label for="date" class="label label-text font-medium flex items-center gap-1.5">
                            <span class="icon-[tabler--calendar] size-4 text-base-content/50"></span>
                            Date
                        </label>
                        <div
                            class="input input-bordered flex items-center gap-2 {{ $errors->has('date') ? 'input-error' : '' }}">
                            <input type="date" id="date" name="date"
                                value="{{ old('date', today()->format('Y-m-d')) }}" max="{{ today()->format('Y-m-d') }}"
                                required class="grow bg-transparent outline-none text-sm min-w-0" />
                            <span class="icon-[tabler--calendar-event] text-base-content/40 size-4 shrink-0"></span>
                        </div>
                        @error('date')
                            <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>

                    {{-- Status --}}
                    <div class="space-y-1.5">
                        <label for="status" class="label label-text font-medium flex items-center gap-1.5">
                            <span class="icon-[tabler--activity] size-4 text-base-content/50"></span>
                            Status
                        </label>
                        <select id="status" name="status"
                            class="select select-bordered w-full {{ $errors->has('status') ? 'select-error' : '' }}">
                            @foreach ($statuses as $value => $label)
                                <option value="{{ $value }}"
                                    {{ old('status', 'working') === $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('status')
                            <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>

                {{-- Check-in + Check-out side by side on sm+ --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                    {{-- Check-in --}}
                    <div class="space-y-1.5">
                        <label for="checkin_at" class="label label-text font-medium flex items-center gap-1.5">
                            <span class="icon-[tabler--login] size-4 text-base-content/50"></span>
                            Check-in Time
                        </label>
                        <div class="flex gap-2">
                            <div
                                class="input input-bordered flex items-center gap-2 flex-1 {{ $errors->has('checkin_at') ? 'input-error' : '' }}">
                                <input type="time" id="checkin_at" name="checkin_at" value="{{ old('checkin_at') }}"
                                    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('checkin_at').value = new Date().toTimeString().slice(0,5)"
                                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('checkin_at')
                            <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>

                    {{-- Check-out --}}
                    <div class="space-y-1.5">
                        <label for="checkout_at" class="label label-text font-medium flex items-center gap-1.5">
                            <span class="icon-[tabler--logout] size-4 text-base-content/50"></span>
                            Check-out Time
                        </label>
                        <div class="flex gap-2">
                            <div
                                class="input input-bordered flex items-center gap-2 flex-1 {{ $errors->has('checkout_at') ? 'input-error' : '' }}">
                                <input type="time" id="checkout_at" name="checkout_at" value="{{ old('checkout_at') }}"
                                    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('checkout_at').value = new Date().toTimeString().slice(0,5)"
                                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('checkout_at')
                            <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>

                {{-- Notes --}}
                <div class="space-y-1.5">
                    <label for="notes" class="label label-text font-medium flex items-center gap-1.5">
                        <span class="icon-[tabler--notes] size-4 text-base-content/50"></span>
                        Notes
                    </label>
                    <div class="textarea textarea-bordered w-full {{ $errors->has('notes') ? 'textarea-error' : '' }}">
                        <span class="icon-[tabler--notes] text-base-content/40 mt-2 mx-4 size-5 shrink-0"></span>
                        <textarea id="notes" name="notes" rows="3" class="grow" placeholder="Add any additional notes...">{{ old('notes') }}</textarea>
                    </div>
                    @error('notes')
                        <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 class="divider my-1"></div>

                {{-- Actions --}}
                <div class="flex flex-col-reverse sm:flex-row justify-end gap-3">
                    <a href="{{ route('attendance.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>
                        Save Record
                    </button>
                </div>

            </form>

        </div>
    </div>
@endsection