@extends('layouts.main')
@section('content')
    <div class="body-content outer-top-vs" id="top-banner-and-menu">
        <div class="breadcrumb">
            <div class="container">
                <div class="breadcrumb-inner">
                    <ul class="list-inline list-unstyled">
                        <li><a href="{{url('/')}}">Home</a></li>
                        <li><a href="{{url('experiences')}}">Experiences</a></li>
                    </ul>
                </div>
                <!-- /.breadcrumb-inner -->
            </div>
        </div>

        <div class="container" style="padding-bottom: 30px;">
            <div class="row">
                {{--@include('partials.sigma.experience.sidebar')--}}
                <div class="col-xs-12">
                    <input type="hidden" class="hdnCurrency" value="{{Auth::user()->currency->currency}}">
                    @if (!Auth::user()->currency->is_currency_fixed == '1')
                        <input type="hidden" class="hdnCurrFixed" value="{{Auth::user()->currency->rate}}">
                    @else
                        <input type="hidden" class="hdnCurrFixed" value="1">
                    @endif
                    @if($products)
                        @if(isset($products->data))
                            @if(count($products->data))
                                @if(isset($products->status))
                                    @if($products->status == 1)
                                        <div class="clearfix filters-container m-t-10">
                                            <div class="row">
                                                <div style="padding: 10px;color: #333;background: #f9f9f9;">
                                                    <h4>{{$current_title}}</h4>
                                                </div>
                                                <div class="search-result-container ">
                                                    {{--<div class="clearfix" style="border-bottom: 1px solid #ccc; padding: 10px;margin-top: -20px;">--}}
                                                    {{--<h3 class="new-product-title pull-left">{{ucwords($products->supplier_name)}}</h3>--}}
                                                    {{--</div>--}}

                                                    <div id="myTabContent" class="tab-content category-list">
                                                        <div class="tab-pane active " id="grid-container">
                                                            <div class="category-product">

                                                                <div class="row category_products">
                                                                    @if(isset($products->data))
                                                                        @foreach($products->data as $product)
                                                                            <div class="col-sm-6 col-md-3 col-lg-3">
                                                                                <div class="product">
                                                                                    <div class="product-image">
                                                                                        <div class="image">
                                                                                            <a  href="{{url('experience', [$product->product."___".$product->product_code])}}" title="{{$product->product}}">
                                                                                                <img src="{{asset('assets/images/spinnerb.gif')}}" alt="" data-src="{{$product->image}}" class="hover-image">
                                                                                            </a>
                                                                                        </div>
                                                                                    </div>

                                                                                    <div class="product-info text-left">
                                                                                        <h3 class="name">
                                                                                            <a  href="{{url('experience', [str_slug($product->product)."___".$product->product_code])}}" title="{{$product->product}}">{{str_limit($product->product, 30)}}</a></h3>
                                                                                        @if(Auth::check())
                                                                                            @if(Auth::user()->currency->is_currency_fixed == '1')
                                                                                                <div class="product-price"> <span class="price">&#8358;{{transform_product_price($product->price, 1) }}</span> </div>
                                                                                            @else
                                                                                                <div class="product-price"> <span class="price">{{ transform_product_price($product->price, Auth::user()->currency->rate )  }} {{Auth::user()->currency->currency }}</span> </div>
                                                                                            @endif
                                                                                        @endif

                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        @endforeach

                                                                </div>
                                                                @if($products->total > 4)

                                                                        <div class="loadmore_container text-center" style="margin-top: 5rem!important;">
                                                                            <button id="loadmorebtn" class="mt-5 btn btn-continue custom_button_color_2 load-more" data-next="2" data-city = "{{$city_id}}">
                                                                                <i class="fa fa-spinner fa-spin off process_indicator"></i> Load more</button>
                                                                        </div>


                                                                @endif
                                                                @else
                                                                    <p>No Experience available</p>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        @include('pages.experience._search_experience_panel')
                                    @endif
                                @endif
                            @else
                                @include('pages.experience._search_experience_panel')
                            @endif
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@push('style')
    <style>
        .product-price{
            margin-top: -10px;
        }
        .product-image .image img{
            max-height: 100% !important;
        }
        .product-image .image {
            height: 210px;
        }
    </style>
