@extends('owners.layout.master')
@section('title', 'عقار جديد')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h4 class="page-title">عقار جديد</h4>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card-box">

                <h4 class="header-title mb-4">إنشاء جديد</h4>

                <div class="row">
                    <div class="col-xl-12">
                        <form method="post" action="{{route('owner_buildings.store')}}" enctype="multipart/form-data">
                            @csrf
                            <div class="row">

                                <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1">إسم العقار باللغه العربية</label>
                                    <input type="text" class="form-control" required
                                           value="{{ session()->get('name_ar') ? session()->get('name_ar') :  old('name_ar')}}"
                                           name="name_ar"
                                           id="name_ar"
                                           placeholder="إسم العقار باللغه العربية">
                                    @if ($errors->has('name_ar'))
                                        <small class="text-danger">{{ $errors->first('name_ar') }}</small>
                                    @endif
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1">إسم العقار باللغه الإنجليزية</label>
                                    <input type="text" class="form-control" required
                                           value="{{ session()->get('name_en') ? session()->get('name_en') :  old('name_en')}}"
                                           name="name_en"
                                           id="name_en"
                                           placeholder="إسم العقار باللغه الإنجليزية">
                                    @if ($errors->has('name_en'))
                                        <small class="text-danger">{{ $errors->first('name_en') }}</small>
                                    @endif
                                </div>


                                <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1">عرض العقار علي المنصة</label>
                                    <select name="show" id="show" required class="form-control">
                                        <option {{session()->get('show') == 'true' ? "selected":"" }} value="true">عرض
                                        </option>
                                        <option {{session()->get('show') == 'false' ? "selected":"" }} value="false">غير
                                            معروض
                                        </option>
                                    </select>
                                    @if ($errors->has('show'))
                                        <small class="text-danger">{{ $errors->first('show') }}</small>
                                    @endif
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="exampleInputEmail1">التصنيف</label>
                                    <select name="category_id" id="category_id" required class="form-control">
                                        @foreach($categories as $category)
                                            <option
                                                {{session()->get('category_id') == $category->id ? "selected" : " "}} value="{{$category->id}}">{{$category->name['ar']}}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('category_id'))
                                        <small class="text-danger">{{ $errors->first('category_id') }}</small>
                                    @endif
                                </div>
                            </div>


                            <div class="card-box">
                                <h3>بيانات صاحب العقار</h3>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label for="exampleInputEmail1">إسم مالك العقار</label>

                                        <input class="form-control" type="text" disabled
                                               value="{{auth()->user()->first_name}}  {{auth()->user()->last_name}}">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="exampleInputEmail1">رقم جوال مالك العقار</label>

                                        <input class="form-control" type="text" disabled
                                               value="{{auth()->user()->mobile}}">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="exampleInputEmail1">بريد الكترونى مالك العقار</label>

                                        <input class="form-control" type="text" disabled
                                               value="{{auth()->user()->email}}">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="exampleInputEmail1"> رقم سجل مدني أو تجاري</label>

                                        <input class="form-control" type="text" disabled
                                               value="{{auth()->user()->commercial_number}}">
                                    </div>
                                </div>


                            </div>


                            <div class="card-box">

                                <h3>أين يقع هذا العقار</h3>
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label for="exampleInputEmail1">المدينة</label>
                                        <select name="city_id" id="city" required
                                                class="form-control">
                                            <option></option>
                                            @foreach($cities as $city)
                                                <option
                                                    {{session()->get('city') == $city->id ? "selected":""}} value="{{$city->id}}">{{$city->name['ar']}}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('city_id'))
                                            <small class="text-danger">{{ $errors->first('city_id') }}</small>
                                        @endif
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="exampleInputEmail1">الحي</label>
                                        <select name="area_id" id="area" required
                                                class="form-control">


                                            @if(session()->get('area'))

                                                <option disabled selected>برجاء اختيار حي</option>
                                                @foreach(\App\Models\City::where('parent_id',session()->get('city'))->get() as $area)
                                                    <option
                                                        {{session()->get('area') == $area->id ? "selected" : ""}} value="{{$area->id}}">{{$area->name['ar']}}</option>
                                                @endforeach

                                            @endif





                                        </select>
                                        @if ($errors->has('area_id'))
                                            <small class="text-danger">{{ $errors->first('area_id') }}</small>
                                        @endif
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="exampleInputEmail1">الإتجاة</label>
                                        <select name="direction" id="direction" required
                                                class="form-control">
                                            <option
                                                {{session()->get('direction') == 'north' ? "selected" : ""}} value="north">
                                                الشمال
                                            </option>
                                            <option
                                                {{session()->get('direction') == 'south' ? "selected" : ""}} value="south">
                                                الجنوب
                                            </option>
                                            <option
                                                {{session()->get('direction') == 'east' ? "selected" : ""}} value="east">
                                                الشرق
                                            </option>
                                            <option
                                                {{session()->get('direction') == 'west' ? "selected" : ""}} value="west">
                                                الغرب
                                            </option>

                                        </select>
                                        @if ($errors->has('direction'))
                                            <small class="text-danger">{{ $errors->first('direction') }}</small>
                                        @endif
                                    </div>

                                </div>

                            </div>
                            <div class="card-box">
                                <div class="form-group">
{{--                                    <label for="exampleInputEmail1">العنوان بالتفاصيل</label>--}}
                                    <input type="text" class="form-control map_address" required
                                           value="{{ session()->get('address') ? session()->get('address') :  old('address')}}"
                                           name="address"
                                       hidden    id="map_address"
                                           placeholder="العنوان بالتفاصيل">
{{--                                    @if ($errors->has('address'))--}}
{{--                                        <small class="text-danger">{{ $errors->first('address') }}</small>--}}
{{--                                    @endif--}}
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">يرجي إختيار الموقع علي الخريطة</label>


                                    <div id="div_map" class="map" style=" width: 100%;
   height: 400px;
   background-color: grey;"></div>
                                    <input name="lat" type="hidden" value="{{old('lat')}}" id="lat"
                                           readonly="yes"><br>
                                    <input name="lng" type="hidden" value="{{old('lng')}}" id="lng"
                                           readonly="yes">

                                    @if ($errors->has('lat'))
                                        <small class="text-danger">{{ $errors->first('lat') }}</small>
                                    @endif
                                </div>
                                <input type="checkbox" required value="accepted" id="accepted_terms" name="terms"><a
                                    href="{{route('buildings_terms')}}" target="_blank">

                                    &nbsp; الموافقة علي إتفاقية
                                    الإستخدام


                                </a>
                                <br>

                                @if ($errors->has('terms'))
                                    <small class="text-danger">{{ $errors->first('terms') }}</small>
                                @endif
                            </div>


                            <button type="submit" class="btn btn-primary">حفظ</button>
                        </form>
                    </div><!-- end col -->


                </div><!-- end row -->
            </div>
        </div><!-- end col -->
    </div>



