{{-- Form bersama tambah & ubah naskah keluar.
     Variabel: $surat, $daftarKategori, $daftarKlasifikasi, $daftarDerajat, $daftarPenandatangan, $denganUnggah (opsional) --}}
@php
    $nilai = fn (string $kolom, $bawaan = null) => old($kolom, $bawaan);
    // Nomor agenda diisi manual: saat tambah (untuk Simpan & Agendakan) atau koreksi bila sudah diagendakan.
    $tampilAgenda = ! $surat->exists || $surat->nomor_agenda;
    $jenisTujuan = $nilai('jenis_tujuan', $surat->jenis_tujuan ?? \App\Models\Transaksi\SuratKeluar::TUJUAN_INTERNAL);
@endphp

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-paper-plane mr-1"></i> Identitas naskah keluar</h3></div>
            <div class="card-body">
                <div class="form-row">
                    @if ($tampilAgenda)
                        <div class="form-group col-md-4">
                            <label for="nomor_agenda">Nomor agenda @if ($surat->exists)<span class="wajib">*</span>@endif</label>
                            <input type="text" id="nomor_agenda" name="nomor_agenda" maxlength="50" @if ($surat->exists) required @endif
                                   value="{{ $nilai('nomor_agenda', $surat->nomor_agenda) }}"
                                   class="form-control @error('nomor_agenda') is-invalid @enderror" placeholder="Sesuai buku agenda">
                            @error('nomor_agenda')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            @unless ($surat->exists)
                                <small class="form-text teks-redup">Wajib untuk <b>Simpan &amp; Agendakan</b>.</small>
                            @endunless
                        </div>
                    @endif
                    <div class="form-group {{ $tampilAgenda ? 'col-md-5' : 'col-md-8' }}">
                        <label for="nomor_surat">Nomor naskah <span class="wajib">*</span></label>
                        <input type="text" id="nomor_surat" name="nomor_surat" maxlength="100" required
                               value="{{ $nilai('nomor_surat', $surat->nomor_surat) }}"
                               class="form-control @error('nomor_surat') is-invalid @enderror" placeholder="Sesuai nomor pada naskah yang sudah ditandatangani">
                        @error('nomor_surat')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <small class="form-text teks-redup">Diisi manual dan harus unik.</small>
                    </div>
                    <div class="form-group {{ $tampilAgenda ? 'col-md-3' : 'col-md-4' }}">
                        <label for="tanggal_surat">Tanggal naskah <span class="wajib">*</span></label>
                        <input type="date" id="tanggal_surat" name="tanggal_surat" required max="{{ today()->toDateString() }}"
                               value="{{ $nilai('tanggal_surat', $surat->tanggal_surat?->toDateString()) }}"
                               class="form-control @error('tanggal_surat') is-invalid @enderror">
                        @error('tanggal_surat')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="form-group">
                    <label class="d-block">Jenis tujuan <span class="wajib">*</span></label>
                    <div class="custom-control custom-radio">
                        <input type="radio" id="jenis_internal" name="jenis_tujuan" value="INTERNAL" class="custom-control-input" @checked($jenisTujuan === 'INTERNAL')>
                        <label class="custom-control-label" for="jenis_internal">
                            Unit kerja lain (lewat aplikasi)
                            <span class="small teks-redup d-block">Mis. Yayasan atau sekolah: setelah diagendakan, dikirim ke Naskah Masuk unit kerja tujuan; pimpinan Anda menerima pemberitahuan.</span>
                        </label>
                    </div>
                    <div class="custom-control custom-radio mt-1">
                        <input type="radio" id="jenis_eksternal" name="jenis_tujuan" value="EKSTERNAL" class="custom-control-input" @checked($jenisTujuan === 'EKSTERNAL')>
                        <label class="custom-control-label" for="jenis_eksternal">
                            Pihak luar
                            <span class="small teks-redup d-block">Mis. dinas atau instansi lain: hanya dicatat, langsung menjadi arsip setelah diagendakan.</span>
                        </label>
                    </div>
                    @error('jenis_tujuan')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>

                <div class="form-row" id="isian-tujuan">
                    <div class="form-group col-md-6">
                        <label for="nama_tujuan">Tujuan naskah <span class="wajib">*</span></label>
                        <input type="text" id="nama_tujuan" name="nama_tujuan" maxlength="150" required list="saran-tujuan" autocomplete="off"
                               value="{{ $nilai('nama_tujuan', $surat->tujuan?->nama_tujuan) }}"
                               class="form-control @error('nama_tujuan') is-invalid @enderror" placeholder="mis. Kepala Dinas Pendidikan">
                        <datalist id="saran-tujuan"></datalist>
                        @error('nama_tujuan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group col-md-6">
                        <label for="instansi_tujuan">Instansi tujuan</label>
                        <input type="text" id="instansi_tujuan" name="instansi_tujuan" maxlength="150"
                               value="{{ $nilai('instansi_tujuan', $surat->tujuan?->instansi) }}"
                               class="form-control @error('instansi_tujuan') is-invalid @enderror">
                        @error('instansi_tujuan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="form-group">
                    <label for="perihal">Perihal <span class="wajib">*</span></label>
                    <input type="text" id="perihal" name="perihal" maxlength="255" required value="{{ $nilai('perihal', $surat->perihal) }}"
                           class="form-control @error('perihal') is-invalid @enderror">
                    @error('perihal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="form-group">
                    <label for="ringkasan">Ringkasan isi</label>
                    <textarea id="ringkasan" name="ringkasan" rows="3" maxlength="5000"
                              class="form-control @error('ringkasan') is-invalid @enderror">{{ $nilai('ringkasan', $surat->ringkasan) }}</textarea>
                    @error('ringkasan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="form-row mb-n3">
                    <div class="form-group col-md-8">
                        <label for="id_penandatangan">Penandatangan <span class="wajib">*</span></label>
                        <select id="id_penandatangan" name="id_penandatangan" required class="custom-select @error('id_penandatangan') is-invalid @enderror">
                            @foreach ($daftarPenandatangan as $p)
                                <option value="{{ $p->id }}" @selected($nilai('id_penandatangan', $surat->id_penandatangan) == $p->id)>{{ $p->nama }} — {{ $p->jabatan->nama_jabatan }}</option>
                            @endforeach
                        </select>
                        @error('id_penandatangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group col-md-4">
                        <label for="lampiran">Lampiran</label>
                        <input type="text" id="lampiran" name="lampiran" maxlength="100" value="{{ $nilai('lampiran', $surat->lampiran) }}"
                               class="form-control @error('lampiran') is-invalid @enderror" placeholder="mis. 1 berkas">
                        @error('lampiran')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-tags mr-1"></i> Atribut naskah</h3></div>
            <div class="card-body pb-1">
                <x-isian-atribut-naskah :surat="$surat" :daftar-kategori="$daftarKategori" :daftar-klasifikasi="$daftarKlasifikasi"
                                        :daftar-derajat="$daftarDerajat" />
            </div>
        </div>

        @if ($denganUnggah ?? false)
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="fas fa-file-arrow-up mr-1"></i> Upload naskah</h3></div>
                <div class="card-body pb-1">
                    <x-unggah-file name="file" label="File naskah yang sudah ditandatangani" />
                </div>
            </div>
        @endif
    </div>
</div>

@push('js')
<script>
$(function () {
    let saran = [];
    let tunda;
    $('#nama_tujuan').on('input', function () {
        clearTimeout(tunda);
        const q = this.value.trim();
        if (q.length < 2) return;
        tunda = setTimeout(() => {
            $.ajax({ url: @json(route('surat-keluar.tujuan')), data: { q }, tanpaLoading: true }).done((data) => {
                saran = data;
                $('#saran-tujuan').html(data.map((t) => $('<option>').val(t.nama_tujuan).text(t.instansi || '')));
            });
        }, 250);
    }).on('change', function () {
        const cocok = saran.find((t) => t.nama_tujuan === this.value);
        if (cocok && cocok.instansi && !$('#instansi_tujuan').val()) $('#instansi_tujuan').val(cocok.instansi);
    });

    // "Simpan & Agendakan" mewajibkan nomor agenda; "Simpan Draft" tidak.
    $('button[name="aksi"]').on('click', function () {
        $('#nomor_agenda').prop('required', this.value === 'agendakan');
    });
});
</script>
@endpush