<!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', $branding['company_name'] . ' Marketplace')</title>
    
    <!-- Meta tags for SEO -->
    <meta name="description" content="@yield('meta_description', $branding['meta_description'])">
    <meta property="og:title" content="@yield('title', $branding['company_name'])">
    <meta property="og:description" content="@yield('meta_description', $branding['meta_description'])">
    <meta property="og:type" content="website">
    @if($branding['favicon_url'])
        <link rel="icon" href="{{ $branding['favicon_url'] }}" type="image/png">
    @endif
    
    <!-- Bootstrap 5 CSS via CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons via CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    <!-- Custom assets (Vite build + ?v= cache busting) -->
    @include('partials.vite-assets')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @yield('styles')
</head>
<body class="site-layout">

    <!-- STICKY HEADER NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-mj sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="{{ route('home') }}" data-turbo-frame="main-content">
                @include('partials.brand-logo')
            </a>
            
            <!-- Mobile Account Toggle (Replaces Hamburger) -->
            <div class="d-flex d-lg-none align-items-center">
                @auth
                    <div class="dropdown">
                        <a href="#" class="text-dark fs-3 text-decoration-none" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-person-circle text-danger"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 rounded-4 mt-2 position-absolute">
                            <li><a class="dropdown-item py-2" href="{{ Auth::user()->is_admin ? route('admin.profile.edit') : route('customer.profile') }}" @if(Auth::user()->is_admin) data-turbo="false" @else data-turbo-frame="main-content" @endif><i class="bi bi-person me-2"></i>My Profile</a></li>
                            @if(Auth::user()->is_admin)
                                <li><a class="dropdown-item py-2" href="{{ route('admin.dashboard') }}" data-turbo="false"><i class="bi bi-speedometer2 me-2 text-primary"></i>MJ Admin</a></li>
                            @endif
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('logout') }}" method="POST" class="d-inline" data-turbo="false">
                                    @csrf
                                    <button type="submit" class="dropdown-item text-danger py-2"><i class="bi bi-box-arrow-right me-2"></i>Logout</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                @else
                    <a href="{{ route('login') }}" data-turbo-frame="main-content" class="text-dark fs-3 text-decoration-none">
                        <i class="bi bi-person-circle text-secondary"></i>
                    </a>
                @endauth
            </div>
            
            <div class="collapse navbar-collapse" id="mainNavbar">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
                    <li class="nav-item d-none d-lg-block">
                        <a class="nav-link {{ Route::is('home') ? 'active text-danger fw-bold' : '' }}" href="{{ route('home') }}" data-turbo-frame="main-content">Home</a>
                    </li>
                    <li class="nav-item d-none d-lg-block">
                        <a class="nav-link {{ Route::is('marketplace.*') ? 'active text-danger fw-bold' : '' }}" href="{{ route('marketplace.index') }}" data-turbo-frame="main-content">Shop Marketplace</a>
                    </li>
                    <li class="nav-item d-none d-lg-block">
                        <a class="nav-link {{ Route::is('services.*') ? 'active text-danger fw-bold' : '' }}" href="{{ route('services.index') }}" data-turbo-frame="main-content">Repair Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('gallery.index') ? 'active text-danger fw-bold' : '' }}" href="{{ route('gallery.index') }}" data-turbo-frame="main-content">Gallery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('blog.*') ? 'active text-danger fw-bold' : '' }}" href="{{ route('blog.index') }}" data-turbo-frame="main-content">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('about') ? 'active text-danger fw-bold' : '' }}" href="{{ route('about') }}" data-turbo-frame="main-content">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('contact.index') ? 'active text-danger fw-bold' : '' }}" href="{{ route('contact.index') }}" data-turbo-frame="main-content">Contact</a>
                    </li>
                </ul>

                <!-- Desktop Search Bar -->
                <form action="{{ route('marketplace.index') }}" method="GET" data-turbo-frame="main-content" class="d-none d-lg-flex me-3 position-relative" style="width: 250px;">
                    <input class="form-control rounded-pill pe-5" type="search" name="q" placeholder="Search bikes, brands..." value="{{ request('q') }}" aria-label="Search">
                    <button class="btn position-absolute end-0 top-0 text-secondary border-0" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </form>

                <!-- Right Nav actions -->
                <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3 mt-3 mt-lg-0 mb-3 mb-lg-0">
                    <!-- Wishlist Icon -->
                    <a href="{{ route('wishlist.index') }}" data-turbo-frame="main-content" class="text-secondary position-relative fs-5 d-none d-lg-block">
                        <i class="bi bi-heart"></i>
                        @if(session()->has('wishlist') && count(session('wishlist')) > 0)
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 8px;">
                                {{ count(session('wishlist')) }}
                            </span>
                        @endif
                    </a>

                    <!-- Shopping Cart Icon -->
                    <a href="{{ route('cart.index') }}" data-turbo-frame="main-content" class="text-secondary position-relative fs-5 me-2 d-none d-lg-block">
                        <i class="bi bi-cart3"></i>
                        @if(session()->has('cart') && count(session('cart')) > 0)
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="cartBadge" style="font-size: 8px;">
                                {{ count(session('cart')) }}
                            </span>
                        @endif
                    </a>

                    <!-- User authentication menu -->
                    @auth
                        <div class="dropdown w-100 w-lg-auto d-none d-lg-block">
                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle rounded-pill px-3 w-100 w-lg-auto text-start text-lg-center d-flex justify-content-between align-items-center d-lg-inline-flex" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
                                <span><i class="bi bi-user-circle me-1"></i> {{ Auth::user()->name }}</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-lg-end shadow-sm border-0 rounded-4 w-100 w-lg-auto mt-2" aria-labelledby="userMenu">
                                <li><a class="dropdown-item py-2" href="{{ Auth::user()->is_admin ? route('admin.profile.edit') : route('customer.profile') }}" @if(Auth::user()->is_admin) data-turbo="false" @else data-turbo-frame="main-content" @endif><i class="bi bi-person me-2"></i>My Profile</a></li>
                                @if(Auth::user()->is_admin)
                                    <li><a class="dropdown-item py-2" href="{{ route('admin.dashboard') }}" data-turbo="false"><i class="bi bi-speedometer2 me-2 text-primary"></i>MJ Admin</a></li>
                                @endif
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <form action="{{ route('logout') }}" method="POST" class="d-inline" data-turbo="false">
                                        @csrf
                                        <button type="submit" class="dropdown-item text-danger py-2"><i class="bi bi-box-arrow-right me-2"></i>Logout</button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    @else
                        <div class="d-none d-lg-block">
                            <a href="{{ route('login') }}" data-turbo-frame="main-content" class="btn btn-outline-secondary btn-sm rounded-pill px-3 me-2">Login</a>
                            <a href="{{ route('register') }}" data-turbo-frame="main-content" class="btn btn-primary-mj btn-sm px-3 rounded-pill text-white">Sign Up</a>
                        </div>
                    @endauth
                </div>
            </div>
        </div>
    </nav>

    <!-- MAIN BODY CONTENT -->
    <turbo-frame id="main-content" data-turbo-action="advance" class="turbo-frame-shell site-main">
        @include('partials.turbo-flash')
        <span class="d-none" data-page-title="@yield('title', $branding['company_name'] . ' Marketplace')"></span>

        <main class="site-content px-4 md:px-8 pb-20 md:pb-0">
            @yield('content')
        </main>

        @yield('scripts')
    </turbo-frame>

    <!-- FOOTER SECTION -->
    <footer class="site-footer bg-dark text-white pt-5 pb-4 hidden md:block">
        <div class="container text-md-start">
            <div class="row">
                <div class="col-12 col-md-3 col-lg-4 col-xl-3 mx-auto mb-4 text-center text-md-start">
                    <h5 class="text-uppercase fw-bold mb-3 brand-font text-danger">{{ $branding['company_name'] }}</h5>
                    <p class="text-secondary small">{{ $branding['company_about'] }}</p>
                    <div class="mt-2">
                        <a href="{{ $branding['footer_facebook'] }}" target="_blank" class="text-secondary me-3"><i class="bi bi-facebook fs-5"></i></a>
                        <a href="{{ $branding['footer_instagram'] }}" target="_blank" class="text-secondary me-3"><i class="bi bi-instagram fs-5"></i></a>
                        <a href="https://wa.me/{{ $branding['whatsapp_clean'] }}" target="_blank" class="text-secondary"><i class="bi bi-whatsapp fs-5"></i></a>
                    </div>
                </div>
                <div class="col-6 col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
                    <h6 class="text-uppercase fw-bold mb-3 text-secondary fs-6">Quick Links</h6>
                    <p class="mb-1"><a href="{{ route('marketplace.index') }}" data-turbo-frame="main-content" class="text-secondary text-decoration-none small">Showroom Catalog</a></p>
                    <p class="mb-1"><a href="{{ route('services.index') }}" data-turbo-frame="main-content" class="text-secondary text-decoration-none small">Repair Services</a></p>
                    <p class="mb-1"><a href="{{ route('gallery.index') }}" data-turbo-frame="main-content" class="text-secondary text-decoration-none small">Photo Gallery</a></p>
                    <p class="mb-1"><a href="{{ route('blog.index') }}" data-turbo-frame="main-content" class="text-secondary text-decoration-none small">Articles & News</a></p>
                </div>
                <div class="col-6 col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
                    <h6 class="text-uppercase fw-bold mb-3 text-secondary fs-6">Contact Us</h6>
                    <p class="text-secondary mb-1 small"><i class="bi bi-geo-alt me-1"></i>{{ $branding['footer_address'] }}</p>
                    <p class="text-secondary mb-1 small"><i class="bi bi-telephone me-1"></i><a href="tel:{{ preg_replace('/\s+/', '', $branding['footer_phone']) }}" class="text-secondary text-decoration-none">{{ $branding['footer_phone'] }}</a></p>
                    <p class="text-secondary mb-1 small"><i class="bi bi-envelope me-1"></i><a href="mailto:{{ $branding['footer_email'] }}" class="text-secondary text-decoration-none">{{ $branding['footer_email'] }}</a></p>
                    <p class="text-secondary mb-1 small"><i class="bi bi-clock me-1"></i>{{ $branding['business_hours'] }}</p>
                </div>
                <div class="col-12 col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4 text-center text-md-start">
                    <h6 class="text-uppercase fw-bold mb-3 text-secondary fs-6">Newsletter</h6>
                    <p class="text-secondary small">Subscribe to get notifications on weekend flash sales and new arrivals.</p>
                    <form action="{{ route('newsletter.subscribe') }}" method="POST" class="input-group">
                        @csrf
                        <input type="email" class="form-control rounded-start-pill" name="email" placeholder="Your Email" required>
                        <button type="submit" class="btn btn-danger rounded-end-pill px-3">
                            <i class="bi bi-send"></i>
                        </button>
                    </form>
                </div>
            </div>
            <hr class="my-4 border-secondary">
            <div class="row align-items-center">
                <div class="col-md-7 col-lg-8 text-secondary">
                    <p>{{ $branding['copyright_text'] }}</p>
                </div>
                <div class="col-md-5 col-lg-4 text-md-end text-secondary">
                    <span class="me-2"><i class="bi bi-shield-check"></i> SSL Secured</span>
                    <span><i class="bi bi-credit-card"></i> M-Pesa Integrated</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- STICKY FLOATING WHATSAPP CHAT BUTTON -->
    <a href="https://wa.me/{{ $branding['whatsapp_clean'] }}?text={{ urlencode($branding['whatsapp_greeting']) }}" 
       class="whatsapp-floating" 
       target="_blank" 
       title="Chat with us on WhatsApp">
        <i class="bi bi-whatsapp"></i>
    </a>

    <!-- STICKY BOTTOM MOBILE NAVIGATION BAR -->
    <div class="fixed bottom-0 w-full bg-white shadow-[0_-4px_15px_rgba(0,0,0,0.05)] rounded-t-2xl z-50 flex justify-around items-center py-2 md:hidden pb-safe">
        <a href="{{ route('home') }}" data-turbo-frame="main-content" class="flex flex-col items-center text-gray-500 hover:text-danger {{ Route::is('home') ? 'text-danger' : '' }} active:scale-[0.98] transition-transform decoration-none">
            <i class="bi bi-house text-xl mb-1"></i>
            <span class="text-[0.65rem] font-medium text-decoration-none">Home</span>
        </a>
        <a href="{{ route('marketplace.index') }}" data-turbo-frame="main-content" class="flex flex-col items-center text-gray-500 hover:text-danger {{ Route::is('marketplace.*') ? 'text-danger' : '' }} active:scale-[0.98] transition-transform decoration-none">
            <i class="bi bi-bicycle text-xl mb-1"></i>
            <span class="text-[0.65rem] font-medium text-decoration-none">Shop</span>
        </a>
        <a href="{{ route('services.index') }}" data-turbo-frame="main-content" class="flex flex-col items-center text-gray-500 hover:text-danger {{ Route::is('services.*') ? 'text-danger' : '' }} active:scale-[0.98] transition-transform decoration-none">
            <i class="bi bi-tools text-xl mb-1"></i>
            <span class="text-[0.65rem] font-medium text-decoration-none">Services</span>
        </a>
        <a href="{{ route('cart.index') }}" data-turbo-frame="main-content" class="flex flex-col items-center relative text-gray-500 hover:text-danger {{ Route::is('cart.*') ? 'text-danger' : '' }} active:scale-[0.98] transition-transform decoration-none">
            <i class="bi bi-cart3 text-xl mb-1"></i>
            <span class="text-[0.65rem] font-medium text-decoration-none">Cart</span>
            @if(session()->has('cart') && count(session('cart')) > 0)
                <span class="absolute top-0 right-1 bg-danger text-white text-[0.55rem] rounded-full h-4 w-4 flex items-center justify-center">{{ count(session('cart')) }}</span>
            @endif
        </a>
        <a class="flex flex-col items-center text-gray-500 hover:text-danger active:scale-[0.98] transition-transform decoration-none" data-bs-toggle="offcanvas" href="#mobileGridMenu" role="button" aria-controls="mobileGridMenu">
            <i class="bi bi-grid text-xl mb-1"></i>
            <span class="text-[0.65rem] font-medium text-decoration-none">Menu</span>
        </a>
    </div>

    <!-- MOBILE GRID MENU OFFCANVAS -->
    <div class="offcanvas offcanvas-bottom" tabindex="-1" id="mobileGridMenu" aria-labelledby="mobileGridMenuLabel" style="height: auto; border-top-left-radius: 20px; border-top-right-radius: 20px;">
        <div class="offcanvas-header justify-content-center position-relative pb-0 border-0 mt-2">
            <div style="width: 40px; height: 5px; background-color: #dee2e6; border-radius: 10px;"></div>
            <button type="button" class="btn-close position-absolute end-0 top-0 mt-3 me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body pt-4 pb-5">
            <div class="row row-cols-3 g-4 text-center">
                <div class="col">
                    <a href="{{ route('gallery.index') }}" data-turbo-frame="main-content" class="text-decoration-none text-dark d-block">
                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 50px; height: 50px;">
                            <i class="bi bi-images fs-4 text-danger"></i>
                        </div>
                        <span class="small fw-semibold">Gallery</span>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('blog.index') }}" data-turbo-frame="main-content" class="text-decoration-none text-dark d-block">
                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 50px; height: 50px;">
                            <i class="bi bi-journal-text fs-4 text-danger"></i>
                        </div>
                        <span class="small fw-semibold">Blog</span>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('about') }}" data-turbo-frame="main-content" class="text-decoration-none text-dark d-block">
                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 50px; height: 50px;">
                            <i class="bi bi-info-circle fs-4 text-danger"></i>
                        </div>
                        <span class="small fw-semibold">About Us</span>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('contact.index') }}" data-turbo-frame="main-content" class="text-decoration-none text-dark d-block">
                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 50px; height: 50px;">
                            <i class="bi bi-envelope fs-4 text-danger"></i>
                        </div>
                        <span class="small fw-semibold">Contact</span>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('wishlist.index') }}" data-turbo-frame="main-content" class="text-decoration-none text-dark d-block">
                        <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 50px; height: 50px;">
                            <i class="bi bi-heart fs-4 text-danger"></i>
                        </div>
                        <span class="small fw-semibold">Wishlist</span>
                    </a>
                </div>
                @auth
                    @if(Auth::user()->is_admin)
                        <div class="col">
                            <a href="{{ route('admin.dashboard') }}" data-turbo="false" class="text-decoration-none text-dark d-block">
                                <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-2" style="width: 50px; height: 50px;">
                                    <i class="bi bi-speedometer2 fs-4 text-primary"></i>
                                </div>
                                <span class="small fw-semibold">MJ Admin</span>
                            </a>
                        </div>
                    @endif
                @endauth
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Close offcanvas when a link is clicked, allowing navigation to proceed
        document.addEventListener('DOMContentLoaded', function() {
            var offcanvasLinks = document.querySelectorAll('#mobileGridMenu a');
            var offcanvasElement = document.getElementById('mobileGridMenu');
            
            offcanvasLinks.forEach(function(link) {
                link.addEventListener('click', function() {
                    var bsOffcanvas = bootstrap.Offcanvas.getInstance(offcanvasElement);
                    if (bsOffcanvas) {
                        bsOffcanvas.hide();
                    }
                });
            });
        });
    </script>

    @include('partials.sweetalert')

    @if(session('whatsapp_redirect'))
        <script>
            window.open("{{ session('whatsapp_redirect') }}", '_blank');
        </script>
    @endif
</body>
</html>
