@extends('admin.admin_dashboard')

@section('customcss')
    <style>
        /* =============== Routine Table Styles (Matches Screenshot) =============== */
        /* Layout helpers for the routine cards */
        .cm-content-box.box-light {
            overflow-x: auto;
        }

        /* Table base */
        .cm-content-box.box-light table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            min-width: 960px;
            font-size: 11px;
        }

        .cm-content-box.box-light thead th,
        .cm-content-box.box-light tbody th,
        .cm-content-box.box-light td {
            border: 1px solid #CAD4DF;
            text-align: center;
            vertical-align: top;
            word-break: break-word;
        }

        .cm-content-box.box-light thead th {
            background: #4ca49d;
            color: #fff;
            font-weight: 500;
            font-size: 11px;
            padding: 6px 4px;
            line-height: 1.3;
        }
        
        .cm-content-box.box-light thead th small {
            font-size: 9px;
            font-weight: 400;
            opacity: 0.9;
        }

        .cm-content-box.box-light tbody th {
            background: #F3F7FB;
            font-weight: 700;
            color: #2F3B52;
            width: 80px;
            padding: 8px 4px;
            font-size: 12px;
        }

        .cm-content-box.box-light td {
            padding: 4px;
            line-height: 1.2;
            font-size: 11px;
            vertical-align: middle;
        }

        /* Cell content lines from your PHP builder */
        .cm-content-box.box-light td span {
            display: block;
            line-height: 1.3;
        }

        .cm-content-box.box-light td hr {
            border: 0;
            border-top: 1px solid #D7DEE6;
            margin: 3px 0;
        }

        /* Compact div spacing inside cells */
        .cm-content-box.box-light td > div {
            margin-bottom: 0 !important;
            line-height: 1.3;
        }

        /* Ensure subject names for student routine are bold and green */
        .cm-content-box.box-light td span[style*="color:#57B157"] {
            font-weight: 600;
            font-size: 11px;
        }
        
        /* Ensure class names for teacher routine have proper styling */
        .cm-content-box.box-light td span[style*="color:#46AC46"] {
            font-weight: 500;
            font-size: 11px;
        }
        
        /* Teacher/subject text sizing */
        .cm-content-box.box-light td span[style*="color:#111"] {
            font-size: 10px;
        }

        /* Make long tables readable on smaller screens via horizontal scroll */
        @media (max-width: 1200px) {
            .cm-content-box.box-light table {
                min-width: 880px;
                font-size: 10px;
            }
        }

        @media (max-width: 992px) {
            .cm-content-box.box-light table {
                min-width: 760px;
                font-size: 10px;
            }

            .cm-content-box.box-light th,
            .cm-content-box.box-light td {
                padding: 3px;
                font-size: 10px;
            }
        }

        @media (max-width: 768px) {
            .cm-content-box.box-light table {
                min-width: 640px;
                font-size: 9px;
            }

            .cm-content-box.box-light th,
            .cm-content-box.box-light td {
                padding: 3px;
                font-size: 9px;
            }
        }

        @media (max-width: 576px) {
            .cm-content-box.box-light table {
                min-width: 560px;
                font-size: 9px;
            }

            .cm-content-box.box-light th,
            .cm-content-box.box-light td {
                padding: 4px;
                font-size: 9px;
            }
        }

        /* Prevent content from running off the bottom on print; keep clean B/W output */
        @media print {

            /* Page margins and color reset */
            @page {
                margin: 12mm;
            }

            body {
                background: #fff;
                color: #000;
                font-size: 12px;
            }

            .filter,
            .page-titles,
            .btn,
            .tools,
            .cm-content-box.box-primary~.mb-4,
            .select2 {
                display: none !important;
            }

            .cm-content-box.box-light {
                box-shadow: none !important;
                border: 0 !important;
                overflow: visible !important;
            }

            .cm-content-box.box-light table {
                min-width: 0 !important;
                width: 100% !important;
            }

            .cm-content-box.box-light thead th,
            .cm-content-box.box-light tbody th,
            .cm-content-box.box-light td {
                background: #fff !important;
                color: #000 !important;
                border-color: #000 !important;
            }

            /* Remove all background colors and text colors for PDF */
            .cm-content-box.box-light td[style*="background-color"] {
                background-color: #fff !important;
            }

            .cm-content-box.box-light td span[style*="color"] {
                color: #000 !important;
            }

            .cm-content-box.box-light td hr {
                border-top-color: #000 !important;
                margin: 4px 0;
            }

            /* Try to keep rows intact */
            .cm-content-box.box-light tr {
                page-break-inside: avoid;
            }
        }
    </style>
