@extends('site.pages')

@section('title', $page_title)

@if($destination)
    @section('background_image',  $destination['banner'] )
@endif
@section('breadcrumb_content')
    <h1 class="mb-3">{{ $page_title }}</h1>
    <p clas="mt-3 mb-0 text-white" style=" color: white; ">{{ $destination ? $destination['description'] : "" }}</p>
@endsection

@section('content')
    @include('site.partials.breadcrumb')
    <!-- top Destination starts -->
    <section class="trending pt-6 pb-0 bg-lgrey">
        <div class="container">
            <div class="row flex-row-reverse">
                <div class="col-lg-8">
                    
                    <div class="list-results d-flex align-items-center justify-content-between">
                        <div class="list-results-sort">
                            <p class="m-0" id="pagination_text"></p>
                        </div>
                        <div class="click-menu d-flex align-items-center justify-content-between">
                            <div class="sortby d-flex align-items-center justify-content-between ml-2">
                                <select class="niceSelect" id="sort_by" onchange="search_filter(false,this.value)">
                                    <option value="" >{{__('pages.sort_by')}}</option>
                                    <option value="asc">{{__('pages.price')}}: {{__('pages.low_to_high')}}</option>
                                    <option value="desc">{{__('pages.price')}}: {{__('pages.high_to_low')}}</option>
                                </select> 
                            </div>
                        </div>
                    </div>
                    {{-- 
                    <!-- Gallery starts -->
                    <div class="trending index-tags mb-3">
                        <ul class="section-tags">
                            <li><a href="tour-cat.html"> Classic Tours</a></li>
                            <li><a href="tour-cat.html"> Christmas Tours</a></li>
                            <li><a href="tour-cat.html"> Nile Cruises</a></li>
                            <li><a href="tour-cat.html"> Dahabiyas</a></li>
                            <li><a href="tour-cat.html">  Luxury Tours</a></li>
                            <li><a href="tour-cat.html"> Honeymoon Tours</a></li>
                            <li> <a  href="tour-cat.html" style="padding: 10px 24px;color: #fff;background-color: #1f5db9;border: none">Cities</a></li>
                            <li> <a  href="tour-cat.html" style="padding: 10px 24px;color: #fff;background-color: #1f5db9;border: none">People with special needs</a></li>
                        </ul>
                    </div>
                    <!-- Gallery Ends -->
                    --}}
                    <div class="row">
                        <div class="col-12 text-center mb-3">
                            <div id="loading" style="display: none;">
                                <img src="{{asset('site/images/spinner_loading.gif')}}" alt="loading" style="width: 84px;">
                            </div>
                        </div>

                        <div id="tours_wrapper" class="row">
                            
                        </div>

                        <div class="col-lg-12">
                            <div class="text-center">
                                <a id="load_more" onclick="search_filter(true)" class="nir-btn">Load More <i class="fa fa-long-arrow-alt-right"></i></a>
                            </div>
                        </div>


                    </div>
                    
                </div>
                <div class="col-lg-4 pe-lg-4">
                    @include('site.partials.search_filters')
                </div>
            </div>
            {{--
            <div class="row">
                <!-- top Destination ends -->

                <div class="description mt-5">
                    <h3>FAQs</h3>
                </div>

                <div class="accrodion-grp faq-accrodion mb-4" data-grp-name="faq-accrodion">
                    <div class="accrodion active">
                        <div class="accrodion-title rounded">
                            <h5 class="mb-0"><span>Day 1</span> - Barcelona - Zaragoza - Madrid</h5>
                        </div>
                        <div class="accrodion-content" style="display: block;">
                            <div class="inner">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, inventore cumque
                                    veniam, praesentium velit incidunt rem quas a, quos eos ipsum, reprehenderit
                                    voluptatem.</p>
                            </div><!-- /.inner -->
                        </div>
                    </div>
                    <div class="accrodion ">
                        <div class="accrodion-title rounded">
                            <h5 class="mb-0"><span>Day 2</span> - Zurich - Biel/Bienne - Neuchatel - Geneva</h5>
                        </div>
                        <div class="accrodion-content" style="display: none;">
                            <div class="inner">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, inventore cumque
                                    veniam, praesentium velit incidunt rem quas a, quos eos ipsum, reprehenderit
                                    voluptatem.</p>
                            </div><!-- /.inner -->
                        </div>
                    </div>
                    <div class="accrodion">
                        <div class="accrodion-title rounded">
                            <h5 class="mb-0"><span>Day 3</span> - Enchanting Engelberg</h5>
                        </div>
                        <div class="accrodion-content" style="display: none;">
                            <div class="inner">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, inventore cumque
                                    veniam, praesentium velit incidunt rem quas a, quos eos ipsum, reprehenderit
                                    voluptatem.</p>
                            </div><!-- /.inner -->
                        </div>
                    </div>
                    <div class="accrodion ">
                        <div class="accrodion-title rounded">
                            <h5 class="mb-0"><span>Day 4</span> - Barcelona - Zaragoza - Madrid</h5>
                        </div>
                        <div class="accrodion-content" style="display: none;">
                            <div class="inner">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, inventore cumque
                                    veniam, praesentium velit incidunt rem quas a, quos eos ipsum, reprehenderit
                                    voluptatem.</p>
                            </div><!-- /.inner -->
                        </div>
                    </div>
                </div>

                <div class="single-review mb-4 mt-5">
                    <h3>Reviews</h3>
                    <div class="row d-flex align-items-center">
                        <div class="col-sm-4">
                            <div class="col-sm-12 mb-3">
                                <div class="review-box bg-title text-center py-4 p-2 rounded">
                                    <h2 class="mb-1 white"><span>2.2</span>/5</h2>
                                    <h4 class="white mb-1">"Feel so much worst than thinking"</h4>
                                    <p class="mb-0 white font-italic">From 40 Reviews</p>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="review-progress">
                                    <div class="progress-item mb-1">
                                        <p class="mb-0">Cleanliness</p>
                                        <div class="progress rounded">
                                            <div class="progress-bar bg-theme" role="progressbar" aria-valuenow="40"
                                                 aria-valuemin="0" aria-valuemax="100" style="width:40%">
                                                <span class="sr-only">40% Complete</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-item mb-1">
                                        <p class="mb-0">Facilities</p>
                                        <div class="progress rounded">
                                            <div class="progress-bar bg-theme" role="progressbar" aria-valuenow="30"
                                                 aria-valuemin="0" aria-valuemax="100" style="width:30%">
                                                <span class="sr-only">30% Complete</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-item mb-1">
                                        <p class="mb-0">Value for money</p>
                                        <div class="progress rounded">
                                            <div class="progress-bar bg-theme" role="progressbar" aria-valuenow="60"
                                                 aria-valuemin="0" aria-valuemax="100" style="width:60%">
                                                <span class="sr-only">60% Complete</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-item mb-1">
                                        <p class="mb-0">Service</p>
                                        <div class="progress rounded">
                                            <div class="progress-bar bg-theme" role="progressbar" aria-valuenow="20"
                                                 aria-valuemin="0" aria-valuemax="100" style="width:20%">
                                                <span class="sr-only">20% Complete</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-item">
                                        <p class="mb-0">Location</p>
                                        <div class="progress rounded">
                                            <div class="progress-bar bg-theme" role="progressbar" aria-valuenow="45"
                                                 aria-valuemin="0" aria-valuemax="100" style="width:45%">
                                                <span class="sr-only">45% Complete</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="row">
                                <!-- blog comment list -->
                                <div class="single-comments single-box mb-4">
                                    <h5 class="border-b pb-2 mb-2">Showing 16 verified guest comments</h5>
                                    <div class="comment-box">
                                        <div class="comment-image">
                                            <img src="images/reviewer/1.jpg" alt="image">
                                        </div>
                                        <div class="comment-content rounded">
                                            <h5 class="mb-1">Helena</h5>
                                            <p class="comment-date">April 25, 2022 at 10:46 am</p>
                                            <div class="comment-rate">
                                                <div class="rating mar-right-15">
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                </div>
                                                <span class="comment-title">The worst hotel ever"</span>
                                            </div>

                                            <p class="comment">Take in the iconic skyline and visit the neighbourhood hangouts that
                                                you've only ever seen on TV. Take in the iconic skyline and visit the
                                                neighbourhood.</p>
                                        </div>
                                    </div>
                                    <div class="comment-box">
                                        <div class="comment-image">
                                            <img src="images/reviewer/2.jpg" alt="image">
                                        </div>
                                        <div class="comment-content rounded">
                                            <h5 class="mb-1">Helena</h5>
                                            <p class="comment-date">April 25, 2022 at 10:46 am</p>
                                            <div class="comment-rate">
                                                <div class="rating mar-right-15">
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                    <span class="fa fa-star checked"></span>
                                                </div>
                                                <span class="comment-title">Was too noisy and not suitable for business meetings"</span>
                                            </div>
                                            <p class="comment">Take in the iconic skyline and visit the neighbourhood hangouts that
                                                you've only ever seen on TV. Take in the iconic skyline and visit the
                                                neighbourhood.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            --}}
        </div>
    </section>
