@php
    $websiteData = \App\Models\WebsiteData::where(function ($query) {
        $query
            ->where('type', 'email')
            ->orWhere('type', 'phone')
            ->orWhere('type', 'address')
            ->orWhere('type', 'facebook')
            ->orWhere('type', 'instagram')
            ->orWhere('type', 'youtube')
            ->orWhere('type', 'logo')
            ->orWhere('type', 'small_logo')
            ->orWhere('type', 'favicon')
            ->orWhere('type', 'top_header_text')
            ->orWhere('type', 'footer_text')
            ->orWhere('type', 'footer_logo');
    })
        ->pluck('detail', 'type')
        ->toArray();
@endphp
<div class="alert alert-dismissible bg-dark text-white rounded-0 py-2 px-0 m-0 fade show" data-bs-theme="dark">
    <div class="container position-relative d-flex min-w-0">
        <div class="d-flex flex-nowrap align-items-center g-2 w-100 min-w-0 mx-auto mt-n1" style="max-width: 458px">
            <div class="nav me-2">
                <button type="button" class="nav-link fs-lg p-0" id="topbarPrev" aria-label="Prev">
                    <i class="ci-chevron-left"></i>
                </button>
            </div>
            <div class="swiper fs-sm text-white" id="topbarSwiper">
                <div class="swiper-wrapper min-w-0">
                    @isset($websiteData['top_header_text'])
                        @foreach (json_decode($websiteData['top_header_text']) as $top_header_text)
                            <div class="swiper-slide text-truncate text-center">{{ $top_header_text }}</div>
                        @endforeach
                    @endisset
                </div>
            </div>
            <div class="nav ms-2">
                <button type="button" class="nav-link fs-lg p-0" id="topbarNext" aria-label="Next">
                    <i class="ci-chevron-right"></i>
                </button>
            </div>
        </div>
        <button type="button" class="btn-close position-static flex-shrink-0 p-1 ms-3 ms-md-n4" data-bs-dismiss="alert"
            aria-label="Close"></button>
    </div>
</div>

<header class="navbar navbar-expand-lg bg-white navbar-dark d-block z-fixed p-0"
    data-sticky-navbar="{&quot;offset&quot;: 500}">
    <div class="container d-block py-1 py-lg-1" data-bs-theme="dark">
        <div class="navbar-stuck-hide pt-1"></div>
        <div class="row flex-nowrap align-items-center g-0">
            <div class="col col-lg-3 d-flex align-items-center">
                <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas"
                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a href="{{ route('home') }}" class="navbar-brand me-0" wire:navigate>
                    @isset($websiteData['logo'])
                        <img src="{{ url('storage/' . $websiteData['logo']) }}" alt="Logo" style="height: 50px;">
                    @endisset
                </a>
            </div>
            <div class="col col-lg-9 d-flex align-items-center justify-content-end">
                <div class="position-relative flex-fill pe-xl-5 d-none d-lg-block">
                    @livewire('frontend.layouts.search-box')
                </div>

                <a href="javascript:void(0);" id="installPWAButton">
                    <div class="btn btn-icon btn-lg fs-lg text-white btn-secondary bg-opacity-75 rounded-circle d-lg-none">
                        <i class="ci-download"></i>
                    </div>
                </a>
                <div class="d-flex align-items-center">
                    <button type="button" class="navbar-toggler d-none navbar-stuck-show me-3"
                        data-bs-toggle="collapse" data-bs-target="#stuckNav" aria-controls="stuckNav"
                        aria-expanded="false" aria-label="Toggle navigation in navbar stuck state">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    @auth('web')
                        <div class="dropdown">
                            <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake dropdown-toggle"
                                href="#" id="userDropdown" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                <i class="ci-user animate-target text-dark"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                                <li class="dropdown-item-text fw-bold">{{ Auth::user()->name }}</li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('dashboard') }}">Dashboard</a>
                                </li>
                                <li>
                                    <form method="POST" action="{{ route('logout') }}">
                                        @csrf
                                        <button type="submit" class="dropdown-item">Logout</button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    @else
                        <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-md-inline-flex"
                            href="{{ route('login') }}" title="Login" data-bs-toggle="tooltip">
                            <i class="ci-lock animate-target text-dark"></i>
                        </a>
                    @endauth
                    {{-- <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-pulse d-none d-md-inline-flex"
                        href="#" title="Wishlist" data-bs-toggle="tooltip">
                        <i class="ci-heart animate-target text-dark"></i>
                    </a> --}}

                    @livewire('frontend.layouts.cart-counter')

                </div>
            </div>
        </div>
        <div class="navbar-stuck-hide pb-1"></div>
    </div>

    <div class="position-relative top-100 z-2 w-100 bg-dark d-lg-none p-2 phone-view-search-box">
        @livewire('frontend.layouts.search-box')
    </div>
    <div class="collapse navbar-stuck-hide bg-dark" id="stuckNav">
        <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
            <div class="offcanvas-header py-3" style="background: #013f78;">
                <h5 class="offcanvas-title" id="navbarNavLabel" style="color: #fff;">Free Service Wala</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body py-2">
                <div class="container px-0 px-lg-3">
                    <div class="row">
                        <div class="col-lg-12 d-lg-flex pt-3 pt-lg-0 ps-lg-0">
                            <ul class="navbar-nav position-relative">
                                <li class="nav-item">
                                    <a class="nav-link active" href="{{ route('home') }}" wire:navigate>Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('about.us') }}" wire:navigate>About</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('product.index') }}" wire:navigate>Product</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('franchise.plan') }}" wire:navigate>Franchise Plan</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('contact.us') }}" wire:navigate>Contact
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('franchise.plans') }}">Be our Direct Seller</a>
                                </li>
                            </ul>
                            {{-- Phone view login button --}}
                            <hr class="d-lg-none my-1">
                            <ul class="navbar-nav d-lg-none">
                                @auth('web')
                                    <li class="nav-item my-2">
                                        <form method="POST" action="{{ route('logout') }}">
                                            @csrf
                                            <button type="submit" class="nav-link btn btn-link p-0">
                                                <i class="ci-user animate-target text-dark me-2"></i> Logout
                                            </button>
                                        </form>
                                    </li>
                                @else
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ route('login') }}">
                                            <i class="ci-lock animate-target text-dark me-2"></i> Login
                                        </a>
                                    </li>
                                @endauth
                            </ul>
                            @if (!in_array(Route::currentRouteName(), ['contact.us']))
                                <hr class="d-lg-none my-1">
                                <ul class="navbar-nav ms-auto d-none d-lg-flex">
                                    <li class="nav-item">
                                        <a id="installPWAButton" class="text-white btn btn-primary blink"
                                            wire:navigate>
                                            Download App <i class="ci-download ms-2"></i>
                                        </a>
                                    </li>
                                </ul>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>

@livewire('frontend.layouts.cart-product-list')
@push('styles')
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
@endpush

@push('scripts')
    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        // Swiper initialization
        document.addEventListener('DOMContentLoaded', function () {
            var swiper = new Swiper('#topbarSwiper', {
                slidesPerView: 1,
                loop: true,
                navigation: {
                    nextEl: '#topbarNext',
                    prevEl: '#topbarPrev',
                },
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
            });
        });

        let deferredPrompt;
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            document.getElementById('installPWAButton').style.display = 'block';
        });

        document.getElementById('installPWAButton').addEventListener('click', function() {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                deferredPrompt.userChoice.then((choiceResult) => {
                    deferredPrompt = null;
                });
            }
        });
    </script>
@endpush