@extends('layouts.app')
@section('title', 'Preferences · Settings')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('settings.index') }}">Settings</a></li>
    <li class="breadcrumb-item active" aria-current="page">Preferences</li>
@endsection

@section('content')
    <x-layout.page-header title="Preferences" subtitle="Regional, financial and document defaults." icon="sliders2" />
    @include('pages.settings._tabs', ['active' => 'preferences'])

    <form method="POST" action="{{ route('settings.preferences.update') }}" class="settings-form">
        @csrf
        @method('PUT')

        <x-ui.card title="Regional" icon="globe2">
            <div class="row g-3">
                <div class="col-md-4">
                    <x-form.select name="currency" label="Currency"
                        :options="collect($currencies)->mapWithKeys(fn($c)=>[$c=>$c])->all()"
                        :value="$company->currency" required />
                </div>
                <div class="col-md-4">
                    <x-form.select name="timezone" label="Timezone"
                        :options="collect($timezones)->mapWithKeys(fn($t)=>[$t=>$t])->all()"
                        :value="$company->timezone" required />
                </div>
                <div class="col-md-4">
                    <x-form.select name="locale" label="Language"
                        :options="$locales"
                        :value="$company->locale" required />
                </div>
                <div class="col-md-4">
                    <x-form.select name="date_format" label="Date format"
                        :options="['d M Y' => '05 Aug 2026', 'd/m/Y' => '05/08/2026', 'Y-m-d' => '2026-08-05', 'M d, Y' => 'Aug 05, 2026']"
                        :value="$company->date_format" required />
                </div>
            </div>
        </x-ui.card>

        <x-ui.card title="Financial year & documents" icon="cash-coin">
            <div class="row g-3">
                <div class="col-md-4">
                    <x-form.select name="financial_year_start_month" label="Financial year starts"
                        :options="$months" :value="$company->financial_year_start_month" required />
                </div>
                <div class="col-md-4">
                    <x-form.input name="invoice_prefix" label="Invoice prefix"
                        :value="$company->invoice_prefix" required maxlength="8" />
                </div>
                <div class="col-md-4">
                    <x-form.input name="purchase_prefix" label="Purchase prefix"
                        :value="$company->purchase_prefix" required maxlength="8" />
                </div>
                <div class="col-md-4">
                    <x-form.input name="default_tax_rate" label="Default tax rate (%)"
                        type="number" step="0.01" min="0" max="50"
                        :value="$company->default_tax_rate" />
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <x-form.checkbox name="tax_inclusive" label="Prices are tax-inclusive by default"
                        :checked="(bool) $company->tax_inclusive" />
                </div>
                <div class="col-md-4">
                    <x-form.select name="default_printer" label="Default printer"
                        :options="['a4' => 'A4', 'a5' => 'A5', 'thermal_58' => '58 mm Thermal', 'thermal_80' => '80 mm Thermal']"
                        :value="$company->default_printer" required />
                </div>
            </div>
        </x-ui.card>

        <x-layout.sticky-save label="Save preferences" :cancel-href="route('settings.index')" />
    </form>
@endsection