@php
    $baseRoute = $baseRoute ?? route('accessories-listing');
@endphp

<script>
    let fromLandingFlag = true;
    let updateCategoryFlag = false;

    $(document).ready(function () {
        $('.card-body').each(function () {
            let selectedColorCode = $(this).data('selected-color-code');
            if (selectedColorCode) {
                let link = UpdateQueryString('product', selectedColorCode, $(this).attr("href"));
                $(this).attr("href", link);
            }
        });

        $(function () {
            $('ul#myList').each(function () {
                var $ul = $(this),
                    $lis = $ul.find('li:gt(4)'),
                    isExpanded = $ul.hasClass('expanded');
                $lis[isExpanded ? 'show' : 'hide']();

                if ($lis.length > 0) {
                    $ul
                        .append($('<li class="expand">' + (isExpanded ? 'اخفاء' : 'المزيد') + '</li>')
                            .click(function (event) {
                                var isExpanded = $ul.hasClass('expanded');
                                event.preventDefault();
                                $(this).text(isExpanded ? 'المزيد' : 'اخفاء');
                                $ul.toggleClass('expanded');
                                $lis.toggle();
                            }));
                }
            });
        });

        initColorsField();

        $('.search-input').bind('keypress', function (e) {

            var code = e.keyCode || e.which;

            if (code == 13) {
                e.preventDefault();

                let url = "{{ $baseRoute }}?" + $('#accessory_filter_form').serialize();

                window.location.href = url;
            }
        });
    });

    // $('#order').change(function (e) {
    //         var order = $(this).val();
    //         var url = UpdateQueryString("order", order);
    //         window.location.href = url;
    // });

    function initColorsField() {
        $('.colors-field').select2({
            escapeMarkup: function (markup) {
                return markup;
            },
            templateResult: colorOption,
            templateSelection: colorOption,
            allowClear: true
        });
    }

    function getParamFromGetRequest(param) {
        let urlSearchParam = new URLSearchParams(window.location.search);

        if (!urlSearchParam.has(param)) {
            return '';
        }

        return urlSearchParam.get(param);
    }

    function colorOption(option) {
        let data = option.text.split('|');

        if (data.length < 2) {
            return option.text;
        }

        let name = data[0];
        let color = data[1];

        return '<div dir="rtl"> <span class="d-inline-block mx-10px" style="background:' + color + ';width: 12px;height: 12px;border-radius: 3px"></span>' + name + '</div>';
    }

    function UpdateQueryString(key, value, url) {
        if (!url) url = window.location.href;
        var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
            hash;

        if (re.test(url)) {
            if (typeof value !== 'undefined' && value !== null)
                return url.replace(re, '$1' + key + "=" + value + '$2$3');
            else {
                hash = url.split('#');
                url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
                if (typeof hash[1] !== 'undefined' && hash[1] !== null)
                    url += '#' + hash[1];
                return url;
            }
        } else {
            if (typeof value !== 'undefined' && value !== null) {
                var separator = url.indexOf('?') !== -1 ? '&' : '?';
                hash = url.split('#');
                url = hash[0] + separator + key + '=' + value;
                if (typeof hash[1] !== 'undefined' && hash[1] !== null)
                    url += '#' + hash[1];
                return url;
            } else
                return url;
        }
    }

    $(document).on('click', '.available-checkbox', function () {
        // filterFormOnChange(true);
    });

    let prev_category_id = $('#category').val();
    let prev_accessory_category_id = $('#accessory_category').val();
    let prev_sub_accessory_category_id = $('#sub_accessories_categories').val();

    function filterFormOnChange(availableOnlyToFilter = false) {
        $(".spinner").delay("fast").fadeIn();

        let submitForm = true;

        let accessoryCategoryUpdated = ($('#accessory_category').val() != prev_accessory_category_id);

        let subAccCategoryUpdated = ($('#sub_accessories_categories').val() != prev_sub_accessory_category_id);

        let categoryUpdated = ($('#category').val() != prev_category_id);

        let categoryFromRequest = getParamFromGetRequest('category');

        let categoryFromLanding = false;

        if (queryHasParam('from_landing')) {
            categoryFromLanding = true;
        }

        if (accessoryCategoryUpdated || subAccCategoryUpdated) {
            $("#brand").select2().empty().select2({
                data: []
            });
        }

        if (availableOnlyToFilter || accessoryCategoryUpdated || subAccCategoryUpdated || categoryUpdated || categoryFromLanding) {
            submitForm = false;

            let category_id = prev_category_id = ($('#category').val());

            if (categoryFromLanding) {
                category_id = prev_category_id = categoryFromRequest;
            }

            let accessory_category_id = prev_accessory_category_id = $('#accessory_category').val();

            let sub_accessory_category_id = prev_sub_accessory_category_id = $('#sub_accessories_categories').val();

            let color = $('#filter_color').val();

            let query = `category=${category_id}&accessory-category=${accessory_category_id}&sub-accessory-category=${sub_accessory_category_id}`;

            if (color) {
                query += `&color=${color}`;
            }

            // if (brand_id) {
            //     query += `&brand=${brand_id}`;
            // }

            if (availableOnlyToFilter && queryHasParam('available_only', true)) {
                query += '&available_only=1';
            }

            $.get('{{route('specifications_filter')}}' + "?" + query, (view) => {
                $('#specification-filter').html(view);
                filterFormSubmit();
                initColorsField();
            });
        }

        if (submitForm) {
            filterFormSubmit();
            $(".spinner").delay(3000).fadeOut();
        }else {
            $(".spinner").delay(3000).fadeOut();
        }

    }

    function filterFormSubmit() {
        if (queryHasParam('from_landing') && fromLandingFlag) {
            fromLandingFlag = false;

            updateCategoryFlag = true;

            return;
        }

        if ($('#category').val() === '' && updateCategoryFlag) {
            $('#category').val('{{ request()->get('category') }}'.toLowerCase());
            updateCategoryFlag = false;
        }

        let filter = $('#accessory_filter_form').serialize();

        let url = new URL('{{ url()->current() }}')

        let queryParameters = filter;

        window.history.pushState(null, "", url + "?" + queryParameters);

        $.get('{{route('accessory_list')}}' + "?" + queryParameters, (view) => {
            $('#accessory-list').html(view);
        }).then(function () {
            @if(config('view.enable_infinite_pagination'))
            initInfiniteScroll();
            @endif
        });

        $.get('{{route('brand_options')}}' + "?" + queryParameters, (view) => {
            $('#brand_options').html(view);
        });
    }

    function queryHasParam(param, urlSerializeForm = false, formId = 'accessory_filter_form') {

        let url = $(`#${formId}`).serialize();
        if (urlSerializeForm) {
            return url.indexOf(param) !== -1
        }

        return window.location.search.indexOf(param) !== -1;
    }

    $(document).ready(function () {
        let collapse = $('.selected-sub, .selected').closest('.collapse');
        let loop = 0;

        while (collapse.length) {
            collapse.addClass('show');

            collapse = collapse.closest('.collapse:not(.show)');

            loop++;

            if (loop === 3) {
                break;
            }
        }
    });

    function showHideAdvancedOptions() {
        if ($('#advanceOptions').text().trim() === '') {
            $('#advanceOptionsButton').hide();
        } else {
            $('#advanceOptionsButton').show();
        }
    }

    $(document).ready(function () {
        $('.dependent-select').on('change', function () {
            var thisVal = $(this).val();
            getAccessoryCategories(thisVal);
        });

        function getAccessoryCategories(accessoryCategory, selected = '') {
            if (!accessoryCategory) {
                $("#sub_accessories_categories").select2().empty().select2({
                    data: []
                });
                return;
            }

            $.ajax(`category/${accessoryCategory}/childs`,
                {
                    success: function (data, status, xhr) {
                        console.log(data);
                        var targetElementData = [];

                        targetElementData.push({'id': '', 'text': ''});

                        $.each(data, function (index) {
                            targetElementData.push({'id': index, 'text': data[index]});
                        });

                        $("#sub_accessories_categories").select2().empty().select2({
                            data: targetElementData
                        });

                        $("#sub_accessories_categories").val(selected).trigger('change');
                    }
                });
        }

        if ($("#advanceOptionsButton").is(":visible")) {
            $("#advanceOptions").removeClass('show');
        }
    })

    function toAccessoriesListing() {
        if (window.location.pathname.includes('/sales') && !$("input[name='filter']").length) {
            $('#accessory_filter_form').append('<input type="hidden" name="filter" value="accessories">');
        }

        window.location.href = "{{ $baseRoute }}?" + $('#accessory_filter_form').serialize();
    }
