296 lines
13 KiB
PHP
296 lines
13 KiB
PHP
@extends('layouts.adminnav')
|
|
|
|
@section('title', 'Admin Timetable Management')
|
|
|
|
@section('content')
|
|
<style>
|
|
.bg-custom-header {
|
|
background: linear-gradient(135deg, #2c2a4a 0%, #4a4773 100%);
|
|
color: white;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* Badge Colors matching the design */
|
|
.badge-type {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 12px;
|
|
border-radius: 12px;
|
|
letter-spacing: 0.3px;
|
|
display: inline-block;
|
|
}
|
|
.badge-theory { background-color: #1e2035; color: #ffffff; }
|
|
.badge-practical { background-color: #6b1d1d; color: #ffffff; }
|
|
.badge-workshop { background-color: #ea580c; color: #ffffff; }
|
|
.badge-exam { background-color: #ca8a04; color: #ffffff; }
|
|
|
|
/* Table Custom Styles */
|
|
.table-timetable {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.table-timetable th {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-weight: 700;
|
|
padding: 14px 10px;
|
|
color: #334155;
|
|
background-color: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.table-timetable td {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 90px;
|
|
padding: 6px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
border-right: 1px solid #e2e8f0;
|
|
}
|
|
.table-timetable tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.table-timetable td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Cell Hover & Click */
|
|
.timetable-cell {
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease-in-out;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.timetable-cell:hover {
|
|
background-color: #f1f5f9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Today's Red Header Highlight */
|
|
.today-header {
|
|
background-color: #d9383a !important;
|
|
color: white !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid py-4">
|
|
|
|
<!-- Header Banner -->
|
|
<div class="p-4 mb-4 bg-custom-header shadow-sm d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h3 class="fw-bold mb-1"><i class="fa-solid fa-calendar-days me-2"></i>My Class Timetable</h3>
|
|
<p class="mb-0 text-white-50 small">Automobile Engineering Academy Timetable Management</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Messages -->
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
|
|
<i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row g-4 mb-4">
|
|
<!-- Today's Schedule Card -->
|
|
<div class="col-lg-5">
|
|
<div class="card border-0 shadow-sm rounded-3 h-100">
|
|
<div class="card-header bg-white py-3 border-0">
|
|
<h6 class="fw-bold mb-0 text-danger">
|
|
<i class="fa-solid fa-clock me-2"></i>Today's Schedule ({{ $today }})
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
@forelse($todaySchedule as $item)
|
|
<div class="p-3 mb-2 bg-light rounded border-start border-4 border-danger d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="badge badge-type badge-{{ strtolower($item->type) }} mb-1">{{ $item->type }}</span>
|
|
<h6 class="fw-bold mb-0 text-dark">{{ $item->subject_name }}</h6>
|
|
</div>
|
|
<small class="text-muted fw-bold">{{ $item->time_slot }}</small>
|
|
</div>
|
|
@empty
|
|
<p class="text-muted text-center py-4 mb-0">No classes scheduled for today.</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legend Card -->
|
|
<div class="col-lg-7">
|
|
<div class="card border-0 shadow-sm rounded-3 h-100">
|
|
<div class="card-header bg-white py-3 border-0">
|
|
<h6 class="fw-bold mb-0 text-primary">
|
|
<i class="fa-solid fa-layer-group me-2"></i>Timetable Legend
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex flex-wrap gap-2 mb-3">
|
|
<span class="badge badge-type badge-theory">Theory</span>
|
|
<span class="badge badge-type badge-practical">Practical</span>
|
|
<span class="badge badge-type badge-workshop">Workshop</span>
|
|
<span class="badge badge-type badge-exam">Exam</span>
|
|
</div>
|
|
<hr>
|
|
<p class="text-muted small mb-0">
|
|
<i class="fa-solid fa-hand-pointer me-1 text-primary"></i> <strong>How to Edit / Add:</strong> Click on any timetable slot in the table below to add or edit class details.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Timetable Grid -->
|
|
<div class="card border-0 shadow-sm rounded-3">
|
|
<div class="card-body p-3">
|
|
<div class="table-responsive">
|
|
<table class="table table-timetable mb-0 align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 15%;">Time</th>
|
|
@foreach($days as $day)
|
|
<th class="{{ strtolower($today) == strtolower($day) ? 'today-header' : '' }}">
|
|
{{ $day }} {{ strtolower($today) == strtolower($day) ? '(Today)' : '' }}
|
|
</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($timeSlots as $slot)
|
|
<tr>
|
|
<!-- Time Column -->
|
|
<td class="fw-bold text-secondary bg-light" style="font-size: 13px;">{{ $slot }}</td>
|
|
|
|
@if($slot == '12:30 - 01:30')
|
|
<!-- Lunch / Rest Time Row -->
|
|
<td colspan="5" class="bg-light text-center fw-bold text-secondary py-3" style="letter-spacing: 0.5px;">
|
|
🍱 LUNCH BREAK / REST TIME
|
|
</td>
|
|
@else
|
|
<!-- Days Columns -->
|
|
@foreach($days as $day)
|
|
@php
|
|
$item = $grid[$slot][$day] ?? null;
|
|
@endphp
|
|
<td>
|
|
<div class="timetable-cell"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#editSlotModal"
|
|
onclick="openEditModal('{{ $day }}', '{{ $slot }}', '{{ $item->subject_name ?? '' }}', '{{ $item->type ?? 'Theory' }}', '{{ $item->id ?? '' }}')">
|
|
|
|
@if($item)
|
|
<span class="badge badge-type badge-{{ strtolower($item->type) }} mb-1">
|
|
{{ $item->type }}
|
|
</span>
|
|
<div class="fw-bold text-dark small">{{ $item->subject_name }}</div>
|
|
@else
|
|
<span class="text-muted small opacity-50"><i class="fa-solid fa-plus text-primary me-1"></i>Add</span>
|
|
@endif
|
|
|
|
</div>
|
|
</td>
|
|
@endforeach
|
|
@endif
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal for Edit / Add Slot -->
|
|
<div class="modal fade" id="editSlotModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header bg-custom-header text-white">
|
|
<h5 class="modal-title" id="modalTitle"><i class="fa-solid fa-pen-to-square me-2"></i>Update Timetable Slot</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form action="{{ route('admin.timetable.store') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="day" id="modal_day">
|
|
<input type="hidden" name="time_slot" id="modal_time_slot">
|
|
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Day & Time Slot</label>
|
|
<input type="text" id="display_day_time" class="form-control bg-light" readonly>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Subject Name</label>
|
|
<input type="text" name="subject_name" id="modal_subject" class="form-control" placeholder="e.g. Engine Fundamentals" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-bold">Subject Type</label>
|
|
<select name="type" id="modal_type" class="form-select" required>
|
|
<option value="Theory">Theory</option>
|
|
<option value="Practical">Practical</option>
|
|
<option value="Workshop">Workshop</option>
|
|
<!-- <option value="Exam">Exam</option> -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer d-flex justify-content-between">
|
|
<button type="button" id="clearBtn" class="btn btn-outline-danger d-none" onclick="clearSlotData()">
|
|
<i class="fa-solid fa-trash me-1"></i> Clear Slot
|
|
</button>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk me-1"></i> Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Hidden Form to Clear Slot -->
|
|
<form id="deleteSlotForm" method="POST" class="d-none">
|
|
@csrf
|
|
@method('DELETE')
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var currentSlotId = null;
|
|
|
|
function openEditModal(day, timeSlot, subject, type, id) {
|
|
document.getElementById('modal_day').value = day;
|
|
document.getElementById('modal_time_slot').value = timeSlot;
|
|
document.getElementById('display_day_time').value = day + ' (' + timeSlot + ')';
|
|
document.getElementById('modal_subject').value = subject;
|
|
document.getElementById('modal_type').value = type || 'Theory';
|
|
|
|
currentSlotId = id;
|
|
var clearBtn = document.getElementById('clearBtn');
|
|
var modalTitle = document.getElementById('modalTitle');
|
|
|
|
if(id) {
|
|
clearBtn.classList.remove('d-none');
|
|
modalTitle.innerHTML = '<i class="fa-solid fa-pen-to-square me-2"></i>Edit Class Slot';
|
|
} else {
|
|
clearBtn.classList.add('d-none');
|
|
modalTitle.innerHTML = '<i class="fa-solid fa-plus me-2"></i>Add Class Slot';
|
|
}
|
|
}
|
|
|
|
function clearSlotData() {
|
|
if(currentSlotId && confirm('Are you sure you want to clear this timetable slot?')) {
|
|
var form = document.getElementById('deleteSlotForm');
|
|
form.action = "/admin/timetable/delete/" + currentSlotId;
|
|
form.submit();
|
|
}
|
|
}
|
|
</script>
|
|
@endsection |