@extends('layouts.frontend')

@section('content')
    <section class="searchbar container-fluid">
        <div class="row">
            <div class="col-md-10 col-lg-9 col-12">
                <form id="search-mng" method="POST" action="{{route('search')}}">
                {{ csrf_field() }}
                    <div class="searchbar_form">
                        <div class="searchfield">
                            <div class="os"><i class="mdi mdi-magnify"></i>
                                <input type="text" class="form-control locality" autocomplete="off" name="locality" value="@if(@$locality) {{ $locality }} @endif" placeholder="--Search Nearby--">
                                <div id="localitylist"></div>
                            </div>
                        </div>

                        <div class="or">OR</div>
                        <div class="select">
                            <select class="form-control">
                                    <option>State</option>
                              </select>
                        </div>
                        <div class="select">
                            <select class="form-control">
                                <option>City</option>
                            </select>
                        </div>
                        <div class="select">
                            <input type="text" class="form-control" placeholder="Location">
                        </div>
                        <div class="action">
                            <input type="button" id="searchbutton" value="Submit" class="btn btn-primary">
                        </div>
                    </div>
                </form>

            </div>
            <div class="m-options col-6"> <span class="btn" data-show="Show more" data-less="Show less"><span class="txt" >Show more </span><i class="mdi mdi-chevron-down"></i></span>
            </div>
            <div class="col-md-2 col-lg-3 col-6 text-right">
                <div class="data-view-type">
                    <div class="map btn active"><i class="mdi mdi-map-marker"></i></div>
                    <div class="list btn"><i class="mdi mdi-view-module"></i></div>
                </div>
            </div>
        </div>

    </section>
    <section class="container-fluid location_data no-pb">
        <div class="row">
            <aside class="col-md-5 col-lg-3 location_data-lw" id="searchlocaterid">
                <!--search count and filter start-->
                @include('frontend.searchs.location_element')
            </aside>
            <div class="col-md-7 col-lg-9 location_data-map"><iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d56122.436645511465!2d77.04168293906328!3d28.459896286104527!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sanita+dongre!5e0!3m2!1sen!2sin!4v1560423783107!5m2!1sen!2sin" width="100%"
                    frameborder="0" style="border:0" allowfullscreen></iframe></div>
        </div>
    </section>
    <section class="container promotion-wrapper mt-4">
    </section>
    
    <script type="text/javascript">
    
        $(document).ready(function(){
            $('.locality').keyup(function(){
                var query = $(this).val();
                if(query != ''){
                    $.ajax({
                        url: "{{ route('autocomplete') }}",
                        method: "GET",
                        data: {query: query},
                        success:function(data)
                        {
                            if(data.status == 'success') {
                                $('#localitylist').fadeIn();
                                $('#localitylist').html(data.data);
                            } else {
                                $('#localitylist').fadeIn();
                                $('#localitylist').html(data.data);
                            }
                        }
                    })
                }
            });

            $(document).on('click','li', function(){
                $('.locality').val($(this).text());   
                $('#localitylist').fadeOut();               
            });
        });
        $('.locality').focusout(function(){
            $('#localitylist').fadeOut('slow');
        });

        $(function () {
            $('#searchbutton').on('click', function (e) {
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: "{{route('searchlocater')}}",
                data: $('form').serialize(),
                    success: function (datanew) {
                    /*$( "#searchlocaterid" ).html( datanew );*/

                    if(datanew.status == 'success') {
                        $('#searchlocaterid').html(datanew.data);
                    } else {
                        $('#searchlocaterid').html(datanew.data);
                    }
                }
            });
            });
        });

       
        $("#searchlocaterid").on('click','.pagination li a',function () {
            var page = $(this).data('page');
            var locality = $('.locality').val();
            paginate(page,locality);
        });

        function paginate(page,locality){
            $.ajax({
                type: 'post',
                url: "{{route('searchlocater')}}",
                data: {"_token": "{{ csrf_token() }}",page:page,locality:locality},
                    success: function (datanew) {
                    if(datanew.status == 'success') {
                        $('#searchlocaterid').html(datanew.data);
                    } else {
                        $('#searchlocaterid').html(datanew.data);
                    }
                    $(".locality").val(locality);
                }
            });
        }

       

    </script>
    
   
    @endsection

    