@endpush
@push('script')
    <script src="{{asset('assets/js/theia-sticky-sidebar.js')}}"></script>
    <script>
        $('.sidebar').theiaStickySidebar({
            // Settings
            additionalMarginTop: 30
        });

    </script>
    <script>



        function fetchCities(event){
            exp_country_id = $(event).val();
            $('#exp_city').empty();
            $('#exp_city').append('<option>Loading...</option>');
            disableItem($(".search_exp_btn"), true)
            disableItem($('#exp_city'), true);
            $.ajax({
                type:"GET",
                url:"{{url('api/getcities')}}"+"/"+exp_country_id,
                headers:{token:1200},
                dataType:"json",
                success: function(res){
                    $('#exp_city').empty();
                    disableItem($('#exp_city'), false);
                    disableItem($(".search_exp_btn"), false)
                    if (res.status == 200 ){

                        $.each(res.data, function(key,value)
                        {
                            $('#exp_city').append('<option value="'+value.id+'" data-cityname="'+value.name+'">'+ucFirst(value.name.toLowerCase())+'</option>');
                        });

                    }
                },
                error: function (response, status, error) {
                    $('#exp_city').empty();
                    $('#exp_city').append('<option>Select city</option>');
                    if(response.status == 500){
                        alertui.notify('error', 'An Error Occurred. Please try again.')
                    }
                    else{
                        alertui.notify('error', response.responseJSON.data)
                    }
                }
            });
        }

        $(".category-product").on('click','.load-more', function(){

        //alert("click");
            var page=$(this).attr("data-next");
            var city=$(this).attr("data-city");

            $.ajax({
                type:"GET",
                url:"{{url('api/load_more_experience_items')}}"+"/?exp_city="+city+"&page="+page,
                dataType:"json",
                success: function(res){

                    if (res.status == 1 ){

                        //console.log(res.data)



                        var total = res.total;
                        var current_total = page * 20;
                        var next_page = parseInt(page) + 1;
                        var html="";
                        var product, product_code, product_img;
                        var rate = $('.hdnCurrFixed').val();
                        var currency = $('.hdnCurrency').val();

                        $.each(res.data, function(key, value){

                            product = value['product'];
                            product_code = value['product_code'];
                            product_img = value['image'];

                            html += '<div class="col-sm-6 col-md-3 col-lg-3">';
                            html += '<div class="product">';
                            html += '<div class="product-image">';
                            html += '<div class="image">';
                            html += '<a href="experience/'+product+'___'+product_code+'" title="'+product+'">';
                            {{--html += '<img src="{{asset("assets/images/spinnerb.gif")}}" alt=""';--}}
                            html += '<img src="'+product_img+'" alt=""';
                            html += ' data-src="'+product_img+'" class="hover-image">';
                            html += '</a>';
                            html += '</div>';
                            html += ' </div>';

                            html += '<div class="product-info text-left">';
                            html += '<h3 class="name">';
                            html += '<a href="experience/'+product+'___'+product_code+'" title="'+product+'">'+product+'</a>';
                            html += '</h3>';

                                html += '<div class="product-price"> <span class="price">'+value.price * rate+' '+currency+'</span> </div>';
                                html += '</div>';
                            html += '</div>';
                            html += '</div>';
                        });



                        if(total > current_total){

                        html+='<div class="loadmore_container text-center" style="margin-top: 5rem!important;">';
                        html+='<button id="loadmorebtn" class="mt-5 btn btn-continue custom_button_color_2 load-more" data-next='+next_page+' data-city ='+city+'>';
                            html+='<i class="fa fa-spinner fa-spin off process_indicator"></i> Load more</button>';
                            html+='</div>';
                        }else{
                            $('#loadmorebtn').hide();
                        }
                       // console.log(html);
                        $('.category_products').append(html);

                    }
                },
                error: function (response, status, error) {
                   alert("error");
                }
            });
        });

        $("#exp_country").on('change', function(){
            exp_country_id = $(this).val();
            $('#exp_city').empty();
            $('#exp_city').append('<option>Loading...</option>');
            disableItem($(".search_exp_btn"), true)
            disableItem($('#exp_city'), true);
            $.ajax({
                type:"GET",
                url:"{{url('api/getcities')}}"+"/"+exp_country_id,
                headers:{token:1200},
                dataType:"json",
                success: function(res){
                    $('#exp_city').empty();
                    disableItem($('#exp_city'), false);
                    disableItem($(".search_exp_btn"), false)
                    if (res.status == 200 ){

                        $.each(res.data, function(key,value)
                        {
                            $('#exp_city').append('<option value="'+value.id+'" data-cityname="'+value.name+'">'+ucFirst(value.name.toLowerCase())+'</option>');
                        });

                    }
                },
                error: function (response, status, error) {
                    $('#exp_city').empty();
                    $('#exp_city').append('<option>Select city</option>');
                    if(response.status == 500){
                        alertui.notify('error', 'An Error Occurred. Please try again.')
                    }
                    else{
                        alertui.notify('error', response.responseJSON.data)
                    }
                }
            });

        });

        //INTERSECTION OBSERVER
        //LAZY LOAD IMAGES
        var options = {
            rootMargin: '0px',
            threshold: 0.1
        };
        var images = $('.image img');
        if (!('IntersectionObserver' in window)) {
            Array.from(images).forEach(image => preLoadImage(image));
        } else {
            var observer = new IntersectionObserver(handleIntersection, options);

            $.each(images, function(index, img) {
                observer.observe(img);
            })
        }
        function handleIntersection(entries, observer){

            entries.forEach(entry => {
                if(entry.intersectionRatio > 0) {
                    observer.unobserve(entry.target);
                    preLoadImage(entry.target)
                }
            })
        }

        // function loadImage(image){
        //     var src = image.dataset.src;
        //     $.get(src)
        //         .done(function(){
        //             image.src = src;
        //         })
        // }

        function preLoadImage(image){
            var src = image.dataset.src;
            image.src = src;
            // fetchImage(src).then(() => {
            //     image.src = src;
            // })
        }
    </script>
@endpush