@extends('layouts.studentportalnav')

@section('title', 'My Timetable')

@section('content')

<style>
:root {
    --theme-navy: #1E233E;
    --theme-navy-dark: #15182C;
    --theme-red: #822424;
    --theme-red-hover: #df2c3e;
    --theme-yellow: #FFEA85;
    --theme-bg: #F4F6F9;
    --text-dark: #1E293B;
}

/* Page Header Hero */
.timetable-hero {
    background: linear-gradient(135deg, #1E233E 0%, #2A1F3B 50%, #4A1A24 100%);
    border-radius: 20px;
    padding: 32px 38px;
    margin-bottom: 28px;
    box-shadow: 0 12px 32px rgba(30, 35, 62, 0.16);
    position: relative;
    overflow: hidden;
}

.timetable-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 234, 133, 0.15) 0%, rgba(255, 234, 133, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.btn-print {
    background: #ffffff;
    color: #1E233E;
    font-weight: 700;
    padding: 11px 26px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-print:hover {
    background: var(--theme-yellow);
    color: #1E233E;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 234, 133, 0.4);
}

/* Top Cards */
.top-info-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    height: 100%;
}

.card-title-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* Timeline Item for Today */
.today-class-item {
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.today-class-item:hover {
    transform: translateX(4px);
}

.today-class-item.theory { 
    background: linear-gradient(135deg, #EFF6FF 0%, #E0E7FF 100%);
    border: 1px solid #C7D2FE;
}

.today-class-item.practical { 
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 1px solid #FCA5A5;
}

.today-class-item.workshop { 
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
}

/* Legend Badges */
.legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 0.84rem;
    font-weight: 700;
    margin-right: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.legend-pill.theory {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #1E40AF;
    border: 1px solid #BFDBFE;
}

.legend-pill.practical {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    color: #991B1B;
    border: 1px solid #FCA5A5;
}

.legend-pill.workshop {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    color: #92400E;
    border: 1px solid #FDE68A;
}

.legend-pill.break {
    background: linear-gradient(135deg, #FEFCE8 0%, #FEF08A 100%);
    color: #713F12;
    border: 1px solid #FDE047;
}

/* Timetable Grid Container */
.timetable-wrapper {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.table-modern {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.table-modern thead tr {
    background: linear-gradient(135deg, #1E233E 0%, #2D355B 100%);
    color: #ffffff;
}

.table-modern thead th {
    padding: 20px 16px;
    font-size: 0.88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border: none;
    text-align: center;
    vertical-align: middle;
}

.table-modern thead th.today-header {
    background: linear-gradient(180deg, rgba(255, 234, 133, 0.22) 0%, rgba(255, 234, 133, 0.1) 100%);
    color: var(--theme-yellow);
    border-bottom: 4px solid var(--theme-yellow);
}

.table-modern tbody th.time-column {
    background: #F8FAFC;
    color: #334155;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 20px 14px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    width: 150px;
}

.table-modern tbody td {
    padding: 14px;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
    background: #ffffff;
    transition: background 0.2s ease;
    min-width: 165px;
}

.table-modern tbody td.today-cell {
    background: rgba(255, 234, 133, 0.05);
}

.table-modern tbody tr:hover td {
    background: rgba(248, 250, 252, 0.85);
}

/* Vibrant Class Cards inside Cells */
.class-cell-card {
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    position: relative;
}

.class-cell-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.class-cell-card.theory {
    background: linear-gradient(135deg, #EFF6FF 0%, #E0E7FF 100%);
    border: 1px solid #C7D2FE;
}

.class-cell-card.practical {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 1px solid #FCA5A5;
}

.class-cell-card.workshop {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
}

/* Badges inside Class Cell */
.type-tag-modern {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.type-tag-modern.theory {
    background: #ffffff;
    color: #1E40AF;
    border: 1px solid #BFDBFE;
}

.type-tag-modern.practical {
    background: #ffffff;
    color: #991B1B;
    border: 1px solid #FCA5A5;
}

.type-tag-modern.workshop {
    background: #ffffff;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.subject-title {
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.subject-title.theory { color: #1E1B4B; }
.subject-title.practical { color: #822424; }
.subject-title.workshop { color: #78350F; }

.empty-cell-badge {
    color: #94A3B8;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.6;
}

/* Lunch Break Row */
.lunch-break-row td {
    background: linear-gradient(90deg, #FEFCE8 0%, #FEF3C7 50%, #FEFCE8 100%) !important;
    color: #713F12;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 16px !important;
    border-bottom: 1px solid #FDE047 !important;
    letter-spacing: 0.4px;
}

/* Print Optimization */
@media print {
    .sidebar, .mobile-header, .btn-print, .title-accent {
        display: none !important;
    }
    .main {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .portal-content-container {
        max-width: 100% !important;
    }
    .timetable-hero {
        background: #1E233E !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact;
    }
}
</style>

<div class="portal-content-container">

    <!-- Hero Header -->
    <div class="timetable-hero d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div class="position-relative" style="z-index: 1;">
            <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge bg-warning bg-opacity-20 text-warning border border-warning border-opacity-20 px-3 py-1.5 rounded-pill fw-semibold" style="font-size: 0.78rem;">
                    <i class="fa-solid fa-calendar-days me-1"></i> Weekly Academic Schedule
                </span>
            </div>
            <h2 class="fw-bold text-white mb-1" style="letter-spacing: -0.5px;">
                My Class Timetable
            </h2>
            <p class="text-white-50 mb-0 fs-6">
                Automobile Engineering Academy • Student Academic Schedule 2026
            </p>
        </div>

        <button class="btn btn-print shadow-sm" onclick="window.print()">
            <i class="fa-solid fa-print me-2"></i>Print Timetable
        </button>
    </div>

    <!-- Top Grid Info Cards -->
    <div class="row g-3 g-lg-4 mb-4">

        <!-- Today's Schedule Card -->
        <div class="col-lg-5">
            <div class="top-info-card">
                <div class="card-title-heading">
                    <div class="rounded-3 bg-danger bg-opacity-10 text-danger p-2.5 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                        <i class="fa-solid fa-clock-rotate-left fs-5"></i>
                    </div>
                    <div>
                        Today's Schedule 
                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle ms-1 fw-bold rounded-pill" style="font-size: 0.72rem;">
                            {{ $todayName ?? 'Today' }}
                        </span>
                    </div>
                </div>

                @forelse($todaySchedule ?? [] as $todayItem)
                    @php
                        $typeClass = 'theory';
                        $iconClass = 'fa-book-open';
                        if(strtolower($todayItem->type) == 'practical') {
                            $typeClass = 'practical';
                            $iconClass = 'fa-flask';
                        } elseif(strtolower($todayItem->type) == 'workshop') {
                            $typeClass = 'workshop';
                            $iconClass = 'fa-screwdriver-wrench';
                        }
                    @endphp

                    <div class="today-class-item {{ $typeClass }}">
                        <div class="d-flex align-items-center justify-content-between mb-1">
                            <span class="fw-bold text-dark small"><i class="fa-regular fa-clock me-1 text-secondary"></i> {{ $todayItem->time_slot }}</span>
                            <span class="type-tag-modern {{ $typeClass }} mb-0">
                                <i class="fa-solid {{ $iconClass }}"></i> {{ $todayItem->type }}
                            </span>
                        </div>
                        <div class="subject-title {{ $typeClass }}">{{ $todayItem->subject_name }}</div>
                    </div>
                @empty
                    <div class="p-4 text-center border rounded-4 bg-light bg-opacity-50">
                        <div class="rounded-circle bg-warning bg-opacity-20 text-warning d-inline-flex align-items-center justify-content-center p-3 mb-2" style="width: 54px; height: 54px;">
                            <i class="fa-solid fa-mug-hot fs-3"></i>
                        </div>
                        <h6 class="fw-bold text-dark mb-1">No classes scheduled for today!</h6>
                        <p class="small text-muted mb-0">Take time to review your course materials or relax.</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Timetable Legend & Guidelines Card -->
        <div class="col-lg-7">
            <div class="top-info-card d-flex flex-column justify-content-between">
                <div>
                    <div class="card-title-heading">
                        <div class="rounded-3 bg-primary bg-opacity-10 text-primary p-2.5 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fa-solid fa-sliders fs-5"></i>
                        </div>
                        <span>Timetable Legend & Session Types</span>
                    </div>

                    <div class="mb-3">
                        <span class="legend-pill theory">
                            <i class="fa-solid fa-book-open"></i> Theory Session
                        </span>
                        <span class="legend-pill practical">
                            <i class="fa-solid fa-flask"></i> Practical Session
                        </span>
                        <span class="legend-pill workshop">
                            <i class="fa-solid fa-screwdriver-wrench"></i> Workshop Training
                        </span>
                        <span class="legend-pill break">
                            <i class="fa-solid fa-utensils"></i> Rest / Lunch Break
                        </span>
                    </div>
                </div>

                <div class="pt-3 border-top border-slate-100 mt-2">
                    <div class="p-3 rounded-4 bg-danger bg-opacity-10 text-danger border border-danger border-opacity-10 d-flex align-items-center gap-3">
                        <div class="rounded-circle bg-danger text-white p-2 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 32px; height: 32px;">
                            <i class="fa-solid fa-exclamation" style="font-size: 14px;"></i>
                        </div>
                        <span class="small fw-semibold">
                            Please arrive at least 15 minutes before each session. 100% attendance is mandatory for practical and workshop modules.
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Main Timetable Grid -->
    <div class="timetable-wrapper mb-5">
        <div class="table-responsive">
            <table class="table table-modern align-middle mb-0">
                <thead>
                    <tr>
                        <th style="width: 150px;">
                            <i class="fa-regular fa-clock me-1"></i> Time
                        </th>
                        @foreach($days as $day)
                            @php
                                $isToday = ($todayName ?? '') == $day;
                            @endphp
                            <th class="{{ $isToday ? 'today-header' : '' }}">
                                {{ $day }}
                                @if($isToday)
                                    <span class="badge bg-warning text-dark px-2 py-1 rounded-pill ms-1 fw-bold" style="font-size: 0.7rem; box-shadow: 0 2px 8px rgba(255, 234, 133, 0.4);">
                                        <i class="fa-solid fa-star me-1"></i>TODAY
                                    </span>
                                @endif
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse($timeSlots as $slot)
                        @php
                            $isBreakRow = false;
                            foreach($days as $d) {
                                if(isset($schedule[$slot][$d]) && strtolower($schedule[$slot][$d]->type) == 'break') {
                                    $isBreakRow = true;
                                    break;
                                }
                            }
                        @endphp

                        @if($isBreakRow)
                            <tr class="lunch-break-row">
                                <th class="time-column">{{ $slot }}</th>
                                <td colspan="5" class="text-center">
                                    <i class="fa-solid fa-mug-hot me-2 text-warning"></i> LUNCH BREAK & REST TIME (12:30 PM - 01:30 PM)
                                </td>
                            </tr>
                        @else
                            <tr>
                                <th class="time-column">
                                    <div class="d-flex align-items-center justify-content-center gap-1">
                                        <i class="fa-regular fa-clock text-muted opacity-75" style="font-size: 0.8rem;"></i>
                                        <span>{{ $slot }}</span>
                                    </div>
                                </th>
                                @foreach($days as $day)
                                    @php
                                        $isToday = ($todayName ?? '') == $day;
                                    @endphp
                                    <td class="{{ $isToday ? 'today-cell' : '' }}">
                                        @if(isset($schedule[$slot][$day]))
                                            @php
                                                $cell = $schedule[$slot][$day];
                                                $typeClass = 'theory';
                                                $iconClass = 'fa-book-open';
                                                
                                                if(strtolower($cell->type) == 'practical') {
                                                    $typeClass = 'practical';
                                                    $iconClass = 'fa-flask';
                                                } elseif(strtolower($cell->type) == 'workshop') {
                                                    $typeClass = 'workshop';
                                                    $iconClass = 'fa-screwdriver-wrench';
                                                }
                                            @endphp
                                            <div class="class-cell-card {{ $typeClass }}">
                                                <div class="type-tag-modern {{ $typeClass }}">
                                                    <i class="fa-solid {{ $iconClass }}"></i> {{ $cell->type }}
                                                </div>
                                                <div class="subject-title {{ $typeClass }}">{{ $cell->subject_name }}</div>
                                            </div>
                                        @else
                                            <div class="empty-cell-badge">
                                                <i class="fa-solid fa-minus"></i>
                                            </div>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <i class="fa-solid fa-calendar-xmark text-secondary mb-2 fs-2 d-block"></i>
                                <span class="fw-semibold">No timetable data available for this week.</span>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection