@php
use App\Http\Controllers\Api\CurrencyController;
@endphp
@php
    $center="text-center";
    $row='col-lg-12';
    $round='';
    @endphp
    @if($page == 'category' )
@php
$round='round';
@endphp
@endif
    @if($sidebar == 1)
    @php
    $center="";
    $row='row';
    @endphp
    @endif

<div class="{{$row}} sort-heading" id=plp-sort-heading>
@if($sidebar == 1 )
<div class="col-md-6 col-12 artwork-heading">
    @endif
    <div class="{{$center}}  mt-4">

        @if($headingTag == "1")
            <h1 style="font-size: 2rem;">{{ ucfirst($heading) }}</h1>
        @elseif($headingTag == "0")
            <h2>{{ ucfirst($heading) }}</h2>
        @else
            <h2>{{ ucfirst($heading) }}</h2>
        @endif


        @if($sidebar != 1 && $heading!='')
        <div class="small-border bg-color-2"></div>
        @endif
    </div>
</div>
@if($sidebar == 1 )
<div class="col-md-6 col-12 p-3 p-sm-0 d-flex justify-content-center justify-content-md-end align-items-sm-center flex-column flex-sm-row mt-2 plp-sort-container">
    
                @endif
               
@if($category)
<select class=" mr10 artist-sortByCon" id='sortByCat' >
    <option value=''>{{ __('staticwords.Sortbycategories') }}</option>
    <!-- <option value=''>{{ __('staticwords.Filter') }}</option> -->
    @foreach ( $category as $cat)
    <option value='{{$cat->id}}'>{{$cat->title}}</option>
    @endforeach
</select>
@endif

@if($artists)
<select class=" mr10  mt-3 mt-sm-0 artist-sortByArtist" id='sortByArtists' >
    <option value=''>{{ __('staticwords.Sortbyartists') }}</option>
   
    @foreach ( $artists as $artist)
    <option value='{{$artist->id}}'>{{ucwords($artist->username)}}</option>
    @endforeach
</select>
@endif





@if($sidebar == 1 && count($allproducts)>1)

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

@if($sidebar == 1 )

</div>
</div>
@endif

<style>
    .dxb-product { }
    .dxb-product-image-container {
        height: 200px !important;
    }
    .dxb-product-image {
        width: 100%;
        height: 100%; 
        object-fit: contain;
    }
    .dxb-product-image-sold {
        filter: grayscale(0.9);
    }
    .dxb-product-name {
       line-height: 1rem;
    }
    .dxb-product-pill {
        position: absolute;
        width: 50px;
        height: 50px;
        padding: 0.75rem 0.5rem;
        z-index: 1;
    }
    .dxb-product-wishlist { 
        width:27px;
        height:27px;
        padding: 5px 4px 4px 4px;
        border-radius: 50%;
        border:1px solid #BE974A;        
    }
    .item_info .Add {
        background-color: #BE974A;
        color:white;
    }
    .item_info .Remove {
        background-color: white;
        color: #BE974A;
    }
</style>

