@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{__("cities")}}</h1>
            <p>{{__("all-cities")}}</p>
        </div>

        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.city.index")}}">{{__("City")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Edit")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{$city->name_en}}</a></li>
        </ul>
    </div>
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("edit-city")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.city.update", $city->id)}}" enctype="multipart/form-data">
                        @csrf
                        @method("put")
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("English name")}}</label>
                                    <input class="form-control @if($errors->has('name_en')) is-invalid @endif" type="text" name="name_en" placeholder="{{__("enter-en-name")}}" value="{{inputValue("name_en", $city)}}">
                                </div>
                                @error("name_en")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label required">{{__("Arabic name")}}</label>
                                    <input class="form-control @if($errors->has('name_ar')) is-invalid @endif" type="text" name="name_ar" placeholder="{{__("enter-ar-name")}}" value="{{inputValue("name_ar", $city)}}">
                                </div>
                                @error("name_ar")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Location")}}</label>
                                    <br>
                                    <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#location">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </button>
                                <input type="hidden" name="lat" id="lat" value="{{$city->lat}}">
                                <input type="hidden" name="lng" id="lng" value="{{$city->lng}}">
                                @error("location")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                                <div class="modal fade" id="location" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lgx">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="location">{{__("Location")}}</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div id="map" class="col-lg-12"></div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary" data-dismiss="modal">{{__("Save changes")}}</button>
                                              </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tile-footer">
                            <button class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Save")}}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")
<script type="text/javascript">
       let map;
       function initMap() {

           var oldLat = $("#lat").val();
           var oldLng = $("#lng").val();
         
           map = new google.maps.Map(document.getElementById("map"), {
               center: { lat: Number(oldLat), lng :Number(oldLng) },
               zoom: 8,
               scrollwheel: true,
           });

           const uluru = { lat: Number(oldLat), lng: Number(oldLng) };
           let marker = new google.maps.Marker({
               position: uluru,
               map: map,
               draggable: true
           });

           google.maps.event.addListener(marker,'position_changed',
               function (){
                   let lat = marker.position.lat();
                   let lng = marker.position.lng();
                   $("#lat").val(lat);
                   $("#lng").val(lng);
               })

           google.maps.event.addListener(map,'click',
               function (event){
                   pos = event.latLng
                   marker.setPosition(pos)
               })

       }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{env("GOOGLE_API_KEY")}}&callback=initMap" type="text/javascript"></script>

@endsection