@extends('web.layouts.master')
@section('title' , 'نتائج البحث')
@section('contents')
    <!-- start page title -->
    <section class="page-title">
        <div class="container">
            <h3 class="main-title">نتائج البحث</h3>
        </div>
    </section>
    <!-- end page title -->
    <input type="hidden" value="" name="lat" class="lat_in" id="lat">
    <input type="hidden" name="lng" value="" id="lng">
    <input type="hidden" name="search" value="{{$req}}">
    <!-- start brands  -->
    <section class="filter-block all-brands white-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-12 grey-bg">
                    <div class="main-content">
                        <div class="title">
                            <div class="right-grid">
                                <h3 class="no-psedu">نتائج البحث</h3>
                            </div>
                            <div class="left-grid d-flex">
                                <div class="round-sh ch-grid">
                                    <img src="{{asset('web/img/dynamic/icons/menu.png')}}" alt="img">
                                </div>
                                {{--                                <div class="round-sh">--}}
                                {{--                                    <a href="#">--}}
                                {{--                                        <img src="{{asset('web/img/dynamic/icons/marker.png')}}" alt="img">--}}
                                {{--                                    </a>--}}
                                {{--                                </div>--}}
                                <div class="round-sh single-select sm-img">
                                    <a onclick="mark_in()">
                                        <img src="{{asset('web/img/dynamic/icons/cursor.png')}}" alt="img">
                                        <span class="text">الأقرب</span>
                                    </a>
                                </div>
                                <div class="single-select">
                                    <select name="city_id" onchange="city()" id="slct02" class="custom-select">
                                        <option value="0">اختر المدينة</option>
                                        @foreach(\App\Models\City::all() as $city)
                                            <option value="{{$city->id}}">{{$city->name[App::getLocale()]}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row grid-cols" id="post-search">

                            @include('web.data.data_search')
                        </div>
                        <div class="ajax-load text-center" style="display:none">
                            <p><img style="width: 75px;" src="{{asset('loading_image.gif')}}"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end brands  -->

@endsection


@section('script')
    <script>


        function city() {

            var city_id = $("#slct02").val();
            var search = $("input[name=search]").val();

            console.log(search, city_id);

            $.ajax({
                type: 'POST',
                url: '{{route('search_city_ajax')}}',
                data: {search: search, city_id: city_id},
                beforeSend: function () {
                    $("#post-search").html('');
                    $('.ajax-load').show();

                },
                success: function (data) {
                    console.log(data.html);
                    $('.ajax-load').hide();
                    $("#post-search").append(data.html);


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    errorFunction();
                }
            });

        }

        function mark_in() {
            // if (navigator.geolocation) {
            //     navigator.geolocation.getCurrentPosition(showPosition);
            // } else {
            //     x.innerHTML = "Geolocation is not supported by this browser.";
            // }
            //
            // function showPosition(position) {
            //     $('#lat').val(position.coords.latitude);
            //     $('#lng').val(position.coords.longitude);
            //     // x.innerHTML = "Latitude: " + position.coords.latitude +
            //     //     "<br>Longitude: " + position.coords.longitude;
            // }

            navigator.geolocation.getCurrentPosition(function (position) {
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                var search = $("input[name=search]").val();

                console.log(search, lng, lat);

                $.ajax({
                    type: 'POST',
                    url: '{{route('search_location_ajax')}}',
                    data: {search: search, lat: lat, lng: lng},
                    beforeSend: function () {
                        $("#post-search").html('');
                        $('.ajax-load').show();

                    },
                    success: function (data) {
                        console.log(data.html);
                        $('.ajax-load').hide();
                        $("#post-search").append(data.html);


                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        errorFunction();
                    }
                });
            }, function () {
                Swal.fire({
                    title: '{{trans('data.error')}}',
                    text: 'لا يمكن البحث بالاقرب الا باعطاء الصلاحية',
                    icon: 'error',
                    confirmButtonText: '{{trans('data.close')}}'
                });
            });

        }
    </script>
@endsection