<div id="ajaxcontent" class="container">
    <div class="row mt-3">
        @if(count($allproducts)>0)
            @isset($allproducts)
                @foreach ($allproducts as $product)
                    @if($loop->index < $productCount)
                        <div class="col-12 col-md-4 col-lg-3 py-3 px-2 new_plp">
                            <div class="h-100 rounded shadow-sm pb-3">
                                <!-- product pill -->
                                @if($product->stock == 0)
                                    <div class="rounded-circle m-2 shadow-lg fw-bold text-light bg-secondary dxb-product-pill">
                                        <span>{{ __('staticwords.sold') }}</span>
                                    </div>
                                @endif
                                <!-- end product pill -->

                                <!-- product image -->
                                    @php
                                       $category = App\Category::with('simpleproducts')->where('id','=',$product->category_id)->first();
                                       $cat_slug = str_slug($category->title, '-', app()->getLocale());

                                       $subcategory =App\Subcategory::with('simpleproducts')->where('id','=',$product->subcategory_id)->first();
                                       $subcat_slug = str_slug($subcategory->title, '-', app()->getLocale());      
                                    @endphp
                                <a class="dxb-product" href="{{ route('show.product',['id' => $product->id,'category' => $cat_slug,'subcategory' => $subcat_slug, 'slug' => $product->slug]) }}" title="{{$product->product_name}}">
                                    <div class="mx-1 p-2 rounded dxb-product-image-container">
                                        @if($product->thumbnail != '')
                                        @if($product->thumbnail != '' && file_exists(public_path().'/images/simple_products/'.$product->thumbnail))
                                            <img class="lazyload rounded dxb-product-image {{$product->stock == 0 ? 'dxb-product-image-sold' : ''}}" data-src="{{ url('images/simple_products/' . $product->thumbnail) }}" alt="Product Image">
                                        @else
                                            <img class="lazyload rounded dxb-product-image" data-src="{{ url($product->thumbnail) }}" alt="Product Image">
                                        @endif
                                        @else
                                            <img class="lazyload rounded dxb-product-image" data-src="{{ url('images/no-image.png/') }}" alt="No Image">
                                        @endif
                                    </div>
                                </a>
                                <!-- end product image -->
                               
                                <!-- product name and wishlist -->
                                <div class="col-9 p-0 mt-2"> 
                                <!-- <div class="row mt-2"> -->
                                    <div class="col-9 pe-1">
                                        <div class="ps-3 fw-bold fs-6 dxb-product-name">
                                            @php
                                               $category = App\Category::with('simpleproducts')->where('id','=',$product->category_id)->first();
                                               $cat_slug = str_slug($category->title, '-', app()->getLocale());
                                               

                                               $subcategory =App\Subcategory::with('simpleproducts')->where('id','=',$product->subcategory_id)->first();
                                               $subcat_slug = str_slug($subcategory->title, '-', app()->getLocale());
                                              
                                            @endphp
                                            <a class="dxb-product {{$product->stock == 0 ? 'text-secondary' : ''}}" href="{{ route('show.product',['id' => $product->id,'category' => $cat_slug,'subcategory' => $subcat_slug, 'slug' => $product->slug]) }}" title="{{$product->product_name}}">
                                                {{ ucfirst($product->product_name) }}
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-3 ps-1 pe-4 text-end item_info">
                                        @auth
                                            @if($product->type != 'ex_product')  
                                                <a class="nft__pro_wish_icon card_{{ $product->id }} add_in_wish_simple" data-proid="{{ $product->id }}" data-status="{{ inwishlist($product->id) }}" data-toggle="tooltip" data-placement="right" title="{{ inwishlist($product->id) == false ? __('staticwords.AddToWishList') :  __('staticwords.RemoveFromWishlist') }}">
                                                    <i class="bg__{{ $product->id }} dxb-product-wishlist fa fa-heart fs-6 {{$product->stock == 0 ? 'dxb-product-image-sold' : ''}} {{ inwishlist($product->id) == false ? __('Add') :  __('Remove') }}"></i>
                                                </a>
                                            @endif
                                        @endauth
                                    </div>
                                </div>
                                <!-- end product name and wishlist -->
                                    
                                <!-- end product price -->
                                @php
                                                         
                                

                                     $new_conversion_rate = new CurrencyController;

                                     $new_conversion_rate = $new_conversion_rate->newfetchRates(session()->get('currency')['id'],$product->id)->getData()->exchange_rate;
                                   

                                @endphp
                                <div class="px-3 mt-2 text-dark dxb-product-price">
                                    @if($product->price != 0)
                                        @if($product->offer_price != 0)
                                            <span class="fw-bold fs-5 {{$product->stock == 0 ? 'text-secondary' : ''}}">
                                                <i class="{{session()->get('currency')['value']}}"></i>
                                                {{price_format($product->offer_price * $new_conversion_rate)}}
                                            </span>
                                            <span class="ms-2 d-inline-block {{$product->stock == 0 ? 'text-secondary' : ''}}">
                                                <i class="{{session()->get('currency')['value']}}"></i>
                                                <small class="text-decoration-line-through">
                                                    {{price_format($product->price * $new_conversion_rate)}}
                                                </small>
                                            </span>
                                        @else
                                            <span class="fw-bold fs-5 {{$product->stock == 0 ? 'text-secondary' : ''}}">
                                                <i class="{{session()->get('currency')['value']}}"></i>
                                                {{price_format($product->price * $new_conversion_rate)}}
                                            </span>
                                        @endif
                                    @else
                                        <span class="badge bg-gold text-white">Price on demand</span>
                                    @endif
                                </div>
                                <!-- end product price -->
                                
                                <!-- product specification -->
                                <div class="px-3 mt-2 dxb-product-specification {{$product->stock == 0 ? 'text-secondary' : 'text-dark'}}">
                                    @if(!empty($product->material))
                                        <span class="d-inline-block">
                                            {{ $product->material }}
                                        </span>
                                    @endif
                                    <br>
                                    @if(!empty($product->size))
                                        <span class="d-inline-block">
                                            {{$product->size }}
                                        </span>
                                    @endif
                                </div>
                                <!-- end product specification -->
                               
                            </div>
                        </div>
                    @endif
                @endforeach
            @endisset

            <!-- pagination -->
            @if(($paginate == 1))
                <div class="mx-auto mt-3 width200px pagination-container">
                    {{ $allproducts->links() }}
                </div>
            @endif
            <!-- end pagination -->

            @else
                <div class="col-lg-12">
                    <h2 class="style-2">No artwork is available now</h2>
                </div>
            @endif
        </div>
    </div>
