@php
    $cart = null;
    if (session()->has('cart_identifier')) {
        $cart = \App\Models\Cart::where('cart_identifier', session()->get('cart_identifier'))->first();
    }

    $cartItems = $cart
        ? $cart
            ->cartItems()
            ->with('product')
            ->get()
        : [];
@endphp

<div class="mt-3">
    <div class="container-fluid" style="position: fixed; top: 0; width: 100%; background-color: #fff; z-index: 1000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);overflow: visible;">
        <div class="row w-100 align-items-center gx-lg-2 gx-0">
            <div class="col-xxl-1 col-lg-1">
                <a class="navbar-brand d-none d-lg-block" href="{{ route('front.index') }}" style="height: 64px">
                    <img src="{{ asset('assets/admin/admin-data/static/logo-2.png') }}" alt="EA Perfumes UK" height="100%">

                </a>
                <div class="d-flex justify-content-between w-100 d-lg-none">
                    <a class="navbar-brand" href="{{ route('front.index') }}" style="height: 64px">
                        <img src="{{ asset('assets/admin/admin-data/static/logo-2.png') }}" alt="EA Perfumes UK" height="100%">

                    </a>

                    <div class="d-flex align-items-center lh-1">

                        <div class="list-inline me-4">
                            <div class="list-inline-item">
                                @if (auth()->user() && auth()->user()->role_id == 2)
                                    <a href="{{ route('user.dashboard') }}" class="text-muted position-relative">
                                        <i class="feather-icon icon-user me-2"></i>My Account
                                    </a>

                                    <a href="{{ route('user.logout') }}" class="text-muted position-relative">
                                        <i class="feather-icon icon-log-out me-2"></i>Logout
                                    </a>
                                @else
                                    <a href="#!" class="text-muted" data-bs-toggle="modal"
                                        data-bs-target="#userModal">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="feather feather-user">
                                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                            <circle cx="12" cy="7" r="4"></circle>
                                        </svg>
                                    </a>
                                @endif
                            </div>
                            <div class="list-inline-item">

                                <a class="text-muted position-relative " data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasRight" href="#offcanvasExample" role="button"
                                    aria-controls="offcanvasRight">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-shopping-bag">
                                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                                        <line x1="3" y1="6" x2="21" y2="6"></line>
                                        <path d="M16 10a4 4 0 0 1-8 0"></path>
                                    </svg>
                                    <span
                                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success cartItemsBadge">
                                        {{ isset($cartItems) ? count($cartItems) : 0 }}
                                        <span class="visually-hidden">unread messages</span>
                                    </span>
                                </a>
                            </div>

                        </div>
                        <!-- Button -->
                        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="offcanvas"
                            data-bs-target="#navbar-default" aria-controls="navbar-default"
                            aria-label="Toggle navigation">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"
                                class="bi bi-text-indent-left text-primary" viewBox="0 0 16 16">
                                <path
                                    d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708zM7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z">
                                </path>
                            </svg>
                        </button>

                    </div>
                </div>

            </div>

            <div class="col-xxl-6 col-lg-6">
                @include('frontend.layouts.nav-bar-2')
            </div>




            <div class="col-md-5 col-xxl-5 d-none d-lg-block">

                <div class="list-inline">
                    <div class="list-inline-item me-2">
                        <form action="/shop">
                            <div class="input-group ">
                                <input class="form-control form-control-sm rounded" type="search"
                                    placeholder="Search for Products" name="search">
                            </div>

                        </form>
                    </div>

                    <div class="list-inline-item">
                        @if (auth()->user() && auth()->user()->role_id == 2)
                            <a href="{{ route('user.dashboard') }}" class="text-muted position-relative">
                                <i class="feather-icon icon-user me-2"></i>My Account
                            </a>
                            <a href="{{ route('user.logout') }}" class="text-muted position-relative ms-3">
                                <i class="feather-icon icon-log-out me-2" title="Logout"></i>
                            </a>
                        @else
                            <a href="#" class="text-muted" data-bs-toggle="modal" data-bs-target="#userModal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" class="feather feather-user">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </a>
                        @endif
                    </div>
                    <div class="list-inline-item">

                        <a class="text-muted position-relative " data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRight" href="#offcanvasExample" role="button"
                            aria-controls="offcanvasRight">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag">
                                <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                                <line x1="3" y1="6" x2="21" y2="6"></line>
                                <path d="M16 10a4 4 0 0 1-8 0"></path>
                            </svg>
                            <span
                                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success cartItemsBadge">
                                {{ isset($cartItems) ? count($cartItems) : 0 }}
                                <span class="visually-hidden">unread messages</span>
                            </span>
                        </a>

                    </div>





                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .selected {
        background-color: #f0f0f0;
    }
</style>
@push('scripts')
<script>
    $(document).ready(function () {
        var searchInput = $('input[name="search"]');
        var suggestionsContainer = $('<div class="suggestions"></div>');
        var debounceTimeout;
        var selectedSuggestionIndex = -1;

        // Append the suggestions container after the input field
        searchInput.after(suggestionsContainer);

        // Hide the suggestions container by default
        suggestionsContainer.hide();

        searchInput.on('keyup', function (event) {
            clearTimeout(debounceTimeout);

            // Debounce the AJAX request
            debounceTimeout = setTimeout(function () {
                var query = searchInput.val().trim();

                if (query.length > 0) {
                    $.ajax({
                        url: '/search/suggest',
                        type: 'GET',
                        data: { query: query },
                        success: function (data) {
                            suggestionsContainer.empty();

                            if (data.length > 0) {
                                $.each(data, function (index, product) {
                                    suggestionsContainer.append('<div class="suggestion" data-slug="' + product.slug + '">' + product.name + '</div>');
                                });

                                // Show the suggestions container
                                suggestionsContainer.show();
                                // Bring the suggestions container to the front
                                suggestionsContainer.css('z-index', '9999');
                            } else {
                                // Hide the suggestions container if no results
                                suggestionsContainer.hide();
                            }

                            // Reset selected suggestion index
                            selectedSuggestionIndex = -1;
                        }
                    });
                } else {
                    // Hide the suggestions container if the query is empty
                    suggestionsContainer.hide();
                }
            }, 300); // Adjust the debounce delay (in milliseconds) as needed
        });

        // Handle clicking on a suggestion
        suggestionsContainer.on('click', '.suggestion', function () {
            var productSlug = $(this).data('slug');
            window.location.href = '/products/' + productSlug; // Adjust the URL structure as needed
        });

        // Handle arrow key navigation
        searchInput.on('keydown', function (event) {
            if (event.key === 'ArrowUp' && selectedSuggestionIndex > 0) {
                selectedSuggestionIndex--;
            } else if (event.key === 'ArrowDown' && selectedSuggestionIndex < $('.suggestion').length - 1) {
                selectedSuggestionIndex++;
            }

            // Highlight the selected suggestion
            $('.suggestion').removeClass('selected');
            $('.suggestion:eq(' + selectedSuggestionIndex + ')').addClass('selected');
        });

        // Handle Enter key press
        searchInput.on('keyup', function (event) {
            if (event.key === 'Enter' && selectedSuggestionIndex !== -1) {
                var productSlug = $('.suggestion:eq(' + selectedSuggestionIndex + ')').data('slug');
                window.location.href = '/products/' + productSlug; // Adjust the URL structure as needed
            }
        });

        // Hide suggestions when clicking outside the input and suggestions container
        $(document).on('click', function (event) {
            if (!$(event.target).closest('.suggestions').length && !$(event.target).is('input[name="query"]')) {
                suggestionsContainer.hide();
            }
        });
    });
</script>








@endpush
<style>
    .suggestions {
        position: absolute;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        background-color: #fff;
        top: 100%; /* Position below the input field */
        left: 0;
    }

    .suggestion {
        padding: 8px;
        cursor: pointer;
    }

    .suggestion:hover {
        background-color: #f0f0f0;
    }
</style>