<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:fragment="head(title)">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title th:text="${title} ?: 'MV Rent — Self Drive Car Rentals'">MV Rent</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
          rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/css/app.css}"/>
</head>
<body>

<!-- Combined navbar = topbar + mega-strip (used by all pages) -->
<div th:fragment="navbar">
    <header class="topbar">
        <div class="container topbar-inner">
            <div class="logo">
                <a th:href="@{/}"><img th:src="@{/images/logo.png}" alt="MV Rent"/></a>
            </div>
            <nav class="nav-top">
                <a th:href="@{/cars}">Rental Deals</a>
                <a th:href="@{/cars}">Subscription</a>
                <a th:href="@{/cars}">Our Fleet</a>
                <a th:href="@{/}">FAQs</a>
            </nav>
            <div class="auth-buttons">
                <span sec:authorize="isAuthenticated()" class="user-chip"
                      sec:authentication="name">user</span>
                <a sec:authorize="isAuthenticated()" class="btn btn-outline" th:href="@{/my-bookings}">My Bookings</a>
                <a sec:authorize="hasRole('ADMIN')" class="btn btn-outline" th:href="@{/admin}">Admin</a>
                <form sec:authorize="isAuthenticated()" th:action="@{/logout}" method="post" style="display:inline">
                    <button class="btn btn-primary" type="submit">Logout</button>
                </form>
                <a sec:authorize="!isAuthenticated()" class="btn btn-outline" th:href="@{/login}">Login</a>
                <a sec:authorize="!isAuthenticated()" class="btn btn-primary" th:href="@{/register}">Sign Up</a>
            </div>
        </div>
    </header>
    <div class="mega-strip">
        <div class="container">
            <ul>
                <li><a th:href="@{/}">Home</a></li>
                <li><a th:href="@{/cars}">Browse Cars</a></li>
                <li><a th:href="@{/cars}">Our Fleet</a></li>
                <li><a th:href="@{/}">About Us</a></li>
                <li><a th:href="@{/}">Contact Us</a></li>
                <li><a th:href="@{/}">Tours</a></li>
                <li><a th:href="@{/}">Carpool</a></li>
                <li><a th:href="@{/}">Leasing</a></li>
                <li><a th:href="@{/}">Luxe</a></li>
                <li><a th:href="@{/}">Blog</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Admin shell — fixed left sidebar + slim top strip (used only by /admin) -->