@endsection

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

            {{-- Breadcrumb --}}
            <div class="row page-titles">
                <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)">Class Routine</a></li>
                </ol>
            </div>

            {{-- Filter Card --}}
            <div class="row">
                <div class="col-xl-12">
                    <div class="filter cm-content-box box-primary">
                        <div class="content-title SlideToolHeader">
                            <div class="cpa">
                                <i class="fa-sharp fa-solid fa-filter me-2"></i>Filter
                            </div>
                            <div class="tools">
                                <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                            </div>
                        </div>
                        <div class="cm-content-body form excerpt">
                            <div class="card-body">
                                <form method="GET" action="{{ route('admin.routines.index') }}">
                                    <div class="row">
                                        <div class="col-xl-3 col-sm-6 mb-3">
                                            <label class="form-label">Session <span class="text-danger">*</span></label>
                                            <select name="session_id" class="form-control" required>
                                                <option value="">-- Select Session --</option>
                                                @foreach($sessions as $s)
                                                    <option value="{{ $s->id }}" {{ $filterSession == $s->id ? 'selected' : '' }}>
                                                        {{ $s->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 mb-3">
                                            <label class="form-label">Routine Type</label>
                                            <select name="routine_type_id" class="form-control select2">
                                                <option value="">-- None --</option>
                                                <option value="any" {{ $filterRoutineType == 'any' ? 'selected' : '' }}>Any
                                                </option>
                                                @foreach($routineType as $t)
                                                    <option value="{{ $t->id }}" {{ $filterRoutineType == $t->id ? 'selected' : '' }}>
                                                        {{ $t->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 mb-3">
                                            <label class="form-label">Routine Section</label>
                                            <select name="routine_section_id" class="form-control select2">
                                                <option value="">-- None --</option>
                                                <option value="any" {{ $filterRoutineSection == 'any' ? 'selected' : '' }}>Any</option>
                                                @foreach($routineSections as $rs)
                                                    <option value="{{ $rs->id }}" {{ $filterRoutineSection == $rs->id ? 'selected' : '' }}>
                                                        {{ $rs->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 mb-3">
                                            <label class="form-label">Teacher</label>
                                            <select name="teacher_id" class="form-control select2">
                                                <option value="">-- None --</option>
                                                <option value="any" {{ $filterTeacher == 'any' ? 'selected' : '' }}>Any</option>
                                                @foreach($teachers as $t)
                                                    <option value="{{ $t->id }}" {{ $filterTeacher == $t->id ? 'selected' : '' }}>
                                                        {{ $t->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 mb-3">
                                            <label class="form-label">Class</label>
                                            <select name="class_id" class="form-control">
                                                <option value="">-- Select --</option>
                                                <option value="any" {{ $filterClass == 'any' ? 'selected' : '' }}>Any</option>
                                                @foreach($classes as $c)
                                                    <option value="{{ $c->id }}" {{ $filterClass == $c->id ? 'selected' : '' }}>
                                                        {{ $c->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 mb-3">
                                            <label class="form-label">Section</label>
                                            <select name="section_id" class="form-control">
                                                <option value="">-- Any --</option>
                                                @foreach($sections as $s)
                                                    <option value="{{ $s->id }}" {{ $filterSection == $s->id ? 'selected' : '' }}>
                                                        {{ $s->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-sm-6 align-self-end mb-3">
                                            <button type="submit" class="btn btn-primary me-2 w-100">
                                                <i class="fa fa-filter me-1"></i>Filter
                                            </button>
                                            <a href="{{ route('admin.routines.index') }}"
                                                class="btn btn-danger w-100 mt-2">Reset</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="mb-4 pb-3">
                        <a href="{{ route('admin.routine.builder') }}" class="btn btn-primary btn-sm">
                            <i class="fa fa-plus"></i> Add New Routine
                        </a>
                        <a href="{{ route('admin.routines.pdf', request()->all()) }}" class="btn btn-danger btn-sm">
                            <i class="fa fa-file-pdf"></i> Download PDF
                        </a>
                        @if($filterSession && count($cards) > 0)
                            <button onclick="printRoutine()" class="btn btn-info btn-sm">
                                <i class="fa fa-print"></i> Print View
                            </button>
                        @endif
                    </div>

                    {{-- Routine Cards --}}
                    <div class="filter cm-content-box box-primary">
                        <div class="content-title SlideToolHeader">
                            <div class="cpa">
                                <i class="fa-solid fa-table me-1"></i>Class Routine List
                            </div>
                            <div class="tools">
                                <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                            </div>
                        </div>
                        <div class="cm-content-body form excerpt">
                            <div class="card-body pb-4">
                                <div class="row">
                                    @foreach($cards as $c)
                                        <div class="col-xl-12 col-md-12 mb-3">
                                            <div class="cm-content-box box-light p-3">
                                                <h5>{{ $c['title'] }}</h5>
                                                {{-- The routine table HTML (built by your helper) is injected here and will
                                                inherit styles above --}}
                                                {!! $c['routines'] !!}
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Bottom Print Button --}}
                    @if($filterSession && count($cards) > 0)
                        <div class="mb-4 text-center">
                            <button onclick="printRoutine()" class="btn btn-info btn-sm">
                                <i class="fa fa-print"></i> Print View
                            </button>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
    <script>
        $(document).ready(function () {
            $('.select2').select2();
        });

        function printRoutine() {
            console.log('Print routine function called');
            
            // School and session data
            const schoolName = @json(isset($schoolProfile) && $schoolProfile && isset($schoolProfile->school_name) ? $schoolProfile->school_name : 'School Name');
            const schoolAddress = @json(isset($schoolProfile) && $schoolProfile && isset($schoolProfile->address) ? $schoolProfile->address : '');
            const sessionName = @json($sessionName ?? 'Academic Session');
            
            console.log('School:', schoolName, 'Session:', sessionName);
            
            // Filter information
            const filterMode = @json(isset($filterTeacher) && $filterTeacher ? 'teacher' : 'class_section');
            const teacherName = @json($teacherName ?? '');
            const className = @json($className ?? '');
            const sectionName = @json($sectionName ?? '');
            const routineTypeName = @json($routineTypeName ?? '');
            
            console.log('Filter mode:', filterMode);
            
            // Open print window
            const printWindow = window.open('', '_blank', 'width=1200,height=800');
            
            if (!printWindow) {
                alert('Please allow pop-ups for this website to enable printing.');
                return;
            }
            
            // Build print HTML
            let printHTML = `
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="utf-8">
                    <title>Class Routine - ${sessionName}</title>
                    <style>
                        @page {
                            margin: 10mm 12mm;
                            size: A4 portrait;
                        }
                        * {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                        }
                        body {
                            font-family: Arial, sans-serif;
                            font-size: 8px;
                            line-height: 1.2;
                            color: #000;
                        }
                        .header {
                            text-align: center;
                            margin-bottom: 10px;
                        }
                        .header h1 {
                            font-size: 16px;
                            font-weight: bold;
                            margin-bottom: 3px;
                        }
                        .header h2 {
                            font-size: 12px;
                            font-weight: normal;
                            margin-bottom: 3px;
                        }
                        .header h3 {
                            font-size: 11px;
                            font-weight: normal;
                            margin-bottom: 8px;
                        }
                        .header p {
                            font-size: 10px;
                            margin-bottom: 2px;
                        }
                        .routine-section {
                            margin-bottom: 14px;
                            page-break-inside: avoid;
                            height: 48vh;
                            overflow: visible;
                            position: relative;
                        }
                        .routine-section:nth-child(odd) {
                            page-break-after: avoid;
                        }
                        .routine-section:nth-child(even) {
                            page-break-after: always;
                        }
                        .routine-section:not(:last-child) {
                            border-bottom: 1px solid #000;
                            padding-bottom: 10px;
                        }
                        .routine-section .section-header {
                            text-align: center;
                            margin-bottom: 2px;
                            padding: 2px 0;
                        }
                        .routine-section .section-header h3 {
                            font-size: 12px;
                            font-weight: bold;
                            margin-bottom: 1px;
                        }
                        .routine-section .section-header p {
                            font-size: 9px;
                            margin-bottom: 0;
                        }
                        .routine-section h4 {
                            font-size: 10px;
                            font-weight: bold;
                            margin-bottom: 3px;
                            padding: 3px 8px;
                            text-align: center;
                            background: #f0f0f0;
                            border: 1px solid #ccc;
                            border-radius: 2px;
                        }
                        .table-wrapper {
                            width: 100%;
                            overflow: visible;
                        }
                        table {
                            width: 100% !important;
                            border-collapse: collapse;
                            margin-bottom: 2px;
                            table-layout: fixed;
                        }
                        table th {
                            background: #fff;
                            border: 1px solid #000;
                            padding: 2px;
                            text-align: center;
                            font-size: 7.5px;
                            font-weight: bold;
                            vertical-align: middle;
                            line-height: 1.2;
                            word-wrap: break-word;
                        }
                        table td {
                            border: 1px solid #000;
                            padding: 2px;
                            text-align: center;
                            vertical-align: middle;
                            font-size: 8px;
                            line-height: 1.2;
                            word-wrap: break-word;
                            overflow-wrap: break-word;
                        }
                        table tbody th {
                            background: #fff;
                            font-weight: bold;
                            font-size: 8px;
                            text-align: left;
                            padding-left: 3px;
                            width: 8%;
                            min-width: 45px;
                        }
                        /* First column (Day) should be narrower */
                        table thead th:first-child,
                        table tbody th {
                            width: 8%;
                            min-width: 45px;
                        }
                        table td div {
                            margin: 0.5px 0;
                        }
                        table td span {
                            display: block;
                        }
                        /* Remove all colors for print */
                        table td span[style*="color"] {
                            color: #000 !important;
                        }
                        /* Teacher names smaller */
                        table td span:nth-child(2) {
                            font-size: 7px;
                        }
                        /* TIFFIN cells */
                        table td[style*="E3FFE3"],
                        table td[style*="E8F8E8"] {
                            background: #f5f5f5 !important;
                        }
                        /* Auto scale large tables to fit page width */
                        @media print {
                            table {
                                width: 100% !important;
                                table-layout: fixed !important;
                            }
                        }
                        @media print {
                            body {
                                margin: 0;
                                padding: 0;
                            }
                            .routine-section {
                                page-break-inside: avoid;
                                height: 48vh;
                            }
                            .routine-section:nth-child(odd) {
                                page-break-after: avoid;
                            }
                            .routine-section:nth-child(even) {
                                page-break-after: always;
                            }
                        }
                    </style>
                </head>
                <body>
            `;
            
            // Add routine tables
            const cards = document.querySelectorAll('.cm-content-box.box-light');
            console.log('Found cards:', cards.length);
            
            if (cards && cards.length > 0) {
                cards.forEach((card, index) => {
                    const title = card.querySelector('h5');
                    const table = card.querySelector('table');
                    
                    console.log(`Card ${index}: Title=${title ? title.textContent : 'none'}, Table=${table ? 'found' : 'not found'}`);
                    
                    if (title && table) {
                        const clonedTable = table.cloneNode(true);
                        
                        printHTML += `
                            <div class="routine-section ${filterMode === 'teacher' ? 'teacher-routine' : 'student-routine'}">
                                <div class="section-header">
                                    <h3>${schoolName}</h3>
                                    <p>Class Routine - ${sessionName}</p>
                                </div>
                                <h4>${title.textContent}</h4>
                                ${clonedTable.outerHTML}
                            </div>
                        `;
                    }
                });
            } else {
                console.warn('No routine cards found');
                printHTML += '<p style="text-align:center; margin-top:50px;">No routine data found to print.</p>';
            }
            
            printHTML += `
                    <script type="text/javascript">
                        window.onload = function() {
                            window.print();
                            // Optional: close window after printing (uncomment if needed)
                            // window.onafterprint = function() { window.close(); };
                        };
                    <\/script>
                </body>
                </html>
            `;
            
            try {
                printWindow.document.write(printHTML);
                printWindow.document.close();
            } catch (e) {
                console.error('Error generating print preview:', e);
                alert('Error generating print preview. Please try again.');
                printWindow.close();
            }
        }
    </script>
@endsection