345 lines
11 KiB
PHP
345 lines
11 KiB
PHP
@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 |