<div th:fragment="adminbar">
    <!-- Sidebar -->
    <aside class="adminside" id="adminSide">
        <div class="side-brand">
            <a th:href="@{/admin}" class="side-logo"><img th:src="@{/images/logo.png}" alt="MV Rent"/></a>
        </div>

        <nav class="side-nav">
            <a class="side-item" th:href="@{/admin}" data-match="/admin" data-title="Dashboard" title="Dashboard">
                <span class="si-ic"><svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor" aria-hidden="true"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg></span><span class="si-label">Dashboard</span>
            </a>

            <div class="side-group">Fleet</div>
            <a class="side-item" th:href="@{/admin/cars}" data-match="/admin/cars" data-title="Manage Cars" title="Cars">
                <span class="si-ic">&#128663;</span><span class="si-label">Cars</span>
            </a>
            <a class="side-item" th:href="@{/admin/drivers}" data-match="/admin/drivers" data-title="Drivers" title="Drivers">
                <span class="si-ic">&#128100;</span><span class="si-label">Drivers</span>
            </a>
            <a class="side-item" th:href="@{/admin/vendors}" data-match="/admin/vendors" data-title="Vendors" title="Vendors">
                <span class="si-ic">&#127970;</span><span class="si-label">Vendors</span>
            </a>
            <a class="side-item" th:href="@{/admin/maintenance}" data-match="/admin/maintenance" data-title="Maintenance &amp; Service" title="Maintenance">
                <span class="si-ic">&#128295;</span><span class="si-label">Maintenance</span>
            </a>
            <a class="side-item" th:href="@{/admin/inspections}" data-match="/admin/inspections" data-title="Inspections" title="Inspections">
                <span class="si-ic">&#128270;</span><span class="si-label">Inspections</span>
            </a>
            <a class="side-item" th:href="@{/admin/tracking}" data-match="/admin/tracking" data-title="Live Tracking" title="Live Tracking">
                <span class="si-ic">&#128205;</span><span class="si-label">Live Tracking</span>
            </a>

            <div class="side-group">Bookings</div>
            <a class="side-item" th:href="@{/admin/bookings}" data-match="/admin/bookings" data-title="All Bookings" title="Bookings">
                <span class="si-ic">&#128197;</span><span class="si-label">Bookings</span>
            </a>
            <a class="side-item" th:href="@{/admin/settlements}" data-match="/admin/settlements" data-title="Billing &amp; Settlements" title="Billing">
                <span class="si-ic">&#128178;</span><span class="si-label">Billing</span>
            </a>

            <div class="side-group">Insights</div>
            <a class="side-item" th:href="@{/admin/reports}" data-match="/admin/reports" data-title="Reports" title="Reports">
                <span class="si-ic">&#128202;</span><span class="si-label">Reports</span>
            </a>
            <a class="side-item" th:href="@{/admin/reviews}" data-match="/admin/reviews" data-title="Reviews &amp; Ratings" title="Reviews">
                <span class="si-ic">&#11088;</span><span class="si-label">Reviews</span>
            </a>

            <div class="side-group">Administration</div>
            <a class="side-item" sec:authorize="hasRole('ADMIN') or hasAuthority('MANAGE_USERS')"
               th:href="@{/admin/users}" data-match="/admin/users" data-title="Staff &amp; Users" title="Staff & Users">
                <span class="si-ic">&#128101;</span><span class="si-label">Staff &amp; Users</span>
            </a>
            <a class="side-item" sec:authorize="hasRole('ADMIN')"
               th:href="@{/admin/audit}" data-match="/admin/audit" data-title="Activity &amp; Audit Log" title="Audit Log">
                <span class="si-ic">&#128220;</span><span class="si-label">Audit Log</span>
            </a>
            <a class="side-item" th:href="@{/admin/settings}" data-match="/admin/settings" data-title="Settings" title="Settings">
                <span class="si-ic">&#9881;</span><span class="si-label">Settings</span>
            </a>
        </nav>
    </aside>

    <!-- Top strip -->
    <header class="admintop">
        <button class="admintop-burger" type="button" onclick="adminToggleSide(event)" aria-label="Toggle menu">
            <span></span><span></span><span></span>
        </button>
        <h1 class="admintop-title" id="adminPageTitle">Dashboard</h1>
        <div class="admintop-actions">
            <div class="userdrop">
                <button class="userdrop-trigger" type="button" onclick="toggleUserDrop(event)">
                    <span class="avatar" th:text="${cu != null ? cu.initials : 'AD'}">AD</span>
                    <span class="userdrop-name" th:text="${cu != null ? cu.fullName : 'Admin'}">Admin</span>
                    <span class="caret">&#9662;</span>
                </button>
                <div class="userdrop-menu" id="userMenu">
                    <div class="userdrop-head">
                        <span class="avatar lg" th:text="${cu != null ? cu.initials : 'AD'}">AD</span>
                        <div>
                            <div class="ud-name" th:text="${cu != null ? cu.fullName : 'Admin'}">Admin</div>
                            <div class="ud-email" th:text="${cu != null ? cu.email : ''}">email</div>
                            <span class="ud-role" th:text="${cu != null ? cu.role : 'ADMIN'}">ADMIN</span>
                        </div>
                    </div>
                    <a class="userdrop-item" th:href="@{/admin/profile}"><span>&#128100;</span> My Profile</a>
                    <a class="userdrop-item" th:href="@{/admin/settings}"><span>&#9881;</span> Settings</a>
                    <a class="userdrop-item" th:href="@{/}"><span>&#127760;</span> View Site</a>
                    <form th:action="@{/admin/logout}" method="post">
                        <button class="userdrop-item danger" type="submit"><span>&#9099;</span> Logout</button>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <!-- Backdrop for the mobile off-canvas sidebar -->
    <div class="admin-backdrop" id="adminBackdrop" onclick="adminCloseSide()"></div>

    <script>
        (function () {
            document.body.classList.add('admin-shell');
            if (localStorage.getItem('adminSideCollapsed') === '1') {
                document.body.classList.add('side-collapsed');
            }
            // Highlight the active item (longest matching path) + set the page title.
            var path = (window.location.pathname || '/').replace(/\/+$/, '') || '/admin';
            var best = null, bestLen = -1;
            document.querySelectorAll('.side-item[data-match]').forEach(function (a) {
                var m = a.getAttribute('data-match');
                var hit = (m === '/admin') ? (path === '/admin')
                                           : (path === m || path.indexOf(m + '/') === 0 || path.indexOf(m) === 0);
                if (hit && m.length > bestLen) { best = a; bestLen = m.length; }
            });
            if (best) {
                best.classList.add('active');
                var t = best.getAttribute('data-title');
                if (t) document.getElementById('adminPageTitle').textContent = t;
            }
        })();
        function adminToggleSide(e) {
            if (e) e.stopPropagation();
            if (window.innerWidth <= 900) {
                document.body.classList.toggle('side-open');
            } else {
                var c = document.body.classList.toggle('side-collapsed');
                localStorage.setItem('adminSideCollapsed', c ? '1' : '0');
            }
        }
        function adminCloseSide() { document.body.classList.remove('side-open'); }
        function toggleUserDrop(e) {
            e.stopPropagation();
            var menu = document.getElementById('userMenu');
            var open = menu.classList.toggle('open');
            if (open) {
                var r = e.currentTarget.getBoundingClientRect();
                menu.style.top = (r.bottom + 8) + 'px';
                menu.style.right = (window.innerWidth - r.right) + 'px';
            }
        }
        document.addEventListener('click', function () {
            var m = document.getElementById('userMenu');
            if (m) m.classList.remove('open');
        });
    </script>
