@extends('student.student_dashboard')

@section('customcss')
<style>
    .routine-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
    }

    .routine-table {
        width: max-content;
        min-width: 1000px;
        border-collapse: collapse;
        background: #fff;
    }

    .routine-table th {
        background: #4eb5ad;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        font-weight: 700;
        padding: 14px 8px;
        border: 2px solid #e5e5e5;
        font-size: 14px;
    }

    .routine-table td {
        text-align: center;
        vertical-align: middle;
        border: 2px solid #e5e5e5;
        padding: 14px 8px;
        font-size: 14px;
        background: #fff;
    }

    .routine-table th,
    .routine-table td {
        min-width: 120px;
        max-width: 120px;
        word-break: break-word;
        white-space: normal;
    }

    .routine-table th:first-child,
    .routine-table td:first-child {
        min-width: 75px;
        max-width: 75px;
        position: sticky;
        left: 0;
        z-index: 5;
    }

    .routine-table th:first-child {
        background: #4eb5ad;
    }

    .routine-table td:first-child {
        background: #f8f9fa;
    }

    .routine-day {
        font-weight: 800;
        color: #111;
        font-size: 15px;
    }

    .routine-subject {
        color: #2faa3a;
        font-weight: 800;
        font-size: 15px;
        line-height: 1.3;
    }

    .routine-teacher {
        color: #8a4300;
        font-size: 13px;
        margin-top: 6px;
        line-height: 1.3;
    }

    .routine-empty {
        color: #aaa;
        font-weight: 700;
        font-size: 18px;
    }

    .routine-tiffin {
        background: #dff4e5 !important;
        color: #006b2f;
        font-weight: 800;
        font-size: 16px;
    }

    .slot-time {
        display: block;
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .routine-table {
            min-width: 950px;
        }

        .routine-table th,
        .routine-table td {
            min-width: 110px;
            max-width: 110px;
            padding: 10px 6px;
        }

        .routine-subject {
            font-size: 14px;
        }

        .routine-teacher {
            font-size: 12px;
        }

        .slot-time {
            font-size: 11px;
        }
    }
</style>
@endsection

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

        <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>

        @if(isset($error))
            <div class="alert alert-warning">
                {{ $error }}
            </div>
        @else

            <div class="card shadow-sm border-primary mb-3">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-id-card me-2"></i> Student Information
                    </h5>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Name:</strong>
                            <p class="text-muted mb-0">
                                {{ $student->student_name_english ?: $student->name }}
                            </p>
                        </div>

                        <div class="col-md-3">
                            <strong>Class:</strong>
                            <p class="text-muted mb-0">
                                {{ $registration->class_model ? $registration->class_model->name : '-' }}
                            </p>
                        </div>

                        <div class="col-md-3">
                            <strong>Section:</strong>
                            <p class="text-muted mb-0">
                                {{ $registration->section ? $registration->section->name : '-' }}
                            </p>
                        </div>

                        <div class="col-md-3">
                            <strong>Session:</strong>
                            <p class="text-muted mb-0">
                                {{ $registration->session ? $registration->session->name : '-' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">
                        <i class="fas fa-calendar-alt me-2"></i> Weekly Class Routine
                    </h5>
                </div>

                <div class="card-body">
                    @if($timeSlots->count() == 0)
                        <div class="text-center text-muted py-5">
                            No routine found.
                        </div>
                    @else
                        <div class="routine-scroll">
                            <table class="routine-table">
                                <thead>
                                    <tr>
                                        <th>Day</th>

                                        @foreach($timeSlots as $index => $slot)
                                            <th>
                                                {{ $slot['name'] ?: 'Period '.($index + 1) }}
                                                <span class="slot-time">
                                                    {{ $slot['start_time'] }} - {{ $slot['end_time'] }}
                                                </span>
                                            </th>
                                        @endforeach
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach($daysMap as $dayNumber => $dayName)
                                        <tr>
                                            <td class="routine-day">
                                                {{ $dayName }}
                                            </td>

                                            @foreach($timeSlots as $slot)
                                                @php
                                                    $classData = $routineTable[$dayNumber]['slots'][$slot['id']] ?? null;
                                                    $slotName = strtolower($slot['name'] ?? '');
                                                    $isTiffin = str_contains($slotName, 'tiffin') || str_contains($slotName, 'break');
                                                @endphp

                                                @if($isTiffin)
                                                    <td class="routine-tiffin">
                                                        TIFFIN
                                                    </td>
                                                @elseif($classData)
                                                    <td>
                                                        <div class="routine-subject">
                                                            {{ $classData['subject'] }}
                                                        </div>

                                                        @if(!empty($classData['teacher']) && $classData['teacher'] != '-')
                                                            <div class="routine-teacher">
                                                                ( {{ $classData['teacher'] }} )
                                                            </div>
                                                        @endif
                                                    </td>
                                                @else
                                                    <td>
                                                        <span class="routine-empty">-</span>
                                                    </td>
                                                @endif
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

        @endif

    </div>
</div>
@endsection