@php
    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('payroll.title'), 'url' => route('payroll.periods.index')],
        ['label' => __('payroll.create_title')],
    ];
@endphp

<x-ui.layout.page
    :title="__('payroll.create_title')"
    page-icon="fe fe-plus"
    :breadcrumbs="$breadcrumbs"
>
    <x-slot:actions>
        <x-ui.buttons.secondary :href="route('payroll.periods.index')" icon="fe fe-arrow-left">
            {{ __('payroll.actions.back') }}
        </x-ui.buttons.secondary>
    </x-slot:actions>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <form method="POST" action="{{ route('payroll.periods.store') }}" class="row g-3">
                @csrf
                <div class="col-md-12">
                    <x-ui.form.input name="name" :label="__('payroll.fields.name')" :value="old('name')" required />
                </div>
                <div class="col-md-6">
                    <x-ui.form.input name="start_date" type="date" :label="__('payroll.fields.start_date')" :value="old('start_date')" required />
                </div>
                <div class="col-md-6">
                    <x-ui.form.input name="end_date" type="date" :label="__('payroll.fields.end_date')" :value="old('end_date')" required />
                </div>
                <div class="col-12">
                    <x-ui.buttons.primary type="submit" icon="fe fe-save">
                        {{ __('common.save') }}
                    </x-ui.buttons.primary>
                </div>
            </form>
        </div>
    </div>
</x-ui.layout.page>
