@php
$dayNames = [1 => __('Monday'), 2 => __('Tuesday'), 3 => __('Wednesday'), 4 => __('Thursday'), 5 => __('Friday'), 6 => __('Saturday'), 0 => __('Sunday')];
$weekendDays = array_map('intval', (array) old('weekend_days', $schedule['weekend_days']));
@endphp

<x-app-layout>
    <x-slot name="header">
        <p class="text-xs font-semibold uppercase tracking-widest text-gray-500">{{ __('Settings') }}</p>
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Office hours') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-4 px-4 sm:px-6 lg:px-8">
            <x-toast :message="session('status')" />
            <x-toast :message="$errors->any() ? __('Please fix the fields marked in red.') : null" icon="error" />

            <form method="POST" action="{{ route('settings.attendance.update') }}" novalidate>
                @csrf
                @method('put')

                <div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
                    <div class="flex flex-col gap-6 xl:col-span-2">
                        <x-form-panel step="1" :title="__('Working hours')" :description="__('In each location\'s own time. Checking in after the start time plus the grace period counts as late.')">
                            <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                                <div>
                                    <x-input-label for="start_time" :value="__('Work starts')" />
                                    <x-text-input id="start_time" name="start_time" type="time" class="mt-1 block w-full" :value="old('start_time', $schedule['start_time'])" />
                                    <x-input-error class="mt-2" :messages="$errors->get('start_time')" />
                                </div>
                                <div>
                                    <x-input-label for="end_time" :value="__('Work ends')" />
                                    <x-text-input id="end_time" name="end_time" type="time" class="mt-1 block w-full" :value="old('end_time', $schedule['end_time'])" />
                                    <x-input-error class="mt-2" :messages="$errors->get('end_time')" />
                                </div>
                                <div>
                                    <x-input-label for="grace_minutes" :value="__('Grace period (minutes)')" />
                                    <x-text-input id="grace_minutes" name="grace_minutes" type="number" min="0" max="180" class="mt-1 block w-full" :value="old('grace_minutes', $schedule['grace_minutes'])" />
                                    <x-input-error class="mt-2" :messages="$errors->get('grace_minutes')" />
                                </div>
                            </div>
                        </x-form-panel>

                        <x-form-panel step="2" :title="__('Weekend')" :description="__('Days nobody is expected in. They never count as absent.')">
                            <fieldset>
                                <legend class="sr-only">{{ __('Weekend days') }}</legend>
                                <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                                    @foreach ($dayNames as $number => $name)
                                        <x-choice-card type="checkbox" name="weekend_days[]" :value="$number" :checked="in_array($number, $weekendDays, true)" :label="$name" />
                                    @endforeach
                                </div>
                                <x-input-error class="mt-2" :messages="$errors->get('weekend_days')" />
                            </fieldset>
                        </x-form-panel>

                        <div class="flex items-center justify-end gap-3 rounded-2xl bg-white px-6 py-4 shadow-raised sm:px-8">
                            <x-primary-button>{{ __('Save office hours') }}</x-primary-button>
                        </div>
                    </div>

                    <aside class="flex flex-col gap-3 self-start rounded-2xl bg-white p-6 text-sm shadow-raised xl:sticky xl:top-8">
                        <h3 class="text-base font-semibold text-gray-900">{{ __('Good to know') }}</h3>
                        <ul class="flex flex-col gap-3 text-gray-700">
                            <li class="flex items-start gap-2">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                                {{ __('These hours apply to every location, each in its own timezone. Set the timezone on each location under Settings → Locations.') }}
                            </li>
                            <li class="flex items-start gap-2">
                                <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6, 9-13.5" /></svg>
                                {{ __('Changing the start time or grace period does not re-judge days already recorded.') }}
                            </li>
                        </ul>
                    </aside>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>