@use('app\Helpers\Helpers')
@php
    $homePage = Helpers::getCurrentHomePage();
@endphp
<header>
    <div class="sub-header">
        <div class="container-fluid-lg">
            <div class="d-flex">
                @if (Helpers::isZoneExists())
                    <div class="dropdown location-dropdown">
                        <button id="add-btn" class="location-btn">
                            <i class="iconsax location" icon-name="location"></i>
                            <span class="location-part" id="location">
                                <span class="location-place"></span>
                            </span>
                            <i class="iconsax arrow" icon-name="chevron-down"></i>
                        </button>
                        <div id="overlay" class="overlay" style="display: none;"></div>
                        <div id="locationBox" class="onhover-show-div">
                            <div class="detect-location">
                                <div class="detect-location-title">
                                    <i class="iconsax location-icon" icon-name="location"></i>
                                    <h4>{{ __('frontend::static.location.title') }}</h4>
                                    @if (count(session('zoneIds', [])))
                                        <a class="close-btn" id="locationCloseBtn"><i class="iconsax location-icon" icon-name="close-circle"></i></a>
                                    @endif
                                </div>
                                <div class="location-content">
                                    <button class="btn btn-outline detect-btn" id="useCurrentLocationBtn" type="button">
                                        <i class="iconsax" icon-name="gps"></i>{{ __('frontend::static.location.use_current_location') }} 
                                        <span class="spinner-border spinner-border-sm" style="display: none;"></span>
                                    </button>
                                    <span class="or-text">{{ __('frontend::static.location.or') }}</span>
                                    <button type="button" data-bs-target="#locationSelected" id="selectManuallyBtn" class="btn btn-solid manually-location-btn" data-bs-toggle="modal">{{ __('frontend::static.location.select_manually') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @php
                    $offerSlides = array_filter(isset($themeOptions['header']['offer_slider']) && is_array($themeOptions['header']['offer_slider']) ? $themeOptions['header']['offer_slider'] : [], function ($slide) {
                        return !empty($slide['text'] ?? null);
                    });
                    $showOfferSlider = (isset($themeOptions['header']['offer_slider_enable']) && $themeOptions['header']['offer_slider_enable']) && count($offerSlides) > 0;
                @endphp
                @if ($showOfferSlider)
                <div class="d-xxl-block d-none">
                    <div class="swiper offer-header-slider m-0">
                        <div class="swiper-wrapper">
                            @foreach ($offerSlides as $slide)
                                <div class="swiper-slide h-100 w-100">
                                    <h6 class="offer-text">
                                        @if (!empty($slide['link'] ?? null))
                                            {!! nl2br(e($slide['text'])) !!} <a href="{{ $slide['link'] }}" target="_blank" rel="noopener noreferrer">{{ e($slide['link_text'] ?? 'Learn more') }}</a>
                                        @else
                                            {!! nl2br(e($slide['text'])) !!}
                                        @endif
                                    </h6>
                                </div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                @endif

                @php
                    $currency = session('currency', Helpers::getDefaultCurrencyCode());
                    $defaultCurrency = Helpers::getCurrencyByCode($currency);
                    $defaultCurrencyImg = $defaultCurrency?->media?->first()?->getUrl();
                    $currencies = Helpers::getActiveCurrencies() ?? [];
                @endphp
                <ul class="nav-right">
                    <li class="dropdown currency-dropdown nav-item-right">
                        <button id="unitSelected" class="currency-btn">
                            <span>{{ $defaultCurrency?->code }}</span>
                            <i data-feather="chevron-down"></i>
                        </button>
                        <ul class="onhover-show-div">
                            @forelse ($currencies as $currency)    
                                <li class="currency">
                                    <a href="{{ route('set.currency', $currency?->code) }}">{{ @$currency?->code }}</a>
                                </li>
                            @empty
                                <li class="currency">
                                    <a href="#" onclick="event.preventDefault();">{{ @$defaultCurrency?->code }}</a>
                                </li>
                            @endforelse
                        </ul>
                    </li>
                    <li class="dropdown language-dropdown nav-item-right">
                        @php
                            $defaultLocale = Helpers::getDefaultLanguageLocale();
                            $lang = Helpers::getLanguageByLocale(Session::get('locale', $defaultLocale));
                            $flag = $lang?->flag;
                        @endphp
                        <button id="languageSelected" class="language-btn">
                            <span>{{ strtoupper(Session::get('locale', $defaultLocale)) }}</span>
                            <i data-feather="chevron-down"></i>
                        </button>
                        <ul class="onhover-show-div">
                            @forelse (Helpers::getLanguages() as $lang)
                                <li class="lang">
                                    <a href="{{ route('lang', ['locale' => @$lang?->locale, 'locale_flag' => @$lang?->flag_path]) }}" data-lng="{{ @$lang?->locale }}">
                                        <img class="img-fluid lang-img" alt="English" src="{{ @$lang?->flag ?? asset('admin/images/No-image-found.jpg') }}">{{ $lang?->name }}
                                    </a>
                                </li>
                            @empty
                            @endforelse
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="top-header">
        <div class="container-fluid-lg">
            <nav class="navbar custom-navbar navbar-expand-xl navbar-light justify-xl-content-start">
                <div class="logo-content">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="{{ url('/') }}">
                        <img src="{{ isset($themeOptions['general']['header_logo']) ? asset($themeOptions['general']['header_logo']) : asset('frontend/images/logo/dark-logo.png') }}" alt="star" class="img-fluid">
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <div class="navbar-header d-xl-none d-flex">
                        <h4>Menu</h4>
                        <button class="btn-close" type="button">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <ul class="navbar-nav mx-auto custom-scroll">
                        @if ($themeOptions['header']['home'] ?? false)
                            <li class="nav-item">
                                <a class="nav-link @if (Request::is('/')) active @endif"
                                    href="{{ url('/') }}">{{ __('frontend::static.header.home') }}</a>
                            </li>
                        @endif
                        @if ($themeOptions['header']['categories'] ?? false)
                            <li class="nav-item">
                                <a class="nav-link @if (Request::is('category')) active @endif"
                                    href="{{ route('frontend.category.index') }}">{{ __('frontend::static.header.category') }}</a>
                            </li>
                        @endif
                        @if ($themeOptions['header']['services'] ?? false)
                            <li class="nav-item">
                                <a class="nav-link @if (Request::is('service')) active @endif"
                                    href="{{ route('frontend.service.index') }}">{{ __('frontend::static.header.service') }}</a>
                            </li>
                        @endif
                        @if ($themeOptions['header']['service_packages'] ?? false)
                        @endif
                        <li class="nav-item">
                            <a class="nav-link @if (Request::is('service-package')) active @endif"
                                href="{{ route('frontend.service-package.index') }}">{{ __('frontend::static.header.packages') }}</a>
                        </li>
                        @auth
                            @if ($themeOptions['header']['booking'] ?? false)
                                <li class="nav-item">
                                    <a class="nav-link @if (Request::is('booking')) active @endif"
                                        href="{{ route('frontend.booking.index') }}">{{ __('frontend::static.header.booking') }}</a>
                                </li>
                            @endif
                        @endauth
                        @if ($themeOptions['header']['blogs'] ?? false)
                            <li class="nav-item">
                                <a class="nav-link @if (Request::is('blog')) active @endif"
                                    href="{{ route('frontend.blog.index') }}">{{ __('frontend::static.header.blog') }}</a>
                            </li>
                        @endif
                    </ul>
                </div>
                <ul class="nav-right">
                    <li class="login-btn nav-item-right">
                        <button class="dark-btn btn" type="button" aria-pressed="false">
                            <i class="iconsax moon-icon" icon-name="moon"></i>
                            <i class="iconsax sun-icon" icon-name="sun"></i>
                        </button>
                    </li>
                    @if ($homePage['home_banner']['search_enable'] ?? false)    
                        <li class="login-btn nav-item-right">
                            <a href="#searchModal" class="btn" data-bs-toggle="modal">
                                <i class="iconsax" icon-name="search-normal-2"></i>
                            </a>
                        </li>
                    @endif
                    @auth
                        <li class="login-btn nav-item-right">
                            <a href="{{ route('frontend.account.profile.index') }}" class="btn">
                                <i class="iconsax" icon-name="user-2"></i>
                            </a>
                        </li>
                        <li class="login-btn nav-item-right">
                            <a href="{{ route('frontend.logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="btn">
                                <i class="iconsax" icon-name="logout-1"></i>
                            </a>
                            <form action="{{ route('frontend.logout') }}" method="POST" class="d-none" id="logout-form">@csrf</form>
                        </li>
                    @else
                        <li class="login-btn nav-item-right">
                            <a href="{{ route('frontend.login') }}" class="btn">
                                <i class="iconsax" icon-name="user-2"></i>
                            </a>
                        </li>
                    @endauth
                    <li class="login-btn nav-item-right">
                        <a href="{{ route('frontend.cart.index') }}" class="btn">
                            <i class="iconsax" icon-name="shopping-cart"></i>
                            @if (count(session('cartItems') ?? []))
                                <span class="badge">{{ count(session('cartItems') ?? []) }}</span>
                            @endif
                        </a>
                    </li>
                    @auth
                        <li class="login-btn nav-item-right">
                        <a href="{{ route('frontend.wishlist.index') }}" class="btn">
                            <i class="iconsax" icon-name="heart"></i>
                            <span class="badge wishlist-count">1</span>
                        </a>
                    </li>
                    @endauth
                    
                </ul>
            </nav>
        </div>
    </div>
</header>
<!-- Header Section End -->

<!-- location detected modal start -->
<div class="modal fade location-detected-modal" id="locationSelected" data-bs-backdrop="static"
    data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title" id="exampleModalLabel">
                    {{ __('frontend::static.home_page.your_location') }}
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i data-feather="x"></i>
                </button>
            </div>
            <div class="modal-body">
                <input class="form-control location-search" type="text" id="locationSearchInput" name="location"
                    placeholder="Search Location">
                <!-- Spinner HTML -->
                <div class="position-relative">
                    <div id="locationSpinner" class="location-loader" style="display: none;">
                        <div class="spinner-border"></div>
                    </div>

                    <ul id="location-list" class="location-list"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- location detected modal end -->

<!-- Search Modal Start -->
<div class="modal search-modal fade" id="searchModal">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">{{ __('frontend::static.home_page.search_location') }}</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal">
                    <i data-feather="x"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="home-form-group">
                    <div class="input-group">
                        <input class="form-control" type="search" id="searchInput" placeholder="Search Service">
                        <i data-feather="search"></i>
                    </div>
                </div>

                <div class="search-content-box">
                    <div class="search-box">
                        <div class="search-title">
                            <h4>Services</h4>
                        </div>
                        <ul class="search-list" id="serviceResults">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Search Modal End -->


<!-- Iconsax js -->
@push('js')
    <script>
        var swiper = new Swiper(".offer-header-slider", {
            direction: "vertical",
            slidesPerView: 1,
            loop: true,
            autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },
            speed: 2000,
        });
        (function($) {
            $('.currency').on('click', function() {
                let selectedCurrency = $(this).text().trim();
                $.ajax({
                    url: "{{ url('set-currency') }}/" + selectedCurrency,
                    type: "GET",
                    success: function() {
                        $('#unitSelected span').html($(this)
                            .html()); // Update selected currency button
                        location.reload(); // Reload the page to reflect the currency change
                    },
                    error: function(xhr) {
                        console.error("Error setting currency:", xhr.responseText);
                    }
                });
            });

            (function($) {
                // Function to fetch services
                const fetchServices = debounce(function(query) {
                    $.get('{{ route('frontend.service.search') }}', { query: query }, function(data) {
                        const resultsContainer = $('#serviceResults');
                        resultsContainer.empty(); // Clear old results

                        if (data.length) {
                            data.forEach(service => {
                                resultsContainer.append(`
                                    <li>
                                        <a href="/service/${service.slug}">
                                            <i data-feather="search"></i>
                                            <span>
                                                ${service.title}
                                                ${service.price ? `<small>${service.price} ₹</small>` : ''}
                                            </span>
                                        </a>
                                    </li>
                                `);
                            });
                            feather.replace(); // re-render icons
                        } else {
                            resultsContainer.append('<li><span>No services found</span></li>');
                        }
                    });
                }, 300);

                // Search input event listener
                $('#searchInput').on('keyup', function() {
                    const query = $(this).val();
                    if (query.length > 1) {
                        fetchServices(query);
                    } else {
                        $('#serviceResults').empty(); // clear results when input < 2 chars
                    }
                });

                })(jQuery);
        });
    </script>
@endpush