@use('App\Enums\AttendanceStatus')

@php
$attendance ??= null;
$selectedEmployeeId ??= null;
$selectedDate ??= null;
$employeeId = (int) old('user_id', $attendance?->user_id ?? $selectedEmployeeId);
$date = old('date', $attendance?->date->toDateString() ?? $selectedDate ?? now()->toDateString());
$status = old('status', $attendance?->status->value ?? AttendanceStatus::Present->value);
$checkIn = old('check_in_time', $attendance?->localCheckIn()?->format('H:i'));
$checkOut = old('check_out_time', $attendance?->localCheckOut()?->format('H:i'));
@endphp

<x-toast :message="$errors->any() ? __('Please fix the fields marked in red.') : null" icon="error" />

<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="__('Who and when')" :description="__('One record per employee per day.')">
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                    <x-input-label for="user_id" :value="__('Employee')" />
                    <x-select-input id="user_id" name="user_id" class="mt-1 block w-full" :disabled="$attendance !== null">
                        <option value="">{{ __('Choose an employee') }}</option>
                        @foreach ($employees as $employee)
                            <option value="{{ $employee->id }}" @selected($employeeId === $employee->id)>{{ $employee->name }} ({{ $employee->employee_id ?? '—' }})</option>
                        @endforeach
                    </x-select-input>
                    @if ($attendance)
                        <input type="hidden" name="user_id" value="{{ $attendance->user_id }}">
                    @endif
                    <x-input-error class="mt-2" :messages="$errors->get('user_id')" />
                </div>

                <div>
                    <x-input-label for="date" :value="__('Day')" />
                    <x-text-input id="date" name="date" type="date" class="mt-1 block w-full" :value="$date" />
                    <x-input-error class="mt-2" :messages="$errors->get('date')" />
                </div>
            </div>
        </x-form-panel>

        <x-form-panel step="2" :title="__('How the day counts')" :description="__('Present, late and half day take times; the others are days away.')">
            <fieldset x-data="{ status: @js($status) }">
                <legend class="sr-only">{{ __('Status') }}</legend>

                <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                    @foreach ($statuses as $option)
                        <x-choice-card name="status" :value="$option->value" :checked="$status === $option->value" :label="$option->label()" :description="$option->description()" x-model="status" />
                    @endforeach
                </div>

                <x-input-error class="mt-2" :messages="$errors->get('status')" />

                <div x-show="['present', 'late', 'half_day'].includes(status)" x-cloak class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <x-input-label for="check_in_time" :value="__('Check-in time')" />
                        <x-text-input id="check_in_time" name="check_in_time" type="time" class="mt-1 block w-full" :value="$checkIn" />
                        <x-input-error class="mt-2" :messages="$errors->get('check_in_time')" />
                    </div>

                    <div>
                        <x-input-label for="check_out_time" :value="__('Check-out time')" />
                        <x-text-input id="check_out_time" name="check_out_time" type="time" class="mt-1 block w-full" :value="$checkOut" />
                        <x-input-error class="mt-2" :messages="$errors->get('check_out_time')" />
                        <p class="mt-1 text-xs text-gray-500">{{ __('Times are in the employee\'s own timezone. Leave check-out empty if they are still in.') }}</p>
                    </div>
                </div>
            </fieldset>
        </x-form-panel>

        <x-form-panel step="3" :title="__('Note')" :description="__('Optional. Why the day was recorded this way.')">
            <div>
                <x-input-label for="note" :value="__('Note')" class="sr-only" />
                <x-textarea-input id="note" name="note" class="mt-1 block w-full" rows="3" placeholder="{{ __('e.g. Doctor appointment, worked from home') }}">{{ old('note', $attendance?->note) }}</x-textarea-input>
                <x-input-error class="mt-2" :messages="$errors->get('note')" />
            </div>
        </x-form-panel>

        <div class="flex items-center justify-between gap-3 rounded-2xl bg-white px-6 py-4 shadow-raised sm:px-8">
            <div>
                @if ($attendance)
                    {{-- Submits the delete form that sits outside this one, so the two forms never nest. --}}
                    <x-table-action variant="danger" form="delete-attendance">{{ __('Delete this record') }}</x-table-action>
                @endif
            </div>

            <div class="flex items-center gap-3">
                <x-secondary-button :href="$attendance ? route('attendance.employee', ['user' => $attendance->user_id, 'month' => $attendance->date->format('Y-m')]) : route('attendance.index')">{{ __('Cancel') }}</x-secondary-button>

                <x-primary-button>
                    @unless ($attendance)
                        <x-icon-plus />
                    @endunless

                    {{ $submitLabel }}
                </x-primary-button>
            </div>
        </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>
                {{ __('Employees check themselves in and out from My attendance. Use this form for days they missed, leave, holidays and corrections.') }}
            </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>
                {{ __('A working day with no record counts as absent in the summaries, so mark leave and holidays to keep the numbers right.') }}
            </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>
                {{ __('Days recorded here show "by admin" in the employee\'s history.') }}
            </li>
        </ul>

        @if ($attendance?->marker)
            <p class="mt-2 border-t border-gray-100 pt-3 text-xs text-gray-500">{{ __('Last changed by :name on :date.', ['name' => $attendance->marker->name, 'date' => $attendance->updated_at->format('M j, Y g:i A')]) }}</p>
        @endif
    </aside>
</div>