@php
$round="";
@endphp
@if($page == 'categories' )
@php
$round='round';
$center="text-center";
$row='col-lg-12';
@endphp
@if($sidebar == 1)
@php
$center="";
$row='row';
@endphp
@endif

<div class="{{$row}} sort-heading" id=plp-sort-heading>
    @if($sidebar == 1 )
        <div class=" col-12  col-lg-6 col-xl-7 col-sm-5 artwork-heading">
            @endif
            <div class="{{$center}}">
                <h2>{{ $heading }}</h2>

                @if($sidebar != 1)
                <div class="small-border bg-color-2"></div>
                @endif
            </div>
        </div>
    @if($sidebar == 1 )
         <div class="col-lg-6 col-xl-5 col-12 col-sm-7 mt-2 plp-sort-container">

    @endif
    @if($sidebar == 1 && count($allcategories)>1)

        <select class="artist-sortByCon mt-3 mt-sm-0 {{$$round}}  mx-md-4" id='sortBy'>
            <option value=''>{{ __('staticwords.sortby') }}</option>
            <option value='asc'>{{ __('staticwords.sortbyname') }}(A - Z)</option>
            <option value='desc'>{{ __('staticwords.sortbyname') }}(Z - A)</option>  
            <option value='date'>{{ __('staticwords.mostrecent') }}</option>
        </select>
    @endif

    @if($sidebar == 1 )

    </div>
</div>
@endif
@endif
@if($page != 'categories' )
<section aria-label="section" id="categories_home">
    @endif

    <div class="featured-categories">
        <div id="ajaxcontent" class="container">
            <div class="row">
                <!-- <div class="featured-categories__cards d-flex flex-row flex-wrap overflow-hidden px-1"> -->
                <div class="d-flex flex-row flex-wrap overflow-hidden px-1">
                    @isset($allcategories)

                        @foreach ($allcategories as $category)


                            @if(!$category->simpleproducts->isEmpty())

                                <div class="featured-categories__card col-lg-3 col-sm-6 col-12">
                                    @php

                                    $slug = str_slug($category->title, '-', app()->getLocale());
                                            
                                    @endphp
                                        <div class="category-card">
                                            <div class="category-card_img">
                                                <a href="{{ route('category',['slug' => $slug , 'id' => $category->id]) }}">
                                                   <picture>
                                                    
                                                        @if($category->image != '')
                                                                @if(file_exists(public_path().'/images/category/'.$category->image))

                                                                    <img data-src="{{ url('images/category/' . $category->image) }}" alt="">
                                                                @else
                                                                    <img data-src="{{ url($category->image) }}" class="lazyload" alt="">
                                                                    
                                                                @endif
                                                            @else
                                                                <img data-src="https://artiner-prod.s3.ap-south-1.amazonaws.com/images/no-image.webp" class="lazyload mb20" alt="No Image">

                                                            @endif
                                                    </picture>
                                                </a>
                                            </div>
                                            <div class="category-title">
                                                 <h3 class="category-card__title">{{ $category->title }}</h3>
                                            </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                    @endisset
                </div>
                @if($page != 'categories' )
                <div class="btn-sellerCollectins">
                <a class="pull-lg-right" href="{{ url('allcollections') }}"><span class="text-smallcollection-btn">{{ __('staticwords.Seeallcollections') }}</span>
                
            </a>
                </div>
                @endif
            </div>
            @if(($paginate == 1))
            <div class="mx-auto width200px pagination-container">
                {{ $allcategories->links() }}
            </div>
            @endif

        </div>
    </div>
</section>


<!-- Select2 CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> -->

<script>
    $(document).ready(function() {
        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();

            var sortby = $('#sortBy option:selected').val();
            //   var current_page = $(".pagination").find('.active').text();           
            var page = $(this).attr('href').split('page=')[1];
            catFilter(sortby, page);
        });

        $('#sortBy').change(function() {
            var current_page = 1;
            var sortby = $('#sortBy option:selected').val();
            catFilter(sortby, current_page);
        });
    });

    function catFilter(sortby, current_page) {

        var agent = navigator.userAgent;
        var exist = window.location.href;
        var url = new URL(exist);
        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;
            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');
                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
                }
            }
        };
        var query_string = url.search;
        var search_params = new URLSearchParams(query_string);
        if (current_page !== null && current_page !== '')
            search_params.set('page', current_page);
        if (sortby !== null && sortby !== '')
            search_params.set('sortby', sortby);
        url.search = search_params.toString();
        var new_url = url.toString();
        window.history.pushState('page2', 'Title', new_url);
        $.ajax({
            url: baseUrl + '/collections',
            method: 'GET',
            datatype: 'html',
            async: false,
            data: {
                page: current_page,
                sortby: sortby,               
                agent: agent

            },
            success: function(data) {
                var cnt = $(data);
                $content = cnt.find("div[id='ajaxcontent']").html();
                $('#ajaxcontent').html($content);
            }
        });
        window.scrollTo(0, 0);
    }
</script>