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

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