@extends('admin.admin_dashboard')

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

            <div class="card">
                <div class="card-header">
                    <h3>Student Absent Report</h3>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <label>Report Type</label>
                            <select id="report_type" class="form-control">
                                <option value="daily">Daily Report</option>
                                <option value="monthly">Monthly Report</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Session</label>
                            <select id="session_id" class="form-control">
                                <option value="">Select</option>
                                @foreach($sessions as $session)
                                    <option value="{{ $session->id }}" {{ $session->is_current == 1 ? 'selected' : '' }}>
                                        {{ $session->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Class</label>
                            <select id="class_id" class="form-control">
                                <option value="">Select</option>
                                @foreach($classes as $class)
                                    <option value="{{ $class->id }}">{{ $class->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>Section</label>
                            <select id="section_id" class="form-control">
                                <option value="">Select</option>
                            </select>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-3" id="dateField">
                            <label>Date</label>
                            <input type="date" id="date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-3" id="monthField" style="display: none;">
                            <label>Month</label>
                            <input type="month" id="month" class="form-control" value="{{ now()->format('Y-m') }}">
                        </div>
                    </div>

                    <button id="loadAbsentReport" class="btn btn-primary mb-3">🔍 Generate Report</button>
                    <button id="printAbsentReport" class="btn btn-success mb-3 ms-2" style="display: none;">🖨️ Print
                        Report</button>
                </div>
            </div>

            <!-- Report Summary -->
            <div class="card" id="reportSummary" style="display: none;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Report Type:</strong> <span id="summaryReportType">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Session:</strong> <span id="summarySession">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Class:</strong> <span id="summaryClass">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Section:</strong> <span id="summarySection">-</span>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-3">
                            <strong>Date/Month:</strong> <span id="summaryDate">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Total Absent Students:</strong> <span id="summaryTotal"
                                class="badge badge-danger">0</span>
                        </div>
                        <div class="col-md-3" id="totalDaysDiv" style="display: none;">
                            <strong>Total Days:</strong> <span id="summaryTotalDays">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Absent Report Table -->
            <div class="card" id="absentReportCard">
                <div class="card-header">
                    <h3>Absent Students List</h3>
                </div>
                <div class="card-body">
                    <!-- Print Header (Hidden on Screen) -->
                    <div id="printHeader" style="display: none;">
                        <table
                            style="width: 100%; border-bottom: 2px solid #333; margin-bottom: 10px; padding-bottom: 10px;">
                            <tr>
                                <td style="width: 80px; text-align: center; vertical-align: middle;">

                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    @if($schoolProfile && $schoolProfile->school_logo)
                                        <img src="{{ asset('core/storage/app/public/' . $schoolProfile->school_logo) }}"
                                            alt="Logo" style="height: 60px; width: 60px; object-fit: contain;">
                                    @else
                                        <img src="" alt="Logo" style="height: 60px; width: 60px; object-fit: contain;">
                                    @endif
                                    <h2 style="margin: 0; font-size: 20px; font-weight: bold;">
                                        {{ $schoolProfile->school_name ?? 'School Name' }}
                                    </h2>
                                    <div style="margin: 3px 0 8px 0; font-size: 14px; font-weight: bold;">Student Absent
                                        Report</div>
                                    <div style="font-size: 11px;">
                                        <strong>Session:</strong> <span id="printSession">-</span> &nbsp;|&nbsp;
                                        <strong>Class:</strong> <span id="printClass">-</span> &nbsp;|&nbsp;
                                        <strong>Section:</strong> <span id="printSection">-</span> &nbsp;|&nbsp;
                                        <strong>Total Absent:</strong> <span id="printTotalAbsent">0</span> &nbsp;|&nbsp;
                                        <span id="printDateMonth">-</span> 
                                        
                                    </div>
                                </td>
                                <td style="width: 80px;"></td>
                            </tr>
                        </table>
                    </div>

                    <div id="printContainer">
                        <div class="table-responsive">
                            <!-- Daily Report Table -->
                            <table class="table table-bordered" id="dailyAbsentTable" style="display: none;">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;">SL</th>
                                        <th style="width: 100px;">Roll</th>
                                        <th style="width: 150px;">Name</th>
                                        <th style="width: 60px;">Roll</th>
                                        <th style="width: 100px;">Date</th>
                                        <th style="width: auto; text-align: center;">Comment</th>
                                    </tr>
                                </thead>
                                <tbody id="dailyAbsentTableBody">
                                    <tr>
                                        <td colspan="6" class="text-center">No data available.</td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- Monthly Report Table -->
                            <table class="table table-bordered" id="monthlyAbsentTable" style="display: none;">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>Student ID</th>
                                        <th>Name</th>
                                        <th>Total Absent</th>
                                        <th>Percentage</th>
                                        <th>Parent Name</th>
                                        <th>Parent Phone</th>
                                        <th>Absent Dates</th>
                                    </tr>
                                </thead>
                                <tbody id="monthlyAbsentTableBody">
                                    <tr>
                                        <td colspan="8" class="text-center">No data available.</td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- Default Table (shown initially) -->
                            <table class="table table-bordered" id="absentTable">
                                <thead id="absentTableHead">
                                    <tr>
                                        <th>SL</th>
                                        <th>Student ID</th>
                                        <th>Name</th>
                                        <th>Total Absent</th>
                                        <th>Percentage</th>
                                        <th>Parent Name</th>
                                        <th>Parent Phone</th>
                                        <th>Absent Dates</th>
                                    </tr>
                                </thead>
                                <tbody id="absentTableBody">
                                    <tr>
                                        <td colspan="8" class="text-center">No data available. Please select filters and
                                            generate report.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <style>
        @media print {
            @page {
                size: A4 ;
                margin: 10mm;
            }

            #printHeader,
            #printContainer {
                margin-left: 10px !important;
                margin-right: 10px !important;
                padding: 0 5px !important;
            }

            html,
            body {
                margin: 0 !important;
                padding: 0 !important;
                background: white !important;
            }

            body * {
                visibility: hidden;
            }

            #printHeader,
            #printHeader *,
            #printContainer,
            #printContainer *,
            .table-responsive,
            .table-responsive *,
            #dailyAbsentTable,
            #dailyAbsentTable *,
            #monthlyAbsentTable,
            #monthlyAbsentTable * {
                visibility: visible !important;
            }

            #absentReportCard {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
                box-shadow: none !important;
            }

            #absentReportCard .card-body {
                padding: 0 !important;
                margin: 0 !important;
            }

            #printHeader {
                display: block !important;
                width: 100%;
                margin: 0 0 10px 0;
                padding: 0;
            }

            #printContainer {
                width: 100%;
                margin: 0;
                padding: 0;
            }

            .table-responsive {
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: visible !important;
            }

            #absentTable,
            #dailyAbsentTable,
            #monthlyAbsentTable {
                width: calc(100% - 20px) !important;
                font-size: 10px !important;
                margin: 0 auto !important;
                border-collapse: collapse !important;
                table-layout: fixed !important;
            }

            #absentTable th,
            #absentTable td,
            #dailyAbsentTable th,
            #dailyAbsentTable td,
            #monthlyAbsentTable th,
            #monthlyAbsentTable td {
                padding: 5px 3px !important;
                font-size: 9px !important;
                border: 1px solid #000 !important;
                text-align: center !important;
                vertical-align: middle !important;
                word-wrap: break-word !important;
            }

            /* Name column - left align */
            #dailyAbsentTable td:nth-child(3),
            #monthlyAbsentTable td:nth-child(3) {
                text-align: left !important;
            }

            #absentTable th,
            #dailyAbsentTable th,
            #monthlyAbsentTable th {
                background-color: #e0e0e0 !important;
                font-weight: bold !important;
                text-align: center !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

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

            tbody {
                display: table-row-group !important;
            }

            tr {
                page-break-inside: avoid !important;
                page-break-after: auto !important;
            }

            .page-titles,
            .breadcrumb,
            #reportSummary,
            .card:not(#absentReportCard),
            .card-header,
            button,
            .btn {
                display: none !important;
            }
        }
    </style>

    <script>
        $(document).ready(function () {
            // Toggle date/month field based on report type
            $('#report_type').on('change', function () {
                const reportType = $(this).val();
                if (reportType === 'daily') {
                    $('#dateField').show();
                    $('#monthField').hide();
                } else {
                    $('#dateField').hide();
                    $('#monthField').show();
                }
            });

            // Load sections on class change
            $('#class_id').on('change', function () {
                const classId = $(this).val();
                $('#section_id').html('<option value="">Loading...</option>');

                if (classId) {
                    $.get(`/get-sections/${classId}`, function (data) {
                        let html = '<option value="">Select</option>';
                        data.forEach(function (item) {
                            if (item.section && item.section.name) {
                                html += `<option value="${item.section_id}">${item.section.name}</option>`;
                            }
                        });
                        $('#section_id').html(html);
                    }).fail(function () {
                        alert('Failed to load sections!');
                        $('#section_id').html('<option value="">Select</option>');
                    });
                } else {
                    $('#section_id').html('<option value="">Select</option>');
                }
            });

            // Generate Report
            $('#loadAbsentReport').click(function () {
                const reportType = $('#report_type').val();
                const sessionId = $('#session_id').val();
                const classId = $('#class_id').val();
                const sectionId = $('#section_id').val();
                const date = $('#date').val();
                const month = $('#month').val();

                if (!sessionId || !classId) {
                    alert('Please select Session and Class!');
                    return;
                }

                if (reportType === 'daily' && !date) {
                    alert('Please select a date!');
                    return;
                }

                if (reportType === 'monthly' && !month) {
                    alert('Please select a month!');
                    return;
                }

                const sessionText = $('#session_id option:selected').text();
                const classText = $('#class_id option:selected').text();
                const sectionText = sectionId ? $('#section_id option:selected').text() : 'All Sections';

                const requestData = {
                    _token: '{{ csrf_token() }}',
                    report_type: reportType,
                    session_id: sessionId,
                    class_id: classId,
                    section_id: sectionId,
                };

                if (reportType === 'daily') {
                    requestData.date = date;
                } else {
                    requestData.month = month;
                }

                $.post("{{ route('admin.attendance.absentData') }}", requestData, function (res) {
                    // Update summary
                    $('#summaryReportType').text(reportType === 'daily' ? 'Daily Report' : 'Monthly Report');
                    $('#summarySession').text(sessionText);
                    $('#summaryClass').text(classText);
                    $('#summarySection').text(sectionText);

                    if (reportType === 'daily') {
                        $('#summaryDate').text(res.date);
                        $('#totalDaysDiv').hide();
                    } else {
                        $('#summaryDate').text(res.month);
                        $('#summaryTotalDays').text(res.total_days);
                        $('#totalDaysDiv').show();
                    }

                    $('#summaryTotal').text(reportType === 'daily' ? res.total_absent : res.total_students_absent);
                    $('#reportSummary').show();

                    // Update print header
                    $('#printSession').text(sessionText);
                    $('#printClass').text(classText);
                    $('#printSection').text(sectionText);
                    $('#printDateMonth').text(reportType === 'daily' ? `Date: ${res.date}` : `Month: ${res.month}`);
                    $('#printTotalAbsent').text(reportType === 'daily' ? res.total_absent : res.total_students_absent);

                    // Hide all tables first
                    $('#absentTable').hide();
                    $('#dailyAbsentTable').hide();
                    $('#monthlyAbsentTable').hide();

                    // Build appropriate table based on report type
                    if (reportType === 'daily') {
                        // Daily Report Table
                        let tbody = '';
                        if (res.students.length === 0) {
                            tbody = '<tr><td colspan="6" class="text-center">No absent students found for the selected date.</td></tr>';
                        } else {
                            res.students.forEach((student, index) => {
                                tbody += `
                                                <tr>
                                                    <td class="text-center">${index + 1}</td>
                                                    <td class="text-center">${student.class_roll}</td>
                                                    <td>${student.name}</td>
                                                    <td class="text-center">${student.class_roll}</td>
                                                    <td class="text-center">${student.date}</td>
                                                    <td class="text-center" style="word-wrap: break-word; white-space: normal;">${student.comment || '-'}</td>
                                                </tr>
                                            `;
                            });
                        }
                        $('#dailyAbsentTableBody').html(tbody);
                        $('#dailyAbsentTable').show();
                    } else {
                        // Monthly Report Table
                        let tbody = '';
                        if (res.students.length === 0) {
                            tbody = '<tr><td colspan="8" class="text-center">No absent students found for the selected month.</td></tr>';
                        } else {
                            res.students.forEach((student, index) => {
                                const absentDatesStr = student.absent_dates.join(', ');
                                tbody += `
                                                <tr>
                                                    <td class="text-center">${index + 1}</td>
                                                    <td>${student.student_id}</td>
                                                    <td>${student.name}</td>
                                                    <td class="text-center"><span class="badge badge-danger">${student.total_absent}</span></td>
                                                    <td class="text-center">${student.percentage}%</td>
                                                    <td>${student.parent_name}</td>
                                                    <td>${student.parent_phone}</td>
                                                    <td><small>${absentDatesStr}</small></td>
                                                </tr>
                                            `;
                            });
                        }
                        $('#monthlyAbsentTableBody').html(tbody);
                        $('#monthlyAbsentTable').show();
                    }

                    $('#printAbsentReport').show();
                }).fail(function () {
                    alert('Failed to generate report!');
                });
            });

            // Print Report
            $('#printAbsentReport').click(function () {
                window.print();
            });
        });
    </script>
@endsection