<?php $__env->startPush('js'); ?>
<style>
/* Default Style */
@media (max-width:767px){
    .mega_mobile_cat_fixed{
        position: fixed !important;
        top: 90px;
        left: 0;
        width: 90px;
        height: 100vh;
        overflow-y: auto;
    }
    .mega_sub_cat_fixed{
        position: fixed !important;
        top: 90px !important;
        height: calc(100vh - 90px);
        overflow-y: auto;
    }
    /* Fixed mobile menu top bar and padding top the continer for avoid fixed space top bar */
    .mobile_back_fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999999;
    }
    .collpase-menu-open_fixed {
        position: fixed;
        left: 0;
        width: 100%;
        top: 45px;
        z-index: 99999;
    }
    .main-menu .container {
        padding-top: 90px;
    }
}
</style>


<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>


<script>
    // Search Keywords
    let keyword = "<?php echo $searchKeyword ?? ''; ?>";
    let searchKeywords = JSON.parse(localStorage.getItem('searchKeywords')) || [];
    if (searchKeywords.includes(keyword)) {
        searchKeywords = searchKeywords.filter(item => item !== keyword);
    } else {
        if (searchKeywords.length >= 10) {
            searchKeywords.shift();
        }
    }
    if (keyword) {
        searchKeywords.push(keyword);
        localStorage.setItem('searchKeywords', JSON.stringify(searchKeywords));
    }
    
    // Render search keywords
    function renderSearchKeywords(){
        // Clear previous keywords
        document.getElementById('search-view').innerHTML = '';
        
        // Create a new array with the keywords and add a unique element if needed
        let keywordsToDisplay = [...searchKeywords]; // Copy the original array

        // Check if keywordsToDisplay is not empty before rendering
        if (keywordsToDisplay.length > 0) {
            // Reverse the array for display
            keywordsToDisplay.reverse().forEach(function(keyword) {
                if (keyword) { // Only add if keyword is not empty
                    let keywordElement = document.createElement('a');
                    keywordElement.classList.add('d-block', 'py-2', 'px-3', 'bg-light', 'text-dark', 'text-decoration-none');
                    keywordElement.href = `/product/search?keyword=${encodeURIComponent(keyword)}`; // Create URL with keyword
                    keywordElement.textContent = keyword;
                    document.getElementById('search-view').appendChild(keywordElement);
                }
            });
        }
    }

    $(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 {
            // Show search keywords from local storage when input is empty
            renderSearchKeywords();
        }
    });

    // 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 && !$(event.target).is("#keyword")) {
                $("#search-view").html('');
            }
        });
    });
</script>


<script>
    const texts = [
        "<?php echo setting('placeholder_one'); ?>",
        "<?php echo setting('placeholder_two'); ?>",
        "<?php echo setting('placeholder_three'); ?>",
        "<?php echo 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>


<script>
    function mobile_menu_open(){
        $('.main-menu').addClass('menu-show');
        $('body').css('position','fixed');
        // $('.menu-overly').addClass('ovshow');
        
        // Fixed the partial of mobile menu component
        $('.back').addClass('mobile_back_fixed');
        $('.collpase-menu-open').addClass('collpase-menu-open_fixed');
        $('#subCat ul.mega').addClass('mega_mobile_cat_fixed');
        $('#subCat ul.mega li ul.pro').addClass('mega_sub_cat_fixed');
        $('.nav-bar').css('display','flex');
    }
    function mobile_menu_close(){
        $('.main-menu').removeClass('menu-show');
        $('body').css('position','');
        // $('.menu-overly').removeClass('ovshow');
        
        // Fixed the partial of mobile menu component
        $('.back').removeClass('mobile_back_fixed');
        $('.collpase-menu-open').removeClass('collpase-menu-open_fixed');
        $('#subCat ul.mega').removeClass('mega_mobile_cat_fixed');
        $('#subCat ul.mega li ul.pro').removeClass('mega_sub_cat_fixed');
        $('.nav-bar').css('display','none');
    }
    // toggle or category btn / show mobile menu
    $('.bars').click(function(){
        $('.hero-area').hide();
        mobile_menu_open();
        // $('.ovshow').click(function(){
        //     mobile_menu_open(); // re call hide mobile menu - when click
        // });
    });
    // Back btn / close mobile menu
    $('.back').click(function(){
        $('.hero-area').show();
        mobile_menu_close();
    });
</script>


<script>
    $(window).on('load', function () {
        $('#myModal').modal('show');
    });
    var site_url = "<?php echo e(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 = "<?php echo e(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>
<?php $__env->stopPush(); ?><?php /**PATH /home/apleusbj/shopping.apleefix.com/resources/views/layouts/frontend/partials/partial-part/header_main_menu_all_style_and_scripts.blade.php ENDPATH**/ ?>