@php
$round="";
@endphp
@if($page == 'collection' )
@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}}">
                <h1 style="font-size: 2rem;">{{ $heading }}</h1>

                @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($allcollections)>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 != 'collection' )
<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">
                    @isset($allcollections)

                        @foreach ($allcollections as $collection)


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

                                <div class="featured-categories__card col-lg-3 col-sm-6 col-12">
                                    @php
                                       $slug = str_slug($collection->title, '-', app()->getLocale());      
                                    @endphp
                                        <div class="category-card">


                                           <a href="{{ route('show.subcollections',['slug' => $slug , 'id' => $collection->id]) }}">
                                                <div class="category-card_img">
                                                            @if($collection->image != '')
                                                                @if(file_exists(public_path().'/images/category/'.$collection->image))

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

                                                            @endif
                                                </div>
                                            </a>
                                            <div class="category-title">
                                                <h3 class="category-card__title">{{ $collection->title }}</h3>
                                            </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endisset
                </div>
                @if($page != 'collection' )
                    <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">
                {{ $allcollections->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 + '/allcollections',
            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>