</div>

<!-- Vendor portal top bar (reuses admin topbar structure with a vendor theme) -->
<div th:fragment="vendorbar">
    <header class="adminbar vendor">
        <div class="container adminbar-inner">
            <div class="logo">
                <a th:href="@{/vendor}"><img th:src="@{/images/logo.png}" alt="MV Rent Vendor"/></a>
            </div>
            <span class="adminbar-tag">Vendor</span>
            <nav class="adminbar-nav">
                <a th:href="@{/vendor}">Dashboard</a>
                <a th:href="@{/vendor/cars}">My Cars</a>
                <a th:href="@{/vendor/drivers}">My Drivers</a>
                <a th:href="@{/vendor/trips}">Trips</a>
                <a th:href="@{/vendor/settlements}">Settlements</a>
            </nav>
            <div class="adminbar-actions">
                <div class="userdrop">
                    <button class="userdrop-trigger" type="button" onclick="toggleUserDrop(event)">
                        <span class="avatar" th:text="${cu != null ? cu.initials : 'V'}">V</span>
                        <span class="userdrop-name" th:text="${cu != null ? cu.fullName : 'Vendor'}">Vendor</span>
                        <span class="caret">&#9662;</span>
                    </button>
                    <div class="userdrop-menu" id="userMenu">
                        <div class="userdrop-head">
                            <span class="avatar lg" th:text="${cu != null ? cu.initials : 'V'}">V</span>
                            <div>
                                <div class="ud-name" th:text="${cu != null ? cu.fullName : 'Vendor'}">Vendor</div>
                                <div class="ud-email" th:text="${cu != null ? cu.email : ''}">email</div>
                                <span class="ud-role" th:text="${cu != null ? cu.role : 'VENDOR'}">VENDOR</span>
                            </div>
                        </div>
                        <a class="userdrop-item" th:href="@{/vendor/settlements}"><span>&#128202;</span> Settlements</a>
                        <a class="userdrop-item" th:href="@{/}"><span>&#127760;</span> Main Site</a>
                        <form th:action="@{/vendor/logout}" method="post">
                            <button class="userdrop-item danger" type="submit"><span>&#9099;</span> Logout</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <script>
        (function () {
            var path = window.location.pathname;
            document.querySelectorAll('.vendor .adminbar-nav a').forEach(function (a) {
                var href = a.getAttribute('href');
                var match = (href === '/vendor') ? (path === '/vendor' || path === '/vendor/')
                                                  : path.indexOf(href) === 0;
                if (match) a.classList.add('active');
            });
        })();
        function toggleUserDrop(e) {
            e.stopPropagation();
            var menu = document.getElementById('userMenu');
            var open = menu.classList.toggle('open');
            if (open) {
                var r = e.currentTarget.getBoundingClientRect();
                menu.style.top = (r.bottom + 8) + 'px';
                menu.style.right = (window.innerWidth - r.right) + 'px';
            }
        }
        document.addEventListener('click', function () {
            var m = document.getElementById('userMenu');
            if (m) m.classList.remove('open');
        });
    </script>
