@php
    $user = auth()->user();
    $initialKantor = old('kantor_id', $suratKeluar->kantor_id ?? ($user->kantor_id ?? null));
    $initialBagian = old('bagian_id', $suratKeluar->bagian_id ?? ($user->bagian_id ?? null));
    $initialKategori = old('kategori_id', $suratKeluar->kategori_id ?? ($kategoriList->first()->id ?? null));
    $initialTanggal = old('tanggal_surat', optional($suratKeluar->tanggal_surat)->format('Y-m-d') ?? now()->format('Y-m-d'));
    $initialManual = old('manual_segment', $suratKeluar->nomor_surat ? \App\Models\SuratKeluar::extractSegment($suratKeluar->nomor_surat, 1) : '');
    $initialSequence = $suratKeluar->nomor_surat ? str_pad((string) \App\Models\SuratKeluar::extractSequence($suratKeluar->nomor_surat), 3, '0', STR_PAD_LEFT) : '';
    $initialMonth = $suratKeluar->nomor_surat ? \App\Models\SuratKeluar::extractSegment($suratKeluar->nomor_surat, 2) : '';
    $initialYear = $suratKeluar->nomor_surat ? \App\Models\SuratKeluar::extractSegment($suratKeluar->nomor_surat, 3) : '';
    if (! $suratKeluar->exists && $initialKategori) {
        $defaultManual = $initialManual
            ?: (\App\Models\SuratKeluar::latestManualForKategori((int) $initialKategori)
                ?? optional($kategoriList->firstWhere('id', $initialKategori))->prefix_nomor
                ?? 'GEN');

        $components = \App\Models\SuratKeluar::composeNomor(
            (int) $initialKategori,
            $defaultManual,
            \Carbon\Carbon::parse($initialTanggal)
        );

        $initialSequence = $initialSequence ?: $components['sequence'];
        $initialMonth = $initialMonth ?: $components['month'];
        $initialYear = $initialYear ?: $components['year'];
        $initialManual = $initialManual ?: $components['manual'];
    }
    $bagianOptions = $bagianList->map(fn ($bagian) => [
        'id' => $bagian->id,
        'nama' => $bagian->nama_bagian,
        'kantor_id' => $bagian->kantor_id,
    ]);
@endphp

@csrf

<div
    x-data="suratKeluarNomor({
        endpoint: '{{ route('surat-keluar.preview', [], false) }}',
        initialKategori: '{{ $initialKategori }}',
        initialTanggal: '{{ $initialTanggal }}',
        initialManual: '{{ $initialManual }}',
        initialSequence: '{{ $initialSequence }}',
        initialMonth: '{{ $initialMonth }}',
        initialYear: '{{ $initialYear }}',
        kategoriOptions: {{ $kategoriList->map(fn ($kategori) => [
            'id' => $kategori->id,
            'prefix' => $kategori->prefix_nomor,
        ])->values()->toJson() }}
    })"
    class="grid gap-6 lg:grid-cols-2"
