<!DOCTYPE html>
<html lang="en" data-surface="store" x-data x-init="$store.theme.init()">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @php
        $seoEnabled = app()->environment('production');
        $customerUnreadNotifications = collect();
        $customerRecentNotifications = collect();
        $customerUnreadNotificationCount = 0;
        if (auth()->check() && \Illuminate\Support\Facades\Schema::hasTable('notifications')) {
            $customerUnreadNotifications = auth()->user()->unreadNotifications()->latest()->limit(8)->get();
            $customerRecentNotifications = auth()->user()->notifications()->latest()->limit(8)->get();
            $customerUnreadNotificationCount = $customerUnreadNotifications->count();
        }
    @endphp
    <title>@yield('title', 'Shiva Jewellers | Gold, Diamond & Bridal Jewellery Showroom')</title>
    @if($seoEnabled)
        <!-- Primary SEO Meta Tags -->
        <meta name="description" content="@yield('meta_description', 'Shiva Jewellers offers premium gold, diamond & bridal jewellery with BIS hallmark assurance. Explore elegant designs, traditional craftsmanship and timeless collections.')">
        <meta name="keywords" content="@yield('meta_keywords', 'Shiva Jewellers, gold jewellery, diamond jewellery, bridal jewellery, gold necklaces, gold bangles, jewellery showroom, BIS hallmarked gold, wedding jewellery')">
        <meta name="author" content="Shiva Jewellers">
        <meta name="robots" content="index, follow">
        <link rel="canonical" href="@yield('canonical_url', url()->current())">

        <!-- Open Graph / Facebook -->
        <meta property="og:title" content="@yield('og_title', 'Shiva Jewellers | Gold, Diamond & Bridal Jewellery')">
        <meta property="og:description" content="@yield('og_description', 'Discover premium gold, diamond & bridal jewellery at Shiva Jewellers. Trusted quality, elegant designs and BIS hallmarked gold.')">
        <meta property="og:type" content="website">
        <meta property="og:url" content="{{ url()->current() }}">
        <meta property="og:image" content="@yield('og_image', url('assets/images/logo.png'))">

        <!-- Twitter Card -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="@yield('twitter_title', 'Shiva Jewellers | Gold & Diamond Jewellery')">
        <meta name="twitter:description" content="@yield('twitter_description', 'Premium gold, diamond & bridal jewellery with timeless elegance and trusted quality.')">
        <meta name="twitter:image" content="@yield('twitter_image', url('assets/images/logo.png'))">

        <!-- Geo / Location -->
        <meta name="geo.region" content="IN">
        <meta name="geo.placename" content="Warangal">
        <meta name="geo.position" content="17.9765879;79.5980714">
        <meta name="ICBM" content="17.9765879, 79.5980714">
    @else
        <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">
    @endif

    @stack('head')

    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{{ asset('css/bootstrap-icons.css') }}">
    <link rel="stylesheet" href="{{ asset('fontawesome/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/homepage.css') }}?v={{ @filemtime(public_path('css/homepage.css')) }}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}?v={{ @filemtime(public_path('css/app.css')) }}">
    <!-- Bootstrap last so storefront grid/navbar win over Tailwind preflight -->
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
    @include('partials.select2-styles')
    @stack('styles')
