@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)">Student Attendance</a></li>
                    </ol>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h3> Monthly Attendance </h3>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-2">
                        <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 class="col-md-3">
                            <label>Month</label>
                            <input type="month" id="month" class="form-control" value="{{ now()->format('Y-m') }}">
                        </div>
                    </div>

                    <button id="loadMonthlyAttendance" class="btn btn-primary mb-4">🔍 Load Attendance</button>
                    <button id="printAttendance" class="btn btn-success mb-4 ms-2" style="display: none;">🖨️ Print
                        Report</button>
                </div>
            </div>

            <!-- Selected Information Display -->
            <div class="card" id="selectedInfoCard" style="display: none;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Session:</strong> <span id="selectedSession">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Class:</strong> <span id="selectedClass">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Section:</strong> <span id="selectedSection">-</span>
                        </div>
                        <div class="col-md-3">
                            <strong>Month:</strong> <span id="selectedMonth">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card" id="attendanceCard">
                <div class="card-header">
                    <h3> Monthly Student Attendance History </h3>
                </div>
                <div class="card-body">

                    <!-- Print Header (Hidden on Screen, Visible on Print) -->
                    <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;">
                                    {{-- left blank --}}
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    @if($schoolProfile && $schoolProfile->school_logo)
                                        <img id="printSchoolLogo"
                                            src="{{ asset('core/storage/app/public/' . $schoolProfile->school_logo) }}"
                                            alt="Logo" style="height: 60px; width: 60px; object-fit: contain;">
                                    @else
                                        <img id="printSchoolLogo" src="" alt="Logo"
                                            style="height: 60px; width: 60px; object-fit: contain;">
                                    @endif

                                    <h2 id="printSchoolName" 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;">Monthly Attendance
                                        Report</div>
                                    <div style="font-size: 11px;">
                                        <strong>Session:</strong> <span id="printSession">-</span> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <strong>Class:</strong> <span id="printClass">-</span> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <strong>Section:</strong> <span id="printSection">-</span> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <strong>Month:</strong> <span id="printMonth">-</span>
                                    </div>
                                </td>
                                <td style="width: 80px;"></td>
                            </tr>
                        </table>
                    </div>

                    <!-- Print Container -->
                    <div id="printContainer">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="attendanceTable">
                                <thead id="attendanceHead"></thead>
                                <tbody id="attendanceBody"></tbody>
                            </table>
                        </div>
                    </div>

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

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

                html,
                body {
                    margin: 0 !important;
                    padding: 0 !important;
                    background: #fff !important;
                    overflow: visible !important;
                    height: auto !important;
                }

                * {
                    box-sizing: border-box;
                }

                body * {
                    visibility: hidden;
                }

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

                .content-body,
                .container-fluid {
                    margin: 0 !important;
                    padding: 0 !important;
                }

                #attendanceCard {
                    position: static !important;
                    top: auto !important;
                    left: auto !important;
                    width: 100% !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    border: none !important;
                    box-shadow: none !important;
                    page-break-inside: auto !important;
                    break-inside: auto !important;
                }

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

                /* print header আর table যেন একই flow-তে থাকে */
                #printHeader {
                    display: block !important;
                    width: 100% !important;
                    margin: 0 0 4px 0 !important;
                    padding: 0 !important;
                    page-break-after: avoid !important;
                    break-after: avoid !important;
                }

                #printContainer {
                    width: 100% !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    page-break-before: auto !important;
                    break-before: auto !important;
                }

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

                #attendanceTable {
                    width: 100% !important;
                    margin: 0 !important;
                    border-collapse: collapse !important;
                    table-layout: fixed !important;
                    font-size: 9px !important;
                    page-break-inside: auto !important;
                    break-inside: auto !important;
                }

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

                #attendanceTable th {
                    background-color: #e0e0e0 !important;
                    font-weight: bold !important;
                    -webkit-print-color-adjust: exact !important;
                    print-color-adjust: exact !important;
                }

                #attendanceTable th:nth-child(1),
                #attendanceTable td:nth-child(1) {
                    width: 25px !important;
                }

                #attendanceTable th:nth-child(2),
                #attendanceTable td:nth-child(2) {
                    width: 60px !important;
                }

                #attendanceTable th:nth-child(3),
                #attendanceTable td:nth-child(3) {
                    width: 25px !important;
                    text-align: left !important;
                    padding-left: 5px !important;
                }

                #attendanceTable th:nth-child(n+4),
                #attendanceTable td:nth-child(n+4) {
                    width: 21px !important;
                    padding: 1px 1px !important;
                }

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

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

                /* আগে avoid ছিল, এখন auto করা হয়েছে যাতে পুরো table next page-এ jump না করে */
                tr {
                    page-break-inside: auto !important;
                    break-inside: auto !important;
                    page-break-after: auto !important;
                }

                td {
                    page-break-inside: auto !important;
                    break-inside: auto !important;
                }

                .page-titles,
                .breadcrumb,
                #selectedInfoCard,
                .card:not(#attendanceCard),
                .card-header,
                button,
                .btn,
                .row.g-3 {
                    display: none !important;
                }

                .off-day-merged-cell {
                    background: #f7f7f7 !important;
                    -webkit-print-color-adjust: exact !important;
                    print-color-adjust: exact !important;
                }
            }

            .off-day-merged-cell {
                background: #f7f7f7;
                font-weight: bold;
                padding: 0 !important;
                position: relative;
                overflow: hidden;
            }

            .off-day-text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                writing-mode: vertical-rl;
                text-orientation: mixed;
                white-space: nowrap;
                line-height: 1;
                font-size: 10px;
                display: block;
                pointer-events: none;
            }
        </style>

        <script>
            $(document).ready(function () {

                // Print button click handler
                $('#printAttendance').click(function () {
                    $('#printSession').text($('#selectedSession').text());
                    $('#printClass').text($('#selectedClass').text());
                    $('#printSection').text($('#selectedSection').text());
                    $('#printMonth').text($('#selectedMonth').text());
                    window.print();
                });

                // Section Load 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) {
                            console.log("Section Data:", 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>');
                    }
                });

                $('#loadMonthlyAttendance').click(function () {
                    const sessionId = $('#session_id').val();
                    const classId = $('#class_id').val();
                    const sectionId = $('#section_id').val();
                    const month = $('#month').val();

                    if (!sessionId || !classId || !sectionId || !month) {
                        alert('All fields are required!');
                        return;
                    }

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

                    const monthNames = ["January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December"];
                    const [year, monthNum] = month.split('-');
                    const monthText = `${monthNames[parseInt(monthNum) - 1]} ${year}`;

                    $('#selectedSession').text(sessionText);
                    $('#selectedClass').text(classText);
                    $('#selectedSection').text(sectionText);
                    $('#selectedMonth').text(monthText);
                    $('#selectedInfoCard').show();

                    $.post("{{ route('admin.attendance.monthlyData') }}", {
                        _token: '{{ csrf_token() }}',
                        session_id: sessionId,
                        class_id: classId,
                        section_id: sectionId,
                        month: month
                    }, function (res) {

                        function getDayShortName(dateString) {
                            const parts = dateString.split('-');
                            const day = parseInt(parts[0], 10);
                            const month = parseInt(parts[1], 10) - 1;
                            const year = parseInt(parts[2], 10);

                            const dateObj = new Date(year, month, day);
                            const dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

                            return dayNames[dateObj.getDay()];
                        }

                        let thead = `<tr><th rowspan="2">SL</th><th rowspan="2">Name</th><th rowspan="2">Roll</th>`;
                        res.dates.forEach(date => {
                            const dayOnly = date.split('-')[0];
                            thead += `<th>${dayOnly}</th>`;
                        });
                        thead += `</tr>`;

                        thead += `<tr>`;
                        res.dates.forEach(date => {
                            thead += `<th>${getDayShortName(date)}</th>`;
                        });
                        thead += `</tr>`;

                        $('#attendanceHead').html(thead);

                        let tbody = '';
                        const totalStudents = res.students.length;
                        const offDates = res.off_dates || {};

                        res.students.forEach((stu, index) => {
                            let row = `<tr><td>${index + 1}</td><td>${stu.name}</td><td>${stu.student_id}</td>`;

                            res.dates.forEach(date => {
                                if (offDates[date]) {
                                    if (index === 0) {
                                        row += `
                                            <td rowspan="${totalStudents}" class="off-day-merged-cell">
                                                <div class="off-day-text">${offDates[date]}</div>
                                            </td>
                                        `;
                                    }
                                } else {
                                    let attendanceStatus = stu.dates[date];
                                    let symbol = '';

                                    if (attendanceStatus === 'present' || attendanceStatus === 'P' || attendanceStatus === '1' || attendanceStatus === 1) {
                                        symbol = '<span style="color: green; font-size: 16px;">✓</span>';
                                    } else if (attendanceStatus === 'absent' || attendanceStatus === 'A' || attendanceStatus === '0' || attendanceStatus === 0) {
                                        symbol = '<span style="color: red; font-size: 16px;">✗</span>';
                                    } else {
                                        symbol = '-';
                                    }

                                    row += `<td style="text-align: center;">${symbol}</td>`;
                                }
                            });

                            row += `</tr>`;
                            tbody += row;
                        });

                        $('#attendanceBody').html(tbody);
                        $('#printAttendance').show();
                    });
                });

            });
        </script>
    @endsection