@extends('admin.admin_dashboard')

@section('admin')
    <div class="content-body default-height">
        <div class="container-fluid">

            {{-- Filters --}}
            <div class="row mb-3">
                <div class="col-xl-12">
                    <div class="filter cm-content-box card box-primary">
                        <div class="card-header bg-light">
                            <h3> Filter</h3>
                        </div>

                        <div class="cm-content-body form excerpt">
                            <div class="card-body">
                                <div class="row g-3">

                                    {{-- Type --}}
                                    <div class="col-xl-3 col-sm-6">
                                        <label class="form-label">Type</label>
                                        <select id="typeFilter" class="form-control default-select wide">
                                            <option value="student" selected>Student</option>
                                            <option value="teacher">Teacher</option>
                                        </select>
                                    </div>

                                    {{-- Session --}}
                                    <div class="col-xl-3 col-sm-6 student-field">
                                        <label class="form-label">Session</label>
                                        <select id="sessionFilter" class="form-control default-select wide">
                                            <option value="">All</option>
                                            @foreach($sessions as $session)
                                                <option value="{{ $session->id }}">{{ $session->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Class --}}
                                    <div class="col-xl-3 col-sm-6 student-field">
                                        <label class="form-label">Class</label>
                                        <select id="classFilter" class="form-control default-select wide">
                                            <option value="">Select Class</option>
                                            @foreach($classes as $class)
                                                <option value="{{ $class->id }}">{{ $class->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Section --}}
                                    <div class="col-xl-3 col-sm-6 student-field">
                                        <label class="form-label">Section</label>
                                        <select id="sectionFilter" class="form-control default-select wide">
                                            <option value="">Select Section</option>
                                        </select>
                                    </div>

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

            {{-- Contact Table --}}
            <div class="row">
                <div class="col-xl-12">
                    <div class="filter cm-content-box card box-primary">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">

                            <h3 class="mb-0"> Contact List </h3>

                            <div class="d-flex gap-2 align-items-center flex-wrap">
                                {{-- Print Buttons --}}
                                <button type="button" class="btn btn-primary btn-sm" onclick="printReport('portrait')">
                                    <i class="fas fa-print"></i> Print Portrait
                                </button>
                                <button type="button" class="btn btn-success btn-sm" onclick="printReport('landscape')">
                                    <i class="fas fa-print"></i> Print Landscape
                                </button>

                                {{-- Columns Dropdown --}}
                                <div class="dropdown" id="columnManagerWrap">
                                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
                                            data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                        <i class="fas fa-columns"></i> Columns
                                    </button>

                                    <div class="dropdown-menu p-3 column-menu">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <strong style="font-size: 13px;">Show/Hide Columns</strong>
                                            <button type="button" class="btn btn-link p-0" id="resetColumnsBtn" style="font-size: 12px;">
                                                Reset
                                            </button>
                                        </div>

                                        <div class="d-flex gap-2 mb-2">
                                            <button type="button" class="btn btn-light btn-sm flex-fill" id="selectAllColumnsBtn">
                                                Select All
                                            </button>
                                            <button type="button" class="btn btn-light btn-sm flex-fill" id="unselectAllColumnsBtn">
                                                Unselect All
                                            </button>
                                        </div>

                                        <div id="columnCheckboxList" class="column-checkbox-list"></div>

                                        <hr class="my-2">
                                        <small class="text-muted">Print will follow your visible columns.</small>
                                    </div>
                                </div>

                                {{-- Search Input --}}
                                <input type="text" id="searchInput" class="form-control" style="width: 220px;" placeholder="Search..." />
                            </div>

                        </div>

                        <div class="cm-content-body form excerpt">
                            <div class="card-body pb-4">
                                <div class="table-responsive">
                                    <table class="table table-bordered text-center" id="contactTable">
                                        <thead class="table table-light" style="text-align: center;">
                                            <tr id="tableHeader">
                                                {{-- Header will be dynamic --}}
                                            </tr>
                                        </thead>
                                        <tbody style="text-align: center;">
                                            <tr>
                                                <td colspan="10">Loading...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                {{-- Bottom Print Buttons --}}
                                <div class="text-center mt-3">
                                    <button type="button" class="btn btn-primary" onclick="printReport('portrait')">
                                        <i class="fas fa-print"></i> Print Portrait
                                    </button>
                                    <button type="button" class="btn btn-success ms-2" onclick="printReport('landscape')">
                                        <i class="fas fa-print"></i> Print Landscape
                                    </button>
                                </div>

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

        </div>
    </div>
