@php($canEdit = auth()->user()->can('settings.edit'))
<div class="mx-auto max-w-5xl space-y-6">
    <div>
        <h1 class="text-xl font-bold text-ink dark:text-slate-100">{{ __('app.settings.title') }}</h1>
        <p class="mt-1 text-sm text-muted dark:text-slate-400">{{ __('app.settings.desc') }}</p>
    </div>

    <x-settings-nav />

    @if ($notice)
        <x-alert type="success">{{ $notice }}</x-alert>
    @endif

    @if ($errors->any())
        <x-alert type="error">
            <ul class="list-disc space-y-1 ps-4">
                @foreach ($errors->all() as $message)
                    <li>{{ $message }}</li>
                @endforeach
            </ul>
        </x-alert>
    @endif

    @cannot('settings.edit')
        <x-alert type="info">{{ __('app.settings.read_only') }}</x-alert>
    @endcannot

    <form wire:submit="save" class="space-y-6" novalidate>
        <x-card :title="__('app.settings.sections.identity')">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.input name="nameEn" :label="__('app.settings.fields.name_en')" wire:model="nameEn" required :disabled="! $canEdit" />
                <x-form.input name="nameBn" :label="__('app.settings.fields.name_bn')" wire:model="nameBn" required :disabled="! $canEdit" />
                <x-form.input name="sloganEn" :label="__('app.settings.fields.slogan_en')" wire:model="sloganEn" :disabled="! $canEdit" />
                <x-form.input name="sloganBn" :label="__('app.settings.fields.slogan_bn')" wire:model="sloganBn" :disabled="! $canEdit" />
            </div>

            <div class="mt-6 grid gap-4 sm:grid-cols-[auto,1fr] sm:items-center">
                <div class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-2xl bg-slate-100 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
                    @if ($logo)
                        <img src="{{ $logo->temporaryUrl() }}" alt="{{ __('app.settings.fields.logo') }}" class="h-full w-full object-contain">
                    @elseif ($logoPath)
                        <img src="{{ asset($logoPath) }}" alt="{{ __('app.settings.fields.logo') }}" class="h-full w-full object-contain">
                    @else
                        <x-icon name="academic-cap" class="h-9 w-9 text-slate-400" />
                    @endif
                </div>
                <div class="space-y-2">
                    <x-form.input name="logo" type="file" :label="__('app.settings.fields.logo')" wire:model="logo"
                        accept="image/jpeg,image/png,image/webp" :hint="__('app.settings.fields.logo_hint')" :disabled="! $canEdit" />
                    <div class="flex items-center gap-3">
                        <span wire:loading wire:target="logo" class="text-xs text-muted dark:text-slate-400">{{ __('app.settings.uploading') }}</span>
                        @if ($logoPath && $canEdit)
                            <x-button type="button" variant="ghost" class="px-2.5 py-1.5 text-xs"
                                wire:click="removeLogo" wire:confirm="{{ __('app.settings.confirm_remove_logo') }}">
                                <x-icon name="trash" class="h-3.5 w-3.5" />
                                {{ __('app.settings.remove_logo') }}
                            </x-button>
                        @endif
                    </div>
                </div>
            </div>
        </x-card>

        <x-card :title="__('app.settings.sections.contact')">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.textarea name="addressEn" :label="__('app.settings.fields.address_en')" wire:model="addressEn" rows="2" :disabled="! $canEdit" />
                <x-form.textarea name="addressBn" :label="__('app.settings.fields.address_bn')" wire:model="addressBn" rows="2" :disabled="! $canEdit" />
                <x-form.input name="phone" :label="__('app.settings.fields.phone')" wire:model="phone" :disabled="! $canEdit" />
                <x-form.input name="email" type="email" :label="__('app.settings.fields.email')" wire:model="email" :disabled="! $canEdit" />
                <x-form.input name="website" type="url" :label="__('app.settings.fields.website')" wire:model="website" placeholder="https://" :disabled="! $canEdit" />
                <x-form.input name="eiin" :label="__('app.settings.fields.eiin')" wire:model="eiin" :disabled="! $canEdit" />
            </div>
        </x-card>

        <x-card :title="__('app.settings.sections.academic')">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.select name="currentYearId" :label="__('app.settings.fields.current_year')" wire:model="currentYearId"
                    :hint="__('app.settings.fields.current_year_hint')" :disabled="! $canEdit" :placeholder="__('app.settings.fields.current_year_none')">
                    @foreach ($years as $year)
                        <option value="{{ $year->id }}">{{ $year->name }} ({{ $year->code }})</option>
                    @endforeach
                </x-form.select>
                <div class="rounded-xl border border-slate-200 p-4 text-sm text-muted dark:border-slate-700 dark:text-slate-400">
                    <p>{{ __('app.settings.academic.structure_hint') }}</p>
                    @can('academics.view')
                        <a href="{{ route('academics.years.index') }}" class="mt-2 inline-flex items-center gap-1 font-medium text-maroon hover:underline dark:text-gold-light">
                            {{ __('app.settings.academic.open_structure') }}
                            <x-icon name="chevron-right" class="h-4 w-4" />
                        </a>
                    @endcan
                </div>
            </div>
        </x-card>

        <x-card :title="__('app.settings.sections.fees')">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.input name="feeDueDay" type="number" min="1" max="28" :label="__('app.settings.fields.fee_due_day')"
                    wire:model="feeDueDay" :hint="__('app.settings.fields.fee_due_day_hint')" :disabled="! $canEdit" />
            </div>
        </x-card>

        <x-card :title="__('app.settings.sections.sequences')">
            <p class="mb-5 text-sm text-muted dark:text-slate-400">{{ __('app.settings.sequences_hint') }}</p>
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                <x-form.input name="feeInvoicePrefix" :label="__('app.settings.fields.fee_invoice_prefix')" wire:model="feeInvoicePrefix" :disabled="! $canEdit" />
                <x-form.input name="feeReceiptPrefix" :label="__('app.settings.fields.fee_receipt_prefix')" wire:model="feeReceiptPrefix" :disabled="! $canEdit" />
                <x-form.input name="feeRefundPrefix" :label="__('app.settings.fields.fee_refund_prefix')" wire:model="feeRefundPrefix" :disabled="! $canEdit" />
                <x-form.input name="feeJournalPrefix" :label="__('app.settings.fields.fee_journal_prefix')" wire:model="feeJournalPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherReceiptPrefix" :label="__('app.settings.fields.voucher_receipt_prefix')" wire:model="voucherReceiptPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherPaymentPrefix" :label="__('app.settings.fields.voucher_payment_prefix')" wire:model="voucherPaymentPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherContraPrefix" :label="__('app.settings.fields.voucher_contra_prefix')" wire:model="voucherContraPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherTransferPrefix" :label="__('app.settings.fields.voucher_transfer_prefix')" wire:model="voucherTransferPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherJournalPrefix" :label="__('app.settings.fields.voucher_journal_prefix')" wire:model="voucherJournalPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherOpeningPrefix" :label="__('app.settings.fields.voucher_opening_prefix')" wire:model="voucherOpeningPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherPayrollPrefix" :label="__('app.settings.fields.voucher_payroll_prefix')" wire:model="voucherPayrollPrefix" :disabled="! $canEdit" />
                <x-form.input name="voucherStaffAdvancePrefix" :label="__('app.settings.fields.voucher_staff_advance_prefix')" wire:model="voucherStaffAdvancePrefix" :disabled="! $canEdit" />
                <x-form.input name="sequenceWidth" type="number" min="4" max="8" :label="__('app.settings.fields.sequence_width')"
                    wire:model="sequenceWidth" :hint="__('app.settings.fields.sequence_width_hint')" :disabled="! $canEdit" />
            </div>
            <p class="mt-5 text-xs text-amber-700 dark:text-amber-300">{{ __('app.settings.sequences_warning') }}</p>
        </x-card>

        <x-card :title="__('app.settings.sections.language')">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.select name="defaultLocale" :label="__('app.settings.fields.default_locale')" wire:model="defaultLocale"
                    :hint="__('app.settings.fields.default_locale_hint')" :disabled="! $canEdit">
                    @foreach ($locales as $locale)
                        <option value="{{ $locale }}">{{ config('brand.locale_names.'.$locale) }}</option>
                    @endforeach
                </x-form.select>
                <div class="flex items-end">
                    <x-form.checkbox name="switcherEnabled" :label="__('app.settings.fields.switcher_enabled')"
                        :hint="__('app.settings.fields.switcher_hint')" wire:model="switcherEnabled" :disabled="! $canEdit" />
                </div>
            </div>
        </x-card>

        <x-card :title="__('app.settings.sections.notifications')">
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <x-form.checkbox name="emailEnabled" :label="__('app.settings.fields.email_enabled')"
                        :hint="__('app.settings.fields.email_enabled_hint')" wire:model="emailEnabled" :disabled="! $canEdit" />
                </div>
                <div>
                    <x-form.checkbox name="smsEnabled" :label="__('app.settings.fields.sms_enabled')"
                        :hint="__('app.settings.fields.sms_enabled_hint')" wire:model="smsEnabled" :disabled="! $canEdit" />
                </div>
            </div>
            <p class="mt-4 text-xs text-muted dark:text-slate-400">{{ __('app.settings.notifications.config_note') }}</p>
        </x-card>

        @can('settings.edit')
            <div class="flex justify-end">
                <x-button type="submit" wire:loading.attr="disabled" wire:target="save">
                    {{ __('app.actions.save') }}
                </x-button>
            </div>
        @endcan
    </form>
</div>