@endsection

@push('js_scripts')
    <script>
        var current_page = 1;
        var next_page = 1;
    $(document).ready(function(){
        search_filter();
        // add on change event listener
        $("#filter_form input").each(function(){
            $(this).change(function(){
                search_filter();
            });
        });
    });
    function changeDestination(d){
        window.location = "{{route('tour_destinations')}}/"+d;
    }

    function search_filter(more=false,sort=false){
        if(more){
            if(!next_page){
                // console.log('no more');
                return;
            }
            // console.log('load more');
            current_page++;
        }else{
            // console.log('filter changed');
            current_page = 1;
            next_page =  1;
        }

        var form = $("#filter_form");
        var min_price = form.find('.price-slider').slider("values", 0);
        var max_price = form.find('.price-slider').slider("values", 1);

        var special_offers = form.find('input[name="special_offers[]"]:checked').map(function(){
            return $(this).val();
        }).get();

        var checkedStyles = form.find('input[name="styles[]"]:checked').map(function(){
            return $(this).val();
        }).get();

        var checkedTags = form.find('input[name="tags[]"]:checked').map(function(){
            return $(this).val();
        }).get();

        var checkedDurations = form.find('input[name="durations[]"]:checked').map(function(){
            return $(this).val();
        }).get();

        var checkedGroupSizes = form.find('input[name="group_sizes[]"]:checked').map(function(){
            return $(this).val();
        }).get();

        var default_destination = "{{$default_destination}}";

        if(!sort){
            sort = $("#sort_by").val();
        }

        // start loading
        loading(true);
        
       $.ajax({
            url: "{{route('tour_search',['destination'=>$default_destination])}}",
            type: 'GET',
            dataType: 'json',
            data: {
                sort: sort  ? sort : '',
                page: current_page,
                special_offers: special_offers.join(','),
                styles: checkedStyles.join(','),
                tags: checkedTags.join(','),
                min_price: min_price,
                max_price: max_price,
                durations: checkedDurations.join(','),
                group_sizes: checkedGroupSizes.join(',')
            },
            success: function(data){
                if(data.status == 'success'){
                    next_page = data.pagination.next_page ?? 0;
                    current_page = data.pagination.current_page;
                    if(data.pagination.current_page > 1){
                        $("#tours_wrapper").append(data.view);
                    }else{
                        $("#tours_wrapper").html(data.view);
                    }
                    if(data.pagination.total > 0){
                        $("#pagination_text").text(data.pagination.pagination_text);
                    }else{
                        $("#pagination_text").text("");
                    }
                }
            },
            complete: function(data){
                loading(false);
                if(next_page < 1){
                    $("#load_more").hide();
                }else{
                    $("#load_more").show();
                }
            }
        });
    }

    function loading(lock){
        if(lock){
            $("#loading").show();
            $("#filter_form input").each(function(){
                $(this).attr('disabled', 'disabled');
            });
        }else{
            $("#loading").hide();
            $("#filter_form input").each(function(){
                $(this).removeAttr('disabled');
            });
        }
    }
    // Range sliders activation
    $(".price-slider").each(function () {
        var minRangeValue = $(this).attr("data-min");
        var maxRangeValue = $(this).attr("data-max");
        var minName = $(this).attr("data-min-name");
        var maxName = $(this).attr("data-max-name");
        var unit = $(this).attr("data-unit");
        $(this).slider({
            range: true,
            min: minRangeValue,
            max: maxRangeValue,
            values: [minRangeValue, maxRangeValue],
            stop: function (event, ui) {
                event = event;
                var currentMin = parseInt(ui.values[0]);
                var currentMax = parseInt(ui.values[1]);
                $(this)
                    .children(".min-value")
                    .text(currentMin + " " + unit);
                $(this)
                    .children(".max-value")
                    .text(currentMax + " " + unit);
                $(this).children(".current-min").val(currentMin);
                $(this).children(".current-max").val(currentMax);
                search_filter()
            },
        });
    });
    </script>
@endpush