@extends('admin.admin_dashboard')

@section('customcss')
    <style>
        /* ================= Common ================= */
        .content-body {
            background: #f8f9fa;
            padding-top: 20px;
        }

        .card {
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 7px !important;
        }

        .photo-box{
    width:100px;
    height:100px;
    background:#f1f1f1;
    border-radius:6px;
    margin-right:15px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

#studentPhoto{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
}


        .card-header {
            font-weight: 600;
            font-size: 16px;
            background: #667eea;
            color: #fff;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            padding: 10px 15px;
        }

        .card-body {
            padding: 7px !important;
            background: #fff;
        }

        .session-tabs {
            display: flex;
            /* gap: 8px; */
            flex-wrap: wrap;
            /* margin-bottom: 12px; */
        }

        .session-tab {
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #ced4da;
            cursor: pointer;
            background: #f8f9fa;
            font-weight: 600;
        }

        .session-tab.selected {
            background: #28a745;
            /* bootstrap success */
            color: #fff;
            border-color: #28a745;
        }

        .session-tab .class-name {
            font-weight: 400;
            font-size: 12px;
            margin-left: 6px;
            opacity: 0.9;
        }

        .search-container {
            position: relative;
            margin-bottom: 20px;
        }

        .search-input {
            width: 100%;
            padding: 10px 40px;
            border-radius: 6px;
            border: 1px solid #ced4da;
        }

        .search-icon {
            position: absolute;
            top: 50%;
            left: 12px;
            transform: translateY(-50%);
            color: #6c757d;
        }

        #studentList {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            max-height: 300px;
            overflow-y: auto;
            background: #fff;
            /* border: 1px solid #ced4da; */
            /* border-radius: 6px; */
            z-index: 100;
        }

        .student-item {
            padding: 8px 12px;
            cursor: pointer;
            /* border-bottom: 1px solid #e9ecef; */
        }

        .student-item:hover {
            background: #f1f3f5;
        }

        .fade-in {
            animation: fadeIn 0.4s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .status-indicator {
            padding: 3px 8px;
            border-radius: 6px;
            font-weight: 600;
            color: #fff;
        }

        .status-due {
            background: #f56565;
        }

        .status-partial {
            background: #ed8936;
        }

        .status-paid {
            background: #48bb78;
        }

        .fees-table th,
        .fees-table td {
            text-align: left;
            padding: 5px 6px !important;
        }

        .fees-table th {
            background-color: #4CA49D;
            color: #fff;
        }

        .due-row {
            background-color: #F5F5F5;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            font-weight: 500;
        }

        .summary-total {
            font-weight: 600;
            font-size: 16px;
            color: #2d3748;
        }

        .payment-summary {
            border-top: 1px solid #e2e8f0;
            padding-top: 10px;
            margin-top: 10px;
        }

        .btn-sm {
            padding: 4px 12px;
            font-size: 13px;
        }

        /* Payment Summary Boxes */
        .payment-summary-boxes {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .payment-box {
            flex: 1;
            padding: 15px 20px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            font-weight: 600;
            font-size: 16px;
        }

        .payment-box.payable {
            background: #17a2b8;
        }

        .payment-box.paid {
            background: #28a745;
        }

        .payment-box.due {
            background: #dc3545;
        }

        .payment-box .label {
            font-size: 16px;
        }

        .payment-box .amount {
            font-size: 20px;
            font-weight: 700;
        }

        /* ==================== Fees Table ==================== */
        .fees-table th,
        .fees-table td {
            text-align: left !important;
            vertical-align: left !important;
            color: #1a1a1a;
            /* Dark text color for all td */
        }

        .month-row {
            background-color: #FFFFFF;
            color: #E14430;
            font-weight: 600;
            text-align: left !important;
        }
    </style>
@endsection

@section('admin')
    <div class="content-body default-height">
        <div class="container-fluid">

            <div class="d-flex justify-content-between align-items-center ">
                <h3 class="text-dark fw-bold">💳 Smart Payment System</h3>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                <div class="card-header">🔎 Search Student</div>
                <div class="card-body">
                    <div class="search-container">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" id="searchStudent" class="search-input"
                            placeholder="Search by Name, Roll Number, or Student ID...">
                        <div id="studentList"></div>
                    </div>
                </div>
            </div>
                </div>

                <div class="col-md-6">
                    <div id="studentCard" class="card fade-in" style="display:none;">
                <div class="card-header">👨🎓 Student Information</div>
                <div class="card-body d-flex align-items-start" style="padding: 15px !important;">
                    <img id="studentPhoto" src="" alt="Student Photo"
                        style="width:150px; height:180px; object-fit:contain; background:#f1f1f1; border-radius:6px; margin-right:15px; flex-shrink:0;">
                    <div style="padding-top: 0;">
                        <p style="font-size: 18px; color: #764191;"><strong>Name: <span id="studentName"></span> </strong></p>
                        <p> <strong>Roll:</strong> <span id="studentRoll"></span>
                            || <strong>Class:</strong> <span id="studentClass"></span></p>
                        <p><strong>Section:</strong> <span id="studentSection"></span> || 
                        <strong>Status:</strong> <span id="studentStatus" class="status-indicator"></span>
                        </p>
                        
                    </div>
                </div>
            </div>
                </div>
            
            </div>

            

            

            <div id="dueFeesCard" class="card fade-in" style="display:none;">
                <div class="card-header">💰 Fee Management & Payment</div>
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-12">
                            <label class="form-label"></label>

                            <!-- tabs / buttons container -->
                            <div id="sessionTabs" class="session-tabs">
                                <!-- populated dynamically by JS from AJAX response `sessions` -->
                            </div>

                            <!-- hidden session filter value (kept for compatibility with existing JS/form submission) -->
                            <input type="hidden" id="sessionFilter" value="">
                        </div>
                        {{-- <div class="col-md-12 d-flex align-items-end justify-content-end mt-2">
                            <button type="button" class="btn btn-success btn-sm me-2" onclick="selectAllDues()">✅ Select
                                All</button>
                            <button type="button" class="btn btn-secondary btn-sm" onclick="clearSelection()">❌ Clear
                                Selection</button>
                        </div> --}}
                    </div>

                    <div id="paymentFormWrapper" class="payment-form" style="display:none;">
                        {{-- <h5>💳 Process Payment</h5> --}}
                        <form id="paymentForm">
                            <div id="feesTableWrapper"></div>

                            <div id="paymentSummary" class="payment-summary" style="display:none;">
                                <div class="payment-summary-boxes">
                                    <div class="payment-box payable">
                                        <span class="label">Payable:</span>
                                        <span class="amount" id="payableAmount">0</span>
                                    </div>
                                    <div class="payment-box paid">
                                        <span class="label">Paid:</span>
                                        <input type="text" class="amount" id="paidAmountInput" name="amount" 
                                            style="background: transparent; border: none; color: white; font-size: 20px; font-weight: 700; text-align: right; width: 100px;"
                                            required>
                                    </div>
                                    <div class="payment-box due">
                                        <span class="label">Due:</span>
                                        <input type="text" class="amount" id="dueAmountInput" name="due_amount" 
                                            style="background: transparent; border: none; color: white; font-size: 20px; font-weight: 700; text-align: right; width: 100px;"
                                            required>
                                    </div>
                                </div>
                            </div>

                            {{-- <div class="row mt-2">
                                <div class="col-md-6">
                                    <label class="form-label">💳 Payment Method</label>
                                    <select class="form-control" name="method" id="method" required>
                                        <option value="cash">Cash</option>
                                        <option value="bkash">BKash</option>
                                        <option value="nagad">Nagad</option>
                                        <option value="rocket">Rocket</option>
                                        <option value="bank">Bank Transfer</option>
                                        <option value="card">Card Payment</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">📝 Payment Note (Optional)</label>
                                    <input type="text" class="form-control" name="note" id="note"
                                        placeholder="Additional notes...">
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col-md-6">
                                    <label class="form-label">🆔 Transaction ID (Optional)</label>
                                    <input type="text" class="form-control" name="transaction_id" id="transaction_id"
                                        placeholder="TXN123456">
                                </div>
                            </div> --}}

                            <div class="mt-3 text-center">
                                <button type="submit" class="btn btn-primary" id="submitPayment">💸 Process Payment</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection

@section('customjs')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('searchStudent');
            const studentListDiv = document.getElementById('studentList');
            const studentCard = document.getElementById('studentCard');
            const dueFeesCard = document.getElementById('dueFeesCard');
            const feesTableWrapper = document.getElementById('feesTableWrapper');
            const sessionTabsContainer = document.getElementById('sessionTabs');
            const sessionFilter = document.getElementById('sessionFilter'); // hidden input
            const paymentForm = document.getElementById('paymentForm');
            const paymentSummary = document.getElementById('paymentSummary');
            const paymentFormWrapper = document.getElementById('paymentFormWrapper');
            const paidAmountInput = document.getElementById('paidAmountInput');
            const dueAmountInput = document.getElementById('dueAmountInput');

            let currentStudentId = null;
            let searchTimeout = null;
            // UPDATED: include 'Previous Due' before 'Others' so frontend sorts properly
            const monthNames = ["Previous Due", "Others", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            @if(!empty($student_id))
                currentStudentId = '{{ $student_id }}';
            @endif

            function parseJsonResponse(res) {
                const contentType = res.headers.get('content-type') || '';
                if (contentType.includes('application/json')) {
                    return res.json();
                } else {
                    return res.text().then(txt => {
                        const preview = txt && txt.length ? txt.slice(0, 1000) : '[empty response]';
                        throw new Error('Expected JSON but received non-JSON response. HTTP ' + res.status + ' - Preview: ' + preview);
                    });
                }
            }

            // ---------------- Search student ----------------
            searchInput.addEventListener('input', function () {
                const keyword = this.value.trim();
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    if (keyword.length < 2) { studentListDiv.innerHTML = ''; studentListDiv.style.display = 'none'; return; }

                    studentListDiv.innerHTML = '<div class="student-item"><span class="loading"></span> Searching...</div>';
                    studentListDiv.style.display = 'block';

                    fetch('{{ route("admin.payments.search-student") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ keyword })
                    })
                        .then(parseJsonResponse)
                        .then(renderStudentList)
                        .catch((err) => {
                            console.error('Search error:', err);
                            studentListDiv.innerHTML = '<div class="alert alert-danger">Search failed. See console for details.</div>';
                        });
                }, 300);
            });

            document.addEventListener('click', e => { if (!e.target.closest('.search-container')) studentListDiv.style.display = 'none'; });

            function renderStudentList(data) {
                let html = '';
                if (!Array.isArray(data)) data = [];
                if (data.length === 0) html = `<div class="student-item">❌ No student found</div>`;
                else data.forEach(s => {
                    html += `<div class="student-item" data-id="${s.id}">
                        <strong>${s.student_name_english}</strong><br>
                        <small>Roll: ${s.admission_roll} | Class: ${s.class_name || 'N/A'}</small>
                    </div>`;
                });
                studentListDiv.innerHTML = html;
                document.querySelectorAll('.student-item[data-id]').forEach(item => {
                    item.addEventListener('click', function () {
                        currentStudentId = this.dataset.id;
                        searchInput.value = this.querySelector('strong').textContent;
                        studentListDiv.style.display = 'none';
                        loadStudentInfo(currentStudentId, sessionFilter.value);
                    });
                });
            }

            // ---------------- Load student info & fees ----------------
            function loadStudentInfo(studentId, sessionId = '') {
                let url = '{{ url("admin/payments/student-info") }}/' + studentId;
                if (sessionId) url += '?session_id=' + sessionId;
                fetch(url, { headers: { 'Accept': 'application/json' } })
                    .then(res => {
                        if (!res.ok) {
                            return res.text().then(txt => { throw new Error('Network response was not ok. HTTP ' + res.status + ' - Preview: ' + (txt.slice ? txt.slice(0, 800) : txt)); });
                        }
                        return parseJsonResponse(res);
                    })
                    .then(data => {
                        renderStudentInfo(data);
                        renderFees(data.due_fees || {});
                        renderSessionTabs(data.sessions || [], data.selected_session || null);
                    })
                    .catch((err) => {
                        console.error('Failed to load student info:', err);
                        alert('Error loading student info. Check console for details.');
                    });
            }

            function renderStudentInfo(data) {
                studentCard.style.display = 'block';
                document.getElementById('studentPhoto').src = data.photo || '/images/default-avatar.png';
                document.getElementById('studentName').textContent = data.name;
                document.getElementById('studentRoll').textContent = data.roll;
                document.getElementById('studentClass').textContent = data.class;
                document.getElementById('studentSection').textContent = data.section;
                const statusEl = document.getElementById('studentStatus');
                statusEl.textContent = data.total_due > 0 ? 'Has Dues' : 'All Clear';
                statusEl.className = 'status-indicator ' + (data.total_due > 0 ? 'status-due' : 'status-paid');
                dueFeesCard.style.display = 'block';
            }
            // ---------------- Render session tabs ----------------
            function renderSessionTabs(sessions, selectedSessionId) {
                sessionTabsContainer.innerHTML = '';
                // sessions is ordered by earliest fee month (controller already ordered)
                if (!Array.isArray(sessions) || sessions.length === 0) {
                    // clear hidden filter
                    sessionFilter.value = '';
                    return;
                }
                // If controller provided selected_session, use that; otherwise pick first
                let selected = selectedSessionId || sessions[0].id;

                sessions.forEach(s => {
                    const btn = document.createElement('div');
                    btn.className = 'session-tab';
                    btn.dataset.sessionId = s.id;
                    btn.innerHTML = `${s.name} <span class="class-name">(${s.class_name || 'N/A'})</span>`;
                    if (String(s.id) === String(selected)) {
                        btn.classList.add('selected');
                        // set hidden filter
                        sessionFilter.value = s.id;
                    }
                    btn.addEventListener('click', function () {
                        // mark selection styling
                        document.querySelectorAll('.session-tab').forEach(el => el.classList.remove('selected'));
                        this.classList.add('selected');
                        const sid = this.dataset.sessionId;
                        sessionFilter.value = sid;
                        // reload fees for this student+session
                        if (currentStudentId) loadStudentInfo(currentStudentId, sid);
                    });
                    sessionTabsContainer.appendChild(btn);
                });
            }

            // ---------------- Render fees (with virtual late-fee rows) ----------------
            // ---------------- Render fees (with virtual late-fee rows + compact Previous Due) ----------------
            function renderFees(fees) {
                let html = '';
                const months = Object.keys(fees || {}).sort((a, b) => {
                    const ia = monthNames.indexOf(a);
                    const ib = monthNames.indexOf(b);
                    return (ia === -1 ? 999 : ia) - (ib === -1 ? 999 : ib);
                });
                let hasDues = false;

                if (months.length > 0) {
                    html += `<table class="fees-table table table-bordered">
                <thead>
                    <tr><th>Select</th><th>Fee Type</th><th>Basic Fee</th><th>Paid</th><th>Waver</th><th>Payable</th><th>Status</th></tr>
                </thead><tbody>`;

                    months.forEach(month => {
                        const monthFees = (fees[month] || []).filter(f => parseFloat(f.due_amount) > 0);
                        if (monthFees.length === 0) return;
                        hasDues = true;

                        // ✅ Special handling for Previous Due
                        if (month === "Previous Due") {
                            const totalDue = monthFees.reduce((acc, f) => acc + parseFloat(f.due_amount), 0);
                            html += `<tr class="month-row">
                        <td><input type="checkbox" id="prevDueMaster"></td>
                        <td colspan="4">Due</td>
                        <td class="summary-total">${totalDue.toLocaleString()}</td>
                        <td><span class="status-indicator status-due">Due</span></td>
                    </tr>`;

                            // hidden rows for each Previous Due item (normal + late)
                            monthFees.forEach(f => {
                                if (f.is_late_fee) {
                                    const baseFeeId = f.base_fee_id || '';
                                    const feeMonthISO = f.fee_month || '';
                                    html += `<tr style="display:none;">
                                <td><input type="checkbox" class="late-checkbox prev-due-late" 
                                    data-base-fee-id="${baseFeeId}" 
                                    data-fee-month="${feeMonthISO}" 
                                    data-amount="${f.due_amount}" 
                                    data-note="${(f.note || '').replace(/"/g, '&quot;')}"></td>
                                <td>${f.fee_type} <small>${f.note || ''}</small></td>
                                <td>${Number(f.amount).toLocaleString()}</td>
                                <td>${Number(f.paid_amount).toLocaleString()}</td>
                                <td><input type="text" class="form-control waver-input-late" 
                                    data-base-fee-id="${baseFeeId}" value="0" min="0"></td>
                                <td class="due-cell-late">${Number(f.due_amount).toLocaleString()}</td>
                                <td><span class="status-indicator status-due">Late</span></td>
                            </tr>`;
                                } else {
                                    html += `<tr style="display:none;">
                                <td><input type="checkbox" class="fee-checkbox prev-due-item" 
                                    name="selected_fees[]" value="${f.id}" 
                                    data-amount="${f.due_amount}" data-month="Previous Due"></td>
                                <td>${f.fee_type}</td>
                                <td>${Number(f.amount).toLocaleString()}</td>
                                <td>${Number(f.paid_amount).toLocaleString()}</td>
                                <td><input type="text" class="form-control waver-input" 
                                    value="${Number(f.waver_amount)}" min="0" 
                                    max="${Number(f.amount)}" 
                                    data-paid="${f.paid_amount}" data-amount="${f.amount}"></td>
                                <td class="due-cell">${Number(f.due_amount).toLocaleString()}</td>
                                <td><span class="status-indicator status-due">Due</span></td>
                            </tr>`;
                                }
                            });
                        }
                        else {
                            // Normal months unchanged (same as your old code)
                            html += `<tr class="month-row"><td colspan="6">📅 ${month} </td>
                        <td><button type="button" class="btn btn-success btn-sm" onclick="selectMonthFees('${month}')">Select All</button></td></tr>`;
                            monthFees.forEach(f => {
                                const statusClass = parseFloat(f.due_amount) === parseFloat(f.amount) ? 'status-due' : 'status-partial';
                                const status = parseFloat(f.due_amount) === parseFloat(f.amount) ? 'Due' : 'Partial';
                                if (f.is_late_fee) {
                                    const baseFeeId = f.base_fee_id || '';
                                    const feeMonthISO = f.fee_month || '';
                                    html += `<tr class="due-row virtual-late-row">
                                <td style="background:#FFF8E1;"><input type="checkbox" class="late-checkbox"
                                    data-base-fee-id="${baseFeeId}" data-fee-month="${feeMonthISO}" 
                                    data-amount="${f.due_amount}" data-note="${(f.note || '').replace(/"/g, '&quot;')}"></td>
                                <td style="background:#FFF8E1;">${f.fee_type}</td>
                                <td style="background:#FFF8E1;">${Number(f.amount).toLocaleString()}</td>
                                <td style="background:#FFF8E1;">${Number(f.paid_amount).toLocaleString()}</td>
                                <td style="background:#FFF8E1;"><input type="text" class="form-control waver-input-late" 
                                    data-base-fee-id="${baseFeeId}" value="0" min="0"></td>
                                <td style="background:#FFF8E1;" class="due-cell-late">${Number(f.due_amount).toLocaleString()}</td>
                                <td style="background:#FFF8E1;"><span class="status-indicator status-due">Late</span></td>
                            </tr>`;
                                } else {
                                    html += `<tr class="due-row">
                                <td><input type="checkbox" class="fee-checkbox" name="selected_fees[]" 
                                    value="${f.id}" data-amount="${f.due_amount}" data-month="${month}"></td>
                                <td>${f.fee_type}</td>
                                <td>${Number(f.amount).toLocaleString()}</td>
                                <td>${Number(f.paid_amount).toLocaleString()}</td>
                                <td><input type="text" class="form-control waver-input" 
                                    value="${Number(f.waver_amount)}" min="0" max="${Number(f.amount)}" 
                                    data-paid="${f.paid_amount}" data-amount="${f.amount}"></td>
                                <td class="due-cell">${Number(f.due_amount).toLocaleString()}</td>
                                <td><span class="status-indicator ${statusClass}">${status}</span></td>
                            </tr>`;
                                }
                            });
                        }
                    });
                    html += `</tbody></table>`;
                }

                if (!hasDues) {
                    html = `<div class="alert alert-success text-center">🎉 All fees up to date.</div>`;
                    paymentFormWrapper.style.display = 'none';
                    paymentSummary.style.display = 'none';
                } else {
                    paymentFormWrapper.style.display = 'block';
                }

                feesTableWrapper.innerHTML = html;
                if (hasDues) {
                    setupFeeSelection();
                    setupWaverInputs();
                    setupLateWaverInputs();
                    setupPrevDueMaster(); // ✅ for previous due master checkbox
                }
            }

            // ---------------- Master checkbox for Previous Due ----------------
            function setupPrevDueMaster() {
                const master = document.getElementById('prevDueMaster');
                if (!master) return;
                master.addEventListener('change', function () {
                    document.querySelectorAll('.prev-due-item').forEach(cb => cb.checked = master.checked);
                    document.querySelectorAll('.prev-due-late').forEach(cb => cb.checked = master.checked);
                    updatePaymentSummary();
                });
            }



            // ---------------- Selection & waver setup ----------------
            function setupFeeSelection() {
                document.querySelectorAll('.fee-checkbox').forEach(cb => cb.addEventListener('change', updatePaymentSummary));
                document.querySelectorAll('.late-checkbox').forEach(cb => cb.addEventListener('change', updatePaymentSummary));
                updatePaymentSummary();
            }

            function setupWaverInputs() {
                document.querySelectorAll('.waver-input').forEach(input => {
                    input.addEventListener('input', function () {
                        let value = this.value.replace(/[^0-9.]/g, '');
                        if (value.endsWith('.')) {
                            this.value = value;
                            return;
                        }
                        const paid = parseFloat(this.dataset.paid) || 0;
                        const total = parseFloat(this.dataset.amount) || 0;
                        let waver = parseFloat(value) || 0;
                        if (waver > total - paid) waver = total - paid;
                        if (waver < 0) waver = 0;
                        const due = total - (paid + waver);
                        const dueCell = this.closest('tr').querySelector('.due-cell');
                        if (dueCell) dueCell.textContent = due.toLocaleString();
                        this.value = waver;
                        const checkbox = this.closest('tr').querySelector('.fee-checkbox');
                        if (checkbox) checkbox.dataset.amount = due;
                        updatePaymentSummary();
                    });
                });
            }

            function setupLateWaverInputs() {
                document.querySelectorAll('.waver-input-late').forEach(input => {
                    const checkbox = input.closest('tr').querySelector('.late-checkbox');
                    if (!checkbox) return;
                    if (!checkbox.dataset.amountOriginal) checkbox.dataset.amountOriginal = parseFloat(checkbox.dataset.amount || 0);

                    input.addEventListener('input', function () {
                        let value = this.value.replace(/[^0-9.]/g, '');
                        if (value.endsWith('.')) {
                            this.value = value;
                            return;
                        }
                        let waver = parseFloat(value) || 0;
                        if (waver < 0) waver = 0;

                        const originalAmount = parseFloat(checkbox.dataset.amountOriginal || 0);
                        if (waver > originalAmount) waver = originalAmount;

                        const due = originalAmount - waver;
                        this.value = waver;
                        checkbox.dataset.amount = due;
                        const dueCell = this.closest('tr').querySelector('.due-cell-late');
                        if (dueCell) dueCell.textContent = due.toLocaleString();

                        updatePaymentSummary();
                    });
                });
            }

            function updateAmountAndDue(event) {
                let totalAmountText = document.getElementById('payableAmount').textContent || '';
                let totalAmount = parseFloat(totalAmountText.replace('৳', '').replace(/,/g, '')) || 0;
                const targetId = event.target.id;
                let value = event.target.value.replace(/[^0-9.]/g, '');
                if (value.endsWith('.')) {
                    event.target.value = value;
                    return;
                }

                value = parseFloat(value);
                if (isNaN(value)) value = 0;

                if (targetId === 'paidAmountInput') {
                    let due = totalAmount - value;
                    if (due < 0) due = 0;
                    dueAmountInput.value = due;
                } else if (targetId === 'dueAmountInput') {
                    let payment = totalAmount - value;
                    if (payment < 0) payment = 0;
                    paidAmountInput.value = payment;
                }
            }

            paidAmountInput.addEventListener('input', updateAmountAndDue);
            dueAmountInput.addEventListener('input', updateAmountAndDue);

            function updatePaymentSummary() {
                let total = 0;
                document.querySelectorAll('.fee-checkbox:checked').forEach(cb => total += parseFloat(cb.dataset.amount || 0));
                document.querySelectorAll('.late-checkbox:checked').forEach(cb => total += parseFloat(cb.dataset.amount || 0));

                if (total > 0) {
                    paymentSummary.style.display = 'block';
                    document.getElementById('payableAmount').textContent = total.toLocaleString();
                    paidAmountInput.value = total;
                    dueAmountInput.value = "0";
                } else {
                    paymentSummary.style.display = 'none';
                    paidAmountInput.value = '';
                    dueAmountInput.value = '';
                }
            }

            // ---------------- Helpers ----------------
            window.selectAllDues = function () {
                document.querySelectorAll('.fee-checkbox').forEach(b => b.checked = true);
                document.querySelectorAll('.late-checkbox').forEach(b => b.checked = true);
                updatePaymentSummary();
            };
            window.clearSelection = function () {
                document.querySelectorAll('.fee-checkbox').forEach(b => b.checked = false);
                document.querySelectorAll('.late-checkbox').forEach(b => b.checked = false);
                updatePaymentSummary();
            };
            window.selectMonthFees = function (month) {
                document.querySelectorAll(`.fee-checkbox[data-month="${month}"]`).forEach(b => b.checked = true);
                document.querySelectorAll(`.late-checkbox`).forEach(cb => {
                    const fm = cb.dataset.feeMonth || cb.getAttribute('data-fee-month') || '';
                    if (fm && fm.includes(month)) cb.checked = true;
                });
                updatePaymentSummary();
            };

            // ---------------- Submit handler ----------------
            paymentForm.addEventListener('submit', function (e) {
                e.preventDefault();
                if (!currentStudentId) { alert('Select a student first'); return; }

                const checkedFees = document.querySelectorAll('.fee-checkbox:checked');
                const checkedLate = document.querySelectorAll('.late-checkbox:checked');
                if (checkedFees.length === 0 && checkedLate.length === 0) { alert('Select at least one fee'); return; }

                let formData = new FormData();
                formData.append('student_id', currentStudentId);
                formData.append('amount', paidAmountInput.value);
                formData.append('method', 'cash'); // Default payment method
                formData.append('transaction_id', '');
                formData.append('note', '');
                formData.append('due_amount', dueAmountInput.value);

                // ✅ Append selected fees as proper array
                checkedFees.forEach(cb => formData.append('selected_fees[]', cb.value));

                // Late fees
                let idx = 0;
                checkedLate.forEach(cb => {
                    const base = cb.dataset.baseFeeId || cb.getAttribute('data-base-fee-id') || '';
                    const feeMonth = cb.dataset.feeMonth || cb.getAttribute('data-fee-month') || '';
                    const amount = cb.dataset.amount || 0;
                    const note = cb.dataset.note || '';
                    formData.append(`selected_late_fees[${idx}][base_fee_id]`, base);
                    formData.append(`selected_late_fees[${idx}][fee_month]`, feeMonth);
                    formData.append(`selected_late_fees[${idx}][amount]`, amount);
                    formData.append(`selected_late_fees[${idx}][note]`, note);
                    const waverInput = document.querySelector(`.waver-input-late[data-base-fee-id="${base}"]`);
                    const waverVal = waverInput ? waverInput.value : 0;
                    formData.append(`waver_late[${base}]`, waverVal);
                    idx++;
                });

                // Optional session filter
                if (sessionFilter && sessionFilter.value) {
                    formData.append('session_id', sessionFilter.value);
                }

                // Waver inputs
                document.querySelectorAll('.waver-input').forEach(input => {
                    const feeIdEl = input.closest('tr').querySelector('.fee-checkbox');
                    if (feeIdEl) {
                        const feeId = feeIdEl.value;
                        formData.append(`waver[${feeId}]`, input.value || 0);
                    }
                });

                // Submit via fetch
                fetch('{{ route("admin.payments.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: formData
                })
                    .then(res => {
                        if (!res.ok) {
                            return res.text().then(txt => { throw new Error('Server returned HTTP ' + res.status + '. Preview: ' + (txt.slice ? txt.slice(0, 1000) : txt)); });
                        }
                        return parseJsonResponse(res);
                    })
                    .then(resp => {
                        if (resp && resp.success) {
                            paymentForm.reset();
                            paymentSummary.style.display = 'none';
                            loadStudentInfo(currentStudentId, sessionFilter.value);
                            if (resp.payments && resp.payments.length) {
                                const paymentId = resp.payments[0].payment_id;
                                window.open('/admin/payments/receipt/' + paymentId, '_blank');
                            }
                        } else {
                            alert((resp && resp.message) ? resp.message : 'Payment failed');
                        }
                    }).catch((err) => {
                        console.error('Payment submission error:', err);
                        alert('Network/server error while submitting payment. Check console for details.');
                    });
            });

            // initial load if student provided
            if (currentStudentId) {
                loadStudentInfo(currentStudentId, sessionFilter ? sessionFilter.value : null);
            }
        });
    </script>
@endsection