@extends('teacher.teacher_dashboard')

@section('customcss')
<style>
    body,
    .content-body,
    .card {
        color: #111827;
        font-size: 11px;
    }

    .report-summary {
        display: none;
    }

    .report-summary .card-body {
        padding: 12px 16px;
    }

    .print-header {
        display: none;
    }

    .report-title {
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 4px;
    }

    .report-subtitle {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 0;
    }

    .summary-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #dbe3ec;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
    }

    .report-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 6px;
        font-size: 11px;
    }

    .report-table th {
        background-color: #4CA49D !important;
        color: #ffffff !important;
        padding: 7px 6px;
        text-align: left;
        font-weight: 600;
        font-size: 11px;
        border: 1px solid #d7e2e0;
    }

    .report-table td {
        padding: 7px 6px;
        border: 1px solid #d7e2e0;
        vertical-align: top;
        font-size: 11px;
    }

    .report-table tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    .report-table tbody tr:hover {
        background-color: #eef7f6;
    }

    .status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        background: #e8f4f3;
        color: #14786f;
    }

    .sms-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: #0f766e;
        font-weight: 600;
        word-break: break-all;
    }

    .sms-link:hover {
        text-decoration: underline;
    }

    .comment-box {
        min-width: 180px;
        width: 100%;
        min-height: 38px;
        resize: vertical;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        padding: 6px 8px;
        font-size: 11px;
    }

    .comment-actions {
        display: flex;
        gap: 6px;
        margin-top: 6px;
        flex-wrap: wrap;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .report-card {
        display: none;
    }

    .report-card .card-body {
        padding: 14px;
    }

    .filter-card .form-label {
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }

    .filter-card .form-control,
    .filter-card .form-select {
        height: 42px;
        border-radius: 10px;
    }

    .report-meta-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .meta-item {
        font-size: 12px;
        color: #374151;
    }

    .meta-item strong {
        color: #111827;
    }

    .hidden-report-table {
        display: none;
    }

    @media (max-width: 991.98px) {
        .report-meta-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .report-meta-grid {
            grid-template-columns: 1fr;
        }
    }

    @media print {
        @page {
            size: A4;
            margin: 10mm;
        }

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

        .nav-header,
        .header,
        .dlabnav,
        .footer,
        .page-titles,
        .filter-card,
        .no-print,
        #preloader {
            display: none !important;
        }

        .report-summary,
        .report-card {
            display: block !important;
            box-shadow: none !important;
            border: none !important;
        }

        .print-header {
            display: block !important;
            text-align: center;
            padding-bottom: 8px;
            margin-bottom: 10px;
            border-bottom: 2px solid #111827;
        }

        .table-wrapper {
            overflow: visible !important;
        }

        .report-table {
            font-size: 10px !important;
            width: 100% !important;
            border-collapse: collapse !important;
        }

        .report-table th,
        .report-table td {
            padding: 5px 4px !important;
            font-size: 10px !important;
            border: 1px solid #000 !important;
            vertical-align: middle !important;
        }

        .comment-box,
        .comment-actions,
        .btn,
        .sms-link,
        .status-badge {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
    }
</style>
@endsection

@section('admin')
@php
    $schoolLogo = !empty($schoolProfile?->school_logo)
        ? (file_exists(public_path('storage/' . ltrim($schoolProfile->school_logo, '/')))
            ? asset('storage/' . ltrim($schoolProfile->school_logo, '/'))
            : asset('core/storage/app/public/' . ltrim($schoolProfile->school_logo, '/')))
        : (file_exists(public_path('storage/school_logo.png'))
            ? asset('storage/school_logo.png')
            : asset('core/storage/app/public/school_logo.png'));

    $defaultSessionId = $currentSession?->id ?? ($sessions->first()?->id ?? null);
@endphp

<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)">Teacher Portal</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Absent Report</a></li>
                </ol>
            </div>
        </div>

        <div class="card filter-card mb-3">
            <div class="card-header">
                <h3 class="mb-0">Student Absent Report</h3>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <label class="form-label">Report Type</label>
                        <select id="report_type" class="form-select">
                            <option value="daily">Daily Report</option>
                            <option value="monthly">Monthly Report</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Session</label>
                        <select id="session_id" class="form-select">
                            <option value="">Select</option>
                            @foreach($sessions as $session)
                                <option value="{{ $session->id }}" {{ (int) $defaultSessionId === (int) $session->id ? 'selected' : '' }}>
                                    {{ $session->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Class</label>
                        <select id="class_id" class="form-select">
                            <option value="">Select</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 id="section_id" class="form-select">
                            <option value="">Select</option>
                        </select>
                    </div>
                </div>

                <div class="row g-3 mb-3">
                    <div class="col-md-3" id="dateField">
                        <label class="form-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 class="form-label">Month</label>
                        <input type="month" id="month" class="form-control" value="{{ now()->format('Y-m') }}">
                    </div>
                    <div class="col-md-6 d-flex align-items-end gap-2">
                        <button id="loadAbsentReport" class="btn btn-primary">Generate Report</button>
                        <button id="printAbsentReport" class="btn btn-success" style="display: none;">Print Report</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card report-summary" id="reportSummary">
            <div class="card-body">
                <div class="report-meta-grid">
                    <div class="meta-item"><strong>Report Type:</strong> <span id="summaryReportType">-</span></div>
                    <div class="meta-item"><strong>Session:</strong> <span id="summarySession">-</span></div>
                    <div class="meta-item"><strong>Class:</strong> <span id="summaryClass">-</span></div>
                    <div class="meta-item"><strong>Section:</strong> <span id="summarySection">-</span></div>
                </div>
                <div class="report-meta-grid mt-2">
                    <div class="meta-item"><strong>Date/Month:</strong> <span id="summaryDate">-</span></div>
                    <div class="meta-item"><strong>Total Absent Students:</strong> <span id="summaryTotal" class="badge bg-danger">0</span></div>
                    <div class="meta-item" id="totalDaysDiv" style="display: none;"><strong>Total Days:</strong> <span id="summaryTotalDays">-</span></div>
                </div>
            </div>
        </div>

        <div class="card report-card" id="absentReportCard">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h3 class="mb-0">Absent Students List</h3>
                <button id="printReportHeader" class="btn btn-sm btn-success no-print" style="display: none;">Print</button>
            </div>
            <div class="card-body">
                <div class="print-header" id="printHeader">
                    <div>
                        <img src="{{ $schoolLogo }}" alt="Logo" style="height: 58px; width: 58px; object-fit: contain; margin-bottom: 6px;">
                    </div>
                    <div style="font-size: 20px; font-weight: 700;">{{ $schoolProfile->school_name ?? 'School Name' }}</div>
                    <div style="font-size: 13px;">{{ $schoolProfile->address ?? '' }}</div>
                    <div style="font-size: 12px;">Phone: {{ $schoolProfile->phone ?? '' }}</div>
                    <div style="font-size: 14px; font-weight: 700; margin-top: 6px;">Student Absent Report</div>
                    <div style="font-size: 11px; margin-top: 2px;">
                        <strong>Session:</strong> <span id="printSession">-</span> |
                        <strong>Class:</strong> <span id="printClass">-</span> |
                        <strong>Section:</strong> <span id="printSection">-</span> |
                        <strong>Total Absent:</strong> <span id="printTotalAbsent">0</span> |
                        <span id="printDateMonth">-</span>
                    </div>
                </div>

                <div class="table-wrapper" id="printContainer">
                    <table class="report-table hidden-report-table" id="absentTable">
                        <thead id="absentTableHead">
                            <tr>
                                <th>SL</th>
                                <th>Student ID</th>
                                <th>Name</th>
                                <th>SMS Number</th>
                                <th>Comment</th>
                            </tr>
                        </thead>
                        <tbody id="absentTableBody">
                            <tr>
                                <td colspan="5" class="text-center">No data available. Please select filters and generate report.</td>
                            </tr>
                        </tbody>
                    </table>

                    <table class="report-table hidden-report-table" id="dailyAbsentTable" style="display: none;">
                        <thead>
                            <tr>
                                <th style="width: 50px;">SL</th>
                                <th style="width: 110px;">Student ID</th>
                                <th style="width: 70px;">Roll</th>
                                <th style="width: 160px;">Name</th>
                                <th style="width: 130px;">SMS Number</th>
                                <th style="width: 100px;">Date</th>
                                <th style="width: auto; text-align: center;">Comment</th>
                                <th style="width: 120px;" class="no-print">Action</th>
                            </tr>
                        </thead>
                        <tbody id="dailyAbsentTableBody">
                            <tr>
                                <td colspan="8" class="text-center">No data available.</td>
                            </tr>
                        </tbody>
                    </table>

                    <table class="report-table hidden-report-table" id="monthlyAbsentTable" style="display: none;">
                        <thead>
                            <tr>
                                <th>SL</th>
                                <th>Student ID</th>
                                <th>Name</th>
                                <th>SMS Number</th>
                                <th>Total Absent</th>
                                <th>Percentage</th>
                                <th>Comment</th>
                                <th>Absent Dates</th>
                            </tr>
                        </thead>
                        <tbody id="monthlyAbsentTableBody">
                            <tr>
                                <td colspan="8" class="text-center">No data available.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customjs')
<script>
    (function () {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const sessionSelect = document.getElementById('session_id');
        const classSelect = document.getElementById('class_id');
        const sectionSelect = document.getElementById('section_id');
        const reportTypeSelect = document.getElementById('report_type');
        const loadButton = document.getElementById('loadAbsentReport');
        const printButton = document.getElementById('printAbsentReport');
        const printReportHeader = document.getElementById('printReportHeader');
        const reportSummary = document.getElementById('reportSummary');
        const absentReportCard = document.getElementById('absentReportCard');
        const dailyTable = document.getElementById('dailyAbsentTable');
        const monthlyTable = document.getElementById('monthlyAbsentTable');
        const defaultTable = document.getElementById('absentTable');
        const totalDaysDiv = document.getElementById('totalDaysDiv');

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        function cleanDialNumber(value) {
            return String(value ?? '').replace(/[^0-9+]/g, '');
        }

        function notify(message, type = 'success') {
            if (window.toastr && typeof window.toastr[type] === 'function') {
                window.toastr[type](message);
                return;
            }

            alert(message);
        }

        function formatNumber(value) {
            return Number(value || 0).toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
            });
        }

        function toggleDateFields() {
            if (reportTypeSelect.value === 'daily') {
                document.getElementById('dateField').style.display = 'block';
                document.getElementById('monthField').style.display = 'none';
            } else {
                document.getElementById('dateField').style.display = 'none';
                document.getElementById('monthField').style.display = 'block';
            }
        }

        function updateSummaryContext(reportType, sessionText, classText, sectionText, dateText, totalAbsent, totalDays = null) {
            document.getElementById('summaryReportType').textContent = reportType === 'daily' ? 'Daily Report' : 'Monthly Report';
            document.getElementById('summarySession').textContent = sessionText || '-';
            document.getElementById('summaryClass').textContent = classText || '-';
            document.getElementById('summarySection').textContent = sectionText || '-';
            document.getElementById('summaryDate').textContent = dateText || '-';
            document.getElementById('summaryTotal').textContent = totalAbsent ?? 0;
            document.getElementById('printSession').textContent = sessionText || '-';
            document.getElementById('printClass').textContent = classText || '-';
            document.getElementById('printSection').textContent = sectionText || '-';
            document.getElementById('printTotalAbsent').textContent = totalAbsent ?? 0;
            document.getElementById('printDateMonth').textContent = dateText || '-';

            if (totalDays !== null) {
                totalDaysDiv.style.display = 'block';
                document.getElementById('summaryTotalDays').textContent = totalDays;
            } else {
                totalDaysDiv.style.display = 'none';
            }
        }

        function showOnlyTable(reportType) {
            defaultTable.style.display = 'none';
            dailyTable.style.display = reportType === 'daily' ? 'table' : 'none';
            monthlyTable.style.display = reportType === 'monthly' ? 'table' : 'none';
        }

        function renderDailyRows(rows) {
            if (!rows.length) {
                return '<tr><td colspan="8" class="text-center">No absent students found.</td></tr>';
            }

            return rows.map((item, index) => {
                const smsNumber = item.sms_number ? escapeHtml(item.sms_number) : '-';
                const dialNumber = cleanDialNumber(item.sms_number);
                const smsCell = dialNumber
                    ? `<a class="sms-link" href="tel:${dialNumber}">${smsNumber}</a>`
                    : '-';

                return `
                    <tr data-attendance-id="${escapeHtml(item.attendance_id)}">
                        <td class="text-center">${index + 1}</td>
                        <td>${escapeHtml(item.student_id || '-')}</td>
                        <td>${escapeHtml(item.class_roll || '-')}</td>
                        <td>${escapeHtml(item.name || '-')}</td>
                        <td>${smsCell}</td>
                        <td>${escapeHtml(item.date || '-')}</td>
                        <td>
                            <textarea class="comment-box" data-comment-input="1" placeholder="Add comment">${escapeHtml(item.comment || '')}</textarea>
                        </td>
                        <td class="no-print">
                            <button type="button" class="btn btn-sm btn-primary update-comment-btn" data-attendance-id="${escapeHtml(item.attendance_id)}">Update</button>
                        </td>
                    </tr>
                `;
            }).join('');
        }

        function renderMonthlyRows(rows) {
            if (!rows.length) {
                return '<tr><td colspan="8" class="text-center">No absent students found.</td></tr>';
            }

            return rows.map((item, index) => {
                const smsNumber = item.sms_number ? escapeHtml(item.sms_number) : '-';
                const dialNumber = cleanDialNumber(item.sms_number);
                const smsCell = dialNumber
                    ? `<a class="sms-link" href="tel:${dialNumber}">${smsNumber}</a>`
                    : '-';

                return `
                    <tr>
                        <td class="text-center">${index + 1}</td>
                        <td>${escapeHtml(item.student_id || '-')}</td>
                        <td>${escapeHtml(item.name || '-')}</td>
                        <td>${smsCell}</td>
                        <td class="text-center">${escapeHtml(item.total_absent || 0)}</td>
                        <td class="text-center">${escapeHtml(item.percentage || 0)}%</td>
                        <td>${escapeHtml(item.comment || '-')}</td>
                        <td>${escapeHtml((item.absent_dates || []).join(', '))}</td>
                    </tr>
                `;
            }).join('');
        }

        async function loadSections() {
            const classId = classSelect.value;
            sectionSelect.innerHTML = '<option value="">Select</option>';

            if (!classId) {
                return;
            }

            try {
                const response = await fetch('{{ route('teacher.attendance.absent.sections') }}', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ class_id: classId }),
                });

                const data = await response.json();

                data.forEach(function (item) {
                    const option = document.createElement('option');
                    option.value = item.id;
                    option.textContent = item.name;
                    sectionSelect.appendChild(option);
                });
            } catch (error) {
                console.error(error);
                notify('Failed to load sections.', 'error');
            }
        }

        async function loadReport() {
            const reportType = reportTypeSelect.value;
            const sessionId = sessionSelect.value;
            const classId = classSelect.value;
            const sectionId = sectionSelect.value;
            const date = document.getElementById('date').value;
            const month = document.getElementById('month').value;

            if (!sessionId || !classId || !sectionId) {
                notify('Please select Session, Class and Section.', 'error');
                return;
            }

            if (reportType === 'daily' && !date) {
                notify('Please select a date.', 'error');
                return;
            }

            if (reportType === 'monthly' && !month) {
                notify('Please select a month.', 'error');
                return;
            }

            const payload = {
                report_type: reportType,
                session_id: sessionId,
                class_id: classId,
                section_id: sectionId,
            };

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

            loadButton.disabled = true;
            loadButton.textContent = 'Loading...';

            try {
                const response = await fetch('{{ route('teacher.attendance.absentData') }}', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(payload),
                });

                const data = await response.json();

                if (!response.ok || data.success === false) {
                    throw new Error(data.message || 'Failed to load report');
                }

                const sessionText = sessionSelect.selectedOptions[0]?.text || '';
                const classText = classSelect.selectedOptions[0]?.text || '';
                const sectionText = sectionSelect.selectedOptions[0]?.text || '';
                const dateText = reportType === 'daily'
                    ? date
                    : (month ? new Date(month + '-01').toLocaleString(undefined, { month: 'long', year: 'numeric' }) : '');

                updateSummaryContext(reportType, sessionText, classText, sectionText, dateText, reportType === 'daily' ? (data.total_absent || 0) : (data.total_students_absent || 0), reportType === 'monthly' ? (data.total_days || 0) : null);

                if (reportType === 'daily') {
                    document.getElementById('dailyAbsentTableBody').innerHTML = renderDailyRows(data.students || []);
                } else {
                    document.getElementById('monthlyAbsentTableBody').innerHTML = renderMonthlyRows(data.students || []);
                }

                showOnlyTable(reportType);
                reportSummary.style.display = 'block';
                absentReportCard.style.display = 'block';
                printButton.style.display = 'inline-block';
                printReportHeader.style.display = 'inline-block';
            } catch (error) {
                console.error(error);
                notify(error.message || 'Unable to load report.', 'error');
            } finally {
                loadButton.disabled = false;
                loadButton.textContent = 'Generate Report';
            }
        }

        sessionSelect.addEventListener('change', async function () {
            sectionSelect.innerHTML = '<option value="">Select</option>';
        });

        classSelect.addEventListener('change', async function () {
            await loadSections();
        });

        reportTypeSelect.addEventListener('change', function () {
            toggleDateFields();
        });

        loadButton.addEventListener('click', function (event) {
            event.preventDefault();
            loadReport();
        });

        printButton.addEventListener('click', function () {
            window.print();
        });

        printReportHeader.addEventListener('click', function () {
            window.print();
        });

        document.addEventListener('click', async function (event) {
            const button = event.target.closest('.update-comment-btn');
            if (!button) {
                return;
            }

            const row = button.closest('tr');
            const attendanceId = button.getAttribute('data-attendance-id');
            const textarea = row.querySelector('[data-comment-input="1"]');
            const remark = textarea ? textarea.value : '';

            button.disabled = true;
            button.textContent = 'Saving...';

            try {
                const response = await fetch('{{ route('teacher.attendance.absent.comment.update') }}', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        attendance_id: attendanceId,
                        remark: remark,
                    }),
                });

                const data = await response.json();

                if (!response.ok || data.success === false) {
                    throw new Error(data.message || 'Unable to update comment');
                }

                notify(data.message || 'Comment updated successfully.', 'success');
            } catch (error) {
                console.error(error);
                notify(error.message || 'Unable to update comment.', 'error');
            } finally {
                button.disabled = false;
                button.textContent = 'Update';
            }
        });

        toggleDateFields();
    })();
</script>
@endsection