@extends('layouts.app')

@section('content')

<div class="max-w-3xl mx-auto p-6 bg-white rounded-xl shadow">

    <h1 class="text-xl font-bold text-[#1c1d56] mb-4">
        Form Pemanggilan Anak
    </h1>

    <form id="form-pemanggilan" method="POST" action="{{ route('staff.pemanggilan.store') }}">
        @csrf

        {{-- ANAK --}}
        <input type="text" id="search" placeholder="Cari nama anak..." class="border p-2 rounded w-full mb-3">

        <div class="border p-3 max-h-80 overflow-auto">
            @foreach($anak as $a)
                <label class="flex items-center gap-2 mb-2 anak-item">
                    <input type="checkbox" class="anak-check" name="anak[]" value="{{ $a->id }}">
                    <span class="nama">{{ $a->nama }}</span>
                </label>
            @endforeach
        </div>

        <div class="text-sm mt-2 text-gray-600">
            Total Dipilih: <span id="count">0</span>
        </div>

        <input type="date" name="tanggal" class="w-full border p-2 mt-3" required>
        <textarea name="keperluan" class="w-full border p-2 mt-2" required></textarea>

        <hr class="my-6">

        {{-- ===================== --}}
        {{-- PEJABAT 2 KOLOM --}}
        {{-- ===================== --}}
        <h3 class="font-bold mb-3">Penandatangan Pejabat</h3>

        <div id="ttd-container"></div>

        <button type="button" onclick="addRow()" class="bg-green-600 text-white px-3 py-1 mt-3 rounded">
            + Tambah 2 TTD (1 Baris)
        </button>

        {{-- ===================== --}}
        {{-- TTD TENGAH OPSIONAL --}}
        {{-- ===================== --}}
        <div class="mt-6">
            <button type="button" onclick="addCenterTTD()" class="bg-blue-600 text-white px-3 py-1 rounded">
                + Tambah TTD Tengah
            </button>
            <div id="center-ttd"></div>
        </div>

        {{-- Input hidden utama penampung data --}}
        <input type="hidden" name="pejabat" id="pejabat-input">
        
            <div class="flex gap-2 mt-6">
                <a href="{{ route('staff.pemanggilan.index') }}" class="bg-gray-500 text-white px-5 py-2 rounded text-center font-semibold hover:bg-gray-600 transition text-sm">
                    Batal
                </a>
                <button type="submit" class="bg-[#1c1d56] text-white px-5 py-2 rounded font-semibold hover:opacity-90 transition text-sm">
                    Simpan
                </button>
            </div>

    </form>
</div>

<script>
/* ==================================================== */
/* 1. TAMBAH BARIS 2 KOLOM (SIDE)                      */
/* ==================================================== */
function addRow() {
    const container = document.getElementById('ttd-container');
    const row = document.createElement('div');
    row.className = "grid grid-cols-2 gap-4 mb-4 baris-dua-kolom"; 

    row.innerHTML = createBox() + createBox();
    container.appendChild(row);
}

/* ==================================================== */
/* 2. TEMPLATE KOTAK PEJABAT                            */
/* ==================================================== */
function createBox() {
    let options = `<option value="">-- PILIH PEJABAT --</option>`;
    @foreach($pejabat as $p)
        options += `<option value="{{ $p->id }}" data-nama="{{ $p->nama_pejabat }}" data-jabatan="{{ $p->jabatan }}">{{ $p->jabatan }}</option>`;
    @endforeach

    return `
    <div class="border p-3 kotak-pejabat-tunggal">
        <select class="select-pejabat-asli w-full border p-2 mb-2">
            ${options}
        </select>
        <select class="pilihan-mode-nama w-full border p-2 mb-2">
            <option value="default">Gunakan Nama</option>
            <option value="kosong">Kosongkan Nama</option>
        </select>
        <div class="jabatan-preview font-semibold"></div>
        <div class="nama-preview"></div>
    </div>`;
}

