@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <div class="flex items-center mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600 mr-3" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 010 1.42l-7 7a1 1 0 01-1.42 0l-3-3a1 1 0 111.42-1.42l2.29 2.29 6.29-6.29a1 1 0 011.42 0z" clip-rule="evenodd" />
        </svg>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Pemilahan Sampah</h1>
    </div>

    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm rounded-lg p-6 transition-colors duration-200">
        <form id="pemilahanForm" class="space-y-6" onsubmit="return false;">
            <!-- Kepala Keluarga Field -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Kepala Keluarga</label>
                <div class="flex items-center space-x-2">
                    <button type="button" id="btnPilihKepala" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none">
                        Pilih
                    </button>
                    <div id="selectedKepalaContainer" class="flex flex-wrap gap-2"></div>
                </div>
            </div>

            <!-- Memilah Sampah Field -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Memilah Sampah</label>
                <div class="flex items-center space-x-6">
                    <label class="inline-flex items-center">
                        <input type="radio" name="status" value="sudah" class="form-radio text-green-600" checked>
                        <span class="ml-2 text-gray-700 dark:text-gray-300">Sudah</span>
                    </label>
                    <label class="inline-flex items-center">
                        <input type="radio" name="status" value="belum" class="form-radio text-red-600">
                        <span class="ml-2 text-gray-700 dark:text-gray-300">Belum</span>
                    </label>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end space-x-3">
                <button type="button" id="btnSimpan" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
                    Simpan
                </button>
            </div>

            <!-- Hidden input for keluarga IDs -->
            <input type="hidden" id="keluargaIds" value="">
        </form>
    </div>
</div>

<!-- Modal Pilih Kepala Keluarga -->
<div id="kepalaModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <div class="flex justify-between items-center pb-3">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Pilih Kepala Keluarga</h3>
            <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" id="btnCloseModal">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </button>
        </div>
        <div class="mb-3">
            <input type="text" id="searchInput" placeholder="Cari nama kepala keluarga..." class="w-full border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 focus:outline-none">
        </div>
        <div class="max-h-96 overflow-y-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" id="kepalaTable">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Pilih</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Nama</th>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Alamat</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="kepalaTableBody">
                </tbody>
            </table>
        </div>
        <div class="pt-3 flex justify-end space-x-2">
            <button type="button" id="btnCancelModal" class="px-4 py-2 rounded-md border bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">Batal</button>
            <button type="button" id="btnDoneModal" class="px-4 py-2 rounded-md bg-green-600 hover:bg-green-700 text-white">Selesai</button>
        </div>
    </div>
    </div>

