579 lines
18 KiB
PHP
579 lines
18 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>@yield('title', 'Winery - Winemaker')</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
<style>
|
|
html {
|
|
font-size: 80%;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background-color: #f8f9fa;
|
|
color: #333;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Top Navigation Bar */
|
|
.top-bar {
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
padding: 0;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-container {
|
|
max-width: 85%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 2rem;
|
|
height: 60px;
|
|
}
|
|
|
|
.nav-brand {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #1a365d;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Hamburger Menu Button */
|
|
.hamburger-button {
|
|
display: none;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
color: #1a365d;
|
|
}
|
|
|
|
.hamburger-button:hover {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.hamburger-icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
width: 20px;
|
|
height: 20px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hamburger-icon span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 3px;
|
|
background: #1a365d;
|
|
border-radius: 2px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hamburger-button.active .hamburger-icon span:nth-child(1) {
|
|
transform: rotate(45deg) translate(6px, 6px);
|
|
}
|
|
|
|
.hamburger-button.active .hamburger-icon span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger-button.active .hamburger-icon span:nth-child(3) {
|
|
transform: rotate(-45deg) translate(6px, -6px);
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
list-style: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-item-has-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #1a365d;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-link.with-caret {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.nav-link svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.nav-submenu {
|
|
position: absolute;
|
|
top: 105%;
|
|
left: 0;
|
|
display: none;
|
|
flex-direction: column;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
|
|
min-width: 200px;
|
|
padding: 0.75rem 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-item-has-dropdown::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 10px;
|
|
}
|
|
|
|
.nav-item-has-dropdown:hover .nav-submenu,
|
|
.nav-item-has-dropdown:focus-within .nav-submenu {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-submenu a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.55rem 1.2rem;
|
|
color: #1a365d;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.nav-submenu a:hover {
|
|
background: rgba(99, 102, 241, 0.08);
|
|
}
|
|
|
|
.nav-submenu a.active {
|
|
font-weight: 600;
|
|
background: rgba(99, 102, 241, 0.15);
|
|
}
|
|
|
|
.nav-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 1.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.user-menu {
|
|
position: relative;
|
|
}
|
|
|
|
/* Extend hover area downward to prevent dropdown from closing */
|
|
.user-menu::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.user-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: #1a365d;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.user-button:hover {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: calc(100% + 0.5rem);
|
|
right: 0;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
min-width: 180px;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.user-menu:hover .dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: block;
|
|
padding: 0.75rem 1rem;
|
|
color: #333;
|
|
text-decoration: none;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.dropdown-item-logout {
|
|
display: block;
|
|
padding: 0.75rem 1rem;
|
|
color: #dc3545;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
border-left: 2px solid #dc3545;
|
|
border-right: 2px solid #dc3545;
|
|
border-bottom: 2px solid #dc3545;
|
|
border-top: 2px solid #dc3545;
|
|
border-bottom-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
margin: 0;
|
|
width: 100%;
|
|
background: white;
|
|
}
|
|
|
|
.dropdown-item-logout:hover {
|
|
background: #f8f9fa !important;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background: #e9ecef;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
/* Flash Messages */
|
|
.flash-messages {
|
|
max-width: 85%;
|
|
margin: 1rem auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.alert {
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.alert-info {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
|
|
/* Main Content */
|
|
main {
|
|
flex: 1;
|
|
max-width: 85%;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background: #2c3e50;
|
|
color: #ecf0f1;
|
|
padding: 2rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 85%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Icons */
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 968px) {
|
|
.nav-container {
|
|
padding: 0 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nav-brand {
|
|
order: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.hamburger-button {
|
|
display: flex;
|
|
order: 2;
|
|
justify-content: center;
|
|
flex: 1;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.nav-actions {
|
|
order: 3;
|
|
gap: 0.75rem;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.nav-menu {
|
|
order: 4;
|
|
display: none;
|
|
position: absolute;
|
|
top: 60px;
|
|
left: 0;
|
|
right: 0;
|
|
flex-direction: column;
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
padding: 1rem;
|
|
gap: 0.5rem;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 999;
|
|
}
|
|
|
|
.nav-menu.active {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-menu li {
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
main {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
@stack('styles')
|
|
</head>
|
|
<body>
|
|
<!-- Top Navigation Bar -->
|
|
<nav class="top-bar">
|
|
<div class="nav-container">
|
|
<a href="{{ route('winemaker.dashboard') }}" class="nav-brand">
|
|
<svg class="icon" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 2.18l8 3.6v8.55c0 4.45-2.94 8.62-7 9.67-4.06-1.05-7-5.22-7-9.67V7.78l6-2.7v13.48h2V4.18z"/>
|
|
</svg>
|
|
Winery
|
|
</a>
|
|
|
|
<button class="hamburger-button" id="mobile-menu-button" aria-label="Toggle navigation">
|
|
<div class="hamburger-icon">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</button>
|
|
|
|
<ul class="nav-menu" id="mobile-menu">
|
|
<li><a href="{{ route('winemaker.dashboard') }}" class="nav-link {{ request()->routeIs('winemaker.dashboard') ? 'active' : '' }}">Home</a></li>
|
|
@php
|
|
$vineyardActive = request()->routeIs('vineyard-rows.*') || request()->routeIs('vineyard.map*');
|
|
@endphp
|
|
<li class="nav-item-has-dropdown">
|
|
<a href="{{ route('vineyard.map') }}" class="nav-link with-caret {{ $vineyardActive ? 'active' : '' }}">
|
|
Vineyard
|
|
<svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.25 8.27a.75.75 0 01-.02-1.06z" clip-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
<div class="nav-submenu" role="menu">
|
|
<a href="{{ route('vineyard.map') }}" class="{{ request()->routeIs('vineyard.map') ? 'active' : '' }}" role="menuitem">Map Overview</a>
|
|
<a href="{{ route('vineyard.map.edit') }}" class="{{ request()->routeIs('vineyard.map.edit') ? 'active' : '' }}" role="menuitem">Map Editor</a>
|
|
<a href="{{ route('vineyard-rows.index') }}" class="{{ request()->routeIs('vineyard-rows.*') ? 'active' : '' }}" role="menuitem">Row Directory</a>
|
|
</div>
|
|
</li>
|
|
<li><a href="{{ route('winemaker.harvests.index') }}" class="nav-link {{ request()->routeIs('winemaker.harvests.*') ? 'active' : '' }}">Harvests</a></li>
|
|
<li><a href="{{ route('winemaker.cellar.index') }}" class="nav-link {{ request()->routeIs('winemaker.cellar.*') ? 'active' : '' }}">Cellar</a></li>
|
|
<li><a href="{{ route('winemaker.sales.index') }}" class="nav-link {{ request()->routeIs('winemaker.sales.*') ? 'active' : '' }}">Sales</a></li>
|
|
</ul>
|
|
|
|
<div class="nav-actions">
|
|
<!-- User Menu -->
|
|
@auth
|
|
<div class="user-menu">
|
|
<button class="user-button">
|
|
<svg class="icon" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
</svg>
|
|
{{ auth()->user()->username }}
|
|
<svg class="icon" style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a href="{{ route('catalog.index') }}" class="dropdown-item">View Catalog</a>
|
|
<form action="{{ route('logout') }}" method="POST" style="margin: 0; margin-top: 0.5rem;">
|
|
@csrf
|
|
<button type="submit" class="dropdown-item-logout" style="width: 100%; text-align: left; background: none; cursor: pointer; font: inherit;">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<a href="{{ route('login') }}" class="user-button" style="text-decoration: none;">
|
|
<svg class="icon" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/>
|
|
</svg>
|
|
Login
|
|
</a>
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Flash Messages -->
|
|
@if(session('success') || session('error') || session('info'))
|
|
<div class="flash-messages">
|
|
@if(session('success'))
|
|
<div class="alert alert-success">
|
|
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-error">
|
|
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('info'))
|
|
<div class="alert alert-info">
|
|
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ session('info') }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
@yield('content')
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer-content">
|
|
<p>© {{ date('Y') }} Winery. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
@stack('scripts')
|
|
|
|
<script>
|
|
// Mobile menu toggle
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuButton && mobileMenu) {
|
|
mobileMenuButton.addEventListener('click', function() {
|
|
mobileMenuButton.classList.toggle('active');
|
|
mobileMenu.classList.toggle('active');
|
|
});
|
|
|
|
// Close menu when clicking on a link
|
|
const menuLinks = mobileMenu.querySelectorAll('.nav-link');
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
mobileMenuButton.classList.remove('active');
|
|
mobileMenu.classList.remove('active');
|
|
});
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target)) {
|
|
mobileMenuButton.classList.remove('active');
|
|
mobileMenu.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|