</head>
<body class="{{ ($announcements && $announcements->count() > 0) ? 'has-announcement' : '' }}">
    <!-- Announcement Marquee Bar -->
    @if($announcements && $announcements->count() > 0)
    <div class="announcement-marquee-bar">
        <div class="marquee-container">
            <div class="marquee-content">
                @foreach($announcements as $announcement)
                    <span class="marquee-item">{{ $announcement->text }}</span>
                    @if(!$loop->last)
                        <span class="marquee-separator"> • </span>
                    @endif
                @endforeach
                <!-- Duplicate for seamless loop -->
                @foreach($announcements as $announcement)
                    <span class="marquee-item">{{ $announcement->text }}</span>
                    @if(!$loop->last)
                        <span class="marquee-separator"> • </span>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <x-ui.toast />

    <!-- Modern Navbar -->
    <nav class="navbar navbar-expand-lg modern-navbar d-none d-lg-block desktop-view fixed-top {{ $announcements && $announcements->count() > 0 ? 'navbar-with-announcement' : '' }}">
        <div class="container">
            <!-- Logo Section (Left) -->
            <div class="navbar-brand-section">
                <a class="navbar-brand-modern" href="{{ route('home') }}">
                    @php
                        $logoUrl = \App\Models\Setting::getLogoUrl('light');
                        $siteName = \App\Models\Setting::get('site_name', 'KIYOKART');
                    @endphp
                    @if($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $siteName }}" height="50" style="max-height: 50px; width: auto;">
                    @else
                        <span class="brand-icon">S</span>
                        <span>{{ strtoupper($siteName) }}</span>
                    @endif
                </a>
            </div>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon text-white"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <!-- Menu Items (Center) -->
                <ul class="navbar-nav navbar-nav-centered mx-auto">
                    <li class="nav-item">
                        <a class="nav-link nav-link-modern {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">
                            <i class="bi bi-house-door d-md-none"></i> Home
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link nav-link-modern dropdown-toggle {{ request()->routeIs('collections.show') && !in_array(request()->route('slug'), ['best-sellers', 'new-arrivals']) ? 'active' : '' }}" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-grid d-md-none"></i> Category
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="categoryDropdown">
                            @if($menuCategories && $menuCategories->count() > 0)
                                @foreach($menuCategories as $menuCat)
                                    <li>
                                        <a class="dropdown-item" href="{{ route('collections.show', $menuCat->slug) }}">
                                            <i class="bi bi-tag me-2"></i> {{ $menuCat->name }}
                                        </a>
                                    </li>
                                @endforeach
                            @else
                                <li><span class="dropdown-item text-muted">No categories available</span></li>
                            @endif
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ route('product.search') }}">
                                    <i class="bi bi-search me-2"></i> View All Categories
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-modern {{ request()->routeIs('collections.show') && request()->route('slug') === 'new-arrivals' ? 'active' : '' }}" href="{{ route('collections.show', 'new-arrivals') }}">
                            <i class="bi bi-stars d-md-none"></i> New Arrivals
                        </a>
                    </li>
                   
                    <li class="nav-item">
                        <a class="nav-link nav-link-modern {{ request()->routeIs('customer.orders.*') ? 'active' : '' }}" href="{{ route('customer.orders.index') }}">
                            <i class="bi bi-truck d-md-none"></i> Track Your Order
                        </a>
                    </li>
                </ul>
            </div>

            {{-- Outside .collapse so Tailwind/Bootstrap flex cannot push icons off-screen --}}
            <div class="navbar-right-section icons-clone">
                <form class="d-flex navbar-search" action="{{ route('product.search') }}" method="GET">
                    <input class="form-control form-control-sm form-control-navbar" type="search" placeholder="Search products..." aria-label="Search" name="search" value="{{ request('search') }}" autocomplete="off">
                    <button class="btn btn-sm" type="submit" aria-label="Search">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
                <a href="{{ route('cart.index') }}" class="navbar-icon-link position-relative" title="Cart">
                    <i class="bi bi-bag"></i>
                    @if($cartItemCount > 0)
                        <span class="icon-badge">{{ $cartItemCount }}</span>
                    @endif
                </a>
                @auth
                    <a href="{{ route('wishlist.index') }}" class="navbar-icon-link position-relative" title="Wishlist">
                        <i class="bi bi-heart"></i>
                        @if($wishlistCount > 0)
                            <span class="icon-badge">{{ $wishlistCount }}</span>
                        @endif
                    </a>
                @else
                    <a href="{{ route('login') }}" class="navbar-icon-link" title="Login to view wishlist">
                        <i class="bi bi-heart"></i>
                    </a>
                @endauth
                @auth
                    {{-- <div class="dropdown">
                        <a class="navbar-icon-link position-relative dropdown-toggle" href="#" id="customerNotificationDropdownDesktop" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Notifications">
                            <i class="bi bi-bell"></i>
                            @if($customerUnreadNotificationCount > 0)
                                <span class="icon-badge">{{ $customerUnreadNotificationCount > 99 ? '99+' : $customerUnreadNotificationCount }}</span>
                            @endif
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="customerNotificationDropdownDesktop" style="min-width: 320px;">
                            <li class="px-3 py-2 d-flex justify-content-between align-items-center">
                                <strong>Notifications</strong>
                                @if($customerUnreadNotificationCount > 0)
                                    <form action="{{ route('customer.notifications.read-all') }}" method="POST">
                                        @csrf
                                        <button type="submit" class="btn btn-link btn-sm p-0 text-decoration-none">Mark all read</button>
                                    </form>
                                @endif
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            @forelse(($customerUnreadNotificationCount > 0 ? $customerUnreadNotifications : $customerRecentNotifications) as $notification)
                                <li>
                                    <form action="{{ route('customer.notifications.read', $notification->id) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="dropdown-item small py-2 customer-notification-item">
                                            <div class="fw-semibold">{{ data_get($notification->data, 'title', 'Ticket update') }}</div>
                                            <div class="text-muted">{{ data_get($notification->data, 'message') }}</div>
                                        </button>
                                    </form>
                                </li>
                            @empty
                                <li><span class="dropdown-item text-muted">No new notifications</span></li>
                            @endforelse
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item text-primary notification-view-all" href="{{ route('customer.notifications.index') }}">
                                    <i class="bi bi-list-ul me-2"></i>View all notifications
                                </a>
                            </li>
                        </ul>
                    </div> --}}
                    <div class="dropdown">
                        <a class="navbar-icon-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" title="Account">
                            @if(auth()->user()->avatar_url)
                                <img src="{{ auth()->user()->avatar_url }}" alt="{{ auth()->user()->name }}" class="navbar-avatar-img" onerror="this.style.display='none'; this.nextElementSibling?.classList.remove('d-none');">
                                <i class="bi bi-person-circle d-none"></i>
                            @else
                                <i class="bi bi-person-circle"></i>
                            @endif
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li class="px-3 py-2">
                                <small class="text-muted d-block">Logged in as</small>
                                <strong>{{ auth()->user()->name }}</strong>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.profile') }}">
                                    <i class="bi bi-person me-2"></i> Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.orders.index') }}">
                                    <i class="bi bi-bag-check me-2"></i> My Orders
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.tickets.index') }}">
                                    <i class="bi bi-life-preserver me-2"></i> Tickets
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.notifications.index') }}">
                                    <i class="bi bi-bell me-2"></i> Notifications
                                </a>
                            </li>
                            @if(!auth()->user()->isCustomer())
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('admin.dashboard') }}">
                                        <i class="bi bi-speedometer2 me-2"></i> Admin Panel
                                    </a>
                                </li>
                            @endif
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="dropdown-item text-danger">
                                        <i class="bi bi-box-arrow-right me-2"></i> Logout
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>
                @else
                    <a href="{{ route('login') }}" class="navbar-login-link" title="Login">
                        <i class="bi bi-person-circle"></i>
                        <span>Login</span>
                    </a>
                @endauth
            </div>
        </div>
    </nav>

    <!-- Modern Navbar -->
     <!-- Mobile to tab -->
    <nav class="navbar navbar-expand-lg navbar d-block d-lg-none modern-navbar mobile-view fixed-top {{ $announcements && $announcements->count() > 0 ? 'navbar-with-announcement' : '' }}">
        <div class="container">
            {{-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavMobile" aria-controls="navbarNavMobile" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon text-white"></span>
            </button> --}}

            <a href="{{ route('product.search') }}" class="mobile-search-icon d-lg-none text-white">
                <i class="bi bi-search"></i>
            </a>
            
            <!-- Logo Section (Left) -->
            <div class="navbar-brand-section d-flex justify-content-center">
                <a class="navbar-brand-modern" href="{{ route('home') }}">
                    @php
                        $logoUrl = \App\Models\Setting::getLogoUrl('light');
                        $siteName = \App\Models\Setting::get('site_name', 'KIYOKART');
                    @endphp
                    @if($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $siteName }}" height="50" style="max-height: 50px; width: auto;">
                    @else
                        <span class="brand-icon">S</span>
                        <span>{{ strtoupper($siteName) }}</span>
                    @endif
                </a>
            </div>
            <!-- Icons (Right) -->
            <div class="navbar-right-section m-0">
                <!-- Icons -->
                <a href="{{ route('cart.index') }}" class="navbar-icon-link position-relative">
                    <i class="bi bi-bag"></i>
                    @if($cartItemCount > 0)
                        <span class="icon-badge">{{ $cartItemCount }}</span>
                    @endif
                </a>
                @auth
                    <a href="{{ route('wishlist.index') }}" class="navbar-icon-link position-relative">
                        <i class="bi bi-heart"></i>
                        @if($wishlistCount > 0)
                            <span class="icon-badge">{{ $wishlistCount }}</span>
                        @endif
                    </a>
                @else
                    <a href="{{ route('login') }}" class="navbar-icon-link" title="Login to view wishlist">
                        <i class="bi bi-heart"></i>
                    </a>
                @endauth
                @auth
                    {{-- <div class="dropdown">
                        <a class="navbar-icon-link position-relative dropdown-toggle" href="#" id="customerNotificationDropdownMobile" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="bi bi-bell"></i>
                            @if($customerUnreadNotificationCount > 0)
                                <span class="icon-badge">{{ $customerUnreadNotificationCount > 99 ? '99+' : $customerUnreadNotificationCount }}</span>
                            @endif
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="customerNotificationDropdownMobile" style="min-width: 300px;">
                            <li class="px-3 py-2"><strong>Notifications</strong></li>
                            <li><hr class="dropdown-divider"></li>
                            @forelse(($customerUnreadNotificationCount > 0 ? $customerUnreadNotifications : $customerRecentNotifications) as $notification)
                                <li>
                                    <form action="{{ route('customer.notifications.read', $notification->id) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="dropdown-item small py-2 customer-notification-item">
                                            <div class="fw-semibold">{{ data_get($notification->data, 'title', 'Ticket update') }}</div>
                                            <div class="text-muted">{{ data_get($notification->data, 'message') }}</div>
                                        </button>
                                    </form>
                                </li>
                            @empty
                                <li><span class="dropdown-item text-muted">No notifications</span></li>
                            @endforelse
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item text-primary notification-view-all" href="{{ route('customer.notifications.index') }}">
                                    <i class="bi bi-list-ul me-2"></i>View all notifications
                                </a>
                            </li>
                        </ul>
                    </div> --}}
                    <div class="dropdown">
                        <a class="navbar-icon-link dropdown-toggle" href="#" id="userDropdownMobile" role="button" data-bs-toggle="dropdown">
                            @if(auth()->user()->avatar_url)
                                <img src="{{ auth()->user()->avatar_url }}" alt="{{ auth()->user()->name }}" class="navbar-avatar-img" onerror="this.style.display='none'; this.nextElementSibling?.classList.remove('d-none');">
                                <i class="bi bi-person-circle d-none"></i>
                            @else
                                <i class="bi bi-person-circle"></i>
                            @endif
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li class="px-3 py-2">
                                <small class="text-muted d-block">Logged in as</small>
                                <strong>{{ auth()->user()->name }}</strong>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.profile') }}">
                                    <i class="bi bi-person me-2"></i> Profile
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.orders.index') }}">
                                    <i class="bi bi-bag-check me-2"></i> My Orders
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.tickets.index') }}">
                                    <i class="bi bi-life-preserver me-2"></i> Tickets
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ route('customer.notifications.index') }}">
                                    <i class="bi bi-bell me-2"></i> Notifications
                                </a>
                            </li>
                            @if(!auth()->user()->isCustomer())
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('admin.dashboard') }}">
                                        <i class="bi bi-speedometer2 me-2"></i> Admin Panel
                                    </a>
                                </li>
                            @endif
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="dropdown-item text-danger">
                                        <i class="bi bi-box-arrow-right me-2"></i> Logout
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>
                @else
                    <a href="{{ route('login') }}" class="navbar-login-link" title="Login">
                        <i class="bi bi-person-circle"></i>
                        <span class="d-none d-sm-inline">Login</span>
                    </a>
                @endauth
            </div>
        </div>

        {{-- <div class="collapse navbar-collapse" id="navbarNavMobile">
                <ul class="navbar-nav mx-auto w-100">
                    <li class="nav-item">
                        <a class="nav-link nav-link-modern {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">
                            <i class="bi bi-house-door"></i> Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-modern {{ request()->routeIs('customer.orders.*') ? 'active' : '' }}" href="{{ route('customer.orders.index') }}">
                            <i class="bi bi-truck"></i> Track Your Order
                        </a>
                    </li>
                </ul>
            </div> --}}
    </nav>                

    <!-- MOBILE + TAB BOTTOM BAR -->
    <nav class="mobile-bottom-bar d-lg-none fixed-bottom">
        <a href="{{ route('home') }}" class="{{ request()->routeIs('home') ? 'active' : '' }}">
            <i class="bi bi-house-door"></i><span>Home</span>
        </a>
        <div class="bottom-bar-category">
            <a href="#"
               class="{{ request()->routeIs('collections.show') && request()->route('slug') !== 'best-sellers' ? 'active' : '' }}"
               id="categoryDropdownBottom"
               role="button"
               data-bs-toggle="dropdown"
               aria-expanded="false"
               aria-controls="categoryBottomSheet">
                <i class="bi bi-grid"></i><span>Category</span>
            </a>
            <div class="category-sheet-backdrop"></div>
            <div class="dropdown-menu category-bottom-sheet" id="categoryBottomSheet" role="dialog" aria-labelledby="categorySheetTitle">
                <div class="category-sheet-handle" aria-hidden="true"></div>
                <div class="category-sheet-header">
                    <strong id="categorySheetTitle">Categories</strong>
                    <button type="button" class="category-sheet-close" data-bs-dismiss="dropdown" aria-label="Close">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <ul class="category-sheet-list">
                    <li>
                        <a class="dropdown-item category-sheet-new-arrivals {{ request()->routeIs('collections.show') && request()->route('slug') === 'new-arrivals' ? 'active' : '' }}" href="{{ route('collections.show', 'new-arrivals') }}">
                            <i class="bi bi-stars me-2"></i> New Arrivals
                        </a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    @if($menuCategories && $menuCategories->count() > 0)
                        @foreach($menuCategories as $menuCat)
                            <li>
                                <a class="dropdown-item" href="{{ route('collections.show', $menuCat->slug) }}">
                                    <i class="bi bi-tag me-2"></i> {{ $menuCat->name }}
                                </a>
                            </li>
                        @endforeach
                    @else
                        <li><span class="dropdown-item text-muted">No categories available</span></li>
                    @endif
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item category-dropdown-menu" href="{{ route('product.search') }}">
                            <i class="bi bi-search me-2"></i> View All Categories
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <a href="{{ route('cart.index') }}" class="position-relative">
            <i class="bi bi-bag"></i>
            @if($cartItemCount > 0)
                <span class="bottom-badge">{{ $cartItemCount }}</span>
            @endif
            <span>Cart</span>
        </a>
        <a href="{{ route('customer.orders.index') }}">
            <i class="bi bi-truck"></i> <span>Orders</span>
        </a>
        @auth
            <a href="{{ route('customer.profile') }}">
                <i class="bi bi-person"></i> <span>Profile</span>
            </a>
        @else
            <a href="{{ route('login') }}">
                <i class="bi bi-person"></i> <span>Login</span>
            </a>
        @endauth
    </nav>

    {{-- BREADCRUMB BAR --}}
