@extends('../../master_layout/website_master')

@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content flex-column flex-sm-row">
                    
                    @include('website_view.discover._subnavigation-card', ['country'=> $country])

                    <!-- breadcrumb -->
                    @php
                    $escort_url = 'New escorts in '.$country->country_name;
                    $breadcrumb = array(
                        array('title'=>$escort_url, 'url'=>'', 'active'=>'1')
                    );
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif

<!-- Escort List One -->
<section class="escort-list-one mt-4">
    <div class="container-fluid">
        <div class="row gap-y-2">
            <div class="col-lg-12 col-md-12">
                <div class="left-sec">
                    <div class="heading-one">
                        <h1>Discover Escorts in {{$country->country_name}} : New Escorts</h1>                        
                    </div>

                    <!-- Escorts section -->
                    <div class="row escorts"></div>
                    <!-- \Escorts section -->

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

        <!-- Data Loader -->
        <div class="auto-load text-center  mt-5">
            <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px" y="0px" height="60" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                <path fill="#fff"
                    d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s"
                        from="0 50 50" to="360 50 50" repeatCount="indefinite" />
                </path>
            </svg>
        </div>
        
    </div>
</section>
@endsection
@section('custom_js')
<!-- AJAX profile listing load -->
<script>  

    //var ENDPOINT = "{{ url('/') }}";
    var page = 1;
    var currenturl = $(location).attr('href');
    
    if(currenturl.indexOf('&') != -1 || currenturl.indexOf('?') != -1){
        currenturl = currenturl+"&page=";
    } else {
        currenturl = currenturl+"?page=";
    }

    //checkWindowSize();

    // Check if the page has enough content or not. If not then fetch records
    function checkWindowSize(){
        if($(window).height() >= $(document).height()){
            // Fetch records
            page++;
            infinteLoadMore(page);
        }
    }

    $(document).on('touchmove', onScroll); // for mobile
       
    function onScroll(){
        var position = $(window).scrollTop() + 200;
        var bottom = $(document).height() - $(window).height();
        //alert(position+"----"+bottom);
        if(position >= bottom) {
            page++;
            infinteLoadMore(page);
        }
    }

    $(window).scroll(function(){
        onScroll();
    });

    infinteLoadMore(page);    
    
    function infinteLoadMore(page) {         
        $.ajax({
            @php 
            //url: ENDPOINT + "/listing/{{$search_string}}?page=" + page,
            @endphp
            url: currenturl+ page,
            //url: currenturl,
            datatype: "html",
            type: "get",
            beforeSend: function () {
                $('.auto-load').show();
            }
        })
        .done(function (response) {
            if (response.length == 0) {
                $('.auto-load').html("We don't have more data to display :(");
                return;
            }
            $('.auto-load').hide();
            $.each(response, function(key, value) {
                $(".escorts").append(value.html);       
            })
            //$("#data-wrapper").append(response);           
            
            // Check if the page has enough content or not. If not then fetch records
            checkWindowSize();
        })
        .fail(function (jqXHR, ajaxOptions, thrownError) {
            console.log('Server error occured');
        });
    }
</script>
<!-- \AJAX profile listing load -->
@endsection