79 lines
4.1 KiB
PHP
79 lines
4.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@yield('title') - On The Road</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<script>
|
|
// Check for saved dark mode preference
|
|
if (localStorage.getItem('darkMode') === 'true' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-slate-900 transition-colors">
|
|
<!-- Sidebar -->
|
|
<div class="fixed left-0 top-0 h-full w-64 bg-slate-800 dark:bg-slate-950 border-r border-slate-700">
|
|
<div class="p-5 border-b border-slate-700">
|
|
<h1 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<i class="fas fa-road text-blue-400"></i>
|
|
On The Road
|
|
</h1>
|
|
<p class="text-slate-400 text-xs mt-1">Car Rental Management</p>
|
|
</div>
|
|
<nav class="mt-3 px-3">
|
|
<a href="{{ route('dashboard') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-lg {{ request()->routeIs('dashboard') ? 'bg-blue-600 text-white' : 'text-slate-300 hover:bg-slate-700' }}">
|
|
<i class="fas fa-chart-line w-5"></i> Dashboard
|
|
</a>
|
|
<a href="{{ route('cars.index') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-lg {{ request()->routeIs('cars.*') ? 'bg-blue-600 text-white' : 'text-slate-300 hover:bg-slate-700' }} mt-1">
|
|
<i class="fas fa-car w-5"></i> Fleet
|
|
</a>
|
|
<a href="{{ route('customers.index') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-lg {{ request()->routeIs('customers.*') ? 'bg-blue-600 text-white' : 'text-slate-300 hover:bg-slate-700' }} mt-1">
|
|
<i class="fas fa-users w-5"></i> Customers
|
|
</a>
|
|
<a href="{{ route('rentals.index') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-lg {{ request()->routeIs('rentals.*') ? 'bg-blue-600 text-white' : 'text-slate-300 hover:bg-slate-700' }} mt-1">
|
|
<i class="fas fa-calendar-check w-5"></i> Rentals
|
|
</a>
|
|
<a href="{{ route('services.index') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-lg {{ request()->routeIs('services.*') ? 'bg-blue-600 text-white' : 'text-slate-300 hover:bg-slate-700' }} mt-1">
|
|
<i class="fas fa-tools w-5"></i> Services
|
|
</a>
|
|
<a href="{{ route('payments.index') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-lg {{ request()->routeIs('payments.*') ? 'bg-blue-600 text-white' : 'text-slate-300 hover:bg-slate-700' }} mt-1">
|
|
<i class="fas fa-credit-card w-5"></i> Payments
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Dark Mode Toggle -->
|
|
<div class="absolute bottom-4 left-0 right-0 px-3">
|
|
<button onclick="toggleDarkMode()" class="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white text-sm">
|
|
<i class="fas fa-moon" id="darkModeIcon"></i>
|
|
<span id="darkModeText">Dark Mode</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="ml-64 p-8">
|
|
@yield('content')
|
|
</div>
|
|
|
|
<script>
|
|
function toggleDarkMode() {
|
|
document.documentElement.classList.toggle('dark');
|
|
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
|
|
updateDarkModeButton();
|
|
}
|
|
|
|
function updateDarkModeButton() {
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
document.getElementById('darkModeIcon').className = isDark ? 'fas fa-sun w-5' : 'fas fa-moon w-5';
|
|
document.getElementById('darkModeText').textContent = isDark ? 'Light Mode' : 'Dark Mode';
|
|
}
|
|
|
|
// Initialize button state
|
|
updateDarkModeButton();
|
|
</script>
|
|
</body>
|
|
</html>
|