@extends('admin.admin_dashboard')

@section('customcss')
    <style>
        /* ===================== General UI ===================== */
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
            margin-bottom: 10px;
        }

        .card-body {
            background: #FBFCEB !important;
        }

        .card-header {
            font-weight: 600;
            font-size: 14px;
            background: #F1F3F5 !important;
            color: #000;
            padding: 6px 10px;
            border-radius: 8px 8px 0 0;
        }

        :root {
            --sp-bg: #fbfceb;
            --sp-border: #111;
        }

        /* ===================== Screen Preview Grid ===================== */
        .sp-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            --row-gap: 12px;
        }

        /* ===================== Card ===================== */
        .seat-plan-card {
            width: 100%;
            box-sizing: border-box;
            background: var(--sp-bg);
            border: 2px solid var(--sp-border);
            border-radius: 3px;
            padding: 8px 10px;
            font-family: Arial, Helvetica, sans-serif;
            color: #111;

            page-break-inside: avoid;
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
            -moz-column-break-inside: avoid;

            position: relative;
        }

        /* dotted separator line between rows */
        .seat-plan-card:not(:nth-last-child(-n+3))::after {
            content: "";
            position: absolute;
            width: 100px;
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(var(--row-gap) / -2);
            border-bottom: 2px dotted #000;
            pointer-events: none;
        }

        .sp-header {
            text-align: center;
            line-height: 1.1;
            margin-bottom: 4px;
        }

        .sp-school {
            font-size: 12px;
            font-weight: 800;
            margin: 0;
            color: #111;
        }

        .sp-address {
            font-size: 9px;
            margin: 0;
            color: #111;
        }

        .sp-exam {
            font-size: 11px;
            font-weight: 800;
            margin-top: 2px;
            color: #111;
        }

        .sp-badge {
            display: inline-block;
            margin-top: 4px;
            background: #0d6efd;
            color: #fff;
            font-weight: 800;
            font-size: 10px;
            padding: 4px 14px;
            border-radius: 2px;
        }

        /* ✅ Date + Day row (left/right) */
        .sp-datebar {
            margin-top: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
            font-size: 10px;
            color: #111;
            gap: 8px;
        }

        .sp-datebar .sp-date {
            white-space: nowrap;
        }

        .sp-datebar .sp-day {
            white-space: nowrap;
            text-align: right;
        }

        .sp-info {
            margin-top: 4px;
            font-size: 9.5px;
        }

        .sp-row {
            display: flex;
            gap: 6px;
            margin: 1px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sp-label {
            width: 78px;
            font-weight: 800;
        }

        .sp-colon {
            width: 8px;
            font-weight: 800;
        }

        .sp-blank-line {
            flex: 1;
            min-width: 0;
            border-bottom: 1.8px dotted #000;
            height: 12px;
            margin-top: 2px;
        }

        .sp-note {
            margin-top: 6px;
            font-size: 9px;
            line-height: 1.25;
            color: #111;
        }

        /* ===================== Signature (RIGHT) ===================== */
        .sp-signature-wrap {
            margin-top: 6px;
            display: flex;
            justify-content: flex-end;
        }

        .sp-sign-box {
            width: 200px;
        }

        .sp-sign-space {
            height: 30px;
        }

        .sp-sign-text {
            text-align: center;
            color: #0b4aa2;
            font-size: 9px;
            line-height: 1.15;
            font-weight: 700;
            margin-top: 3px;
        }

        .sp-sign-name {
            font-size: 9.5px;
            font-weight: 800;
        }

        .sp-sign-desig {
            font-weight: 700;
        }

        .sp-sign-school {
            font-weight: 700;
        }

        /* ===================== PRINT ===================== */
        @media print {
            /* ✅ IMPORTANT: এখানে @page দিবেন না — JS inject করবে */

            html,
            body {
                margin: 0 !important;
                padding: 0 !important;
                background: #fff !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            .page-titles,
            .breadcrumb,
            .card-header,
            .btn,
            .alert,
            nav,
            footer {
                display: none !important;
            }

            #printablePermission {
                display: block !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                box-sizing: border-box !important;
                background: #fff !important;
            }

            .sp-grid {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 2.5mm !important;
                align-content: start !important;
                --row-gap: 2.5mm !important;
            }

            .seat-plan-card {
                width: 100% !important;
                box-sizing: border-box !important;
                background: var(--sp-bg) !important;
                border: 2px solid var(--sp-border) !important;
                box-shadow: none !important;
                padding: 5px 7px !important;
                position: relative !important;

                page-break-inside: avoid !important;
                break-inside: avoid !important;

                display: flex !important;
                flex-direction: column !important;
            }

            .sp-header {
                margin-bottom: 3px !important;
                line-height: 1.05 !important;
            }

            .sp-school {
                font-size: 11.5px !important;
            }

            .sp-address {
                font-size: 8.5px !important;
            }

            .sp-exam {
                font-size: 10.5px !important;
                margin-top: 1px !important;
            }

            .sp-badge {
                font-size: 9.5px !important;
                padding: 3px 12px !important;
                margin-top: 3px !important;
            }

            .sp-datebar {
                font-size: 9px !important;
                margin-top: 3px !important;
            }

            .sp-info {
                margin-top: 3px !important;
                font-size: 9px !important;
            }

            .sp-row {
                margin: 0.8px 0 !important;
            }

            .sp-label {
                width: 74px !important;
            }

            .sp-colon {
                width: 7px !important;
            }

            .sp-blank-line {
                height: 10px !important;
                border-bottom: 1.6px dotted #000 !important;
            }

            .sp-note {
                font-size: 8.5px !important;
                line-height: 1.2 !important;
                margin-top: 4px !important;

                display: -webkit-box !important;
                -webkit-box-orient: vertical !important;
                -webkit-line-clamp: 2 !important;
                overflow: hidden !important;
            }

            .sp-signature-wrap {
                display: flex !important;
                justify-content: flex-end !important;
                margin-top: auto !important;
            }

            .sp-sign-space {
                height: 30px !important;
            }

            .sp-sign-text {
                font-size: 8.2px !important;
            }

            .sp-sign-name {
                font-size: 9px !important;
            }
        }
    </style>
@endsection

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

            <div class="row page-titles mb-2">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">Permission Letter</a></li>
                </ol>
            </div>

            {{-- Quick Actions --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header" style="background: #f7f7f7 !important;">
                            <h4 class="card-title text-dark">
                                <i class="fas fa-bolt me-2 text-primary"></i> Quick Actions
                            </h4>
                        </div>
                        <div class="card-body">
                            <button class="btn btn-info" onclick="printPermissionPortrait()">Print (Portrait)</button>
                            <button class="btn btn-dark ms-2" onclick="printPermissionLandscape()">Print
                                (Landscape)</button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ✅ Input Card --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header" style="background:#f7f7f7 !important;">
                            <h4 class="card-title text-dark">
                                <i class="fas fa-pen me-2 text-primary"></i> Permission Letter Inputs
                            </h4>
                        </div>
                        <div class="card-body">
                            <div class="row g-2">
                                <div class="col-md-3">
                                    <label class="form-label mb-1">Date</label>
                                    <input type="date" id="pl_date" class="form-control">
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label mb-1">Day Name</label>
                                    <input type="text" id="pl_day" class="form-control" placeholder="Saturday">
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label mb-1">Authorizer Name</label>
                                    <input type="text" id="pl_auth_name" class="form-control"
                                        placeholder="{{ $schoolInfo->principal_name ?? 'Principal' }}">
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label mb-1">Post</label>
                                    <input type="text" id="pl_auth_post" class="form-control" placeholder="Principal">
                                </div>
                            </div>

                            <div class="mt-2 small text-muted">
                                ✅ ইনপুট দিলে নিচের সব Permission Slip এ auto দেখাবে এবং Print এও যাবে।
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Permission Letter --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Permission Letter</h4>
                        </div>
                        <div class="card-body">

                            <div id="printablePermission">
                                @if($cardsCount <= 0)
                                    <div class="alert alert-warning">
                                        No approved registrations found for this exam's session &amp; class.
                                    </div>
                                @else
                                    <div class="sp-grid">
                                        @for($i = 1; $i <= $cardsCount; $i++)
                                            <div class="seat-plan-card">

                                                <div class="sp-header">
                                                    <div class="sp-school">{{ $schoolInfo->school_name }}</div>
                                                    <div class="sp-address">{{ $schoolInfo->address }}</div>
                                                    <div class="sp-exam">{{ $exam->exam_name }}</div>
                                                    <div class="sp-badge">Permission Slip</div>
                                                </div>

                                                @php
                                                    $nowDhaka = \Carbon\Carbon::now('Asia/Dhaka');
                                                @endphp

                                                <div class="sp-datebar">
                                                    <div class="sp-date">
                                                        Date: <span class="js-pl-date">{{ $nowDhaka->format('d/m/Y') }}</span>
                                                    </div>
                                                    <div class="sp-day">
                                                        Day: <span class="js-pl-day">{{ $nowDhaka->format('l') }}</span>
                                                    </div>
                                                </div>

                                                <div class="sp-info">
                                                    <div class="sp-row">
                                                        <div class="sp-label">Student Name</div>
                                                        <div class="sp-colon">:</div>
                                                        <div class="sp-blank-line"></div>
                                                    </div>
                                                    <div class="sp-row">
                                                        <div class="sp-label">Class</div>
                                                        <div class="sp-colon">:</div>
                                                        <div class="sp-blank-line"></div>
                                                    </div>
                                                    <div class="sp-row">
                                                        <div class="sp-label">Section</div>
                                                        <div class="sp-colon">:</div>
                                                        <div class="sp-blank-line"></div>
                                                    </div>
                                                    <div class="sp-row">
                                                        <div class="sp-label">Roll No</div>
                                                        <div class="sp-colon">:</div>
                                                        <div class="sp-blank-line"></div>
                                                    </div>
                                                </div>

                                                <div class="sp-note">
                                                    Special permission is granted to attend today's exam. The admit card must be
                                                    shown in subsequent exams.
                                                </div>

                                                <div class="sp-signature-wrap">
                                                    <div class="sp-sign-box">
                                                        <div class="sp-sign-space"></div>
                                                        <div class="sp-sign-text">
                                                            <div class="sp-sign-name">
                                                                <span
                                                                    class="js-pl-auth-name">{{ $schoolInfo->principal_name ?? 'Principal' }}</span>
                                                            </div>
                                                            <div class="sp-sign-desig">
                                                                <span class="js-pl-auth-post">Principal</span>
                                                            </div>
                                                            <div class="sp-sign-school">{{ $schoolInfo->school_name ?? '' }}</div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        @endfor
                                    </div>
                                @endif
                            </div>

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

        </div>
    </div>
@endsection

@section('customjs')
    <script>
        // ---------- Helpers ----------
        function pad2(n) { return String(n).padStart(2, '0'); }
        function formatDMY(dateObj) {
            return `${pad2(dateObj.getDate())}/${pad2(dateObj.getMonth() + 1)}/${dateObj.getFullYear()}`;
        }
        function dayNameFromDate(dateObj) {
            return dateObj.toLocaleDateString('en-US', { weekday: 'long' });
        }
        function setTextAll(selector, text) {
            document.querySelectorAll(selector).forEach(el => el.textContent = text);
        }

        // ---------- Bind Inputs -> Cards ----------
        function initPermissionInputs() {
            const dateInput = document.getElementById('pl_date');
            const dayInput = document.getElementById('pl_day');
            const nameInput = document.getElementById('pl_auth_name');
            const postInput = document.getElementById('pl_auth_post');

            if (!dateInput || !dayInput || !nameInput || !postInput) return;

            // default today
            const today = new Date();
            dateInput.value = `${today.getFullYear()}-${pad2(today.getMonth() + 1)}-${pad2(today.getDate())}`;
            dayInput.value = dayNameFromDate(today);

            // initial set
            setTextAll('.js-pl-date', formatDMY(today));
            setTextAll('.js-pl-day', dayInput.value);

            if (nameInput.value && nameInput.value.trim()) {
                setTextAll('.js-pl-auth-name', nameInput.value.trim());
            }
            if (postInput.value && postInput.value.trim()) {
                setTextAll('.js-pl-auth-post', postInput.value.trim());
            }

            dateInput.addEventListener('input', function () {
                if (!this.value) return;
                const d = new Date(this.value + 'T00:00:00');
                setTextAll('.js-pl-date', formatDMY(d));

                const dn = dayNameFromDate(d);
                dayInput.value = dn;
                setTextAll('.js-pl-day', dn);
            });

            dayInput.addEventListener('input', function () {
                setTextAll('.js-pl-day', this.value || '');
            });

            nameInput.addEventListener('input', function () {
                setTextAll('.js-pl-auth-name', this.value || '');
            });

            postInput.addEventListener('input', function () {
                setTextAll('.js-pl-auth-post', this.value || '');
            });
        }

        document.addEventListener('DOMContentLoaded', initPermissionInputs);

        /**
         * ✅ REAL FIX:
         * - inlineCss এর মধ্যে @page নেই
         * - JS injection ALWAYS last (override safe)
         */
        function openPrintWindow(mode) {
            const printable = document.getElementById('printablePermission');
            if (!printable) { alert('Printable area (#printablePermission) not found.'); return; }

            const w = window.open('', '_blank', 'width=1300,height=850,scrollbars=yes');
            if (!w) { alert('Print window blocked. Please allow popups and try again.'); return; }

            const inlineCss = Array.from(document.querySelectorAll('style'))
                .map(s => s.innerHTML)
                .join('\n');

            const pageCss = (mode === 'landscape')
                ? '@media print { @page { size: A4 landscape; margin: 6mm; } }'
                : '@media print { @page { size: A4 portrait; margin: 6mm; } }';

            w.document.open();
            w.document.write(`
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Permission Letter Print</title>

        <style>${inlineCss}</style>
        <style>${pageCss}</style>
    </head>
    <body>
        ${printable.outerHTML}
        <script>
            window.onload = function () {
                window.focus();

                setTimeout(function () {
                    var mediaQueryList = window.matchMedia('print');
                    var printModeEntered = false;

                    function closeAfterPrint(mql) {
                        if (mql.matches) {
                            printModeEntered = true;
                        } else if (printModeEntered) {
                            setTimeout(function () {
                                window.close();
                            }, 100);
                        }
                    }

                    if (mediaQueryList.addEventListener) {
                        mediaQueryList.addEventListener('change', closeAfterPrint);
                    } else {
                        mediaQueryList.addListener(closeAfterPrint);
                    }

                    window.print();
                }, 500);
            };
        <\/script>
    </body>
    </html>
    `);
            w.document.close();
        }

        function printPermissionPortrait() {
            openPrintWindow('portrait');
        }

        function printPermissionLandscape() {
            openPrintWindow('landscape');
        }
    </script>
@endsection