@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 name="state" class="form-control getStateValue">
                                <option value="">Select State</option>
                                @foreach($getState as $key => $option)
                                <option state="<?php echo $option['name']; ?>" value="<?php echo $option['id']; ?>"><?php echo $option['name']; ?></option>
                                @endforeach
                            </select>
                        </div>
                        <div class="select cityData">
                            @include('frontend.searchs.city_dropdown')
                        </div>
                        <div class="select">
                            <input type="text" class="form-control location" name="location" 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) {
            var locality = $('.locality').val();
            var location = $('.location').val();
            var state = $('.getStateValue option:selected').attr('state');
            var city = $('.getCityValue').val();    
            
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: "{{route('searchlocater')}}",
                data: {"_token": "{{ csrf_token() }}", locality:locality, location:location, state:state,city:city},
                    success: function (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();
            var state = $('.getStateValue option:selected').attr('state');
            var city = $('.getCityValue').val();   
            var location = $('.location').val();
            var ratingOrder = $(this).data('rating');
            paginate(page, locality, state, city, location);
        });

        
        $("#searchlocaterid").on('click','.ratingDropDown a',function () {
            var page = $(this).data('page');
            var locality = $('.locality').val();
            var state = $('.getStateValue option:selected').attr('state');
            var city = $('.getCityValue').val();   
            var location = $('.location').val();
            var ratingOrder = $(this).data('rating');
            paginate(page, locality, state, city, location, ratingOrder);
        });

        function paginate(page, locality, state, city, location, ratingOrder){
            $.ajax({
                type: 'post',
                url: "{{route('searchlocater')}}",
                data: {"_token": "{{ csrf_token() }}",page:page,locality:locality,state:state,city:city,location:location,ratingOrder:ratingOrder},
                    success: function (datanew) {

                    if(datanew.status == 'success') {
                        $('#searchlocaterid').html(datanew.data);
                    } else {
                        $('#searchlocaterid').html(datanew.data);
                    }
                    $(".locality").val(locality);
                    $('.getStateValue option:selected').attr('state');
                    $(".getCityValue").val(city);
                    $('.location').val(location);
                }
            });
        }

        $(function () {
            $('.getStateValue').on('change', function (e) {
            var state = $(this).val();
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: "{{route('getCityValue')}}",
                data: {"_token": "{{ csrf_token() }}",state:state},
                    success: function (datanew) {
                    if(datanew.status == 'success') {
                        $('.cityData').html(datanew.data);
                    } else {
                        $('.cityData').html(datanew.data);
                    }
                }
            });
            });
        });

       

    </script>
    
   
    @endsection

    