/* ==================================================== */
/* 3. TAMBAH TTD TENGAH (CENTER)                        */
/* ==================================================== */
function addCenterTTD() {
    const container = document.getElementById('center-ttd');
    if (container.innerHTML.trim() !== '') return;

    let options = `<option value="">-- PILIH PEJABAT --</option>`;
    @foreach($pejabat as $p)
        options += `<option value="{{ $p->id }}" data-nama="{{ $p->nama_pejabat }}" data-jabatan="{{ $p->jabatan }}">{{ $p->jabatan }}</option>`;
    @endforeach

    container.innerHTML = `
        <div class="border p-4 mt-4 text-center kotak-pejabat-tunggal baris-tengah">
            <select class="select-pejabat-asli w-full border p-2 mb-2">
                ${options}
            </select>
            <select class="pilihan-mode-nama w-full border p-2 mb-2">
                <option value="default">Gunakan Nama</option>
                <option value="kosong">Kosongkan Nama</option>
            </select>
            <div class="jabatan-preview font-semibold"></div>
            <div class="nama-preview"></div>
        </div>
    `;
}

/* ==================================================== */
/* 4. PREVIEW LIVE DI FORM INTERFACE                    */
/* ==================================================== */
document.addEventListener('change', function(e){
    if(e.target.classList.contains('select-pejabat-asli')){
        const box = e.target.closest('.kotak-pejabat-tunggal');
        const opt = e.target.options[e.target.selectedIndex];
        box.querySelector('.jabatan-preview').textContent = opt.dataset.jabatan || '';
        box.querySelector('.nama-preview').textContent = opt.dataset.nama || '';
    }

    if(e.target.classList.contains('pilihan-mode-nama')){
        const box = e.target.closest('.kotak-pejabat-tunggal');
        if(e.target.value === 'kosong'){
            box.querySelector('.nama-preview').textContent = '..........................................';
        } else {
            const select = box.querySelector('.select-pejabat-asli');
            const opt = select.options[select.selectedIndex];
            box.querySelector('.nama-preview').textContent = opt.dataset.nama || '';
        }
    }
});

/* ==================================================== */
/* 5. FILTER PENCARIAN NAMA ANAK                        */
/* ==================================================== */
document.getElementById('search').addEventListener('keyup', function () {
    let keyword = this.value.toLowerCase();
    document.querySelectorAll('.anak-item').forEach(item => {
        let nama = item.querySelector('.nama').textContent.toLowerCase();
        item.style.display = nama.includes(keyword) ? 'flex' : 'none';
    });
});

/* ==================================================== */
/* 6. COUNTER TOTAL ANAK YANG DICENTANG                 */
/* ==================================================== */
function updateCount() {
    let total = document.querySelectorAll('.anak-check:checked').length;
    document.getElementById('count').textContent = total;
}

document.addEventListener('change', function(e){
    if(e.target.classList.contains('anak-check')){
        updateCount();
    }
});

addRow();

/* ==================================================== */
/* 7. PROSES RAKIT JSON SAAT SUBMIT FORM (FIXED SCOPE)  */
/* ==================================================== */
document.getElementById('form-pemanggilan').addEventListener('submit', function (e) {
    e.preventDefault(); 
    
    let kumpulanPejabat = [];

    // Ambil data dari semua pejabat Dua Kolom
    document.querySelectorAll('.baris-dua-kolom .kotak-pejabat-tunggal').forEach(box => {
        let selectPejabat = box.querySelector('.select-pejabat-asli');
        let selectMode = box.querySelector('.pilihan-mode-nama');
        
        if (selectPejabat && selectPejabat.value) {
            kumpulanPejabat.push({
                id: parseInt(selectPejabat.value),
                tipe: 'side',
                mode: selectMode ? selectMode.value : 'default'
            });
        }
    });

    // Ambil data dari pejabat posisi Tengah
    document.querySelectorAll('.baris-tengah').forEach(box => {
        let selectPejabat = box.querySelector('.select-pejabat-asli');
        let selectMode = box.querySelector('.pilihan-mode-nama');
        
        if (selectPejabat && selectPejabat.value) {
            kumpulanPejabat.push({
                id: parseInt(selectPejabat.value),
                tipe: 'center',
                mode: selectMode ? selectMode.value : 'default'
            });
        }
    });

    // Target langsung elemen input hidden berdasarkan ID-nya agar tidak duplikat
    const wadahHidden = document.getElementById('pejabat-input');
    if (wadahHidden) {
        wadahHidden.value = JSON.stringify(kumpulanPejabat);
    }

    // Eksekusi pengiriman form asli
    this.submit();
});
</script>

@endsection