</div>

<!-- Driver portal top bar (reuses the warm admin topbar style) -->
<div th:fragment="driverbar">
    <header class="adminbar driver">
        <div class="container adminbar-inner">
            <div class="logo">
                <a th:href="@{/driver}"><img th:src="@{/images/logo.png}" alt="MV Rent Driver"/></a>
            </div>
            <span class="adminbar-tag">Driver</span>
            <nav class="adminbar-nav">
                <a th:href="@{/driver}">Dashboard</a>
                <a th:href="@{/driver/trips}">My Trips</a>
                <a th:href="@{/driver/profile}">Profile</a>
            </nav>
            <div class="adminbar-actions">
                <div class="userdrop">
                    <button class="userdrop-trigger" type="button" onclick="toggleUserDrop(event)">
                        <span class="avatar" th:text="${cu != null ? cu.initials : 'D'}">D</span>
                        <span class="userdrop-name" th:text="${cu != null ? cu.fullName : 'Driver'}">Driver</span>
                        <span class="caret">&#9662;</span>
                    </button>
                    <div class="userdrop-menu" id="userMenu">
                        <div class="userdrop-head">
                            <span class="avatar lg" th:text="${cu != null ? cu.initials : 'D'}">D</span>
                            <div>
                                <div class="ud-name" th:text="${cu != null ? cu.fullName : 'Driver'}">Driver</div>
                                <div class="ud-email" th:text="${cu != null ? cu.email : ''}">email</div>
                                <span class="ud-role" th:text="${cu != null ? cu.role : 'DRIVER'}">DRIVER</span>
                            </div>
                        </div>
                        <a class="userdrop-item" th:href="@{/driver/profile}"><span>&#128100;</span> My Profile</a>
                        <a class="userdrop-item" th:href="@{/driver/trips}"><span>&#128205;</span> My Trips</a>
                        <form th:action="@{/driver/logout}" method="post">
                            <button class="userdrop-item danger" type="submit"><span>&#9099;</span> Logout</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <script>
        (function () {
            var path = window.location.pathname;
            document.querySelectorAll('.driver .adminbar-nav a').forEach(function (a) {
                var href = a.getAttribute('href');
                var match = (href === '/driver') ? (path === '/driver' || path === '/driver/')
                                                  : path.indexOf(href) === 0;
                if (match) a.classList.add('active');
            });
        })();
        function toggleUserDrop(e) {
            e.stopPropagation();
            var menu = document.getElementById('userMenu');
            var open = menu.classList.toggle('open');
            if (open) {
                var r = e.currentTarget.getBoundingClientRect();
                menu.style.top = (r.bottom + 8) + 'px';
                menu.style.right = (window.innerWidth - r.right) + 'px';
            }
        }
        document.addEventListener('click', function () {
            var m = document.getElementById('userMenu');
            if (m) m.classList.remove('open');
        });
    </script>
