544 lines
19 KiB
PHP
544 lines
19 KiB
PHP
@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 |