@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
                </h5>

                <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-navy);">
                    <strong>08:30 - 10:30</strong><br>
                    <span class="badge badge-theory me-1">Theory</span>
                    <span>Engine Fundamentals</span>
                </div>

                <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid #e67e22;">
                    <strong>10:45 - 12:30</strong><br>
                    <span class="badge badge-workshop me-1">Workshop</span>
                    <span>Practical Session</span>
                </div>

                <div class="p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-red);">
                    <strong>01:30 - 03:30</strong><br>
                    <span class="badge badge-practical me-1">Practical</span>
                    <span>Electrical System</span>
                </div>
            </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>
                        <th>Monday</th>
                        <th>Tuesday</th>
                        <th>Wednesday</th>
                        <th>Thursday</th>
                        <th>Friday</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>08:30 - 10:30</th>
                        <td>
                            <span class="badge badge-theory mb-1">Theory</span><br>
                            Engine Fundamentals
                        </td>
                        <td>
                            <span class="badge badge-practical mb-1">Practical</span><br>
                            Engine Lab
                        </td>
                        <td>
                            <span class="badge badge-theory mb-1">Theory</span><br>
                            Transmission
                        </td>
                        <td>
                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                            Engine Repair
                        </td>
                        <td>
                            <span class="badge badge-theory mb-1">Theory</span><br>
                            Vehicle Safety
                        </td>
                    </tr>

                    <tr>
                        <th>10:45 - 12:30</th>
                        <td>
                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                            Service Practice
                        </td>
                        <td>
                            <span class="badge badge-theory mb-1">Theory</span><br>
                            Electrical
                        </td>
                        <td>
                            <span class="badge badge-practical mb-1">Practical</span><br>
                            Diagnostics
                        </td>
                        <td>
                            <span class="badge badge-theory mb-1">Theory</span><br>
                            Fuel System
                        </td>
                        <td>
                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                            Engine Assembly
                        </td>
                    </tr>

                    <tr class="lunch-row">
                        <th>12:30 - 01:30</th>
                        <td colspan="5">
                            🍴 LUNCH BREAK
                        </td>
                    </tr>

                    <tr>
                        <th>01:30 - 03:30</th>
                        <td>
                            <span class="badge badge-practical mb-1">Practical</span><br>
                            Electrical System
                        </td>
                        <td>
                            <span class="badge badge-workshop mb-1">Workshop</span><br>
                            Welding
                        </td>
                        <td>
                            <span class="badge badge-theory mb-1">Theory</span><br>
                            Auto Electronics
                        </td>
                        <td>
                            <span class="badge badge-practical mb-1">Practical</span><br>
                            Brake System
                        </td>
                        <td>
                            <span class="badge badge-theory mb-1">Theory</span><br>
                            Revision
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection