@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>
body{
    font-family:'Poppins',sans-serif;
    background:#f4f7fc;
}

.page-header{
    background:linear-gradient(135deg,#9954b8,#4f3d5b));
    color:#fff;
    padding:45px;
    border-radius:20px;
    background-color: #5E244E;
    margin-bottom:30px;
}

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

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

.info-card{
    border:none;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.table-card{
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
}

.table thead{
    background:#0d6efd;
    color:#fff;
}

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

.badge-theory{
    background:#0d6efd;
}

.badge-practical{
    background:#198754;
}

.badge-workshop{
    background:#fd7e14;
}

.badge-break{
    background:#ffc107;
    color:#000;
}

.table tbody tr:hover{
    background:#f8fbff;
    transition:.3s;
}

.legend span{
    margin-right:15px;
}

.legend .badge{
    padding:8px 12px;
}

.today-card{
    background:white;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    padding:25px;
    height:100%;
}

.today-card h5{
    font-weight:600;
}

.download-btn{
    border-radius:50px;
    padding:10px 25px;
}

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

            <div>

                <h2><i class="fas fa-calendar-alt me-2"></i>My Class Timetable</h2>

                <p class="mb-0">
                    Automobile Engineering Academy Student Portal
                </p>

            </div>

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

        </div>

    </div>

    <div class="row g-4 mb-4">

        <div class="col-lg-4">

            <div class="today-card">

                <h5 class="mb-3">
                    <i class="fas fa-clock text-primary me-2"></i>
                    Today's Classes
                </h5>

                <div class="mb-3">

                    <strong>08:30 - 10:30</strong><br>

                    <span class="badge badge-theory">
                        Theory
                    </span>

                    Engine Fundamentals

                </div>

                <div class="mb-3">

                    <strong>10:45 - 12:30</strong><br>

                    <span class="badge badge-workshop">
                        Workshop
                    </span>

                    Practical Session

                </div>

                <div>

                    <strong>01:30 - 03:30</strong><br>

                    <span class="badge badge-practical">
                        Practical
                    </span>

                    Electrical System

                </div>

            </div>

        </div>

        <div class="col-lg-8">

            <div class="info-card p-4 h-100">

                <h5 class="mb-3">
                    <i class="fas fa-info-circle text-primary me-2"></i>
                    Timetable Legend
                </h5>

                <div class="legend">

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

                <hr>

                <p class="mb-0 text-muted">
                    Please arrive at least 15 minutes before each class.
                    Attendance is compulsory for all practical sessions.
                </p>

            </div>

        </div>

    </div>

    <!-- Timetable -->

    <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">Theory</span><br>
                        Engine Fundamentals
                    </td>

                    <td>
                        <span class="badge badge-practical">Practical</span><br>
                        Engine Lab
                    </td>

                    <td>
                        <span class="badge badge-theory">Theory</span><br>
                        Transmission
                    </td>

                    <td>
                        <span class="badge badge-workshop">Workshop</span><br>
                        Engine Repair
                    </td>

                    <td>
                        <span class="badge badge-theory">Theory</span><br>
                        Vehicle Safety
                    </td>

                </tr>

                <tr>

                    <th>10:45 - 12:30</th>

                    <td>
                        <span class="badge badge-workshop">Workshop</span><br>
                        Service Practice
                    </td>

                    <td>
                        <span class="badge badge-theory">Theory</span><br>
                        Electrical
                    </td>

                    <td>
                        <span class="badge badge-practical">Practical</span><br>
                        Diagnostics
                    </td>

                    <td>
                        <span class="badge badge-theory">Theory</span><br>
                        Fuel System
                    </td>

                    <td>
                        <span class="badge badge-workshop">Workshop</span><br>
                        Engine Assembly
                    </td>

                </tr>

                <tr class="table-warning">

                    <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">Practical</span><br>
                        Electrical System
                    </td>

                    <td>
                        <span class="badge badge-workshop">Workshop</span><br>
                        Welding
                    </td>

                    <td>
                        <span class="badge badge-theory">Theory</span><br>
                        Auto Electronics
                    </td>

                    <td>
                        <span class="badge badge-practical">Practical</span><br>
                        Brake System
                    </td>

                    <td>
                        <span class="badge badge-theory">Theory</span><br>
                        Revision
                    </td>

                </tr>

                </tbody>

            </table>

        </div>

    </div>

</div>

@endsection