@extends('admin.admin_dashboard')

@section('admin')
    <div class="content-body">
        <div class="container-fluid">
            <div class="row page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Fee Payment Report</a></li>
                </ol>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <!-- Filter Card -->
                    <div class="filter cm-content-box box-primary">
                        <div class="content-title SlideToolHeader">
                            <div class="cpa">
                                <i class="fa-sharp fa-solid fa-filter me-2"></i>Filter
                            </div>
                            <div class="tools">
                                <a href="javascript:void(0);" 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="feePaymentReportFilters" class="row gx-2 gy-2 align-items-end">
                                    @csrf

                                    <div class="col-md-2">
                                        <label class="form-label">Session <span class="text-danger">*</span></label>
                                        <select name="session_id" id="session_id" class="form-control" required>
                                            <option value="">-- Select Session --</option>
                                            @foreach($sessions as $s)
                                                <option value="{{ $s->id }}">{{ $s->name }}
                                                    
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

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

                                    <div class="col-md-2">
                                        <label class="form-label">Date Filter <span class="text-danger">*</span></label>
                                        <select name="date_filter" id="date_filter" class="form-control" required>
                                            <option value="today" selected>Today</option>
                                            <option value="yesterday">Yesterday</option>
                                            <option value="last_7_days">Last 7 days</option>
                                            <option value="last_30_days">Last 30 days</option>
                                            <option value="this_month">This month</option>
                                            <option value="last_month">Last month</option>
                                            <option value="specific_date">Specific date</option>
                                            <option value="date_range">Date range</option>
                                        </select>
                                       
                                    </div>

                                    <div class="col-md-3 d-none" id="specificDateWrap">
                                        <label class="form-label">Specific Date <span class="text-danger">*</span></label>
                                        <input type="date" id="specific_date" class="form-control" autocomplete="off" />
                                    </div>

                                    <div class="col-md-3 d-none" id="rangeFromWrap">
                                        <label class="form-label">From Date <span class="text-danger">*</span></label>
                                        <input type="date" id="from_date_display" class="form-control" autocomplete="off" />
                                    </div>

                                    <div class="col-md-3 d-none" id="rangeToWrap">
                                        <label class="form-label">To Date <span class="text-danger">*</span></label>
                                        <input type="date" id="to_date_display" class="form-control" autocomplete="off" />
                                    </div>

                                    <input type="hidden" name="from_date" id="from_date" />
                                    <input type="hidden" name="to_date" id="to_date" />

                                    <div class="col-md-3">
                                        <label class="form-label">Fee Type</label>
                                        <select name="fee_type" id="fee_type" class="form-control">
                                            <option value="">-- All Fee Types --</option>
                                            @foreach($feeTypes as $ft)
                                                <option value="{{ $ft->name }}">{{ $ft->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-3">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fa fa-search me-1"></i> Generate Report
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Report Card -->
                    <div class="col-12">
                        <div class="card p-3">
                            <!-- Print Button at Top -->
                            <div class="text-end mb-3 no-print">
                                <button type="button" id="printReportTop" class="btn btn-success" onclick="printReport()" style="display: none;">
                                    <i class="fa fa-print me-2"></i>Print Report
                                </button>
                            </div>

                            <div id="reportContainer">
                                <div class="text-center py-5">
                                    <em>Apply filters to generate report</em>
                                </div>
                            </div>

                            <!-- Print Button at Bottom -->
                            <div class="text-end mt-3 no-print">
                                <button type="button" id="printReportBottom" class="btn btn-success" onclick="printReport()" style="display: none;">
                                    <i class="fa fa-print me-2"></i>Print Report
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <style>
        /* Hide print area on screen */
        #printArea {
            display: none;
        }

        /* Print Styles */
        @media print {
            /* Page setup - Portrait mode */
            @page {
                size: A4 portrait;
                margin: 8mm 6mm;
            }

            body {
                margin: 0;
                padding: 0;
                background: white;
            }

            /* Hide everything except print area */
            body > *:not(#printArea) {
                display: none !important;
            }

            /* Show only print area */
            #printArea {
                display: block !important;
                position: relative;
                width: 100%;
                background: white;
            }

            /* School header styling */
            .print-header {
                text-align: center;
                margin-bottom: 10px;
                border-bottom: 2px solid #000;
                padding-bottom: 5px;
            }

            .print-header h2 {
                font-size: 18px;
                font-weight: bold;
                margin: 3px 0;
                color: #000;
            }

            .print-header p {
                margin: 1px 0;
                font-size: 9px;
                color: #000;
            }

            .report-title {
                text-align: center;
                font-size: 14px;
                font-weight: bold;
                margin: 8px 0;
                text-transform: uppercase;
                color: #000;
            }

            /* Hide collapsible header in print */
            #printArea .content-title,
            #printArea .SlideToolHeader {
                display: none !important;
            }

            /* Show content body */
            #printArea .filter,
            #printArea .cm-content-box,
            #printArea .cm-content-body,
            #printArea .card-body {
                display: block !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
            }

            /* Table styling for print */
            table {
                width: 100%;
                border-collapse: collapse;
                font-size: 8px;
                page-break-inside: auto;
                margin: 0;
                line-height: 1.3;
                table-layout: fixed;
            }

            table thead {
                display: table-header-group;
            }

            table tbody tr {
                page-break-inside: avoid;
                page-break-after: auto;
                height: auto;
            }

            table th {
                background-color: #e0e0e0 !important;
                color: #000 !important;
                font-weight: bold;
                padding: 3px 2px;
                border: 1px solid #000;
                text-align: center;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                line-height: 1.2;
                word-wrap: break-word;
            }

            table td {
                padding: 3px 2px;
                border: 1px solid #000;
                color: #000;
                text-align: center;
                line-height: 1.2;
                word-wrap: break-word;
                font-size: 8px;
            }

            /* Specific column widths */
            table th:nth-child(1), table td:nth-child(1) { width: 5%; } /* SL */
            table th:nth-child(2), table td:nth-child(2) { width: 11%; } /* Date */
            table th:nth-child(3), table td:nth-child(3) { width: 13%; } /* Invoice */
            table th:nth-child(4), table td:nth-child(4) { width: 18%; } /* Student Name */
            table th:nth-child(5), table td:nth-child(5) { width: 15%; } /* Class */
            table th:nth-child(6), table td:nth-child(6) { width: 6%; } /* Roll */
            table th:nth-child(7), table td:nth-child(7) { width: 16%; } /* Fee Type */
            table th:nth-child(8), table td:nth-child(8) { width: 15%; } /* Amount */
            table th:nth-child(9), table td:nth-child(9) { width: 12%; } /* Received By */

            table tfoot td,
            table tfoot th {
                font-weight: bold;
                background-color: #f0f0f0 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* Hide elements not needed in print */
            .no-print,
            .breadcrumb,
            .filter:not(#printArea .filter),
            .btn {
                display: none !important;
            }

            /* Report info section */
            #printArea p {
                font-size: 7px;
                margin: 1px 0;
                line-height: 1.2;
            }

            /* Grand total card */
            .bg-primary {
                background-color: #007bff !important;
                color: white !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* Footer signatures */
            #printArea .row.mt-5 {
                margin-top: 30px !important;
            }
        }
    </style>

@endsection

@section('customjs')
    <script>
        let schoolProfile = null;

        document.addEventListener('DOMContentLoaded', function() {
            console.log('Fee Payment Report page loaded');

            const form = document.getElementById('feePaymentReportFilters');
            const reportContainer = document.getElementById('reportContainer');
            const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const dateFilter = document.getElementById('date_filter');
            const specificDateWrap = document.getElementById('specificDateWrap');
            const rangeFromWrap = document.getElementById('rangeFromWrap');
            const rangeToWrap = document.getElementById('rangeToWrap');
            const specificDateInput = document.getElementById('specific_date');
            const fromDateDisplay = document.getElementById('from_date_display');
            const toDateDisplay = document.getElementById('to_date_display');
            const fromDateHidden = document.getElementById('from_date');
            const toDateHidden = document.getElementById('to_date');

            function getTodayPartsUtcPlus6() {
                const now = new Date();
                const utcMs = now.getTime() + (now.getTimezoneOffset() * 60000);
                const plus6 = new Date(utcMs + (6 * 60 * 60 * 1000));

                return {
                    y: plus6.getUTCFullYear(),
                    m: plus6.getUTCMonth() + 1,
                    d: plus6.getUTCDate()
                };
            }

            function createUtcDate(y, m, d) {
                return new Date(Date.UTC(y, m - 1, d));
            }

            function datePartsToUtcDate(parts) {
                return createUtcDate(parts.y, parts.m, parts.d);
            }

            function utcDateToParts(dateObj) {
                return {
                    y: dateObj.getUTCFullYear(),
                    m: dateObj.getUTCMonth() + 1,
                    d: dateObj.getUTCDate()
                };
            }

            function addDays(parts, days) {
                const base = datePartsToUtcDate(parts);
                base.setUTCDate(base.getUTCDate() + days);
                return utcDateToParts(base);
            }

            function pad2(n) {
                return String(n).padStart(2, '0');
            }

            function partsToIso(parts) {
                return `${parts.y}-${pad2(parts.m)}-${pad2(parts.d)}`;
            }

            function partsToDisplay(parts) {
                return `${pad2(parts.d)}-${pad2(parts.m)}-${parts.y}`;
            }

            function parseIsoDate(value) {
                const clean = (value || '').trim();
                const m = clean.match(/^(\d{4})-(\d{2})-(\d{2})$/);
                if (!m) {
                    return null;
                }

                const y = Number(m[1]);
                const mn = Number(m[2]);
                const d = Number(m[3]);
                const test = createUtcDate(y, mn, d);

                if (test.getUTCFullYear() !== y || (test.getUTCMonth() + 1) !== mn || test.getUTCDate() !== d) {
                    return null;
                }

                return { y, m: mn, d };
            }

            function updateDateInputVisibility() {
                const mode = dateFilter.value;

                specificDateWrap.classList.toggle('d-none', mode !== 'specific_date');
                rangeFromWrap.classList.toggle('d-none', mode !== 'date_range');
                rangeToWrap.classList.toggle('d-none', mode !== 'date_range');

                specificDateInput.value = '';
                fromDateDisplay.value = '';
                toDateDisplay.value = '';
            }

            function setHiddenDateRange() {
                const mode = dateFilter.value;
                const today = getTodayPartsUtcPlus6();
                let fromParts = null;
                let toParts = null;

                if (mode === 'today') {
                    fromParts = today;
                    toParts = today;
                } else if (mode === 'yesterday') {
                    fromParts = addDays(today, -1);
                    toParts = fromParts;
                } else if (mode === 'last_7_days') {
                    fromParts = addDays(today, -6);
                    toParts = today;
                } else if (mode === 'last_30_days') {
                    fromParts = addDays(today, -29);
                    toParts = today;
                } else if (mode === 'this_month') {
                    fromParts = { y: today.y, m: today.m, d: 1 };
                    toParts = today;
                } else if (mode === 'last_month') {
                    const lastMonthDate = createUtcDate(today.y, today.m, 1);
                    lastMonthDate.setUTCDate(0);
                    const lastMonthParts = utcDateToParts(lastMonthDate);
                    fromParts = { y: lastMonthParts.y, m: lastMonthParts.m, d: 1 };
                    toParts = lastMonthParts;
                } else if (mode === 'specific_date') {
                    const specific = parseIsoDate(specificDateInput.value);
                    if (!specific) {
                        toastr.error('Please select a valid Specific Date', 'Validation Error');
                        return false;
                    }
                    fromParts = specific;
                    toParts = specific;
                } else if (mode === 'date_range') {
                    const fromParsed = parseIsoDate(fromDateDisplay.value);
                    const toParsed = parseIsoDate(toDateDisplay.value);

                    if (!fromParsed || !toParsed) {
                        toastr.error('Please select valid From/To Date', 'Validation Error');
                        return false;
                    }

                    const fromObj = datePartsToUtcDate(fromParsed);
                    const toObj = datePartsToUtcDate(toParsed);
                    if (toObj < fromObj) {
                        toastr.error('To Date must be greater than or equal to From Date', 'Validation Error');
                        return false;
                    }

                    fromParts = fromParsed;
                    toParts = toParsed;
                } else {
                    toastr.error('Please select a valid Date Filter', 'Validation Error');
                    return false;
                }

                fromDateHidden.value = partsToIso(fromParts);
                toDateHidden.value = partsToIso(toParts);
                return true;
            }

            dateFilter.addEventListener('change', updateDateInputVisibility);
            updateDateInputVisibility();

            // Form submission
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                console.log('Form submitted');
                
                // Get form values
                const sessionId = document.getElementById('session_id').value;

                // Validate required fields
                if (!sessionId) {
                    toastr.error('Please select a session', 'Validation Error');
                    return;
                }

                if (!setHiddenDateRange()) {
                    return;
                }

                // Prepare form data
                const formData = new FormData(form);
                console.log('Sending request to server...');

                // Show loading
                reportContainer.innerHTML = '<div class="text-center py-4">Loading...</div>';
                hidePrintButtons();

                // Send AJAX request using fetch
                fetch("{{ route('accounting.fee.payment.report.data') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json'
                    },
                    body: formData
                })
                .then(response => {
                    console.log('Response status:', response.status);
                    if (!response.ok) {
                        return response.json().then(err => {
                            throw err;
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Response received:', data);
                    
                    if (data.success) {
                        reportContainer.innerHTML = data.html;
                        showPrintButtons();
                        
                        // Store school profile from response
                        if (data.schoolProfile) {
                            schoolProfile = data.schoolProfile;
                            console.log('School Profile loaded:', schoolProfile);
                        }
                        
                        toastr.success('Report generated successfully! Total: ৳' + parseFloat(data.total_amount).toFixed(2), 'Success');
                    } else {
                        toastr.error('Failed to generate report', 'Error');
                        reportContainer.innerHTML = '<div class="alert alert-warning text-center">No data found or failed to generate report.</div>';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    let message = 'An error occurred while generating report';
                    
                    if (error.message) {
                        message = error.message;
                    } else if (error.errors) {
                        const errorMessages = Object.values(error.errors).flat().join('<br>');
                        message = errorMessages;
                    }
                    
                    toastr.error(message, 'Error');
                    reportContainer.innerHTML = '<div class="alert alert-danger"><strong>Error:</strong> ' + message + '</div>';
                });
            });
        });

        // Show print buttons
        function showPrintButtons() {
            document.getElementById('printReportTop').style.display = 'inline-block';
            document.getElementById('printReportBottom').style.display = 'inline-block';
        }

        // Hide print buttons
        function hidePrintButtons() {
            document.getElementById('printReportTop').style.display = 'none';
            document.getElementById('printReportBottom').style.display = 'none';
        }

        // Print Report Function
        function printReport() {
            const reportContainer = document.getElementById('reportContainer');
            const reportContent = reportContainer.innerHTML;
            
            console.log('Print Report Called');
            console.log('Report Content Length:', reportContent.length);
            console.log('School Profile:', schoolProfile);
            
            if (!reportContent || reportContent.includes('Apply filters') || reportContent.includes('Loading')) {
                alert('No report to print. Please generate a report first.');
                return;
            }

            // Build school header
            let schoolHeader = '';
            if (schoolProfile) {
                schoolHeader = `
                    <div class="print-header">
                        <h2>${schoolProfile.school_name || 'School Name'}</h2>
                        <p><strong>Address:</strong> ${schoolProfile.address || 'N/A'}</p>
                        <p><strong>Phone:</strong> ${schoolProfile.phone || 'N/A'}</p>
                        ${schoolProfile.email ? '<p><strong>Email:</strong> ' + schoolProfile.email + '</p>' : ''}
                    </div>
                    <div class="report-title">Fee Payment Report</div>
                `;
            } else {
                schoolHeader = `
                    <div class="print-header">
                        <h2>School Name</h2>
                        <p>Address | Phone</p>
                    </div>
                    <div class="report-title">Fee Payment Report</div>
                `;
            }

            console.log('School Header Created');

            // Check if print area already exists, remove it
            let printArea = document.getElementById('printArea');
            if (printArea) {
                printArea.remove();
            }

            // Create print container
            printArea = document.createElement('div');
            printArea.id = 'printArea';
            printArea.innerHTML = schoolHeader + reportContent;
            
            console.log('Print Area Created, Length:', printArea.innerHTML.length);
            
            // Append to body
            document.body.appendChild(printArea);
            
            console.log('Print Area Appended to Body');
            
            // Trigger print with slight delay
            setTimeout(() => {
                console.log('Triggering window.print()');
                window.print();
            }, 100);
        }
    </script>
@endsection