@php
    $user = auth()->user();
    $initialKantor = old('kantor_id', $suratMasuk->kantor_id ?? ($user->kantor_id ?? null));
    $initialBagian = old('bagian_id', $suratMasuk->bagian_id ?? ($user->bagian_id ?? null));
    $bagianOptions = $bagianList->map(fn ($bagian) => [
        'id' => $bagian->id,
        'nama' => $bagian->nama_bagian,
        'kantor_id' => $bagian->kantor_id,
    ]);
    $initialKategori = old(
        'kategori_id',
        $suratMasuk->kategori_id
            ?? ($kategoriList->count() === 1 ? $kategoriList->first()->id : ($user->kategori_surat_id ?? null))
    );
    $defaultTanggal = old(
        'tanggal_surat',
        optional($suratMasuk->tanggal_surat)->format('Y-m-d') ?: now()->format('Y-m-d')
    );
@endphp

@csrf

<div class="grid gap-6 lg:grid-cols-2">
    <div class="space-y-6">
        <div>
            <x-input-label for="nomor_surat" value="Nomor Surat" />
            <x-text-input id="nomor_surat" name="nomor_surat" type="text" class="mt-2 w-full"
                :value="old('nomor_surat', $suratMasuk->nomor_surat ?? '')" required />
            <x-input-error :messages="$errors->get('nomor_surat')" class="mt-2" />
        </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"
                value="{{ $defaultTanggal }}" required />
            <x-input-error :messages="$errors->get('tanggal_surat')" 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', $suratMasuk->pengirim ?? '')" required />
            <x-input-error :messages="$errors->get('pengirim')" 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', $suratMasuk->penerima ?? '')" required />
            <x-input-error :messages="$errors->get('penerima')" class="mt-2" />
        </div>
    </div>

    <div class="space-y-6">
        @if ($user->isSuperAdmin())
            <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. Tambahkan kategori terlebih dahulu.
                    </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"
                        required>
                        <option value="">Pilih kategori...</option>
                        @foreach ($kategoriList as $kategori)
                            <option value="{{ $kategori->id }}" @selected((string) $initialKategori === (string) $kategori->id)>
                                {{ $kategori->nama_kategori }} ({{ $kategori->kode }})
                            </option>
                        @endforeach
                    </select>
                @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"
                    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>
                <x-input-error :messages="$errors->get('kantor_id')" class="mt-2" />

                <div class="mt-6">
                    <x-input-label for="bagian_id" value="Bagian" />
                    <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>
                    <x-input-error :messages="$errors->get('bagian_id')" class="mt-2" />
                </div>
            </div>
        @else
            @if ($kategoriList->isEmpty() || ! $initialKategori)
                <div class="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 untuk akun ini belum disetel. Hubungi superadmin agar dapat menggunakan fitur ini.
                </div>
            @endif
            <input type="hidden" name="kategori_id" value="{{ $initialKategori }}">
            <input type="hidden" name="kantor_id" value="{{ $initialKantor }}">
            <input type="hidden" name="bagian_id" value="{{ $initialBagian }}">
        @endif

        <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', $suratMasuk->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($suratMasuk->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($suratMasuk->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-masuk.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>