>
    <div class="space-y-6">
        <div>
            <x-input-label value="Nomor Surat" />
            <div class="mt-2 grid gap-3 sm:grid-cols-4">
                <div>
                    <span class="text-xs font-semibold uppercase text-slate-400">Urut</span>
                    <input type="text" readonly
                        class="mt-1 block w-full rounded-xl border border-slate-200/80 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700"
                        x-bind:value="sequence"
                    >
                </div>
                <div class="sm:col-span-2">
                    <span class="text-xs font-semibold uppercase text-slate-400">Segmen Manual</span>
                    <input type="text"
                        class="mt-1 block w-full rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 bg-slate-50 dark:bg-slate-900/70"
                        x-model="manualSegment"
                        readonly
                    >
                </div>
                <div>
                    <span class="text-xs font-semibold uppercase text-slate-400">Bulan</span>
                    <input type="text" readonly
                        class="mt-1 block w-full rounded-xl border border-slate-200/80 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700"
                        x-bind:value="month"
                    >
                </div>
                <div>
                    <span class="text-xs font-semibold uppercase text-slate-400">Tahun</span>
                    <input type="text" readonly
                        class="mt-1 block w-full rounded-xl border border-slate-200/80 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700"
                        x-bind:value="year"
                    >
                </div>
            </div>
            <p class="mt-2 text-xs text-slate-500">Format akhir: <span class="font-semibold text-slate-700" x-text="nomorLengkap"></span></p>
            <x-input-error :messages="$errors->get('manual_segment')" class="mt-2" />
            <input type="hidden" name="manual_segment" x-bind:value="manualSegment">
        </div>

        <div>
            <x-input-label for="tanggal_surat" value="Tanggal Surat" />
            <x-text-input id="tanggal_surat" name="tanggal_surat" type="date" class="mt-2 w-full"
                x-model="tanggal"
                value="{{ $initialTanggal }}"
                required />
            <x-input-error :messages="$errors->get('tanggal_surat')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="penerima" value="Penerima" />
            <x-text-input id="penerima" name="penerima" type="text" class="mt-2 w-full"
                :value="old('penerima', $suratKeluar->penerima ?? '')" required />
            <x-input-error :messages="$errors->get('penerima')" class="mt-2" />
        </div>

        <div>
            <x-input-label for="pengirim" value="Pengirim" />
            <x-text-input id="pengirim" name="pengirim" type="text" class="mt-2 w-full"
                :value="old('pengirim', $suratKeluar->pengirim ?? '')" required />
            <x-input-error :messages="$errors->get('pengirim')" class="mt-2" />
        </div>
    </div>

    <div class="space-y-6">
        <div>
            <x-input-label for="kategori_id" value="Kategori Surat" />
            @if ($kategoriList->isEmpty())
                <div class="mt-2 rounded-xl border border-dashed border-amber-400/70 bg-amber-50/60 px-4 py-3 text-sm text-amber-700 dark:border-amber-300/40 dark:bg-amber-500/10 dark:text-amber-200">
                    Kategori surat belum dikonfigurasi untuk akun Anda. Hubungi superadmin.
                </div>
            @else
                <select id="kategori_id" name="kategori_id"
                    class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800"
                    x-model="kategoriId"
                    x-on:change="handleKategoriChange($event.target.value)"
                    {{ $user->isSuperAdmin() ? '' : 'disabled' }}
                    required>
                    @if ($user->isSuperAdmin())
                        <option value="">Pilih kategori...</option>
                    @endif
                    @foreach ($kategoriList as $kategori)
                        <option value="{{ $kategori->id }}" @selected((string) $initialKategori === (string) $kategori->id)>
                            {{ $kategori->nama_kategori }} ({{ $kategori->kode }})
                        </option>
                    @endforeach
                </select>
                @if (! $user->isSuperAdmin())
                    <input type="hidden" name="kategori_id" x-bind:value="kategoriId">
                    <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Kategori mengikuti pengaturan superadmin.</p>
                @endif
            @endif
            <x-input-error :messages="$errors->get('kategori_id')" class="mt-2" />
        </div>

        <div x-data="bagianFilter({ bagians: {{ $bagianOptions->toJson() }}, initialBagian: '{{ $initialBagian }}', initialKantor: '{{ $initialKantor }}' })" x-init="init()">
            <x-input-label for="kantor_id" value="Kantor" />
            <select id="kantor_id" name="kantor_id"
                class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800"
                {{ $user->isSuperAdmin() ? '' : 'disabled' }}
                x-on:change="handleKantorChange($event.target.value)"
                x-model="selectedKantor">
                <option value="">Pilih kantor...</option>
                @foreach ($kantorList as $kantor)
                    <option value="{{ $kantor->id }}" @selected((string) $initialKantor === (string) $kantor->id)>
                        {{ $kantor->nama_kantor }}
                    </option>
                @endforeach
            </select>
            @if (! $user->isSuperAdmin())
                <input type="hidden" name="kantor_id" x-bind:value="selectedKantor">
            @endif
            <x-input-error :messages="$errors->get('kantor_id')" class="mt-2" />
            @if (! $user->isSuperAdmin())
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Kantor mengikuti hak akses akun Anda.</p>
            @endif

            <div class="mt-6">
                <x-input-label for="bagian_id" value="Bagian" />
                @if ($user->isSuperAdmin())
                    <select id="bagian_id" name="bagian_id"
                        class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800"
                        x-model="selectedBagian">
                        <option value="">Pilih bagian...</option>
                        <template x-for="bagian in filteredBagians" :key="bagian.id">
                            <option :value="bagian.id" x-text="bagian.nama"></option>
                        </template>
                    </select>
                @else
                    <input type="text"
                        class="mt-2 block w-full rounded-xl border border-slate-200/80 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700 dark:border-slate-700/70 dark:bg-slate-900/70 dark:text-slate-100"
                        value="{{ $user->bagian?->nama_bagian ?? '-' }}"
                        readonly>
                    <input type="hidden" name="bagian_id" value="{{ $initialBagian }}">
                @endif
                <x-input-error :messages="$errors->get('bagian_id')" class="mt-2" />
            </div>
        </div>

        <div>
            <x-input-label for="perihal" value="Perihal" />
            <textarea id="perihal" name="perihal" rows="4"
                class="mt-2 w-full rounded-xl border-slate-200 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100">{{ old('perihal', $suratKeluar->perihal ?? '') }}</textarea>
            <x-input-error :messages="$errors->get('perihal')" class="mt-2" />
        </div>
    </div>
</div>

<div class="mt-6 border-t border-slate-200 dark:border-slate-700 pt-6">
    <x-input-label for="file_surat" value="File Surat (PDF, DOC, JPG)" />
    <input id="file_surat" name="file_surat" type="file" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
        class="mt-2 w-full rounded-xl border border-dashed border-slate-300 bg-white/40 dark:border-slate-600 dark:bg-slate-900/40" />
    <x-input-error :messages="$errors->get('file_surat')" class="mt-2" />

    @if (! empty($suratKeluar->file_surat))
        <div class="mt-4 flex items-center justify-between rounded-xl bg-slate-100 px-4 py-3 text-sm dark:bg-slate-800">
            <a href="{{ \Illuminate\Support\Facades\Storage::url($suratKeluar->file_surat) }}" target="_blank" class="text-accent hover:text-accentDark font-medium">
                Lihat file saat ini
            </a>
            <label class="flex items-center gap-2 text-slate-500 dark:text-slate-300 text-xs">
                <input type="checkbox" name="remove_file" value="1" class="rounded border-slate-300">
                Hapus file
            </label>
        </div>
    @endif
</div>

<div class="mt-8 flex items-center justify-end gap-3">
    <a href="{{ route('surat-keluar.index') }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
        Batal
    </a>
    <x-primary-button class="px-6 py-2.5">
        Simpan
    </x-primary-button>
</div>