@extends('frontend::layouts.appmanager')

@section('content')
<div class="table-request-approval container bg-white rounded shadow-sm overflow-hidden my-4">
    @livewire('frontend::list-data.approval-list',['status' => [3,4,13]])
</div>

@livewire('frontend::list-data.request-list')

@endsection


@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tableBody = document.getElementById('approval-table-body');
        const checkAll = document.getElementById('check-all');
        const bulkActions = document.getElementById('bulk-actions');
        const selectedCountSpan = document.getElementById('selected-count');
        const confirmModalEl = document.getElementById('confirmModal');
        const confirmModal = confirmModalEl ? new bootstrap.Modal(confirmModalEl) : null;
        // const confirmModalLabel = document.getElementById('confirmModalLabel');
        const confirmModalBody = document.getElementById('confirmModalBody');
        let confirmModalBtn = document.getElementById('confirmModalBtn');
        const cancelModalBtn = confirmModalEl ? confirmModalEl.querySelector('.btn-secondary') : null;
        let actionCallback = null;

        // หากไม่มีโครงสร้างตารางหรือโมดัลนี้ (เช่น ใช้ Livewire แทน), ไม่ต้องรันสคริปต์นี้
        if (!tableBody || !confirmModalEl || !confirmModal) {
            return;
        }

        // เปิด details-row ทุก row ตอนโหลดหน้า
        tableBody.querySelectorAll('tr.main-row').forEach(mainRow => {
            const detailsRow = mainRow.nextElementSibling;
            if (detailsRow && detailsRow.classList.contains('details-row')) {
                detailsRow.style.display = 'table-row';
            }
        });

        function updateUI() {
            const allMainCheckboxes = document.querySelectorAll('.approval-checkbox');
            const checkedMainCheckboxes = document.querySelectorAll('.approval-checkbox:checked');
            if (bulkActions) {
                bulkActions.classList.toggle('d-none', checkedMainCheckboxes.length === 0);
            }
            if (selectedCountSpan) {
                selectedCountSpan.textContent = checkedMainCheckboxes.length > 0 ?
                    `${checkedMainCheckboxes.length} รายการที่เลือก` :
                    '';
            }
            if (checkAll) {
                checkAll.checked = allMainCheckboxes.length > 0 && checkedMainCheckboxes.length ===
                    allMainCheckboxes.length;
            }
        }

        document.addEventListener('change', function(e) {
            const el = e.target;
            if (el.id === 'check-all') {
                document.querySelectorAll('.approval-checkbox, [name="approval-detail-item"]').forEach(
                    cb => cb.checked = el.checked);
                updateUI();
            }
            if (el.classList.contains('approval-checkbox')) {
                const detailsRow = el.closest('tr').nextElementSibling;
                if (detailsRow && detailsRow.classList.contains('details-row')) {
                    detailsRow.querySelectorAll('[name="approval-detail-item"]').forEach(cb => cb
                        .checked = el.checked);
                }
                updateUI();
            }
        });

        tableBody.addEventListener('click', e => {
            const mainRow = e.target.closest('.main-row');
            if (!mainRow || e.target.closest('input, button')) return;
            const detailsRow = mainRow.nextElementSibling;
            if (detailsRow && detailsRow.classList.contains('details-row')) {
                detailsRow.style.display = detailsRow.style.display === 'none' ? 'table-row' : 'none';
            }
        });

        document.querySelectorAll('#bulk-actions .approve-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const checkedDetails = Array.from(document.querySelectorAll(
                    '[name="approval-detail-item"]:checked'));
                if (checkedDetails.length === 0) return showNoSelectionModal();
                showConfirmModal('อนุมัติทั้งหมด',
                    'คุณต้องการอนุมัติรายการทั้งหมดที่เลือกใช่หรือไม่?', () => {
                        checkedDetails.forEach(cb => {
                            const badge = cb.closest('tr').querySelector(
                                'td span.badge');
                            badge.textContent = 'อนุมัติ';
                            badge.className = 'badge bg-success text-white';
                            cb.checked = false;
                        });
                        updateUI();
                    });
            });
        });

        document.querySelectorAll('#bulk-actions .reject-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const checkedDetails = Array.from(document.querySelectorAll(
                    '[name="approval-detail-item"]:checked'));
                    console.log(checkedDetails.length === 0 ,checkedDetails.length);
                    
                if (checkedDetails.length === 0) return showNoSelectionModal();
                showConfirmModal('ไม่อนุมัติทั้งหมด',
                    '<label>กรอกเหตุผลไม่อนุมัติ:</label><textarea wire:model="remarks" id="rejectReason" style="width:100%; height:100px; margin-bottom:10px;"></textarea>',
                    () => {
                        const reason = document.getElementById('rejectReason').value.trim();
                        checkedDetails.forEach(cb => {
                            const badge = cb.closest('tr').querySelector(
                                'td span.badge');
                            badge.textContent = 'ไม่อนุมัติ';
                            badge.className = 'badge bg-danger text-white';
                            cb.checked = false;
                        });
                        console.log('เหตุผลไม่อนุมัติ:', reason);
                        updateUI();
                    });
            });
        });

        tableBody.addEventListener('click', e => {
            const row = e.target.closest('tr.main-row');
            if (!row) return;
            const detailsRow = row.nextElementSibling;
            if (!detailsRow || !detailsRow.classList.contains('details-row')) return;

            const detailCheckboxes = Array.from(detailsRow.querySelectorAll(
                '[name="approval-detail-item"]:checked'));
                // console.log("dsjfd");
                
            // if (detailCheckboxes.length === 0 && (e.target.classList.contains('approve-btn') || e.target
            //         .classList.contains('reject-btn'))) {
            //     return showNoSelectionModal();
            // }

            if (e.target.classList.contains('approve-btn')) {
                showConfirmModal('อนุมัติ', 'คุณต้องการอนุมัติรายการที่เลือกใช่หรือไม่?', () => {
                    detailCheckboxes.forEach(cb => {
                        const badge = cb.closest('tr').querySelector('td span.badge');
                        badge.textContent = 'อนุมัติ';
                        badge.className = 'badge bg-success text-white';
                        cb.checked = false;
                    });
                    updateUI();
                });
            }
        });

        function showConfirmModal(title, bodyHTML, callback) {
            confirmModalLabel.textContent = title;
            confirmModalBody.innerHTML = bodyHTML;
            actionCallback = callback;

            const newConfirmBtn = confirmModalBtn.cloneNode(true);
            confirmModalBtn.replaceWith(newConfirmBtn);
            confirmModalBtn = newConfirmBtn;
            confirmModalBtn.textContent = 'ยืนยัน';
            confirmModalBtn.className = 'btn btn-primary';
            confirmModalBtn.style.display = callback ? 'inline-block' : 'none';
            confirmModalBtn.addEventListener('click', function() {
                if (actionCallback) actionCallback();
                // Trigger Livewire confirm if component is present
                if (window.Livewire && typeof window.Livewire.dispatch === 'function') {
                    window.Livewire.dispatch('confirm-from-bootstrap');
                }
                confirmModal.hide();
                actionCallback = null;
            });

            const newCancelBtn = cancelModalBtn.cloneNode(true);
            cancelModalBtn.replaceWith(newCancelBtn);
            newCancelBtn.addEventListener('click', function() {
                confirmModal.hide();
                actionCallback = null;
            });

            confirmModal.show();
        }

        function showNoSelectionModal() {
            showConfirmModal('แจ้งเตือน', '<p>กรุณาเลือกข้อมูลอย่างน้อย 1 รายการ</p>', null);
        }

        updateUI();
    });

    // ตรวจสอบว่า Livewire ถูกโหลดหรือยังก่อนใช้งาน
    if (typeof window.Livewire !== 'undefined') {
        window.Livewire.on('modalOpened', () => {
            const rejectReasonEl = document.getElementById('rejectReason');
            if (rejectReasonEl) {
                rejectReasonEl.addEventListener('input', (e) => {
                    if (typeof window.Livewire !== 'undefined' && typeof window.Livewire.dispatch === 'function') {
                        window.Livewire.dispatch('updateRemarks', {
                            value: e.target.value
                        });
                    }
                });
            }
        });
    }
</script>
@endpush