@extends('layouts.app')

@section('content')
    <form action="{{ route('daily-work-time.store') }}" method="POST">
        @csrf
        <input type="hidden" name="user_id" value="{{ auth()->id() ?? 1 }}" />

        {{-- Key the collection by day_of_week for easy lookup --}}
        @php $schedules = $dailyWorkTime->keyBy('day_of_week'); @endphp

        {{-- Validation Error Summary --}}
        @if ($errors->any())
            <div class="alert alert-error mb-4">
                <span class="icon-[tabler--alert-circle] size-5 shrink-0 mt-0.5"></span>
                <div>
                    <p class="text-sm font-semibold mb-1">Please fix the following errors:</p>
                    <ul class="list-disc list-inside text-sm space-y-0.5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 gap-3">

            {{-- Header (desktop only) --}}
            <div class="hidden md:grid md:grid-cols-[1.5fr_120px_1fr_1fr] gap-4 px-4 py-2 bg-base-200 rounded-lg">
                <div class="font-semibold text-sm text-base-content/70">
                    <span class="icon-[tabler--calendar-week] size-4 inline me-1"></span>
                    Day
                </div>
                <div class="font-semibold text-sm text-base-content/70">
                    <span class="icon-[tabler--moon-off] size-4 inline me-1"></span>
                    Day Off
                </div>
                <div class="font-semibold text-sm text-base-content/70">
                    <span class="icon-[tabler--clock-play] size-4 inline me-1"></span>
                    Start Time
                </div>
                <div class="font-semibold text-sm text-base-content/70">
                    <span class="icon-[tabler--clock-stop] size-4 inline me-1"></span>
                    End Time
                </div>
            </div>

            {{-- Rows --}}
            @foreach (\App\Models\WorkTimeSchedule::DAYS as $dayNumber => $dayName)
                @php
                    $isWeekend = in_array($dayNumber, [5, 6]);
                    $row = $schedules->get($dayNumber);
                    $isDayOff = $row ? (bool) $row->is_day_off : $isWeekend;
                    $startTime = $row ? \Carbon\Carbon::parse($row->work_start_time)->format('H:i') : '14:00';
                    $endTime = $row ? \Carbon\Carbon::parse($row->work_end_time)->format('H:i') : '23:00';
                    $startError = $errors->first("schedules.{$dayNumber}.work_start_time");
                    $endError = $errors->first("schedules.{$dayNumber}.work_end_time");
                    $hasError = $startError || $endError;
                @endphp

                <div id="row-{{ $dayNumber }}"
                    class="px-4 py-3 bg-base-100 border rounded-lg transition-colors
                           {{ $hasError ? 'border-error/50 bg-error/5' : 'border-base-200 hover:bg-base-50' }}
                           flex flex-col gap-3
                           md:grid md:grid-cols-[1.5fr_120px_1fr_1fr] md:items-start md:gap-4">

                    <input type="hidden" name="schedules[{{ $dayNumber }}][day_of_week]" value="{{ $dayNumber }}">

                    {{-- Mobile: Day Name + Toggle in one row | Desktop: separate columns via md:contents --}}
                    <div class="flex items-center justify-between md:contents">

                        {{-- Day Name --}}
                        <div class="flex items-center gap-2 font-medium md:pt-2">
                            <span class="icon-[tabler--calendar-week] size-4 text-primary shrink-0"></span>
                            {{ $dayName }}
                            @if ($hasError)
                                <span class="icon-[tabler--alert-circle] size-4 text-error shrink-0"></span>
                            @endif
                        </div>

                        {{-- Day Off Switch Toggle --}}
                        <label class="flex items-center gap-2 cursor-pointer md:pt-2">
                            <span class="text-xs text-base-content/50 md:hidden">Day off</span>
                            <input type="checkbox" role="switch" class="switch switch-error switch-sm day-off-toggle"
                                name="schedules[{{ $dayNumber }}][is_day_off]" data-row="{{ $dayNumber }}"
                                value="1" {{ $isDayOff ? 'checked' : '' }} />
                        </label>

                    </div>

                    {{-- Start Time --}}
                    <div id="start-cell-{{ $dayNumber }}" class="flex flex-col gap-1 md:contents">
                        <label class="text-xs text-base-content/50 flex items-center gap-1 md:hidden">
                            <span class="icon-[tabler--clock-play] size-3"></span> Start time
                        </label>
                        <div class="flex flex-col gap-1">
                            <div
                                class="input w-full
                                {{ $isDayOff ? 'opacity-40 pointer-events-none' : ($startError ? 'input-error' : '') }}">
                                <input type="time" class="grow min-w-0"
                                    name="schedules[{{ $dayNumber }}][work_start_time]"
                                    value="{{ old("schedules.{$dayNumber}.work_start_time", $startTime) }}"
                                    {{ $isDayOff ? 'disabled' : '' }} />
                                <span
                                    class="icon-[tabler--clock-play] text-base-content/80 my-auto ms-2 size-4 shrink-0"></span>
                            </div>
                            @if ($startError)
                                <p class="flex items-center gap-1 text-error text-xs">
                                    <span class="icon-[tabler--alert-circle] size-3.5 shrink-0"></span>
                                    {{ $startError }}
                                </p>
                            @endif
                        </div>
                    </div>

                    {{-- End Time --}}
                    <div id="end-cell-{{ $dayNumber }}" class="flex flex-col gap-1 md:contents">
                        <label class="text-xs text-base-content/50 flex items-center gap-1 md:hidden">
                            <span class="icon-[tabler--clock-stop] size-3"></span> End time
                        </label>
                        <div class="flex flex-col gap-1">
                            <div
                                class="input w-full
                                {{ $isDayOff ? 'opacity-40 pointer-events-none' : ($endError ? 'input-error' : '') }}">
                                <input type="time" class="grow min-w-0"
                                    name="schedules[{{ $dayNumber }}][work_end_time]"
                                    value="{{ old("schedules.{$dayNumber}.work_end_time", $endTime) }}"
                                    {{ $isDayOff ? 'disabled' : '' }} />
                                <span
                                    class="icon-[tabler--clock-stop] text-base-content/80 my-auto ms-2 size-4 shrink-0"></span>
                            </div>
                            @if ($endError)
                                <p class="flex items-center gap-1 text-error text-xs">
                                    <span class="icon-[tabler--alert-circle] size-3.5 shrink-0"></span>
                                    {{ $endError }}
                                </p>
                            @endif
                        </div>
                    </div>

                </div>
            @endforeach

        </div>

        {{-- Actions --}}
        <div class="mt-6 flex justify-end gap-3">
            <button type="reset" class="btn btn-soft btn-secondary">
                <span class="icon-[tabler--refresh] size-4"></span>
                Reset
            </button>
            <button type="submit" class="btn btn-primary">
                <span class="icon-[tabler--device-floppy] size-4"></span>
                Save
            </button>
        </div>

    </form>
@endsection