@extends('admin.admin_dashboard')

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

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

        .attendance-sheet {
            width: 100%;
            margin-bottom: 10mm;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
        }

        .exam-info {
            text-align: center;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .exam-info b { color: #2b2ea1; font-size: 13px; }

        .exam-info p {
            font-size: 10px;
            margin: 0;
            color: #555;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 10px;
            table-layout: fixed; /* ✅ important for many columns */
        }

        table, th, td { border: 1px solid #000; }

        th, td {
            padding: 2px;
            text-align: center;
            vertical-align: middle;
        }

        /* ✅ Header compact for 13+ subjects */
        table thead th {
            font-size: 7px !important;
            padding: 2px 1px !important;
            line-height: 1.1 !important;
            white-space: normal !important;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* ✅ 2nd row exam date smaller */
        table thead tr:nth-child(2) th {
            font-size: 6px !important;
            font-weight: 500 !important;
        }

        /* first two columns width */
        table thead th:first-child { width: 30px !important; }      /* Roll */
        table thead th:nth-child(2) { width: 100px !important; }    /* Student Name */

        /* body font size slightly smaller */
        tbody td { font-size: 9px; }

        thead { background: #fff; }

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

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

            .attendance-sheet {
                page-break-after: always !important;
                break-after: page !important;
                margin: 0 0 5mm 0 !important;
            }
            .attendance-sheet: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 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)">Attendance Sheet</a></li>
            </ol>
        </div>

        {{-- Quick Actions --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header" >
                        <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="printAttendanceSheet()">Print Attendance Sheet</button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Attendance Sheet --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Attendance Sheet</h4>
                    </div>

                    <div class="card-body">
                        <div id="printableAttendanceSheet">

                            @if(session('error'))
                                <div class="alert alert-warning">{{ session('error') }}</div>
                            @endif

                            @foreach(($data ?? []) as $sheet)
                                <div class="attendance-sheet">

                                    {{-- School Header --}}
                                    <div class="exam-info">
                                        @if(!empty($schoolInfo->school_logo))
                                            <img src="{{ asset('core/storage/app/public/' . $schoolInfo->school_logo) }}"
                                                 alt="School Logo" width="70px">
                                        @endif
                                        <br>
                                        <b>{{ $schoolInfo->school_name ?? 'School Name' }}</b>
                                        <p>{{ $schoolInfo->address ?? 'School Address' }}</p>
                                    </div>

                                    {{-- Exam Info --}}
                                    <div class="exam-info">
                                        <b>Exam: {{ $exam->exam_name }}</b><br>
                                        <span>
                                            Class: {{ $exam->class->name ?? '-' }},
                                            Section: {{ $sheet['section'] ?? '-' }}
                                        </span>
                                    </div>

                                    <table class="table table-bordered table-striped verticle-middle table-responsive-sm">
                                        <thead>
                                            {{-- ✅ Row-1: Subjects (same date => same column; joined with "/") --}}
                                            <tr>
                                                <th rowspan="2">Roll</th>
                                                <th rowspan="2">Student Name</th>

                                                @foreach(($sheet['subject_columns'] ?? []) as $column)
                                                    <th>
                                                        {{ collect($column)->pluck('name')->filter()->implode(' / ') }}
                                                    </th>
                                                @endforeach
                                            </tr>

                                            {{-- ✅ Row-2: Exam Date (dd-mm-yyyy should come from controller) --}}
                                            <tr>
                                                @foreach(($sheet['subject_columns'] ?? []) as $column)
                                                    <th>
                                                        {{ $column[0]['exam_date'] ?? '-' }}
                                                    </th>
                                                @endforeach
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @foreach(($sheet['students'] ?? []) as $registration)
                                                <tr>
                                                    <td>{{ $registration->class_roll ?? '' }}</td>

                                                    <td style="text-align:left;">
                                                        {{ $registration->student->student_name_english ?? '-' }}
                                                       
                                                    </td>

                                                    @foreach(($sheet['subject_columns'] ?? []) as $column)
                                                        @php
            $hasAnySubject = false;
            foreach ($column as $sub) {
                if (!empty($sub['student_ids']) && in_array($registration->student_id, $sub['student_ids'])) {
                    $hasAnySubject = true;
                    break;
                }
            }
                                                        @endphp

                                                        <td>
                                                            @if($hasAnySubject)
                                                                {{-- keep blank for signature --}}
                                                            @else
                                                                <span style="color:#ccc;">-</span>
                                                            @endif
                                                        </td>
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                </div>
                            @endforeach

                        </div>
                    </div>

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

    </div>
</div>
@endsection

@section('customjs')
<script>
    function printAttendanceSheet() {
        try {
            const printable = document.getElementById('printableAttendanceSheet');
            if (!printable) {
                alert('Printable area (#printableAttendanceSheet) not found.');
                return;
            }

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

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

            const head = w.document.head;
            const body = w.document.body;

            // base url fix
            const base = w.document.createElement('base');
            base.href = document.baseURI || window.location.href;
            head.appendChild(base);

            // helper print css
            const helperStyle = w.document.createElement('style');
            helperStyle.textContent = `
                @page { size: A4 landscape; margin: 10mm; }
                body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background:#fff; }
                .attendance-sheet { page-break-after: always !important; break-after: page !important; margin:10mm 0 !important; }
            `;
            head.appendChild(helperStyle);

            // copy external css
            document.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
                const link = w.document.createElement('link');
                link.rel = 'stylesheet';
                link.href = l.href;
                head.appendChild(link);
            });

            // copy inline style tags
            document.querySelectorAll('style').forEach(s => {
                const st = w.document.createElement('style');
                st.textContent = s.textContent || '';
                head.appendChild(st);
            });

            // inject content
            const wrap = w.document.createElement('div');
            wrap.innerHTML = printable.outerHTML;
            body.appendChild(wrap);

            // wait for images
            const imgs = Array.from(wrap.querySelectorAll('img'));
            Promise.all(imgs.map(img => new Promise(res => {
                if (img.complete) return res();
                img.onload = res;
                img.onerror = res;
            }))).then(() => {

                w.focus();

                // ✅ auto close after print or cancel
                const closeAfterPrint = () => {
                    try { w.close(); } catch (e) {}
                };

                // modern browsers
                w.onafterprint = closeAfterPrint;

                // fallback (Safari / some cases)
                try {
                    const mql = w.matchMedia('print');
                    if (mql && mql.addEventListener) {
                        mql.addEventListener('change', (e) => {
                            if (!e.matches) closeAfterPrint();
                        });
                    }
                } catch (e) {}

                setTimeout(() => {
                    w.print();
                }, 300);
            });

        } catch (e) {
            console.error('printAttendanceSheet error:', e);
            alert('Error preparing print view. See console for details.');
        }
    }
</script>
@endsection