@if(View::hasSection('breadcrumb'))
<section class="breadcrumb-bar">
    <div class="container breadcrumb-inner">
        <div class="breadcrumb-left">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <span class="current">@yield('breadcrumb')</span>
        </div>
    </div>
</section>
@endif

    <!-- Main Content -->
    <main>
        @if(session('error'))
            <div class="alert alert-danger admin-alert alert-dismissible fade show toast-modern toast-modern-error" role="alert" style="position: fixed; top: 80px; right: 20px; z-index: 1050; max-width: 400px;">
                <i class="bi bi-exclamation-triangle-fill toast-modern-icon"></i>
                <div class="toast-modern-content">
                    <div class="toast-modern-title">Error</div>
                    <div class="toast-modern-message">{{ session('error') }}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger admin-alert alert-dismissible fade show toast-modern toast-modern-error" role="alert" style="position: fixed; top: 80px; right: 20px; z-index: 1050; max-width: 400px;">
                <i class="bi bi-exclamation-triangle-fill toast-modern-icon"></i>
                <div class="toast-modern-content">
                    <div class="toast-modern-title">Validation Error</div>
                    <div class="toast-modern-message">
                        <ul class="mb-0" style="padding-left: 1.25rem;">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('success'))
            <div class="alert alert-success admin-alert alert-dismissible fade show toast-modern toast-modern-success" role="alert" style="position: fixed; top: 80px; right: 20px; z-index: 1050; max-width: 400px;">
                <i class="bi bi-check-circle-fill toast-modern-icon"></i>
                <div class="toast-modern-content">
                    <div class="toast-modern-title">Success</div>
                    <div class="toast-modern-message">{{ session('success') }}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @yield('content')
    </main>

    <!-- Footer -->
    <footer class="footer-main">
        <div class="container">
            <div class="row g-4">
                <!-- Left Section: Logo + Description -->
                <div class="col-lg-3 col-md-6">
                    <div class="footer-logo-container">
                        @php
                            $footerLogoUrl = \App\Models\Setting::getLogoUrl('light');
                            $footerSiteName = \App\Models\Setting::get('site_name', 'SUDHEER KT');
                        @endphp
                        @if($footerLogoUrl)
                            <div class="footer-logo-image mb-3">
                                <img src="{{ $footerLogoUrl }}" alt="{{ $footerSiteName }}" style="max-height: 120px !important; width: auto !important;">
                            </div>                         
                        @endif                        
                    </div>
                    <p class="footer-description">Shiva Jewellers is committed to offering elegant, affordable, and high-quality jewellery. With decades of expertise, we blend timeless tradition with modern design, ensuring every piece reflects purity, precision, and craftsmanship you can trust.</p>
                </div>
                
                <!-- Middle Section 1: Quick Links -->
                <div class="col-lg-3 col-md-6">
                    <h6 class="footer-section-title">QUICK LINKS</h6>
                    <ul class="footer-links">
                        <li><a href="{{ route('page.about-us') }}">About Us</a></li>
                        <li><a href="{{ route('page.contact-us') }}">Contact Us</a></li>
                        <li><a href="{{ route('stores.index') }}">Store Locator</a></li>
                        <li><a href="{{ route('page.faqs') }}">FAQs</a></li>
                        <li><a href="{{ route('customer.orders.index') }}">Track Order</a></li>
                        <li><a href="{{ route('page.size-care-guide') }}">Size / Care Guide</a></li>
                    </ul>
                </div>
                
                <!-- Middle Section 2: Our Policies -->
                <div class="col-lg-3 col-md-6">
                    <h6 class="footer-section-title">OUR POLICIES</h6>
                    <ul class="footer-links">
                        <li><a href="{{ route('policy.privacy') }}">Privacy Policy</a></li>
                        <li><a href="{{ route('policy.refund') }}">Refund & Return Policy</a></li>
                        <li><a href="{{ route('policy.shipping') }}">Shipping & Delivery Policy</a></li>
                        <li><a href="{{ route('policy.cancellation') }}">Cancellation Policy</a></li>
                        <li><a href="{{ route('policy.support') }}">Support & Policy</a></li>
                        <li><a href="{{ route('policy.terms') }}">Terms & Conditions</a></li>
                    </ul>
                </div>
                
                <!-- Right Section: Contact Us -->
                <div class="col-lg-3 col-md-6">
                    <h6 class="footer-section-title">CONTACT US</h6>
                    <div class="footer-contact-item footer-address">
                        <i class="bi bi-house-door-fill"></i>
                        <span style="text-align: justify;">first floor,New City fabric centre, beside Madhuri bar & restaurant, Warangal Chowrasta, Old Beet Bazaar, Warangal, Telangana 506002</span>
                    </div>
                    <div class="footer-contact-item">
                        <i class="bi bi-telephone-fill"></i>
                        <span><a href="tel:+919553345305" style="text-decoration: none; color: inherit;">+91-9553345305</a></span>
                    </div>
                    <div class="footer-contact-item">
                        <i class="bi bi-whatsapp"></i>
                        <span><a href="https://wa.me/919553345305" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit;">+91-9553345305</a></span>
                    </div>
                    <div class="footer-contact-item">
                        <i class="bi bi-envelope-fill"></i>
                        <span><a href="mailto:shivakumar.sk599@gmail.com" style="text-decoration: none; color: inherit;">shivakumar.sk599@gmail.com</a></span>
                    </div>

                    <!-- Social Media Icons -->
                    <div class="footer-social-icons">
                        {{-- <a href="" target="_blank" class="social-icon" aria-label="Facebook">
                            <i class="bi bi-facebook"></i>
                        </a> --}}
                        <a href="https://www.instagram.com/shiva_jewellerss/" target="_blank" class="social-icon" aria-label="Instagram">
                            <i class="bi bi-instagram"></i>
                        </a>
                        <a href="https://www.youtube.com/@shivasudhajewellersssjcode" target="_blank" class="social-icon" aria-label="YouTube">
                            <i class="bi bi-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Footer Bottom Bar -->
    <div class="footer-bottom-bar">
        <div class="container">
            @php
                $companyName = \App\Models\Setting::get('site_name', 'KiyoKart');
                $kiyoKartUtm = array_filter([
                    'utm_source' => request('utm_source', $companyName),
                    'utm_medium' => request('utm_medium', 'Footer'),
                    'utm_campaign' => request('utm_campaign', 'Referral'),
                    'utm_id' => request('utm_id', "Client website"),
                ], fn ($value) => filled($value));
                $kiyoKartUrl = 'https://kiyokart.in' . (count($kiyoKartUtm) ? ('?' . http_build_query($kiyoKartUtm)) : '');
            @endphp
            <p class="footer-copyright mb-0">
                &copy; {{ date('Y') }} {{ $companyName }}. All Rights Reserved.  | Developed by <a href="{{ $kiyoKartUrl }}" target="_blank" rel="noopener noreferrer">KiyoKart</a>
            </p>
            <div class="footer-payment-icons flex flex-wrap gap-3 text-sm text-muted">
                <span title="Visa">Visa</span>
                <span title="Mastercard">Mastercard</span>
                <span title="UPI">UPI</span>
                <span title="Cards">Cards</span>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/ui-bridge.js') }}?v={{ @filemtime(public_path('js/ui-bridge.js')) }}"></script>
    @include('partials.select2-scripts')
    <script src="{{ asset('js/app.js') }}?v={{ @filemtime(public_path('js/app.js')) }}"></script>
    <script defer src="{{ asset('js/alpine.min.js') }}"></script>
    
    <!-- Wishlist JS - Load once for all pages -->
    <script src="{{ asset('js/wishlist.js') }}"></script>

    @stack('scripts')
    <script>
        setTimeout(function () {
            document.querySelectorAll('.admin-alert').forEach(function (alert) {
                if (window.bootstrap && bootstrap.Alert) {
                    new bootstrap.Alert(alert).close();
                } else {
                    alert.remove();
                }
            });
        }, 2000);
    </script>
</body>
</html>
