@extends('admin.layouts.master')

@section('title') Starter Page @endsection
@section('css')
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            .print-section, .print-section * {
                visibility: visible;
            }
            .print-section {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
        }
    </style>

@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <!-- Page Header -->
        <div class="card">
            <div class="card-header border-bottom">
                <h2 class="card-title mb-3">Weekly Timetable per Section</h2>
            </div>

            <div class="p-3">
                @foreach($sections as $section)
                    <button class="btn btn-light btn-sm" onclick="printSection('section-{{ $section->id }}')">🖨️ Print</button>
                    <div class="card mb-5" id="section-{{ $section->id }}" >


                        <div class="card-header bg-info text-white">
                            <strong>{{ $section->name }} - (Level: {{ $section->level->name }})</strong>
                        </div>
                        <div class="p-3 print-section">
                            <div class="table-responsive">
                                <table class="table table-bordered text-center align-middle mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th>Day</th>
                                        @foreach ($periods as $period)
                                            <th>{{ 7 + $period }}:00</th>
                                        @endforeach
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($days as $day)
                                        <tr>
                                            <td><strong>{{ $day }}</strong></td>
                                            @foreach($periods as $period)
                                                @php
                                                    $entry = optional($timetables[$section->id] ?? collect())
                                                        ->where('day_of_week', $day)
                                                        ->where('period', $period)
                                                        ->first();
                                                @endphp
                                                <td style="background: {{ $entry?->subject?->color ?? '' }};">
                                                    @if($entry)
                                                        <div class="text-black" style="font-weight: 700">{{ $entry->subject->name }}</div>
                                                        <small class="text-black">{{ $entry->admin->name ?? 'Teacher' }}</small><br>
                                                        <small class="text-muted">{{ $entry->classroom->name ?? '' }}</small>
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        function printSection(sectionId) {
            const section = document.getElementById(sectionId);

            if (!section) return;

            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
            <html>
                <head>
                    <title>Print Timetable</title>
                    <style>
                        table {
                            width: 100%;
                            border-collapse: collapse;
direction: rtl;
                        }
                        th, td {
                            border: 1px solid #000;
                            padding: 8px;
                            text-align: center;
                        }
                        th {
                            background-color: #f0f0f0;
                        }
                        body {
                            font-family: Arial, sans-serif;
                            padding: 20px;
                        }
                    </style>
                </head>
                <body>
                    ${section.innerHTML}
                </body>
            </html>
        `);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }
    </script>


@endsection