<script>
    const modal = document.getElementById('kepalaModal');
    const btnOpen = document.getElementById('btnPilihKepala');
    const btnClose = document.getElementById('btnCloseModal');
    const btnCancel = document.getElementById('btnCancelModal');
    const btnDone = document.getElementById('btnDoneModal');
    const searchInput = document.getElementById('searchInput');
    const kepalaTableBody = document.getElementById('kepalaTableBody');
    const selectedKepalaContainer = document.getElementById('selectedKepalaContainer');
    const keluargaIdsInput = document.getElementById('keluargaIds');
    const btnSimpan = document.getElementById('btnSimpan');

    let fetched = [];
    let selected = [];
    let searchQuery = '';

    function openModal() { modal.classList.remove('hidden'); fetchKeluarga(); }
    function closeModal() { modal.classList.add('hidden'); }

    btnOpen.addEventListener('click', openModal);
    btnClose.addEventListener('click', closeModal);
    btnCancel.addEventListener('click', closeModal);

    function debounce(fn, delay) {
        let t;
        return function(...args) {
            clearTimeout(t);
            t = setTimeout(() => fn.apply(this, args), delay);
        }
    }

    searchInput.addEventListener('input', debounce(function(e) {
        searchQuery = e.target.value.trim();
        fetchKeluarga();
    }, 300));

    function renderTable() {
        kepalaTableBody.innerHTML = '';
        fetched.forEach(item => {
            const tr = document.createElement('tr');
            const isChecked = selected.some(sel => sel.id === item.id);

            tr.innerHTML = `
                <td class="px-4 py-2"><input type="checkbox" class="kepalaCheckbox" data-id="${item.id}" ${isChecked ? 'checked' : ''}></td>
                <td class="px-4 py-2 text-gray-900 dark:text-white">${item.nama}</td>
                <td class="px-4 py-2 text-gray-700 dark:text-gray-300">${item.alamat}</td>
            `;
            kepalaTableBody.appendChild(tr);
        });

        document.querySelectorAll('.kepalaCheckbox').forEach(cb => {
            cb.addEventListener('change', function() {
                const id = parseInt(this.getAttribute('data-id'));
                const item = fetched.find(f => f.id === id);
                if (this.checked) {
                    if (!selected.some(s => s.id === id)) {
                        selected.push(item);
                    }
                } else {
                    selected = selected.filter(s => s.id !== id);
                }
                updateSelectedUI();
            });
        });
    }

    function updateSelectedUI() {
        selectedKepalaContainer.innerHTML = '';
        selected.forEach(item => {
            const chip = document.createElement('span');
            chip.className = 'inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-100 text-green-800 dark:bg-green-700 dark:text-white';
            chip.innerHTML = `${item.nama}<button class="ml-2 text-xs text-red-600" data-id="${item.id}">x</button>`;
            selectedKepalaContainer.appendChild(chip);
        });

        // Remove handler
        selectedKepalaContainer.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', function() {
                const id = parseInt(this.getAttribute('data-id'));
                selected = selected.filter(s => s.id !== id);
                updateSelectedUI();
                // also uncheck in table
                const checkbox = document.querySelector(`.kepalaCheckbox[data-id="${id}"]`);
                if (checkbox) { checkbox.checked = false; }
            });
        });

        keluargaIdsInput.value = selected.map(s => s.id).join(',');
    }

    function fetchKeluarga() {
        const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        window.axios.get('{{ route("pemilahan-sampah.search-keluarga") }}', {
            params: { q: searchQuery },
            headers: { 'X-CSRF-TOKEN': csrf }
        }).then(res => {
            fetched = res.data || [];
            renderTable();
        }).catch(() => {
            fetched = [];
            renderTable();
        });
    }

    btnDone.addEventListener('click', function(){ closeModal(); });

    btnSimpan.addEventListener('click', function(){
        const ids = keluargaIdsInput.value.split(',').filter(x => x).map(x => parseInt(x));
        const status = document.querySelector('input[name="status"]:checked')?.value || 'sudah';
        if (ids.length === 0) {
            showToast('Silakan pilih minimal satu kepala keluarga', 'error');
            return;
        }

        const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        window.axios.post('{{ route("pemilahan-sampah.store") }}', {
            keluarga_ids: ids,
            status: status
        }, {
            headers: { 'X-CSRF-TOKEN': csrf }
        }).then(res => {
            if (res.data && res.data.success) {
                showToast(res.data.message || 'Berhasil menyimpan', 'success');
                // Reset form
                selected = [];
                updateSelectedUI();
                document.querySelector('input[name="status"][value="sudah"]').checked = true;
            } else {
                showToast('Gagal menyimpan data', 'error');
            }
        }).catch(err => {
            const msg = err.response?.data?.message || 'Terjadi kesalahan';
            showToast(msg, 'error');
        });
    });

    function showToast(message, type = 'success') {
        // Simple toast using alert-like banner
        const container = document.createElement('div');
        container.className = `fixed top-4 right-4 px-4 py-2 rounded shadow-lg z-50 ${type === 'success' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'}`;
        container.textContent = message;
        document.body.appendChild(container);
        setTimeout(() => { container.remove(); }, 3000);
    }
</script>
@endsection