@stop
@section('scripts')

    <script>

        $("#accepted_terms").on('click', function () {
            var name_ar = $("#name_ar").val();
            var name_en = $("#name_en").val();
            var address = $("#address").val();
            // var show = $("#show").val();
            // var category_id = $("#category_id").val();
            // var city = $("#city").val();
            // var area = $("#area").val();
            // var direction = $("#direction").val();


            $.ajax({
                type: 'GET',
                url: '{{route('save_building_inputs')}}',
                data: {
                    name_ar: name_ar,
                    name_en: name_en,
                    address: address,
                    // show: show,
                    // category_id: category_id,
                    // city: city,
                    // area: area,
                    // direction: direction
                },
            });
        });


        $("#show").on('change', function () {

            var show = $("#show").val();
            console.log(show);

            $.ajax({
                type: 'GET',
                url: '{{route('save_select_inputs')}}',
                data: {show: show},
            });
        });
        $("#category_id").on('change', function () {

            var category_id = $("#category_id").val();
            console.log(category_id);

            $.ajax({
                type: 'GET',
                url: '{{route('save_select_inputs')}}',
                data: {category_id: category_id},
            });
        });
        $("#city").on('change', function () {

            var city = $("#city").val();
            console.log(city);

            $.ajax({
                type: 'GET',
                url: '{{route('save_select_inputs')}}',
                data: {city: city},
            });
        });


        $("#area").on('change', function () {

            var area = $("#area").val();
            console.log(area);

            $.ajax({
                type: 'GET',
                url: '{{route('save_select_inputs')}}',
                data: {area: area},
            });
        });
        $("#direction").on('change', function () {

            var direction = $("#direction").val();
            console.log(direction);

            $.ajax({
                type: 'GET',
                url: '{{route('save_select_inputs')}}',
                data: {direction: direction},
            });
        });


    </script>

