@extends('admin.admin_dashboard')

@section('customcss')
        <style>
            @page {
                size: A4 portrait;
                margin: 7mm;
            }

            html,
            body {
                margin: 0;
                padding: 0;
                background: #fff;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                font-family: Arial, Helvetica, sans-serif;
            }

            .print-root {
                width: 100%;
                box-sizing: border-box;
                padding: 6mm;
            }

            .admit-card {
                width: 100%;
                box-sizing: border-box;
                background: #fff;
                border: 2px solid #111;
                border-radius: 0;
                padding: 8px 10px;
                margin: 0 auto 14mm auto;

                height: 84mm;


                display: flex;
                flex-direction: column;
            }


            .admit-card {
                position: relative;
                /* ✅ required */
            }

            /* ✅ Red dotted cutting line like your image */
            .admit-card:not(:last-child)::after {
                content: "";
                position: absolute;

                width: 200px;
                /* ✅ fixed width */
                left: 50%;
                /* ✅ center start */
                transform: translateX(-50%) translateY(50%);
                /* ✅ perfectly center */

                bottom: -7mm;
                /* gap middle */
                border-bottom: 1px dotted #000;
            }



            /* ===== TOP ===== */
            .admit-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 5px;
                flex: 0 0 auto;
            }

            .logo-box {
                width: 90px;
                /* ✅ fixed */
                height: 120px;
                /* ✅ fixed */
                flex: 0 0 80px;
                /* ✅ same as width */
                display: flex;
                align-items: center;
                /* ✅ center image */
                justify-content: center;
                /* ✅ center image */
            }

            .logo-box img {
                width: 90px;
                height: 120px;
                object-fit: contain;
                display: block;
            }

            .school-center {
                flex: 1;
                text-align: center;
                line-height: 1.05;
                padding-top: 1px;
            }

            .school-center h2 {
                margin: 0;
                font-size: 18px;
                font-weight: 800;
                color: #000;
            }

            .school-center .addr {
                margin: 1px 0 0 0;
                font-size: 10px;
                color: #000;
            }

            .school-center .exam {
                margin-top: 3px;
                font-size: 14px;
                font-weight: 800;
                color: #000;
            }

            .admit-badge {
                display: inline-block;
                margin-top: 4px;
                background: #2aa84a;
                color: #fff;
                font-weight: 800;
                font-size: 16px;
                padding: 5px 10px;
                border: 1px solid #b71c1c;
            }



            /* ✅ PHOTO never crop */
            .photo-box {
                width: 74px;
                flex: 0 0 74px;
                display: flex;
                justify-content: flex-end;
            }

            .photo-box img {
                width: 70px;
                height: 70px;
                display: block;
                border: 1px solid #111;
                background: #fff;
                object-fit: contain;
                object-position: center center;
            }

            /* ===== MIDDLE (takes remaining space) ===== */
            .mid-row {
                flex: 1 1 auto;
                /* ✅ take remaining height */
                margin-top: 6px;

                display: grid;
                grid-template-columns: 1fr 210px;
                /* right fixed */
                column-gap: 10px;

                align-items: stretch;
                /* ✅ both columns same height */
                min-height: 0;
                /* ✅ prevents overflow pushing stuff */
            }

            .info-table {
                font-size: 11px;
                line-height: 1.5;
                padding-top: 5px;
                align-self: flex-start;
                /* ✅ info stays top */
            }

            .info-table .row {
                display: flex;
                gap: 6px;
                margin: 1px 0;
            }

            .info-table .lbl {
                width: 130px;
                font-weight: 800;
                font-size: 12px;
                color: #000;
            }

            .info-table .val {
                flex: 1;
                color: #000;
                font-weight: 500;
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* ✅ Signature: pinned to bottom of middle area */
            .sig-box {
                width: 210px;
                justify-self: end;

                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                /* ✅ bottom align inside its column */
                align-items: center;
                text-align: center;

                padding-bottom: 2px;
                /* ✅ close to directions line */
            }

            .sig-box img {
                width: 150px;
                height: 45px;
                object-fit: contain;
                /* ✅ signature never crops */
                object-position: center center;
                display: block;
                margin: 0 auto 2px auto;
                background: transparent;
            }

            .sig-text {
                font-size: 9.5px;
                line-height: 1.15;
                color: #000;
            }

            .sig-text strong {
                font-size: 10.5px;
            }

            /* ===== DIRECTIONS (always bottom) ===== */
            .directions {
                margin-top: auto;
                /* ✅ hard lock to bottom */
                border-top: 1px solid #111;
                padding-top: 3px;

                font-size: 8.8px;
                line-height: 1.25;
                color: #000;
            }

            .directions ol {
                margin: 2px 0 0 16px;
                padding: 0;
            }

           @media print {
            .print-root {
                padding: 0 !important;
            }

            .admit-card:nth-child(3n) {
                page-break-after: always;
                break-after: page;
            }

            .admit-card:nth-child(3n):last-child,
            .admit-card:last-child {
                page-break-after: auto !important;
                break-after: auto !important;
                margin-bottom: 0 !important;
            }
            }
        </style>
@endsection


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

            <div class="row mb-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header bg-light">
                            <h4 class="card-title text-dark">
                                <i class="fas fa-file-alt me-2 text-primary"></i> Quick Actions
                            </h4>
                        </div>
                        <div class="card-body">
                            <button class="btn btn-info" onclick="printAdmitCards()">Print Admit Cards</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Admit Cards Preview</h4>
                </div>
                <div class="card-body">
                    <div id="printableAdmitCards" class="print-root">
                        @if($registrations->isEmpty())
                            <div class="alert alert-warning">No approved registrations found for this exam's session & class.
                            </div>
                        @else
                            @foreach($registrations as $pair)
                                <div class="admit-card">

                                    <div class="admit-top">
                                        <div class="logo-box">
                                            <img src="{{ $schoolInfo->school_logo ? asset('core/storage/app/public/' . $schoolInfo->school_logo) : asset('images/default-avatar.png') }}"
                                                alt="School Logo">
                                        </div>

                                        <div class="school-center">
                                            <h2>{{ $schoolInfo->school_name }}</h2>
                                            <div class="addr">{{ $schoolInfo->address }}</div>
                                            <div class="exam">{{ $exam->exam_name }}</div>
                                            <div class="admit-badge">Admit Card</div>
                                        </div>

                                        <div class="photo-box">
                                            <img src="{{ $pair->student->student_photo ? asset('core/storage/app/public/' . $pair->student->student_photo) : asset('images/default-avatar.png') }}"
                                                alt="Student Photo">
                                        </div>
                                    </div>

                                    <div class="mid-row">
                                        <div class="info-table">
                                            <div class="row">
                                                <div class="lbl">Student's Name</div>
                                                <div class="val">: {{ $pair->student->student_name_english }}</div>
                                            </div>
                                            <div class="row">
                                                <div class="lbl">Class</div>
                                                <div class="val">: {{ $exam->class->name ?? $pair->class_model->name ?? '-' }}</div>
                                            </div>
                                            <div class="row">
                                                <div class="lbl">Section</div>
                                                <div class="val">: {{ optional($pair->section)->name ?? '-' }}</div>
                                            </div>
                                            <div class="row">
                                                <div class="lbl">Roll Number</div>
                                                <div class="val">: {{ $pair->class_roll }}</div>
                                            </div>
                                        </div>

                                        <div class="sig-box">
                                            <img src="{{ $schoolInfo->principal_signature ? asset('core/storage/app/public/' . $schoolInfo->principal_signature) : asset('images/default-avatar.png') }}"
                                                alt="Signature">
                                            <div class="sig-text">
                                                <strong>{{ $schoolInfo->principal_name }}</strong><br>
                                                Principal<br>
                                                {{ $schoolInfo->school_name }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="directions">
                                        <strong>Direction:</strong>
                                        <ol>
                                            <li>The examinee must bring the Admit Card in the examination hall.</li>
                                            <li>The examinee must sign in the attendance sheet for each subject in the examination
                                                hall otherwise examinee will be treated as absent in the respective subject(s).</li>
                                        </ol>
                                    </div>

                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection


@section('customjs')
    <script>
        function toAbsoluteUrl(src) {
            try {
                if (!src) return src;
                if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('data:')) return src;
                return new URL(src, window.location.origin).href;
            } catch (e) {
                return src;
            }
        }

        function printAdmitCards() {
            const printable = document.getElementById('printableAdmitCards');
            if (!printable) { alert('Printable area not found'); return; }

            const printWindow = window.open('', '_blank', 'width=1100,height=850,scrollbars=yes');
            if (!printWindow) { alert('Popup blocked'); return; }

            printWindow.document.open();
            printWindow.document.write('<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body></body></html>');
            printWindow.document.close();

            const css = document.querySelector('style') ? document.querySelector('style').innerHTML : '';
            const styleEl = printWindow.document.createElement('style');
            styleEl.appendChild(printWindow.document.createTextNode(css));
            printWindow.document.head.appendChild(styleEl);

            const wrapper = printWindow.document.createElement('div');
            wrapper.innerHTML = printable.innerHTML;
            printWindow.document.body.appendChild(wrapper);

            wrapper.querySelectorAll('img').forEach(img => {
                img.setAttribute('src', toAbsoluteUrl(img.getAttribute('src')));
                img.onerror = () => { img.style.display = 'none'; };
            });

            printWindow.focus();

            setTimeout(() => {

                let isPrinting = false;

                // before print
                printWindow.onbeforeprint = function () {
                    isPrinting = true;
                };

                // after print OR cancel
                printWindow.onafterprint = function () {
                    if (isPrinting) {
                        printWindow.close();
                    }
                };

                printWindow.print();

            }, 500);
        }
    </script>
@endsection