<!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', $settings['site_name'] ?? 'TMITStore') - Online Shop Bangladesh</title>
    <meta name="description" content="@yield('meta_description', $settings['meta_description'] ?? 'Best online shop in Bangladesh')">
    <meta name="keywords" content="{{ $settings['meta_keywords'] ?? '' }}">

    {{-- Bootstrap 5 --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    {{-- Bootstrap Icons --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    {{-- Google Fonts --}}
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    {{-- Google Tag Manager --}}
    @if(!empty($settings['google_tag_manager_id']))
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','{{ $settings["google_tag_manager_id"] }}');</script>
    @endif

    {{-- Google Analytics --}}
    @if(!empty($settings['google_analytics_id']))
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ $settings['google_analytics_id'] }}"></script>
    <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','{{ $settings["google_analytics_id"] }}');</script>
    @endif

    {{-- Facebook Pixel --}}
    @if(!empty($settings['facebook_pixel_id']))
    <script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');
    fbq('init','{{ $settings["facebook_pixel_id"] }}');
    fbq('track','PageView');
    @if(session('pixel_purchase'))
    fbq('track','Purchase',{!! session('pixel_purchase') !!}@if(session('pixel_event_id')),{eventID:'{{ session("pixel_event_id") }}'}@endif);
    @endif
    </script>
    <noscript><img height="1" width="1" src="https://www.facebook.com/tr?id={{ $settings['facebook_pixel_id'] }}&ev=PageView&noscript=1" style="display:none"/></noscript>
    @endif

    <style>
        :root {
            --primary:   #e63946;
            --primary-dark: #c1121f;
            --secondary: #457b9d;
            --dark:      #1d3557;
            --light:     #f8f9fa;
            --text-muted: #6c757d;
        }
        * { box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; color: #222; background: #fff; }

        /* TOP HEADER */
        .top-header { background: var(--dark); color: #fff; padding: 8px 0; font-size: 13px; }
        .top-header a { color: #ddd; text-decoration: none; }
        .top-header a:hover { color: #fff; }
        .social-icons a { display: inline-flex; align-items: center; justify-content: center;
            width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.15);
            color: #fff; margin-left: 6px; transition: background .2s; font-size: 14px; }
        .social-icons a:hover { background: var(--primary); }

        /* MAIN HEADER */
        .main-header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 1000; }
        .main-header .navbar-brand img { height: 50px; }
        .navbar-nav .nav-link { font-weight: 500; color: var(--dark) !important; padding: 8px 16px !important; }
        .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary) !important; }
        .cart-icon { position: relative; }
        .cart-badge { position: absolute; top: -6px; right: -8px; background: var(--primary);
            color: #fff; border-radius: 50%; font-size: 10px; width: 18px; height: 18px;
            display: flex; align-items: center; justify-content: center; font-weight: 600; }

        /* SLIDER */
        .hero-slider .carousel-item img { width: 100%; height: 480px; object-fit: cover; }
        @media(max-width:768px) { .hero-slider .carousel-item img { height: 220px; } }

        /* PRODUCT CARDS */
        .product-card { border: 1px solid #eee; border-radius: 10px; overflow: hidden;
            transition: transform .2s, box-shadow .2s; background: #fff; }
        .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,.12); }
        .product-card img { width: 100%; height: 200px; object-fit: cover; }
        .product-card .card-body { padding: 12px; }
        .product-card .product-title { font-size: 14px; font-weight: 600; color: var(--dark);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
        .btn-buy { background: var(--primary); color: #fff; border: none; width: 100%;
            padding: 8px; border-radius: 6px; font-weight: 600; font-size: 14px; transition: background .2s; }
        .btn-buy:hover { background: var(--primary-dark); color: #fff; }

        /* SECTION TITLE */
        .section-title { font-size: 24px; font-weight: 700; color: var(--dark);
            position: relative; padding-bottom: 12px; margin-bottom: 30px; }
        .section-title::after { content: ''; position: absolute; bottom: 0; left: 0;
            width: 50px; height: 3px; background: var(--primary); border-radius: 2px; }
        .section-title.text-center::after { left: 50%; transform: translateX(-50%); }

        /* FOOTER */
        footer { background: #111; color: #ccc; }
        footer a { color: #aaa; text-decoration: none; transition: color .2s; }
        footer a:hover { color: var(--primary); }
        .footer-social a { display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1);
            color: #fff; margin: 4px; font-size: 16px; transition: background .2s; }
        .footer-social a:hover { background: var(--primary); }

        /* PAGINATION */
        .pagination { gap: 4px; }
        .page-link {
            color: var(--dark);
            border-radius: 8px !important;
            border: 1px solid #e0e0e0;
            padding: 6px 14px;
            font-weight: 500;
            transition: all .2s;
        }
        .page-link:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }
        .page-item.active .page-link {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            box-shadow: 0 3px 10px rgba(230,57,70,.35);
        }
        .page-item.disabled .page-link {
            color: #bbb;
            background: #f8f9fa;
            border-color: #e0e0e0;
        }

        /* ALERTS */
        .alert { border-radius: 8px; }

        /* BUTTONS */
        .btn-primary-custom { background: var(--primary); color: #fff; border: none; border-radius: 8px;
            padding: 10px 28px; font-weight: 600; transition: background .2s; }
        .btn-primary-custom:hover { background: var(--primary-dark); color: #fff; }
        .btn-outline-custom { border: 2px solid var(--primary); color: var(--primary); background: transparent;
            border-radius: 8px; padding: 10px 28px; font-weight: 600; transition: all .2s; }
        .btn-outline-custom:hover { background: var(--primary); color: #fff; }

        @yield('extra-styles')
    </style>
    @yield('head')
</head>
<body>

@if(!empty($settings['google_tag_manager_id']))
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ $settings['google_tag_manager_id'] }}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
@endif

{{-- TOP HEADER --}}
<div class="top-header d-none d-md-block">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <i class="bi bi-telephone-fill me-1"></i>
                <a href="tel:{{ $settings['site_phone'] ?? '+880 1700-000000' }}">{{ $settings['site_phone'] ?? '+880 1700-000000' }}</a>
                <span class="mx-3">|</span>
                <i class="bi bi-geo-alt-fill me-1"></i>
                <span>{{ $settings['site_address'] ?? 'Dhaka, Bangladesh' }}</span>
            </div>
            <div class="social-icons">
                @if(!empty($settings['facebook_url']))
                <a href="{{ $settings['facebook_url'] }}" target="_blank"><i class="bi bi-facebook"></i></a>
                @endif
                @if(!empty($settings['youtube_url']))
                <a href="{{ $settings['youtube_url'] }}" target="_blank"><i class="bi bi-youtube"></i></a>
                @endif
                @if(!empty($settings['instagram_url']))
                <a href="{{ $settings['instagram_url'] }}" target="_blank"><i class="bi bi-instagram"></i></a>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- MAIN HEADER --}}
<header class="main-header">
    <div class="container">
        <nav class="navbar navbar-expand-lg py-2">
            <a class="navbar-brand" href="{{ route('home') }}">
                @if(!empty($settings['site_logo']))
                <img src="{{ asset('storage/' . $settings['site_logo']) }}" alt="{{ $settings['site_name'] ?? 'TMITStore' }}" style="height:50px;object-fit:contain;max-width:160px">
                @else
                <span style="font-size:24px;font-weight:800;color:var(--primary)">TMIT<span style="color:var(--dark)">Store</span></span>
                @endif
            </a>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav mx-auto">
                    @foreach(\App\Models\MenuItem::forLocation('header') as $menuItem)
                    <li class="nav-item">
                        <a class="nav-link {{ $menuItem->isActive() ? 'active' : '' }}"
                           href="{{ $menuItem->url }}"
                           target="{{ $menuItem->target }}">
                            @if($menuItem->icon)<i class="bi {{ $menuItem->icon }} me-1"></i>@endif
                            {{ $menuItem->label }}
                        </a>
                    </li>
                    @endforeach
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <form action="{{ route('shop') }}" method="GET" class="d-flex">
                        <div class="input-group input-group-sm" style="width:220px">
                            <input type="text" name="search" class="form-control" placeholder="Search products..." value="{{ request('search') }}">
                            <button class="btn btn-danger btn-sm" type="submit"><i class="bi bi-search"></i></button>
                        </div>
                    </form>
                    <a href="{{ route('cart') }}" class="cart-icon text-dark text-decoration-none">
                        <i class="bi bi-cart3 fs-5"></i>
                        @php $cartCount = \App\Models\Cart::where('session_id', session()->getId())->sum('quantity'); @endphp
                        @if($cartCount > 0)
                        <span class="cart-badge">{{ $cartCount }}</span>
                        @endif
                    </a>
                </div>
            </div>
        </nav>
    </div>
</header>

{{-- FLASH MESSAGES --}}
@if(session('success'))
<div class="container mt-3"><div class="alert alert-success alert-dismissible fade show"><i class="bi bi-check-circle me-2"></i>{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div></div>
@endif
@if(session('error'))
<div class="container mt-3"><div class="alert alert-danger alert-dismissible fade show"><i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div></div>
@endif

{{-- MAIN CONTENT --}}
<main>
    @yield('content')
</main>

{{-- FOOTER --}}
<footer class="pt-5 pb-3 mt-5">
    <div class="container">
        <div class="row g-4 mb-4">
            <div class="col-lg-4">
                @if(!empty($settings['site_logo']))
                <a href="{{ route('home') }}">
                    <img src="{{ asset('storage/' . $settings['site_logo']) }}" alt="{{ $settings['site_name'] ?? 'TMITStore' }}" style="height:50px;object-fit:contain;max-width:180px;filter:brightness(0) invert(1)">
                </a>
                @else
                <h5 style="color:#fff;font-weight:700;font-size:20px">{{ $settings['site_name'] ?? 'TMITStore' }}</h5>
                @endif
                @if(!empty($settings['footer_text']))
                <p class="mt-2" style="font-size:14px">{{ $settings['footer_text'] }}</p>
                @endif
                <div class="footer-social mt-3">
                    @if(!empty($settings['facebook_url']))<a href="{{ $settings['facebook_url'] }}" target="_blank"><i class="bi bi-facebook"></i></a>@endif
                    @if(!empty($settings['youtube_url']))<a href="{{ $settings['youtube_url'] }}" target="_blank"><i class="bi bi-youtube"></i></a>@endif
                    @if(!empty($settings['instagram_url']))<a href="{{ $settings['instagram_url'] }}" target="_blank"><i class="bi bi-instagram"></i></a>@endif
                </div>
            </div>
            <div class="col-lg-2 col-6">
                <h6 style="color:#fff;font-weight:600">Quick Links</h6>
                <ul class="list-unstyled mt-2" style="font-size:14px">
                    @foreach(\App\Models\MenuItem::forLocation('footer_quick') as $menuItem)
                    <li class="mb-1">
                        <a href="{{ $menuItem->url }}" target="{{ $menuItem->target }}">{{ $menuItem->label }}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="col-lg-3 col-6">
                <h6 style="color:#fff;font-weight:600">Customer Service</h6>
                <ul class="list-unstyled mt-2" style="font-size:14px">
                    @foreach(\App\Models\MenuItem::forLocation('footer_customer') as $menuItem)
                    <li class="mb-1">
                        <a href="{{ $menuItem->url }}" target="{{ $menuItem->target }}">{{ $menuItem->label }}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="col-lg-3">
                <h6 style="color:#fff;font-weight:600">Contact Us</h6>
                <ul class="list-unstyled mt-2" style="font-size:14px">
                    <li class="mb-1"><i class="bi bi-telephone me-2" style="color:var(--primary)"></i>{{ $settings['site_phone'] ?? '+880 1700-000000' }}</li>
                    <li class="mb-1"><i class="bi bi-envelope me-2" style="color:var(--primary)"></i>{{ $settings['site_email'] ?? 'info@tmitstore.com' }}</li>
                    <li class="mb-1"><i class="bi bi-geo-alt me-2" style="color:var(--primary)"></i>{{ $settings['site_address'] ?? 'Dhaka, Bangladesh' }}</li>
                </ul>
            </div>
        </div>
        <hr style="border-color:#333">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center" style="font-size:13px">
            <p class="mb-1">All rights reserved by <a href="#" style="color:var(--primary)">tmitstore.com</a></p>
            <p class="mb-1">Design and Developed by <strong style="color:var(--primary)">tmitstore</strong></p>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@yield('scripts')
</body>
</html>