</div>

<!-- (legacy aliases kept for older template references) -->
<header th:fragment="topbar" class="topbar">
    <div class="container topbar-inner">
        <div class="logo">
            <a th:href="@{/}"><img th:src="@{/images/logo.png}" alt="MV Rent"/></a>
        </div>
        <nav class="nav-top">
            <a th:href="@{/cars}">Rental Deals</a>
            <a th:href="@{/cars}">Subscription</a>
            <a th:href="@{/cars}">Our Fleet</a>
            <a href="#testimonials">FAQs</a>
        </nav>
        <div class="auth-buttons">
            <span sec:authorize="isAuthenticated()" class="user-chip"
                  sec:authentication="name">user</span>
            <a sec:authorize="isAuthenticated()" class="btn btn-outline" th:href="@{/my-bookings}">My Bookings</a>
            <a sec:authorize="hasRole('ADMIN')" class="btn btn-outline" th:href="@{/admin}">Admin</a>
            <form sec:authorize="isAuthenticated()" th:action="@{/logout}" method="post"
                  style="display:inline">
                <button class="btn btn-primary" type="submit">Logout</button>
            </form>
            <a sec:authorize="!isAuthenticated()" class="btn btn-outline" th:href="@{/login}">Login</a>
            <a sec:authorize="!isAuthenticated()" class="btn btn-primary" th:href="@{/register}">Sign Up</a>
        </div>
    </div>
</header>

<!-- Mega menu strip -->
<div th:fragment="megastrip" class="mega-strip">
    <div class="container">
        <ul>
            <li><a th:href="@{/}">Home</a></li>
            <li><a th:href="@{/cars}">Browse Cars</a></li>
            <li><a th:href="@{/cars}">Our Fleet</a></li>
            <li><a th:href="@{/}">About Us</a></li>
            <li><a th:href="@{/}">Contact Us</a></li>
            <li><a th:href="@{/}">Tours</a></li>
            <li><a th:href="@{/}">Carpool</a></li>
            <li><a th:href="@{/}">Leasing</a></li>
            <li><a th:href="@{/}">Luxe</a></li>
            <li><a th:href="@{/}">Blog</a></li>
        </ul>
    </div>
</div>

<!-- Footer -->
<footer th:fragment="footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-col footer-logo">
                <div class="footer-logo-text">MV<span>Rent</span></div>
                <p style="font-size:13px;line-height:1.7">Self drive car rentals across South India. Book online, drive anywhere.</p>
                <div class="social">
                    <a href="#" aria-label="Facebook">f</a>
                    <a href="#" aria-label="Instagram">&#9737;</a>
                    <a href="#" aria-label="LinkedIn">in</a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a th:href="@{/}">Home</a></li>
                    <li><a th:href="@{/cars}">Browse Cars</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Our Fleet</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Account</h4>
                <ul>
                    <li><a th:href="@{/register}">Sign Up</a></li>
                    <li><a th:href="@{/login}">Login</a></li>
                    <li><a sec:authorize="isAuthenticated()" th:href="@{/my-bookings}">My Bookings</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Get in Touch</h4>
                <div class="contact-info">
                    &#9742; +91 790 281 0000<br/>
                    &#9993; support@mvrent.com
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <span>Copyright &copy; 2026 MV Rent. All rights reserved.</span>
            <div class="policies">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms &amp; Conditions</a>
                <a href="#">Refund Policy</a>
                <a href="#">Cancellation Policy</a>
            </div>
        </div>
    </div>
</footer>

</body>
</html>