{{--    <script async defer--}}
{{--            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD295PAwV_ze1E-ojwR-TUD_6KCzDb7YeU&callback=initMap">--}}
{{--    </script>--}}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD295PAwV_ze1E-ojwR-TUD_6KCzDb7YeU&v=3.exp&language=ar&amp;libraries=places"></script>
    <script src="{{asset('geocomplete.min.js')}}"></script>
    <script>

        $(document).ready(function() {

            function saveLocation(result, latValue, lngValue) {

                var i;
                var placeId;
                var flag = '0';

                $('#address_level_3').val('');
                $('#address_level_2').val('');
                $('#address_level_1').val('');

                $('#lat').val(latValue);
                $('#lng').val(lngValue);

                for (i=0; i<result.length; i++) {

                    placeId = result[i].place_id;

                    if (result[i].types[0] == 'administrative_area_level_3') {

                        $('#address_level_3').val(placeId);
                        flag = '1';
                    }
                    else if (result[i].types[0] == 'administrative_area_level_2') {

                        $('#address_level_2').val(placeId);
                        flag = '1';
                    }
                    else if (result[i].types[0] == 'administrative_area_level_1') {

                        $('#address_level_1').val(placeId);
                        flag = '1';
                    }
                }

                if (flag == '0') {

                    $('#address_level_3').val(result[0].place_id);
                }
            }


            var marker;
            var map;
            var lat_val;
            var lng_val;

            var lat     = $('#lat').val();
            var long    = $('#lng').val();

            if (lat !== '' && long !== '') {
                lat_val = parseFloat(lat);
                lng_val = parseFloat(long);
            }
            // else {
            //     lat_val = 24.710374406523634;
            //     lng_val = 46.682441104815666;
            // }

            var pos = {lat: lat_val, lng: lng_val};
            var geocoder = new google.maps.Geocoder;

            geocoder.geocode({ 'latLng': pos }, function (results, status) {
                if (status === 'OK') {
                    $("#map_address").val(results[1].formatted_address);

                }
            });



            $("#map_address").geocomplete({});

            $("#map_address").change(function() {
                if(marker){
                    marker.setMap(null);
                }
            });


            setTimeout(function(){

                map = new google.maps.Map(document.getElementById('div_map'), {
                    zoom: 25,
                    center: pos
                });
                marker = new google.maps.Marker({
                    draggable: true,
                    position: pos,
                    map: map
                });

                $("body").on('change', '#map_address', function () {
                    var address=$(this).val();
                    if(address!=''){
                        geocoder.geocode({'address': address}, function (results, status) {
                            if (status === 'OK') {

                                // console.log('address complete');
                                // console.log(results);


                                if(marker){
                                    marker.setMap(null);
                                }
                                lat = results[0].geometry.location.lat();
                                lng = results[0].geometry.location.lng();
                                var latlng = {lat: lat, lng: lng};

                                saveLocation(results, lat, lng);

                                map.setCenter(new google.maps.LatLng(lat, lng));
                                map.setZoom(14);
                                marker = new google.maps.Marker({
                                    draggable: true,
                                    position: latlng,
                                    map: map
                                });
                                google.maps.event.addListener(marker, 'dragend', function (event) {
                                    lat = this.getPosition().lat();
                                    lng = this.getPosition().lng();
                                    latlng = {lat: lat, lng: lng};

                                    geocoder.geocode({'location': latlng}, function (results, status) {
                                        if (status === 'OK') {

                                            // console.log('drag in address complete');
                                            // console.log(results);

                                            saveLocation(results, lat, lng);

                                            if (results[1]) {
                                                $("#map_address").val(results[1].formatted_address);
                                            }
                                        }
                                    });
                                });
                            }
                        });
                    }
                });

                google.maps.event.addListener(marker, 'dragend', function (event) {
                    lat = this.getPosition().lat();
                    lng = this.getPosition().lng();
                    latlng = {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
                    geocoder.geocode({'location': latlng}, function (results, status) {
                        if (status === 'OK') {

                            // console.log('drag');
                            // console.log(results);

                            saveLocation(results, lat, lng);

                            if (results[1]) {
                                $("#map_address").val(results[1].formatted_address);
                            }
                        }
//                map.setZoom(14);
                    });
                });

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (positions) {
                        lat = positions.coords.latitude;
                        lng = positions.coords.longitude;

                        if(marker){
                            marker.setMap(null);
                        }
                        var latlng = {lat: lat, lng: lng};
                        geocoder.geocode({'location': latlng}, function (results, status) {
                            if (status === 'OK') {

                                // console.log('geocoder');
                                // console.log(results);

                                saveLocation(results, lat, lng);


                                if (results[1]) {
                                    $("#map_address").val(results[1].formatted_address);
                                    map.setCenter(new google.maps.LatLng(lat, lng));
                                    marker = new google.maps.Marker({
                                        draggable: true,
                                        position: latlng,
                                        map: map
                                    });
                                    map.setZoom(14);
                                    google.maps.event.addListener(marker, 'dragend', function (event) {
                                        lat = this.getPosition().lat();
                                        lng = this.getPosition().lng();
                                        latlng = {lat: this.getPosition().lat(), lng: this.getPosition().lng()};

                                        geocoder.geocode({'location': latlng}, function (results, status) {
                                            if (status === 'OK') {

                                                // console.log('dragend in geocoder');
                                                // console.log(results);

                                                saveLocation(results, lat, lng);


                                                if (results[1]) {
                                                    $("#map_address").val(results[1].formatted_address);
                                                }
                                            }
                                        });
                                    });
                                }
                            }
                        });
                    });
                }

            }, 30);



        });


    </script>
@stop