@endsection


@section('customjs')
    <style>
        /* UI polish for column dropdown */
        #columnManagerWrap .column-menu {
            width: 280px;
            max-height: 360px;
            overflow: auto;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        }
        #columnManagerWrap .column-checkbox-list .form-check {
            margin-bottom: 6px;
        }
        #columnManagerWrap .column-checkbox-list label {
            font-size: 13px;
        }

        /* Printing */
        @media print {
            @page {
                size: A4 landscape;
                margin: 8mm;
            }

            .print-header {
                text-align: center;
                margin-bottom: 8px;
                border-bottom: 2px solid #000;
                padding-bottom: 5px;
            }

            .print-header h2 {
                margin: 0;
                font-size: 20px;
                font-weight: bold;
            }

            .print-header p {
                margin: 1px 0;
                font-size: 10px;
            }

            .print-filters {
                margin-bottom: 8px;
                font-size: 10px;
                text-align: center;
                font-weight: bold;
            }

            .print-filters span {
                margin: 0 15px;
            }

            .print-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
                line-height: 1.3;
            }

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

            .print-table tbody {
                display: table-row-group;
            }

            .print-table tr {
                page-break-inside: avoid;
            }

            .print-table th,
            .print-table td {
                border: 1px solid #000;
                padding: 2px 1px;
                text-align: center;
                word-wrap: break-word;
            }

            .print-table th:nth-child(2),
            .print-table td:nth-child(2) {
                width: 80px;
                max-width: 80px;
                text-align: left;
                padding-left: 4px;
            }

            .print-table th {
                background-color: #e9ecef !important;
                font-weight: bold;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>


    <script>
        document.addEventListener('DOMContentLoaded', function () {

            // ---------------------------
            // Elements
            // ---------------------------
            const typeFilter = document.getElementById('typeFilter');
            const sessionFilter = document.getElementById('sessionFilter');
            const classFilter = document.getElementById('classFilter');
            const sectionFilter = document.getElementById('sectionFilter');

            const contactTable = document.getElementById('contactTable');
            const contactTableBody = contactTable.querySelector('tbody');
            const tableHeader = document.getElementById('tableHeader');

            const searchInput = document.getElementById('searchInput');

            // Column Manager elements
            const columnCheckboxList = document.getElementById('columnCheckboxList');
            const resetColumnsBtn = document.getElementById('resetColumnsBtn');
            const selectAllColumnsBtn = document.getElementById('selectAllColumnsBtn');
            const unselectAllColumnsBtn = document.getElementById('unselectAllColumnsBtn');

            // ---------------------------
            // LocalStorage keys
            // ---------------------------
            const STORAGE_KEY = 'contact_list_column_visibility_v1';

            // visibleColumnMap format:
            // {
            //   student: { sl:true, name:true, ... },
            //   teacher: { sl:true, name:true, ... }
            // }
            let visibleColumnMap = loadVisibilityFromStorage() || {};

            // Make it available to printReport()
            window.visibleColumnMap = visibleColumnMap;

            // For search filtering (store all created rows)
            let allRows = [];

            // ---------------------------
            // Column definitions (single source of truth)
            // ---------------------------
            function getColumnsByType(type) {
                if (type === 'student') {
                    return [
                        { key: 'sl',       label: 'SL' },
                        { key: 'name',     label: 'Name' },
                        { key: 'id',       label: 'ID' },
                        { key: 'class',    label: 'Class' },
                        { key: 'section',  label: 'Section' },
                        { key: 'roll',     label: 'Class Roll' },
                        { key: 'sms',      label: 'SMS Number' },
                        { key: 'whatsapp', label: 'WhatsApp Number' },
                        { key: 'mother',   label: "Mother's Number" },
                        { key: 'father',   label: "Father's Number" },
                    ];
                }

                // teacher
                return [
                    { key: 'sl',       label: 'SL' },
                    { key: 'name',     label: 'Name' },
                    { key: 'id',       label: 'ID' },
                    { key: 'post',     label: 'Post' },
                    { key: 'subject',  label: 'Subject' },
                    { key: 'phone',    label: 'Phone' },
                    { key: 'whatsapp', label: 'WhatsApp' },
                ];
            }

            function ensureDefaultVisibleMap(type) {
                if (!visibleColumnMap[type]) {
                    visibleColumnMap[type] = {};
                }
                const cols = getColumnsByType(type);
                cols.forEach(col => {
                    if (typeof visibleColumnMap[type][col.key] === 'undefined') {
                        visibleColumnMap[type][col.key] = true;
                    }
                });

                // Guard: never allow all columns hidden
                enforceAtLeastOneVisible(type);

                saveVisibilityToStorage();
                window.visibleColumnMap = visibleColumnMap;
            }

            function enforceAtLeastOneVisible(type) {
                const cols = getColumnsByType(type);
                const anyVisible = cols.some(c => !!visibleColumnMap[type][c.key]);
                if (!anyVisible && cols.length) {
                    // Make first column visible
                    visibleColumnMap[type][cols[0].key] = true;
                }
            }

            // ---------------------------
            // Storage helpers
            // ---------------------------
            function loadVisibilityFromStorage() {
                try {
                    const raw = localStorage.getItem(STORAGE_KEY);
                    return raw ? JSON.parse(raw) : null;
                } catch (e) {
                    return null;
                }
            }

            function saveVisibilityToStorage() {
                try {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleColumnMap));
                } catch (e) {
                    // ignore
                }
            }

            // ---------------------------
            // UI toggles
            // ---------------------------
            function toggleStudentFields() {
                document.querySelectorAll('.student-field').forEach(e => {
                    e.style.display = typeFilter.value === 'student' ? 'block' : 'none';
                });
            }

            function loadSections() {
                sectionFilter.innerHTML = '<option value="">Select Section</option>';
                if (!classFilter.value) return;

                fetch(`/communication/get-sections/${classFilter.value}`)
                    .then(res => res.json())
                    .then(data => {
                        data.forEach(sec => {
                            const opt = document.createElement('option');
                            opt.value = sec.section_id;
                            opt.textContent = sec.section.name;
                            sectionFilter.appendChild(opt);
                        });
                    });
            }

            // ---------------------------
            // Build dynamic table header (with data-colkey + col index)
            // ---------------------------
            function setTableHeader() {
                const type = typeFilter.value;
                ensureDefaultVisibleMap(type);

                const cols = getColumnsByType(type);

                tableHeader.innerHTML = cols.map((col, idx) => {
                    return `<th data-colkey="${col.key}" data-colindex="${idx}">${col.label}</th>`;
                }).join('');

                buildColumnCheckboxUI();
            }

            // ---------------------------
            // Column Manager UI
            // ---------------------------
            function buildColumnCheckboxUI() {
                const type = typeFilter.value;
                ensureDefaultVisibleMap(type);

                const cols = getColumnsByType(type);

                columnCheckboxList.innerHTML = cols.map(col => {
                    const checked = visibleColumnMap[type][col.key] ? 'checked' : '';
                    return `
                        <div class="form-check">
                            <input class="form-check-input column-toggle" type="checkbox"
                                id="col_${type}_${col.key}" data-colkey="${col.key}" ${checked}>
                            <label class="form-check-label" for="col_${type}_${col.key}">
                                ${col.label}
                            </label>
                        </div>
                    `;
                }).join('');

                columnCheckboxList.querySelectorAll('.column-toggle').forEach(cb => {
                    cb.addEventListener('change', function () {
                        const colKey = this.dataset.colkey;
                        visibleColumnMap[type][colKey] = this.checked;

                        // Must keep at least 1 visible
                        enforceAtLeastOneVisible(type);

                        // If enforce turned something on, sync UI checkbox states
                        syncCheckboxUIWithState();

                        saveVisibilityToStorage();
                        window.visibleColumnMap = visibleColumnMap;

                        applyColumnVisibility();
                    });
                });

                syncCheckboxUIWithState();
            }

            function syncCheckboxUIWithState() {
                const type = typeFilter.value;
                const cols = getColumnsByType(type);

                cols.forEach(col => {
                    const cb = document.getElementById(`col_${type}_${col.key}`);
                    if (cb) cb.checked = !!visibleColumnMap[type][col.key];
                });
            }

            // Hide/show header + row cells based on state
            function applyColumnVisibility() {
                const type = typeFilter.value;
                ensureDefaultVisibleMap(type);

                const cols = getColumnsByType(type);

                cols.forEach((col, idx) => {
                    const isVisible = !!visibleColumnMap[type][col.key];

                    // Header cell
                    const th = contactTable.querySelector(`thead th[data-colkey="${col.key}"]`);
                    if (th) th.style.display = isVisible ? '' : 'none';

                    // Body cells by index
                    contactTable.querySelectorAll('tbody tr').forEach(tr => {
                        const td = tr.children[idx];
                        if (td) td.style.display = isVisible ? '' : 'none';
                    });
                });
            }

            // ---------------------------
            // Data load & render rows
            // ---------------------------
            function loadData() {
                const params = new URLSearchParams({
                    type: typeFilter.value,
                    session_id: sessionFilter.value,
                    class_id: classFilter.value,
                    section_id: sectionFilter.value
                });

                contactTableBody.innerHTML = `<tr><td colspan="10">Loading...</td></tr>`;
                allRows = [];

                fetch(`/communication/filter?${params.toString()}`)
                    .then(res => res.json())
                    .then(data => {
                        contactTableBody.innerHTML = '';
                        allRows = [];

                        const type = typeFilter.value;
                        const cols = getColumnsByType(type);

                        if (type === 'student') {
                            if (data.students?.length) {
                                data.students.forEach((stu, i) => {
                                    const row = document.createElement('tr');

                                    // Build cells in the exact order of columns array
                                    const cellByKey = {
                                        sl: (i + 1),
                                        name: escapeHtml(stu.name ?? ''),
                                        id: escapeHtml(stu.student_id ?? ''),
                                        class: escapeHtml(stu.class ?? ''),
                                        section: escapeHtml(stu.section ?? ''),
                                        roll: escapeHtml(stu.class_roll ?? ''),
                                        sms: escapeHtml(stu.sms_number ?? ''),
                                        whatsapp: escapeHtml(stu.whatsapp_number ?? ''),
                                        mother: escapeHtml(stu.mother_number ?? ''),
                                        father: escapeHtml(stu.father_number ?? ''),
                                    };

                                    row.innerHTML = cols.map(c => `<td>${cellByKey[c.key] ?? ''}</td>`).join('');
                                    contactTableBody.appendChild(row);
                                    allRows.push(row);
                                });
                            } else {
                                contactTableBody.innerHTML = `<tr><td colspan="${cols.length}">No records found</td></tr>`;
                            }
                        } else {
                            if (data.teachers?.length) {
                                data.teachers.forEach((t, i) => {
                                    const row = document.createElement('tr');

                                    // Helper function to get post name
                                    const getPostName = (post) => {
                                        if (post == 1) return 'Teacher';
                                        if (post == 2) return 'Vice Principal';
                                        if (post == 3) return 'Principal';
                                        return '-';
                                    };

                                    const cellByKey = {
                                        sl: (i + 1),
                                        name: escapeHtml(t.name ?? ''),
                                        id: escapeHtml(t.teacher_code ?? t.id ?? ''),
                                        post: getPostName(t.post),
                                        subject: escapeHtml(t.primary_subject ?? '-'),
                                        phone: escapeHtml(t.phone ?? ''),
                                        whatsapp: escapeHtml(t.whatsapp_number ?? '-'),
                                    };

                                    row.innerHTML = cols.map(c => `<td>${cellByKey[c.key] ?? ''}</td>`).join('');
                                    contactTableBody.appendChild(row);
                                    allRows.push(row);
                                });
                            } else {
                                contactTableBody.innerHTML = `<tr><td colspan="${cols.length}">No records found</td></tr>`;
                            }
                        }

                        // Re-apply search filter after load (if user typed something)
                        applySearchFilter(searchInput.value);

                        // Apply visibility after rows are rendered
                        applyColumnVisibility();
                    })
                    .catch(() => {
                        const type = typeFilter.value;
                        const cols = getColumnsByType(type);
                        contactTableBody.innerHTML = `<tr><td colspan="${cols.length}">Failed to load data</td></tr>`;
                    });
            }

            // ---------------------------
            // Search
            // ---------------------------
            function applySearchFilter(query) {
                const searchTerm = (query || '').toLowerCase();

                allRows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.includes(searchTerm) ? '' : 'none';
                });
            }

            searchInput.addEventListener('keyup', function () {
                applySearchFilter(this.value);
            });

            // ---------------------------
            // Column manager buttons
            // ---------------------------
            resetColumnsBtn.addEventListener('click', function () {
                const type = typeFilter.value;
                visibleColumnMap[type] = {};
                getColumnsByType(type).forEach(col => visibleColumnMap[type][col.key] = true);

                saveVisibilityToStorage();
                window.visibleColumnMap = visibleColumnMap;

                buildColumnCheckboxUI();
                applyColumnVisibility();
            });

            selectAllColumnsBtn.addEventListener('click', function () {
                const type = typeFilter.value;
                ensureDefaultVisibleMap(type);
                getColumnsByType(type).forEach(col => visibleColumnMap[type][col.key] = true);

                saveVisibilityToStorage();
                window.visibleColumnMap = visibleColumnMap;

                syncCheckboxUIWithState();
                applyColumnVisibility();
            });

            unselectAllColumnsBtn.addEventListener('click', function () {
                const type = typeFilter.value;
                ensureDefaultVisibleMap(type);

                // Turn all off then enforce at least 1
                getColumnsByType(type).forEach(col => visibleColumnMap[type][col.key] = false);
                enforceAtLeastOneVisible(type);

                saveVisibilityToStorage();
                window.visibleColumnMap = visibleColumnMap;

                syncCheckboxUIWithState();
                applyColumnVisibility();
            });

            // ---------------------------
            // Events
            // ---------------------------
            typeFilter.addEventListener('change', () => {
                toggleStudentFields();

                // build header + checkbox list for new type
                setTableHeader();

                // load data for new type
                loadData();
            });

            sessionFilter.addEventListener('change', loadData);

            classFilter.addEventListener('change', () => {
                loadSections();
                loadData();
            });

            sectionFilter.addEventListener('change', loadData);

            // ---------------------------
            // Initial load
            // ---------------------------
            toggleStudentFields();
            setTableHeader();
            loadData();

            // ---------------------------
            // Utils
            // ---------------------------
            function escapeHtml(str) {
                return String(str)
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;');
            }
        });

        // ------------------------------------
        // PRINT (Respects visible columns + search filtered rows)
        // ------------------------------------
        function printReport(orientation = 'landscape') {
            const typeFilter = document.getElementById('typeFilter');
            const sessionFilter = document.getElementById('sessionFilter');
            const classFilter = document.getElementById('classFilter');
            const sectionFilter = document.getElementById('sectionFilter');
            const contactTable = document.getElementById('contactTable');

            const type = typeFilter.value;

            // Get selected filter values
            const sessionText = sessionFilter?.options[sessionFilter.selectedIndex]?.text || 'All';
            const classText = classFilter?.options[classFilter.selectedIndex]?.text || 'All';
            const sectionText = sectionFilter?.options[sectionFilter.selectedIndex]?.text || 'All';

            // Get visible rows only (after search filter)
            const visibleRows = Array.from(contactTable.querySelectorAll('tbody tr'))
                .filter(row => row.style.display !== 'none' && row.cells.length > 1);

            if (visibleRows.length === 0) {
                alert('No data available to print!');
                return;
            }

            // School info from backend
            const schoolName = "{{ $schoolProfile->school_name ?? 'School Name' }}";
            const schoolAddress = "{{ $schoolProfile->address ?? 'Address' }}";
            const schoolPhone = "{{ $schoolProfile->phone ?? 'Phone' }}";

            // Column keys in order MUST match the UI columns definition
            const cols = (type === 'student')
                ? ['sl','name','id','class','section','roll','sms','whatsapp','mother','father']
                : ['sl','name','id','post','subject','phone','whatsapp'];

            // Use saved visibility state if exists
            const vmapAll = window.visibleColumnMap || {};
            const vmap = vmapAll[type] || {};

            // Build list of visible indexes
            const visibleIndexes = [];
            cols.forEach((key, idx) => {
                const show = (typeof vmap[key] === 'undefined') ? true : !!vmap[key];
                if (show) visibleIndexes.push(idx);
            });

            // Guard: if somehow none visible, show all
            if (visibleIndexes.length === 0) {
                cols.forEach((_, idx) => visibleIndexes.push(idx));
            }

            // Build header HTML from visible header cells
            const headerCells = Array.from(contactTable.querySelectorAll('thead th'));
            let theadHtml = '<tr>';
            visibleIndexes.forEach(i => {
                theadHtml += `<th>${headerCells[i]?.innerHTML ?? ''}</th>`;
            });
            theadHtml += '</tr>';

            // Print content
            let printContent = `
                <!DOCTYPE html>
                <html>
                <head>
                    <title>Print Report</title>
                    <style>
                        @page { size: A4 ${orientation}; margin: 8mm; }
                        body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
                        .print-header {
                            text-align: center; margin-bottom: 8px;
                            border-bottom: 2px solid #000; padding-bottom: 5px;
                        }
                        .print-header h2 { margin: 0; font-size: 20px; font-weight: bold; }
                        .print-header p { margin: 1px 0; font-size: 10px; }
                        .print-filters {
                            margin-bottom: 8px; font-size: 10px; text-align: center; font-weight: bold;
                        }
                        .print-filters span { margin: 0 15px; }
                        .print-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.3; }
                        .print-table thead { display: table-header-group; }
                        .print-table tr { page-break-inside: avoid; }
                        .print-table th, .print-table td {
                            border: 1px solid #000; padding: 2px 1px; text-align: center; word-wrap: break-word;
                        }
                        .print-table th:nth-child(2), .print-table td:nth-child(2) {
                            width: 80px; text-align: left; padding-left: 4px;
                        }
                        .print-table th { background-color: #e9ecef; font-weight: bold; }
                    </style>
                </head>
                <body>
                    <div class="print-header">
                        <h2>${schoolName}</h2>
                        <p>${schoolAddress}</p>
                        <p>Phone: ${schoolPhone}</p>
                    </div>

                    <div class="print-filters">
                        ${type === 'student' ? `
                            <span>Session: ${sessionText}</span> |
                            <span>Class: ${classText}</span> |
                            <span>Section: ${sectionText}</span>
                        ` : `
                            <span>Type: Teacher Contact List</span>
                        `}
                    </div>

                    <table class="print-table">
                        <thead>${theadHtml}</thead>
                        <tbody>
            `;

            // Add rows with only visible columns
            visibleRows.forEach(row => {
                const cells = Array.from(row.children);
                let tr = '<tr>';
                visibleIndexes.forEach(i => {
                    tr += `<td>${cells[i]?.innerHTML ?? ''}</td>`;
                });
                tr += '</tr>';
                printContent += tr;
            });

            printContent += `
                        </tbody>
                    </table>
                </body>
                </html>
            `;

            const printWindow = window.open('', '_blank');
            printWindow.document.write(printContent);
            printWindow.document.close();
            printWindow.focus();

            setTimeout(() => {
                printWindow.print();
                printWindow.close();
            }, 250);
        }
    </script>
@endsection