<!-- </div> -->


<script>

    $(document).ready(function() {
        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();
            var catid = '{{ $categoryID }}';
            var base_page = '{{ $page }}';
            if (base_page != 'caetgory')
                var catid = $('#sortByCat option:selected').val();
            var artistid='{{ $artistId }}';
            var orderby = $('#sortBy option:selected').val();
            var artistID = $('#sortByArtists option:selected').val();
            
            //   var current_page = $(".pagination").find('.active').text();           
            var page = $(this).attr('href').split('page=')[1];
            console.log(page);
            artFilter(catid, artistID,'', '', orderby, page,artistid);
            //window.scrollTo(0,800);
            var base_page = '{{ $page }}';
            if (base_page == 'miscellaneous'){
                if($(window).width() <= 768) {
                    //alert('okkk');
                    //window.scrollTo(0,925);
                    element = document.getElementById("mpage_div1");
                    element.scrollIntoView();
                 
                }else{  
                    //window.scrollTo(0,800);
                    element = document.getElementById("mpage_div");
                    element.scrollIntoView();
                }

            }else if(base_page == 'b2b'){
                
                 //window.scrollTo(0,900);
                 element = document.getElementById("page_div");
                 element.scrollIntoView();

            }else if(base_page == 'artwork'){
                 window.scrollTo(0,0);

            }
             
        });


        $('#sortBy').change(function() {
            var current_page = 1;
            var catid = '{{ $categoryID }}';
            var artistid='{{ $artistId }}';
            var base_page = '{{ $page }}';
            if (base_page != 'caetgory')
                var catid = $('#sortByCat option:selected').val();
            var orderby = $('#sortBy option:selected').val();
            var artistID = $('#sortByArtists option:selected').val();
           

            artFilter(catid, artistID,'','', orderby, current_page,artistid);
        });

        $('#sortByArtists').change(function() {
            var current_page = 1;
            var artistID = $('#sortByArtists option:selected').val();
            
            var orderby = $('#sortBy option:selected').val();
            var cat = $('#sortByCat option:selected').val(); 
                    
            artFilter(cat, artistID, '', '', orderby, current_page,'');
        });
         $('#sortByCat').change(function() {
            var current_page = 1;
            var orderby = $('#sortBy option:selected').val();
            var cat = $('#sortByCat option:selected').val();  
            var artistID = $('#sortByArtists option:selected').val();         
            artFilter(cat, artistID,'', '', orderby, current_page,'');
        });
    });

    function artFilter(cid, artistID, sid, chid, price, page,uid) {
      
       
        var conversion_rate = +'{{round($conversion_rate, 4)}}';
        var agent = navigator.userAgent;
    
        var base_page = '{{ $page }}';
            if (base_page == 'artwork') 
            var url = baseUrl + '/artwork';       
            if (base_page == 'caetgory')
            var url = baseUrl + '/category/' + cid;
            if (base_page == 'search')
            var url = baseUrl + '/productsearch';
            if (base_page == 'artistprofile')
            var url = baseUrl + '/artistProfile' +uid;

            if (base_page != 'caetgory')              
            var catName = $('#sortByCat option:selected').text();
            //var artistID = $('#sortByArtists option:selected').val(); 
            if (artistID != '')
            var artistName = $('#sortByArtists option:selected').text();
            else
            var artistName = 'view by artist';

            
        


        var price_orderby = price;
        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 (page !== null && page !== '')
            search_params.set('page', page);
        if (price !== null && price !== '' && price !== undefined)
            search_params.set('orderBy', price);
        if (catName !== null && catName !== '' && catName !== undefined)
            search_params.set('catName', catName);
        if (artistName !== null && artistName !== '' && artistName !== undefined)
            search_params.set('artistName', artistName);


        url.search = search_params.toString();
        var new_url = url.toString();
        window.history.pushState('page2', 'Title', new_url);
        $.ajax({
            url: url,
            method: 'GET',
            datatype: 'html',
            async: false,
            data: {
                page: page,
                priceorderby: price_orderby,
                catID: cid,
                artistID: artistID,
                sid: sid,
                chid: chid,
                agent:agent,
                
            },
            success: function(data) {
                var cnt = $(data);
                $content = cnt.find("div[id='ajaxcontent']").html();
                $('#ajaxcontent').html($content);
            }
        });       
    }   
</script>