@extends('admin.admin_dashboard')

@section('customcss')
<style>
    .filter-label {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 7px;
    }

    .ajax-loading {
        opacity: .5;
        pointer-events: none;
    }

    .routine-table {
        width: 100%;
        border-collapse: collapse;
    }

    .routine-table th {
        

        padding: 10px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }

    .routine-table td {
        border: 1px solid #e5e7eb;
        text-align: center;
        padding: 10px;
        font-size: 13px;
    }

    .exam-pill {
        display: inline-block;
        background: #dbeafe;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        margin: 3px;
    }

    .select2-container {
        width: 100% !important;
    }

    .select2-selection--multiple {
        min-height: 38px !important;
        border: 1px solid #ced4da !important;
    }
</style>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('admin')

@php
    $schoolInfo = $schoolInfo ?? null;
@endphp


<div class="content-body">
    <div class="container-fluid">

        <div class="row page-titles">
            <ol class="breadcrumb">
                <li>Exam Routine</li>
                <li class="active">Combined</li>
            </ol>
        </div>

        {{-- FILTER --}}
        <div class="card mb-3">
            <div class="card-body">
                <div class="row">

                    <div class="col-md-4">
                        <label class="filter-label">Session</label>
                        <select id="sessionSelect" class="form-select">
                            <option value="">Select Session</option>
                            @foreach($sessions as $session)
                                <option value="{{ $session->id }}">
                                    {{ $session->name ?? $session->session_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-5">
                        <label class="filter-label">Select Exams</label>
                        <select id="examSelect" class="form-select" multiple disabled></select>
                    </div>

                    <div class="col-md-3 text-end">
                        <button type="button" id="showBtn" class="btn btn-primary mt-4">
                            Show Routine
                        </button>

                        <button type="button" onclick="printRoutine()" class="btn btn-dark mt-4">
                            Print Routine
                        </button>

                        <a href="{{ route('exam.routine.combined') }}" class="btn btn-danger mt-4">
                            Reset
                        </a>
                    </div>

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

        {{-- OUTPUT --}}
        <div id="routineArea" class="card">
            <div class="card-body">

                @if(!empty($warning))
                    <div class="alert alert-warning text-center">
                        {{ $warning }}
                    </div>
                @endif

                @if(!empty($grouped) && count($grouped) > 0)

                    <h4 class="text-center">Combined Routine</h4>

                    

                    <div class="table-responsive">
                        <table class="table table-striped " id="routineTable">

                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Day</th>

                                    @foreach($exams as $exam)
                                        <th>
                                           
                                            <small>{{ $exam->class->name ?? '-' }}</small>
                                        </th>
                                    @endforeach
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($grouped as $row)
                                    <tr>
                                        <td>{{ $row['date'] }}</td>
                                        <td>{{ $row['day'] }}</td>

                                        @foreach($row['slots'] as $slot)
                                            <td>{{ $slot ?? '-' }}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>

                        </table>
                    </div>

                @else
                    <div class="text-center text-muted py-5">
                        Select session and exams to view routine
                    </div>
                @endif

            </div>
        </div>

    </div>
</div>

@endsection

@section('customjs')

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function () {

    const sessionSelect = $('#sessionSelect');
    const examSelect = $('#examSelect');

    const examBaseUrl = "{{ url('/admin/exams/by-session') }}";
    const combinedRoutineUrl = "{{ route('exam.routine.combined') }}";

    let currentRequest = null;

    examSelect.select2({
        placeholder: 'Select Exams',
        width: '100%',
        closeOnSelect: false
    });

    function resetExamDropdown() {
        examSelect.val(null).empty().prop('disabled', true).trigger('change');
    }

    sessionSelect.on('change', function () {

        const sessionId = $(this).val();

        resetExamDropdown();

        if (!sessionId) return;

        if (currentRequest) currentRequest.abort();

        currentRequest = $.ajax({
            url: examBaseUrl + '/' + sessionId,
            type: 'GET',
            dataType: 'json'
        })
        .done(function (response) {

            const exams = Array.isArray(response) ? response : (response.exams || []);

            exams.forEach(function (exam) {
                examSelect.append(new Option(exam.exam_name, exam.id, false, false));
            });

            examSelect.prop('disabled', false).trigger('change');
        })
        .fail(function () {
            alert('Unable to load exams');
        });
    });

    $('#showBtn').on('click', function () {

        const selectedExams = examSelect.val();

        if (!selectedExams || selectedExams.length === 0) {
            alert('Select at least one exam');
            return;
        }

        const params = new URLSearchParams();

        selectedExams.forEach(id => params.append('exam_ids[]', id));

        window.location.href = combinedRoutineUrl + '?' + params.toString();
    });

});


// ======================
// PRINT FIX (FINAL)
// ======================
function printRoutine() {

    const table = document.getElementById('routineTable');

    if (!table) {
        alert('Please show a routine before printing.');
        return;
    }

    const school = @json($schoolInfo ?? null);
    const exams = @json($exams ?? []);

    const examName = exams.length ? exams[0].exam_name : 'Exam Routine';

    const logo = school?.logo ? "{{ asset('') }}" + school.logo : '';

    const printWindow = window.open('', '_blank');

    const style = `
        <style>
            @page {
                size: A4 portrait;
                margin: 10mm;
            }

            body {
                font-family: Arial;
                margin: 0;
                padding: 0;
            }

            h3 {
                text-align: center;
                margin-bottom: 10px;
            }

            .header { text-align:center; margin-bottom:10px; }

            .logo { height:60px; }

            .school { font-size:18px; font-weight:bold; }

            .addr { font-size:12px; }

            .exam { margin-top:5px; font-weight:bold; }

            .exam-pill {
                display: inline-block;
                background: #dbeafe;
                padding: 3px 8px;
                border-radius: 12px;
                font-size: 10px;
                margin: 2px;
            }

            table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                table-layout: fixed;
            }

            th, td {
                border: 1px solid #000;
                padding: 5px;
                font-size: 12px;
                text-align: left;
                word-break: break-word;
            }

            th {
                
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            thead {
                display: table-header-group;
            }

            tr {
                page-break-inside: avoid;
            }
        </style>
    `;

    const header = `
        <div class="header">
            ${logo ? `<img src="${logo}" class="logo">` : ''}
            <div class="school">${school?.school_name ?? ''}</div>
            <div class="addr">${school?.address ?? ''}</div>
            <div class="exam">Exam: ${examName}</div>
        </div>
    `;

    printWindow.document.write(`
        <html>
        <head>
            
            <title>Routine</title>
            ${style}
        </head>
        <body>
            
            ${header}
            ${table.outerHTML}
        </body>
        </html>
    `);

    printWindow.document.close();

    printWindow.onload = function () {
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    };
}
</script>

@endsection