@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body default-height">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Due Report 2</li>
            </ol>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="filter cm-content-box box-primary">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-solid fa-filter me-2"></i> Filter
                        </div>
                        <div class="tools">
                            <a href="#" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>

                    <div class="cm-content-body form excerpt">
                        <div class="card-body">
                            <form id="reportFilters" class="row gx-2 gy-2 align-items-end">
                                @csrf

                                <div class="col-md-3">
                                    <label class="form-label">Session</label>
                                    <select name="session_id" id="session_id" class="form-control">
                                        <option value="">-- All Sessions --</option>
                                        @foreach($sessions as $session)
                                            <option value="{{ $session->id }}">{{ $session->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Class</label>
                                    <select name="class_id" id="class_id" class="form-control">
                                        <option value="">-- All Classes --</option>
                                        @foreach($classList as $classItem)
                                            <option value="{{ $classItem->id }}">{{ $classItem->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Section</label>
                                    <select name="section_id" id="section_id" class="form-control">
                                        <option value="">-- Select Section --</option>
                                    </select>
                                </div>

                                <div class="col-md-3 text-end mt-2">
                                    <button type="button" id="applyFilters" class="btn btn-primary">
                                        <i class="fa fa-search me-1"></i> Apply Filters
                                    </button>
                                    <button type="button" id="resetFilters" class="btn btn-secondary">
                                        <i class="fa fa-refresh me-1"></i> Reset
                                    </button>
                                </div>

                                <div class="col-12 mt-4">
                                    <h6><i class="fa-solid fa-table me-1"></i> Choose Columns to Print</h6>

                                    <label><input type="checkbox" class="col-toggle" data-col="col-sl" checked> SL</label>
                                    <label class="ms-3"><input type="checkbox" class="col-toggle" data-col="col-name" checked> Student Name</label>
                                    <label class="ms-3"><input type="checkbox" class="col-toggle" data-col="col-class" checked> Class</label>
                                    <label class="ms-3"><input type="checkbox" class="col-toggle" data-col="col-section" checked> Section</label>
                                    <label class="ms-3"><input type="checkbox" class="col-toggle" data-col="col-roll" checked> Roll</label>
                                    <label class="ms-3"><input type="checkbox" class="col-toggle" data-col="col-due" checked> Due</label>
                                    <label class="ms-3"><input type="checkbox" class="col-toggle" data-col="col-due-list" checked> Due Fee List</label>
                                    <label class="ms-3"><input type="checkbox" class="col-toggle" data-col="col-total" checked> Total Amount</label>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="card p-3">
                        <div id="reportContainer">
                            <div class="text-center py-5">
                                <em>Apply filters to generate Due Report</em>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('customcss')
<style>
    .due-report-table-wrap {
        overflow-x: auto;
    }

    #dueTable {
        min-width: 880px;
    }

    @media (max-width: 767.98px) {
        #dueTable th,
        #dueTable td {
            white-space: nowrap;
            font-size: 12px;
        }
    }
</style>
@endsection

@section('customjs')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const applyBtn = document.getElementById('applyFilters');
    const resetBtn = document.getElementById('resetFilters');
    const reportContainer = document.getElementById('reportContainer');
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    const colToggles = document.querySelectorAll('.col-toggle');

    applyBtn.addEventListener('click', fetchReport);

    resetBtn.addEventListener('click', function () {
        document.getElementById('reportFilters').reset();
        document.getElementById('section_id').innerHTML = '<option value="">-- Select Section --</option>';
        reportContainer.innerHTML = '<div class="text-center py-5"><em>Apply filters to generate Due Report</em></div>';
    });

    function fetchReport() {
        const form = document.getElementById('reportFilters');
        const data = new FormData(form);

        reportContainer.innerHTML = '<div class="text-center py-4 text-primary">Loading...</div>';

        fetch('{{ route('accounting.report.due.data2') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json'
            },
            body: data
        })
        .then(response => response.json())
        .then(resp => {
            if (resp.success) {
                reportContainer.innerHTML = resp.html;
                applyColumnVisibility();
            } else {
                reportContainer.innerHTML = '<div class="text-danger p-3">No data found.</div>';
            }
        })
        .catch(() => {
            reportContainer.innerHTML = '<div class="text-danger p-3">Error fetching report.</div>';
        });
    }

    document.getElementById('class_id').addEventListener('change', function () {
        const classId = this.value;
        const sectionSelect = document.getElementById('section_id');

        if (!classId) {
            sectionSelect.innerHTML = '<option value="">-- Select Section --</option>';
            return;
        }

        sectionSelect.innerHTML = '<option>Loading...</option>';

        fetch(`/admin/get-sections-by-class/${classId}`)
        .then(response => response.json())
        .then(data => {
            const sections = data.sections ?? [];
            sectionSelect.innerHTML = '<option value="">-- Select Section --</option>';
            sections.forEach(sec => {
                sectionSelect.innerHTML += `<option value="${sec.id}">${sec.name}</option>`;
            });
        })
        .catch(() => {
            sectionSelect.innerHTML = '<option value="">Error loading</option>';
        });
    });

    colToggles.forEach(toggle => {
        toggle.addEventListener('change', applyColumnVisibility);
    });

    function applyColumnVisibility() {
        const printArea = document.getElementById('printArea');
        if (!printArea) return;

        colToggles.forEach(toggle => {
            const colClass = toggle.dataset.col;
            const display = toggle.checked ? '' : 'none';
            printArea.querySelectorAll('.' + colClass).forEach(cell => {
                cell.style.display = display;
            });
        });
    }

    window.printReport = function () {
        const srcPrintArea = document.getElementById('printArea');
        if (!srcPrintArea) return;

        const clone = srcPrintArea.cloneNode(true);

        colToggles.forEach(toggle => {
            const colClass = toggle.dataset.col;
            const display = toggle.checked ? '' : 'none';
            clone.querySelectorAll('.' + colClass).forEach(cell => {
                cell.style.display = display;
            });
        });

        const printWindow = window.open('', '', 'width=1000,height=700');
        printWindow.document.write('<html><head><title>Due Report</title>');
        printWindow.document.write(`
            <style>
                @page { size: A4 portrait; margin: 18mm 14mm 18mm 14mm; }
                body { font-family: "Segoe UI", Arial, sans-serif; margin: 0; padding: 10px; color: #000; text-align: center; }
                table { width: 100%; border-collapse: collapse; margin-top: 15px; }
                th, td { border: 1px solid #444; padding: 6px 5px; font-size: 12px; text-align: center; }
                th { background: #e3f2fd; font-weight: 600; }
                .print-header h4 { margin: 0; font-size: 18px; font-weight: 700; }
                .print-header p { margin: 0; font-size: 13px; }
                .print-header h5 { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
                @media print { button { display: none; } }
            </style>
        `);
        printWindow.document.write('</head><body>');
        printWindow.document.write(clone.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();

        printWindow.onload = function () {
            printWindow.focus();
            printWindow.print();
            setTimeout(() => printWindow.close(), 500);
        };
    };
});
</script>
@endsection