@extends('layouts.app')

@section('judul', 'Buat Disposisi')
@section('subjudul', $surat->nomor_agenda.' · '.$surat->perihal)

@section('aksi-header')
    <a href="{{ route('surat-masuk.show', $surat) }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Kembali</a>
@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('vendor/select2/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/select2/select2-bootstrap4.min.css') }}">
@endpush

@section('konten')
    @php($rincianLama = (object) old('rincian', []))
    <div class="row">
        <div class="col-lg-7">
            @if ($pilihan['pengguna']->isEmpty() && $pilihan['unit']->isEmpty())
                <div class="card">
                    <div class="card-body">
                        <x-kosong judul="Tidak ada penerima yang dapat dipilih" ikon="fa-users-slash"
                                  pesan="Belum ada sub unit kerja atau pengguna sub unit kerja di unit kerja Anda. Hubungi administrator bila struktur organisasi perlu disesuaikan." />
                    </div>
                </div>
            @else
                <form method="POST" action="{{ route('disposisi.store', $surat) }}"
                      id="form-disposisi" class="form-validasi" data-konfirmasi="Disposisi akan langsung dikirim dan seluruh penerima mendapat notifikasi."
                      data-judul="Distribusikan disposisi?" data-tombol="Ya, distribusikan">
                    @csrf
                    <div class="card">
                        <div class="card-header"><h3 class="card-title"><i class="fas fa-users mr-1"></i> Penerima <span class="wajib text-danger">*</span></h3></div>
                        <div class="card-body">
                            <select id="penerima" name="penerima[]" multiple required class="form-control @error('penerima') is-invalid @enderror" data-placeholder="Pilih orang dan/atau unit kerja…">
                                @if ($pilihan['unit']->isNotEmpty())
                                    <optgroup label="Sub unit kerja (diterima oleh siapa pun di sub unit itu)">
                                        @foreach ($pilihan['unit'] as $u)
                                            <option value="n:{{ $u->id }}" @selected(in_array("n:{$u->id}", old('penerima', [])))>Unit kerja {{ $u->nama_unit }}</option>
                                        @endforeach
                                    </optgroup>
                                @endif
                                @foreach ($pilihan['pengguna']->groupBy(fn ($p) => $p->unit->nama_unit) as $namaUnit => $daftar)
                                    <optgroup label="{{ $namaUnit }}">
                                        @foreach ($daftar as $p)
                                            <option value="u:{{ $p->id }}" @selected(in_array("u:{$p->id}", old('penerima', [])))>{{ $p->nama }}{{ $p->jabatan ? ' — '.$p->jabatan->nama_jabatan : '' }}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                            @error('penerima')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            <small class="form-text teks-redup">Setiap penerima memiliki status dan progres masing-masing. Penyelesaian satu penerima tidak menyelesaikan penerima lain.</small>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><h3 class="card-title"><i class="fas fa-list-check mr-1"></i> Aksi &amp; instruksi umum</h3></div>
                        <div class="card-body pb-2">
                            <p class="small teks-redup mb-2">Berlaku untuk semua penerima, kecuali penerima yang diberi aksi atau instruksi khusus di bawah.</p>
                            <div class="row">
                                @foreach ($daftarAksi as $aksi)
                                    <div class="col-6 col-md-4 mb-2">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input aksi-umum" id="aksi-{{ $aksi->id }}" name="id_aksi[]" value="{{ $aksi->id }}"
                                                   data-nama="{{ $aksi->nama_aksi }}" @checked(in_array($aksi->id, old('id_aksi', [])))>
                                            <label class="custom-control-label font-weight-normal" for="aksi-{{ $aksi->id }}">{{ $aksi->nama_aksi }}</label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @error('id_aksi')<div class="text-danger small mb-2">{{ $message }}</div>@enderror

                            <div class="form-group mt-2">
                                <label for="instruksi">Instruksi umum</label>
                                <textarea id="instruksi" name="instruksi" rows="3" maxlength="5000"
                                          class="form-control @error('instruksi') is-invalid @enderror"
                                          placeholder="Opsional: penjelasan untuk seluruh penerima">{{ old('instruksi') }}</textarea>
                                @error('instruksi')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="card" id="kartu-rincian" style="display:none">
                        <div class="card-header"><h3 class="card-title"><i class="fas fa-user-tag mr-1"></i> Aksi &amp; instruksi per penerima</h3></div>
                        <div class="card-body pb-1">
                            <p class="small teks-redup mb-3">Isi bila perlakuan penerima dibedakan, mis. Kabid A <b>Tindak Lanjuti</b>, Kabid B <b>ACC</b>, Bendahara <b>Laporkan</b>. Kosongkan untuk mengikuti aksi/instruksi umum.</p>
                            @error('rincian')<div class="alert alert-danger py-2 small">{{ $message }}</div>@enderror
                            <div id="daftar-rincian"></div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header"><h3 class="card-title"><i class="fas fa-calendar-day mr-1"></i> Batas waktu &amp; keterangan</h3></div>
                        <div class="card-body">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="tanggal_batas">Batas waktu tindak lanjut</label>
                                    <input type="date" id="tanggal_batas" name="tanggal_batas" min="{{ today()->toDateString() }}" value="{{ old('tanggal_batas') }}"
                                           class="form-control @error('tanggal_batas') is-invalid @enderror">
                                    @error('tanggal_batas')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    <div class="mt-1">
                                        @foreach ([3, 7, 14] as $hari)
                                            <button type="button" class="btn btn-xs btn-light border mr-1 isi-batas" data-hari="{{ $hari }}">+{{ $hari }} hari</button>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="keterangan">Keterangan tambahan</label>
                                    <input type="text" id="keterangan" name="keterangan" maxlength="1000" value="{{ old('keterangan') }}"
                                           class="form-control @error('keterangan') is-invalid @enderror">
                                    @error('keterangan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-white text-right">
                            <button type="submit" class="btn btn-primary"><i class="fas fa-share-nodes mr-1"></i> Simpan &amp; Distribusikan</button>
                        </div>
                    </div>
                </form>

                {{-- Templat satu baris rincian penerima; __KUNCI__ diganti kunci penerima (u:ID / n:ID). --}}
                <template id="templat-rincian">
                    <div class="baris-rincian border rounded p-2 mb-2" data-kunci="__KUNCI__">
                        <div class="fw-semibold mb-2 nama-penerima" style="color:var(--ss-navy)"></div>
                        <div class="form-row">
                            <div class="form-group col-md-5 mb-2">
                                <label class="small mb-1">Aksi</label>
                                <select name="rincian[__KUNCI__][id_aksi][]" multiple class="form-control pilih-aksi">
                                    @foreach ($daftarAksi as $aksi)
                                        <option value="{{ $aksi->id }}">{{ $aksi->nama_aksi }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-7 mb-2">
                                <label class="small mb-1">Instruksi khusus</label>
                                <textarea name="rincian[__KUNCI__][instruksi]" rows="2" maxlength="5000" class="form-control form-control-sm isi-instruksi"
                                          placeholder="Kosongkan untuk mengikuti instruksi umum"></textarea>
                            </div>
                        </div>
                    </div>
                </template>
            @endif
        </div>

        <div class="col-lg-5">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Naskah</h3>
                    <x-badge-atribut :surat="$surat" />
                </div>
                <div class="card-body">
                    <dl class="daftar-info mb-0">
                        <dt>Perihal</dt><dd>{{ $surat->perihal }}</dd>
                        <dt>Pengirim</dt><dd>{{ $surat->pengirim->label }}</dd>
                        <div class="row">
                            <div class="col-6"><dt>Nomor naskah</dt><dd>{{ $surat->nomor_surat }}</dd></div>
                            <div class="col-6"><dt>Tanggal naskah</dt><dd>{{ $surat->tanggal_surat->translatedFormat('d M Y') }}</dd></div>
                        </div>
                        @if ($surat->ringkasan)<dt>Ringkasan</dt><dd class="mb-0" style="white-space:pre-line">{{ $surat->ringkasan }}</dd>@endif
                    </dl>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <x-preview-dokumen :file="$surat->fileTerbaru"
                                       :url-lihat="$surat->fileTerbaru ? route('dokumen.surat-masuk.lihat', $surat->fileTerbaru) : null" />
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js-vendor')
    <script src="{{ asset('vendor/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/i18n/id.js') }}"></script>
@endpush

@push('js')
<script>
$(function () {
    $('#penerima').select2({ theme: 'bootstrap4', language: 'id', width: '100%', closeOnSelect: false, placeholder: $('#penerima').data('placeholder') });

    $('.isi-batas').on('click', function () {
        const t = new Date();
        t.setDate(t.getDate() + parseInt($(this).data('hari'), 10));
        // Format tanggal lokal (toISOString memakai UTC dan bisa bergeser sehari).
        const dua = (n) => String(n).padStart(2, '0');
        $('#tanggal_batas').val(`${t.getFullYear()}-${dua(t.getMonth() + 1)}-${dua(t.getDate())}`);
    });

    // Rincian per penerima: satu baris untuk setiap penerima terpilih. Isian yang sudah diketik
    // dipertahankan saat daftar penerima berubah; nilai lama (old) dipulihkan setelah galat validasi.
    const rincianLama = @json($rincianLama);
    const templat = document.getElementById('templat-rincian').innerHTML;
    const $daftar = $('#daftar-rincian');

    const aksiUmum = () => $('.aksi-umum:checked').map((i, e) => $(e).data('nama')).get();

    // Placeholder baris yang belum diisi menunjukkan aksi umum yang akan berlaku.
    function segarkanPetunjuk() {
        const umum = aksiUmum();
        const teks = umum.length ? `Ikuti aksi umum: ${umum.join(', ')}` : 'Pilih aksi…';
        $daftar.find('.pilih-aksi').each(function () {
            $(this).next('.select2').find('.select2-search__field').attr('placeholder', $(this).val().length ? '' : teks).css('width', '100%');
        });
    }

    function susunRincian() {
        const terpilih = $('#penerima').select2('data');
        const ada = {};
        $daftar.children('.baris-rincian').each(function () { ada[$(this).attr('data-kunci')] = this; });

        terpilih.forEach((o) => {
            if (ada[o.id]) { $daftar.append(ada[o.id]); delete ada[o.id]; return; }
            const $baris = $(templat.replaceAll('__KUNCI__', o.id));
            $baris.find('.nama-penerima').text(o.text);
            const lama = rincianLama[o.id] || {};
            $baris.find('.pilih-aksi').val((lama.id_aksi || []).map(String));
            $baris.find('.isi-instruksi').val(lama.instruksi || '');
            $daftar.append($baris);
            $baris.find('.pilih-aksi').select2({ theme: 'bootstrap4', language: 'id', width: '100%', closeOnSelect: false, placeholder: 'Ikuti aksi umum' })
                .on('change', segarkanPetunjuk);
        });
        Object.values(ada).forEach((el) => { $(el).find('.pilih-aksi').select2('destroy'); $(el).remove(); });

        $('#kartu-rincian').toggle(terpilih.length > 0);
        segarkanPetunjuk();
    }

    $('#penerima').on('change', susunRincian);
    $('.aksi-umum').on('change', segarkanPetunjuk);
    susunRincian();

    // Validasi sisi klien: setiap penerima harus punya aksi (khusus atau umum); teks instruksi opsional.
    $('#form-disposisi').on('submit', function (e) {
        const adaAksiUmum = aksiUmum().length > 0;
        let galat = null;
        $daftar.children('.baris-rincian').each(function () {
            const nama = $(this).find('.nama-penerima').text();
            if (!adaAksiUmum && !$(this).find('.pilih-aksi').val().length) { galat = `Pilih aksi untuk ${nama}, atau centang aksi umum.`; return false; }
        });
        if (galat) {
            e.preventDefault();
            e.stopImmediatePropagation();
            SIMSURAT.toast(galat, 'error');
        }
    });
});
</script>
@endpush