</script>

<script type="text/javascript">
    let is_color_select_more = false
    let defualt = true
    $(document).ready(function () {
        $(document).on('click','.popover-accessory',function (e){
            e.preventDefault();

            let id = $(this).data('color_id')
            let item = $(this).data('item')
            let q = $(this).data('stock')
            let check = $(".stock-color-" + item).attr('check-w')
            if($('.popover.fade').popover().length==0) {
                if (q>0 && check==undefined){
                    $.ajax({
                        type: "POST",
                        url: '{{ route("check-availability-warehouse") }}',
                        data: {
                            id: id,
                            model: 'accessory'
                        },
                        success: function (result) {
                            $(".stock-color-" + item).html( `</a>  <a href="#" id="popover-warehouses" class="pop-${item}" data-toggle="popover">  <span style="color:#8fda8f;font-weight: bold"><i class="fas fa-check-circle"></i> متوفر </span>`);
                            $(".stock-btn-" + item).html('للتفاصيل والطلب');
                            $("#stock-btn-" + item).html('للتفاصيل والطلب');
                            $('a#popover-warehouses').data('content',`${result}`)
                            $('[data-toggle="popover"]').popover({
                                html:true,
                            });
                            if ('{{request()->is('accessories')}}'){
                                $('.owl-item.active').children().closest('.item').find('.card').find('.card-body').find(`a.pop-${item}`).popover('show')
                            }else {
                                $(`a.pop-${item}`).popover('show')
                            }

                            $('a#popover-warehouses').on('click', function(e) {e.preventDefault(); return true;});

                        }
                    });

                }
            }else {
                if(q>0 && check==undefined){
                    $('.popover.fade').popover().remove('div.popover.fade');
                    $('.popover.fade').popover('hide');
                    return false
                }
            }

        })
        $('a#popover-warehouses').on('click', function(e) {e.preventDefault(); return true;});

        $('[data-toggle="popover"]').popover({
            html: true,
            trigger: 'click',
            content: function() {
                return $('#popover-content').html();
            }
        });
        $('html').on('mouseleave','#popover-warehouses', function(e) {
            if(!$(e.target).closest('.popover').length) {
                $('.popover').each(function(){
                    if($('.popover.fade').popover().length>0) {
                        $('.popover.fade').popover().remove('div.popover.fade');
                    }
                });
            }
        });

        $(document).on('click', '.color-choose div', function (e) {
            if ($('.popover.fade').popover().length!=0){
                $('.popover.fade').popover().remove('div.popover.fade');
                $('.popover.fade').popover('hide');
            }
            var Color = $(this).attr('data-image');
            var Item = $(this).attr('data-item');
            var Status = $(this).attr('data-stock-status');
            var SpecialOrder = $(this).attr('data-special-order');
            var PreOrder = $(this).attr('data-pre-order');
            var ColorCode = $(this).attr('data-color-code');
            var ColorName = $(this).attr('data-color-name');
            $(".stock-color-" + Item).attr('check-w', 'false');

            $('div#color-label-' + Item).text(ColorName)
            if ($(this).select().attr('class') == '') {
                $(this).parent().closest('*').find('.show-more-color').find('i').css('box-shadow', 'unset')
                is_color_select_more = false
                defualt = false
            } else if ($(this).select().attr('class') != 'show-more-color') {
                is_color_select_more = true
                defualt = true
            }
            $("p.render-color-code" + Item).text(ColorCode)
            $("#current-image-" + Item).attr("src", $("#image-selector-" + Color).attr("src"));
            $(".current-image-" + Item).attr("src", $("#image-selector-" + Color).attr("src"));

            let imageUrl = $("#image-selector-" + Color).attr("src");
            $('img#accessory-img-' + Item).css('display', 'none')
            $("a#accessory-link-" + Item).css("background-image", "url(" + imageUrl + ")");

            $("#color-code-" + Item).val(ColorCode);

            var Quantity = $(this).attr('data-color-quantity');
            $(".stock-color-" + Item).attr('check-w', 'false');
            if (Quantity > 0) {
                $('.popover.fade').popover().remove('div.popover.fade');

                $.ajax({
                    type: "POST",
                    url: '{{ route("check-availability-warehouse") }}',
                    data: {
                        id: $(this).data('accessory_id'),
                        model: 'accessory'
                    },
                    success: function (result) {
                        $(".stock-color-" + Item).html( '</a>  <a href="#" id="popover-warehouses" data-toggle="popover">  <span style="color:#8fda8f;font-weight: bold"><i class="fas fa-check-circle"></i> متوفر </span>');
                        $("#stock-btn-" + Item).html('للتفاصيل والطلب');
                        $(".stock-btn-" + Item).html('للتفاصيل والطلب');

                        $('a#popover-warehouses').data('content',`${result}`)
                        $('[data-toggle="popover"]').popover({
                            html:true,
                            // trigger: 'click'
                        });
                        $('a#popover-warehouses').on('click', function(e) {e.preventDefault(); return true;});

                        $('html').on('mouseleave','#popover-warehouses', function(e) {
                            if(!$(e.target).closest('.popover').length) {
                                $('.popover').each(function(){
                                    $('.popover.fade').popover().remove('div.popover.fade');
                                });
                            }
                        });
                    }
                });

            } else {
                if (Status == "coming-soon") {
                    $("#stock-color-" + Item).html('<span style="color:#4b90e2;cursor: default"><i class="fas fa-hourglass-half"></i> قريبا </span>');
                } else {
                    if (SpecialOrder == 1) {
                        $("#stock-color-" + Item).html('<span style="color:#efa30c;cursor: default"><i class="fas fa-check-square"></i> طلب خاص </span>');
                        $(".stock-color-" + Item).html('<span style="color:#efa30c;cursor: default"><i class="fas fa-check-square"></i> طلب خاص </span>');
                    }
                    if (PreOrder == 1) {
                        $("#stock-color-" + Item).html('<span style="color:#7138c7;cursor: default"><i class="fas fa-calendar-check"></i> طلب مسبق </span>');
                        $(".stock-color-" + Item).html('<span style="color:#7138c7;cursor: default"><i class="fas fa-calendar-check"></i> طلب مسبق </span>');
                    } else {
                        $("#stock-color-" + Item).html('<span style="color:#fa9393;cursor: default"><i class="fas fa-times-circle"></i> غير متوفر </span>');
                        $(".stock-color-" + Item).html('<span style="color:#fa9393;cursor: default"><i class="fas fa-times-circle"></i> غير متوفر </span>');
                    }
                }
            }

            if ($(this).attr('class') == 'show-more-color') {
                return false
            }

            let accessoryLink = '#accessory-link-' + Item;

            let with_move_to_new_page = false;

            let link = UpdateQueryString('product', ColorCode, $(accessoryLink).attr("href"));

            $('#accessory_card').attr("href", link);


            if (with_move_to_new_page) {
                window.location.href = link;
            } else {
                $(this).closest('.color-choose').find('input').removeClass('color-selected');
                $(this).closest('.color-choose').find('input').removeClass('red-outline');
                $(this).closest('.accessory-item').find('a').attr('href', link);
            }
        });

        // $(document).on('click', '.color-choose', function () {
        //     if(!is_color_select_more){
        //     }
        // });

    });
    $(document).ready(function () {
        $(document).on('click', '.show-more-color', function () {
            let id = $(this).data('id')
            let iconClass = $(this).closest('*').find('i').attr('class')
            if (iconClass == 'fa fa-plus-circle') {
                $(this).closest('*').find('i').removeClass(iconClass)
                $(this).closest('*').find('i').addClass('fa fa-minus-circle')
                $(this).closest('*').find('i').css('box-shadow', 'unset')
            } else if (iconClass == 'fa fa-minus-circle') {
                $(this).closest('*').find('i').removeClass(iconClass)
                $(this).closest('*').find('i').addClass('fa fa-plus-circle')
                if (($(this).data('checked') == 1 && defualt == true) || (is_color_select_more == true)) {
                    $(this).closest('*').find('i').css('box-shadow', '0 0 0 2px #009300')
                }
            }

            $('.more-color-' + `${id}`).toggle()

            return false
        })
    });

</script>

@include('partial.infinite_pagination.script')