@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('me.attendance_title'), 'url' => route('me.attendance.index')],
        ['label' => __('attendance_corrections.employee_title'), 'url' => route('me.attendance.corrections.index')],
        ['label' => __('attendance_corrections.create_title')],
    ];
    $typeOptions = collect($types)->mapWithKeys(fn ($t) => [$t => __('attendance_corrections.types.'.$t)])->all();
@endphp

<x-ui.layout.page
    :title="__('attendance_corrections.create_title')"
    :subtitle="__('attendance_corrections.create_subtitle')"
    page-icon="fe fe-plus"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('me.attendance.corrections.index')" icon="fe fe-arrow-left">
            {{ __('common.back') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    @if (empty($recordOptions))
        <div class="alert alert-info border-0 shadow-sm">{{ __('attendance_corrections.empty') }}</div>
    @else
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <form method="POST" action="{{ route('me.attendance.corrections.store') }}" class="row g-3">
                    @csrf
                    <div class="col-md-6">
                        <x-ui.form.search-select
                            name="attendance_record_id"
                            :label="__('attendance_corrections.fields.record')"
                            :options="$recordOptions"
                            :selected="old('attendance_record_id', $selectedRecordId ?? null)"
                            :placeholder="__('common.select')"
                            required
                        />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.select
                            name="type"
                            :label="__('attendance_corrections.fields.type')"
                            :options="$typeOptions"
                            :selected="old('type', $selectedType ?? null)"
                            :placeholder="__('common.select')"
                            required
                        />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input
                            name="requested_check_in"
                            type="datetime-local"
                            :label="__('attendance_corrections.fields.requested_check_in')"
                            :value="old('requested_check_in')"
                        />
                    </div>
                    <div class="col-md-6">
                        <x-ui.form.input
                            name="requested_check_out"
                            type="datetime-local"
                            :label="__('attendance_corrections.fields.requested_check_out')"
                            :value="old('requested_check_out')"
                        />
                    </div>
                    <div class="col-12">
                        <x-ui.form.field name="reason" :label="__('attendance_corrections.fields.reason')" required>
                            <textarea
                                id="reason"
                                name="reason"
                                class="form-control @error('reason') is-invalid @enderror"
                                rows="4"
                                required
                            >{{ old('reason') }}</textarea>
                        </x-ui.form.field>
                    </div>
                    <div class="col-12">
                        <x-ui.buttons.primary type="submit" icon="fe fe-send">
                            {{ __('attendance_corrections.actions.submit') }}
                        </x-ui.buttons.primary>
                    </div>
                </form>
            </div>
        </div>
    @endif
</x-ui.layout.page>
