@extends('layouts.studentportalnav')

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

@section('content')

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
:root {
    --theme-navy: #2D355B;        /* Primary Navy */
    --theme-navy-dark: #1F2541;   /* Dark Navy */
    --theme-red: #822424;         /* Primary Accent Red */
    --theme-red-hover: #df2c3e;   /* Red Hover */
    --theme-yellow: #FFEA85;      /* Accent Yellow/Gold */
    --bg-light: #F6F6F6;          /* Page Background */
    --white: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
}

/* Page Header Hero Section */
.page-header {
    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
    color: var(--white);
    padding: 35px 30px;
    border-radius: 16px;
    margin-bottom: 30px;
    box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
    border-left: 5px solid var(--theme-red);
}

.page-header h2 {
    font-weight: 700;
}

.page-header p {
    opacity: .85;
}

/* Info Cards & Wrapper */
.info-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
}

.today-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
    padding: 25px;
    height: 100%;
}

.today-card h5, 
.info-card h5 {
    font-weight: 600;
    color: var(--theme-navy);
}

/* Timetable Card Section */
.table-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.table thead {
    background: var(--theme-navy);
    color: var(--white);
}

.table thead th {
    font-weight: 600;
    padding: 15px 10px;
}

.table td,
.table th {
    text-align: center;
    vertical-align: middle;
    min-width: 140px;
}

.table tbody th {
    background-color: #f8fafc;
    color: var(--theme-navy);
    font-weight: 600;
}

/* Updated Status Badges */
.badge-theory {
    background: var(--theme-navy) !important;
    color: var(--white) !important;
}

.badge-practical {
    background: var(--theme-red) !important;
    color: var(--white) !important;
}

.badge-workshop {
    background: #e67e22 !important; /* Workshop Accent */
    color: var(--white) !important;
}

.badge-break {
    background: var(--theme-yellow) !important;
    color: var(--theme-navy-dark) !important;
    font-weight: 600;
}

.table tbody tr:hover {
    background: rgba(45, 53, 91, 0.02);
    transition: .3s;
}

.lunch-row {
    background-color: rgba(255, 234, 133, 0.25) !important;
    color: var(--theme-navy-dark);
    font-weight: 600;
}

.legend span {
    margin-right: 12px;
    display: inline-block;
    margin-bottom: 8px;
}

.legend .badge {
    padding: 8px 14px;
    font-size: 12px;
}

/* Custom Buttons */
.download-btn {
    border-radius: 8px;
    padding: 10px 22px;
    background-color: var(--theme-red) !important;
    color: var(--white) !important;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.download-btn:hover {
    background-color: var(--theme-red-hover) !important;
    color: var(--white) !important;
}

@media(max-width:768px) {
    .table td,
    .table th {
        font-size: 13px;
        min-width: 120px;
    }

    .page-header {
        padding: 25px;
    }
}
</style>

<div class="container py-4">

    <!-- Header -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h2 class="mb-1"><i class="fas fa-calendar-alt me-2" style="color: var(--theme-yellow);"></i>My Class Timetable</h2>
                <p class="mb-0">
                    Automobile Engineering Academy Student Portal
                </p>
            </div>

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

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

        <!-- Today's Schedule Card -->
        <div class="col-lg-4">
            <div class="today-card">
                <h5 class="mb-3">
                    <i class="fas fa-clock me-2" style="color: var(--theme-red);"></i>
                    Today's Schedule ({{ $todayName ?? 'Today' }})
                </h5>

                @forelse($todaySchedule ?? [] as $todayItem)
                    @php
                        $borderStyle = 'var(--theme-navy)';
                        $badgeClass = 'badge-theory';
                        
                        if(strtolower($todayItem->type) == 'practical') {
                            $borderStyle = 'var(--theme-red)';
                            $badgeClass = 'badge-practical';
                        } elseif(strtolower($todayItem->type) == 'workshop') {
                            $borderStyle = '#e67e22';
                            $badgeClass = 'badge-workshop';
                        }
                    @endphp

                    <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid {{ $borderStyle }};">
                        <strong>{{ $todayItem->time_slot }}</strong><br>
                        <span class="badge {{ $badgeClass }} me-1">{{ $todayItem->type }}</span>
                        <span>{{ $todayItem->subject_name }}</span>
                    </div>
                @empty
                    <div class="p-3 text-center text-muted border rounded">
                        <i class="fas fa-coffee me-1"></i> No classes scheduled for today!
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Legend Card -->
        <div class="col-lg-8">
            <div class="info-card p-4 h-100 d-flex flex-column justify-content-between">
                <div>
                    <h5 class="mb-3">
                        <i class="fas fa-info-circle me-2" style="color: var(--theme-navy);"></i>
                        Timetable Legend
                    </h5>

                    <div class="legend mb-2">
                        <span>
                            <span class="badge badge-theory">Theory</span>
                        </span>
                        <span>
                            <span class="badge badge-practical">Practical</span>
                        </span>
                        <span>
                            <span class="badge badge-workshop">Workshop</span>
                        </span>
                        <span>
                            <span class="badge badge-break">Break</span>
                        </span>
                    </div>
                </div>

                <div>
                    <hr class="text-muted">
                    <p class="mb-0 text-muted small">
                        <i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
                        Please arrive at least 15 minutes before each class. Attendance is compulsory for all practical sessions.
                    </p>
                </div>
            </div>
        </div>

    </div>

    <!-- Timetable Grid -->
    <div class="table-card">
        <div class="table-responsive">
            <table class="table table-bordered align-middle mb-0">
                <thead>
                    <tr>
                        <th>Time</th>
                        @foreach($days as $day)
                            <th class="{{ ($todayName ?? '') == $day ? 'bg-danger text-white' : '' }}">
                                {{ $day }} {{ ($todayName ?? '') == $day ? '(Today)' : '' }}
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse($timeSlots as $slot)
                        @php
                            // Lunch/Break Check
                            $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-row">
                                <th>{{ $slot }}</th>
                                <td colspan="5">
                                    🍴 LUNCH BREAK / REST TIME
                                </td>
                            </tr>
                        @else
                            <tr>
                                <th>{{ $slot }}</th>
                                @foreach($days as $day)
                                    <td>
                                        @if(isset($schedule[$slot][$day]))
                                            @php
                                                $cell = $schedule[$slot][$day];
                                                $typeClass = 'badge-theory';
                                                
                                                if(strtolower($cell->type) == 'practical') {
                                                    $typeClass = 'badge-practical';
                                                } elseif(strtolower($cell->type) == 'workshop') {
                                                    $typeClass = 'badge-workshop';
                                                }
                                            @endphp
                                            <span class="badge {{ $typeClass }} mb-1">{{ $cell->type }}</span><br>
                                            {{ $cell->subject_name }}
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endif
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-4 text-muted">
                                <i class="fas fa-info-circle me-1"></i> No timetable data available right now.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection