<style>@font-face{font-family:muli;src:url('{{asset("/")}}assets/frontend/font/Muli/Muli-VariableFont_wght.ttf');}header .main-menu{z-index:999999;}@media(max-width:750px){.sear_wrapper, #search-view{width:100% !important;}}.goog-te-gadget img {display:none;}.goog-te-banner-frame {display:none;}.VIpgJd-ZVi9od-ORHb-OEVmcd {display:none !important;}</style>
@if(!Request::is('/'))
<style>.products .product .thumbnail {height: 190px !important;}#list-view .product .thumbnail img {width: 200px;}@media(max-width:767px) {#list-view .product .thumbnail img {width: inherit;}#list-view .product h4 {font-size: 17px;font-weight: 1;margin-top: 10px;}#list-view .product .details {margin-left: 15px;}#list-view .product .details .dis-label {display: none;}}</style>
@endif
<header class="not-home">
<div class="upper-header" style="">
    <div class="container">
        <div style="display: flex;">
            <div class="dvts" style="flex: 1;">
                <ul>
                    <li><i class="fal fa-phone-alt" aria-hidden="true"></i> Have a question? Call us<a href="tel:{{setting('SITE_INFO_PHONE')}}"> {{setting('SITE_INFO_PHONE')}}</a></li>
                    {{-- <li style="margin-left: 10px;"><a href=""><i class="fal fa-envelope" aria-hidden="true"></i> {{setting('email')}}</a></li> --}}
                </ul>
            </div>
            <div class="dvts">
                <ul>
                    @if (auth()->check() && auth()->user()->role_id != 1)
                    <li><a href="{{route('dashboard')}}" class="{{Request::is('dashboard') ? 'active':''}}">My
                            Account</a></li>
                    @endif
                    @auth
                    @if(auth()->user()->role_id == 2)
                    <span
                        style="margin:-2px 5px;height: 15px;display: inline-block;width: 1px;background: black;"></span>
                    <li><a class="vendor-button" href="{{routeHelper('dashboard')}}"> Dashboard</a></li>
                    @endif
                    @endauth
                    @if(auth()->user())
                    @else
                    <li><a href="{{route('login')}}">Sign In</a></li>
                    <span
                        style="margin:-2px 5px;height: 15px;display: inline-block;width: 1px;background: black;"></span>
                    <li><a href="{{route('register')}}">Sign Up</a></li>
                    <li><a style="border: 1px solid black;padding: 3px 10px;border-radius: 10px;"
                            href="{{route('vendorJoin')}}">Seller</a></li>
                    @endif
                    <li>
                        <div id="google_translate_element" onclick="foo();"> </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="top-header header_area" style="background:#f3f3f3">
    <div class="container containe">
        <div class="mobile-menu-openar">
            <div class="bars">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="logo-area">
            <a href="{{route('home')}}">
                <img src="@if (file_exists(public_path() .'/uploads/setting/'.setting('logo'))){{asset('/uploads/setting/'.setting('logo'))}}@else{{ asset('/icon/no-img-cat.png') }}@endif" alt="{{ setting('SITE_NAME') ?? env('APP_NAME') }}">
            </a>
        </div>
        <div class="mobi-comp top-menu" style="display: none;">
            <ul>
                <li><a href="{{route('cart')}}"><i class="fal fa-shopping-cart"></i></a></li>
                @guest
                <li><a href="{{route('login')}}"><i class="fas fa-user"></i> </a></li>
                @else
                <li>
                    <a href="{{route('logout')}}" onclick="event.preventDefault();
                        document.getElementById('logout-form').submit();"><i
                            class="icofont icofont-logout"></i></a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </li>
                @endguest
            </ul>
        </div>
        <div class="wrap" style="width: 30px;"></div>
        <div class="search-box" id="search-box-open">
            <form id="form_search" action="{{route('product.search')}}" method="GET">
                <div class="input-group form_search_block">
                    <input placeholder="Search entires store here...." class="sear" type="search"
                        name="keyword" id="keyword" autocomplete="off" required>
                    <button class="input-group-addon" name="go" type="submit"><i 
                            class="icofont icofont-search"></i></button>
                </div>
            </form>
            <i id="form_search_icon" style="display:none" class="other-search icofont icofont-search"></i>
        </div>

        <div class="wrap" style="width: 30px;"></div>
        <div class="top-menu">
            <ul>
                <li><a href="{{route('wishlist')}}"> <i class="fal fa-heart" aria-hidden="true"></i> <sup> <span
                                id="total-cart-{{-- amount --}}">{{App\Models\wishlist::where('user_id',auth()->id())->count()}}</span></sup></a>
                </li>
                <li><a href="{{route('cart')}}"><i class="fal fa-shopping-basket"></i> <sup> <span
                                id="total-cart-count">{{Cart::count()}}</span></sup> </a></li>
                @auth
                <li>
                    <a href="{{route('logout')}}" onclick="event.preventDefault();
                        document.getElementById('logout-form').submit();">Log Out</a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                        @csrf
                    </form>
                </li>
                @endauth
            </ul>
        </div>
    </div>
</div>
<div id="search-view" style="width:60%;margin:auto"></div>
{{-- <div class="menu-overly"></div> --}}

{{-- Main Menu --}}
@if (!empty(setting('MAIN_MENU_STYLE')))
@include('layouts.frontend.partials.partial-part.header_main_menu_' . setting('MAIN_MENU_STYLE'))
@else
@include('layouts.frontend.partials.partial-part.header_main_menu_1')
@endif
@include('layouts.frontend.partials.partial-part.header_main_menu_all_style_and_scripts')
</header>

<style>
    /* Search Wrapper */
    /* .advance-search{
        background: transparent;
    } */
    /* Search View */
    #search-view{
        background: #fff;
        height: fit-content;
        max-height: 100%;
        padding: 0;
        position: fixed;
        z-index: 9999;
        left: 0;
        right: 0;
    }
    #search-view .pin{
        display: flex;
        background: white;
        padding: 1.2rem .6rem;
        border-bottom: 1px solid gainsboro;
        gap: .8rem;
    }
    #search-view .pin .thumbnail{
        margin-top: 0;
    }
    #search-view .pin .detaisls h5{
        margin: 0;
    }
    #search-view .pin .detaisls h5.search_p_titile{
        font-size: .9rem;
        line-height: 1.3rem;

        height: 4rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


    @media (max-width:767px){
        /* in mobile search icon visible */
        .form_search_block{
            display: block !important;
        }


        /* .phone_form_search_input { */
        .form_search_block {
            position: fixed;
            z-index: 999;
            top: 0;
            left: 0;
            /* display: block !important;
            left: 50%;
            width: 95%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            border: 1px solid #ccc */
        }
    }
</style>

@push('js')
{{-- fixed search bar --}}
{{-- <script>
    var nav_offset_top = $('header').height() + 50; 
    function navbarFixed(){
        if ( $('.header_area').length ){ 
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();   
                if (scroll >= nav_offset_top ) {
                    $(".header_area").addClass("navbar_fixed");
                } else {
                    $(".header_area").removeClass("navbar_fixed");
                }
            });
        };
    };
    navbarFixed();
</script> --}}

{{-- Search Req --}}
{{-- <script>
    $(document).on('keyup click', '#keyword', function (e) {
        let key = $(this).val();
        let url = $('#aurl').val();
        if(key != ""){
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    'key': key,
                    '_token': $('meta[name="csrf-token"]').attr('content'),
                },
                dataType: "JSON",
                success: function (response) {
                    $("#search-view").html(response);
                },
                error: function (xhr) {
                    console.log(xhr.statusText);
                }
            });
        }else{
            // console.log('empty search');
            $("#search-view").html('');
        }
    });
    // After click anywhere out of search result box or search result box this box will hide
    $(document).ready(function() {
            $(document).click(function(event) {
                if (!$(event.target).closest("#search-view").length) {
                    $("#search-view").html('');
                }
            });
        });
</script> --}}

{{-- Place holder animate searchbar --}}
{{-- <script>
    const texts = [
        "{!! setting('placeholder_one') !!}",
        "{!! setting('placeholder_two') !!}",
        "{!! setting('placeholder_three') !!}",
        "{!! setting('placeholder_four') !!}"
    ];
    const input = document.querySelector('#keyword');
    const animationWorker = function(input, texts) {
        this.input = input;
        this.defaultPlaceholder = this.input.getAttribute('placeholder');
        this.texts = texts;
        this.curTextNum = 0;
        this.curPlaceholder = '';
        this.blinkCounter = 0;
        this.animationFrameId = 0;
        this.animationActive = false;
        this.input.setAttribute('placeholder', this.curPlaceholder);

        this.switch = timeout => {
            this.input.classList.add('imitatefocus');
            setTimeout(
                () => {
                    this.input.classList.remove('imitatefocus');
                    if (this.curTextNum == 0)
                        this.input.setAttribute('placeholder', this.defaultPlaceholder);
                    else
                        this.input.setAttribute('placeholder', this.curPlaceholder);
                    setTimeout(
                        () => {
                            this.input.setAttribute('placeholder', this.curPlaceholder);
                            if (this.animationActive)
                                this.animationFrameId = window.requestAnimationFrame(this.animate);
                        },
                        timeout);
                },
                timeout);
        };

        // this.animate = () => {
        //     if (!this.animationActive) return;

        //     let curPlaceholderFullText = this.texts[this.curTextNum];
        //     let timeout = 10;

        //     // Check if the cursor is at the end of the current placeholder
        //     if (this.curPlaceholder === curPlaceholderFullText + '|' && this.blinkCounter === 3) {
        //         this.blinkCounter = 0;
        //         this.curTextNum = (this.curTextNum + 1) % this.texts.length; // Cycle to the next placeholder
        //         curPlaceholderFullText = this.texts[this.curTextNum]; // Update the current placeholder
        //         this.curPlaceholder = '|';
        //         timeout = 2000; // Longer timeout after cycling to the next placeholder
        //     } else if (this.curPlaceholder === curPlaceholderFullText + '|' && this.blinkCounter < 3) {
        //         this.curPlaceholder = curPlaceholderFullText;
        //         this.blinkCounter++;
        //     } else if (this.curPlaceholder === curPlaceholderFullText && this.blinkCounter < 3) {
        //         this.curPlaceholder = this.curPlaceholder + '|';
        //     } else {
        //         this.curPlaceholder = curPlaceholderFullText
        //             .split('')
        //             .slice(0, this.curPlaceholder.length + 1)
        //             .join('') + '|';
        //         timeout = 150;
        //     }

        //     this.input.setAttribute('placeholder', this.curPlaceholder);
        //     setTimeout(() => {
        //         if (this.animationActive) this.animationFrameId = window.requestAnimationFrame(this.animate);
        //     }, timeout);
        // };

        this.animate = () => {
            if (!this.animationActive) return;
            let curPlaceholderFullText = this.texts[this.curTextNum];
            let timeout = 10;
            if (this.curPlaceholder == curPlaceholderFullText + '|' && this.blinkCounter == 3) {
                this.blinkCounter = 0;
                this.curTextNum = this.curTextNum >= this.texts.length - 1 ? 0 : this.curTextNum + 1;
                this.curPlaceholder = '|';
                this.switch(2000);
                return;
            } else
            if (this.curPlaceholder == curPlaceholderFullText + '|' && this.blinkCounter < 3) {
                this.curPlaceholder = curPlaceholderFullText;
                this.blinkCounter++;
            } else
            if (this.curPlaceholder == curPlaceholderFullText && this.blinkCounter < 3) {
                this.curPlaceholder = this.curPlaceholder + '|';
            } else {
                this.curPlaceholder = curPlaceholderFullText.
                split('').
                slice(0, this.curPlaceholder.length + 1).
                join('') + '|';
                timeout = 150;
            }
            this.input.setAttribute('placeholder', this.curPlaceholder);
            setTimeout(
                () => {
                    if (this.animationActive) this.animationFrameId = window.requestAnimationFrame(this
                        .animate);
                },
                timeout);
        };

        this.stop = () => {
            this.animationActive = false;
            window.cancelAnimationFrame(this.animationFrameId);
        };

        this.start = () => {
            this.animationActive = true;
            this.animationFrameId = window.requestAnimationFrame(this.animate);
            return this;
        };
    };

    document.addEventListener("DOMContentLoaded", () => {
        let aw = new animationWorker(input, texts).start();
        input.addEventListener("focus", e => aw.stop());
        input.addEventListener("blur", e => {
            aw = new animationWorker(input, texts);
            if (e.target.value == '') setTimeout(aw.start, 1000);
        });
    });

    setInterval(function() {
        $('.notify').hide();
    }, 5000);
</script> --}}

{{-- mobile-menu-show --}}
{{-- <script>
    // mobile-menu-show
    $('.bars').click(function(){
        $('.hero-area').hide();
        $('.main-menu').addClass('menu-show');
        $('.menu-overly').addClass('ovshow');
        $('body').css('position','fixed');
        $('.ovshow').click(function(){
            $('.menu-overly').removeClass('ovshow');
            $('.main-menu').removeClass('menu-show');
            $('body').css('position','');
        });
    });

    // Back btn / close mobile menu
    $('.back').click(function(){
        $('.menu-overly').removeClass('ovshow');
        $('.main-menu').removeClass('menu-show');
        $('body').css('position','');
        $('.hero-area').show();
    });
</script> --}}

{{-- Category render in menu --}}
{{-- <script>
    $(window).on('load', function () {
        $('#myModal').modal('show');
    });
    var site_url = "{{ url('/') }}";
    $.ajax({
        url: site_url + "/render/superCat",
        type: "get",
        datatype: "html",
        beforeSend: function () {
            $('.ajax-loading').show();
        },
        success: function (response) {
            var result = $.parseJSON(response);
            $('.ajax-loading').hide();
            $("#superCat").append(result);
            subCat();
        },
    })
    function subCat() {
        var site_url = "{{ url('/') }}";
        $.ajax({
            url: site_url + "/render/subCat",
            type: "get",
            datatype: "html",
            beforeSend: function () {
                $('.ajax-loading').show();
            },
            success: function (response) {
                var result = $.parseJSON(response);
                $('.ajax-loading').hide();
                $("#subCat").append(result);
            },
        })
    }
</script> --}}

{{-- Search Icon and search bar for phone --}}
<script>
    // add search box
    $('#form_search_icon').click(function(){
        event.stopPropagation(); // Prevent the click from bubbling up to the document
        $('#form_search').addClass('form_search_block');
        $('#keyword').addClass('phone_form_search_input');
        console.log('search bar opening');
    });

    // close the search box
    $(document).ready(function () {
        $(document).click(function (event) {
            if (!$(event.target).closest("#keyword").length && $('#keyword').hasClass('phone_form_search_input')) {
                $('#keyword').removeClass('phone_form_search_input');
                // display block <form search remove
                if ($('#form_search').hasClass('form_search_block')) {
                    $('#form_search').removeClass('form_search_block');
                }
                console.log('close mobile search box');
            }
        });
    });
</script>
@endpush