@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1> {{__("Shipments points")}}</h1>
            <p>{{__("Create Shipments point")}}</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.shipments_points.index")}}">{{__("Shipments points")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Edit")}}</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 Shipments point")}}</h3>
                <div class="tile-body">
                    <form method="post" action="{{route("admin.shipments_points.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">{{__("City English Name From")}}</label>
                                    <input readonly="readonly" class="form-control @if($errors->has('city_name_en_from')) is-invalid @endif" id="lat" type="text" name="city_name_en_from" placeholder="{{__("Enter City English Name From")}}" value="{{inputValue("city_name_en_from", $city)}}">
                                </div>
                                @error("city_name_en_from")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("City Arabic Name From")}}</label>
                                    <input readonly="readonly" class="form-control @if($errors->has('city_name_ar_from')) is-invalid @endif" id="lng" type="text" name="city_name_ar_from" placeholder="{{__("Enter City Arabic Name From")}}" value="{{inputValue("city_name_ar_from", $city)}}">
                                </div>
                                @error("city_name_ar_from")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("City Urdu Name From")}}</label>
                                    <input readonly="readonly" class="form-control @if($errors->has('city_name_ur_from')) is-invalid @endif" id="city_urdu_from" type="text" name="city_name_ur_from" placeholder="{{__("Enter City Urdu Name From")}}" value="{{inputValue("city_name_ur_from", $city)}}">
                                </div>
                                @error("city_name_ur_from")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-12">
                                <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#cityFrom">
                                    <i class="fas fa-map-marker-alt"></i>
                                </button>

                                <div class="modal fade" id="cityFrom" 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="cityFrom">{{__("City From")}}</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>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label  class="control-label">{{__("City English Name To")}}</label>
                                    <input readonly="readonly" id="lat2" class="form-control @if($errors->has('city_name_en_to')) is-invalid @endif" type="text" name="city_name_en_to" placeholder="{{__("Enter City English Name To")}}" value="{{inputValue("city_name_en_to", $city)}}">
                                </div>
                                @error("city_name_en_to")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("City Arabic Name To")}}</label>
                                    <input readonly="readonly" id="lng2" class="form-control @if($errors->has('city_name_ar_to')) is-invalid @endif" type="text" name="city_name_ar_to" placeholder="{{__("Enter City Arabic Name To")}}" value="{{inputValue("city_name_ar_to", $city)}}">
                                </div>
                                @error("city_name_ar_to")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("City Urdu Name To")}}</label>
                                    <input readonly="readonly" id="city_urdu_to" class="form-control @if($errors->has('city_name_ur_to')) is-invalid @endif" type="text" name="city_name_ur_to" placeholder="{{__("Enter City Urdu Name To")}}" value="{{inputValue("city_name_ur_to", $city)}}">
                                </div>
                                @error("city_name_ur_to")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="col-lg-12">
                                <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#cityTo">
                                    <i class="fas fa-map-marker-alt"></i>
                                </button>

                                <div class="modal fade" id="cityTo" 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="cityTo">{{__("City To")}}</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="map2" style="height: 520px" class="col-lg-12"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="control-label">{{__("Price")}}</label>
                                    <input class="form-control @if($errors->has('price')) is-invalid @endif" type="text" name="price" placeholder="{{__("Enter Price")}}" value="{{inputValue("price", $city)}}">
                                </div>
                                @error("price")
                                <div class="input-error">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                                                <div id="quantity-prices-box">
                            @foreach($city->passByCity as $index => $passCity)
                                                                <div class="row option-quantity-box">
                                    <div class="col-lg-5 col-md-12 ">
                                        <div class="row">
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('City English')}}</label>
                                                    <input readonly="readonly" id="latCity{{$index + 1}}" name="city_en_name[{{$index + 1}}]" value="{{$passCity->name_en}}" class="form-control lat" type="text" placeholder="{{__('Enter City English')}}">
                                                    <div class="invalid-feedback" style="display: none"></div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('City Arabic')}}</label>
                                                    <input readonly="readonly" id="lngCity{{$index + 1}}" name="city_ar_name[{{$index + 1}}]" value="{{$passCity->name_ar}}"  class="form-control lng" type="text" placeholder="{{__('Enter City Arabic')}}">
                                                    <div class="invalid-feedback" style="display: none"></div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('City Urdu')}}</label>
                                                    <input readonly="readonly" id="lngCityUrdu{{$index + 1}}" name="city_ar_name[{{$index + 1}}]" value="{{$passCity->name_ur}}"  class="form-control lng2" type="text" placeholder="{{__('Enter City Urdu')}}">
                                                    <div class="invalid-feedback" style="display: none"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5 col-md-12 m-auto">
                                        <div class="row">
                                            <div class="col-lg-9">
                                                <button type="button" class="btn btn-primary modelCity mb-3" data-toggle="modal" data-target = "#city{{$index + 1}}">
                                                    <i class="fas fa-map-marker-alt"></i>
                                                </button>

                                                <div class="modal loaiCity fade" id="city{{$index + 1}}"  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="cityFrom">{{__("City From")}}</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="mapCit{{$index + 1}}" style="height: 500px" class="col-lg-12"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-3 text-center">
                                                <div class="form-group">
                                                    <label class="control-label">{{__('Delete')}}</label>
                                                    <div class="d-block">
                                                        <span class="delete-option server-delete"
                                                              data-id="{{$passCity->id}}"
                                                              data-url="{{route("ajax.shipments_points.pass_by.destroy")}}"
                                                              data-success-message="{{__('Deleted Successfully')}}"
                                                              data-error-message="{{__('Deleted Failed')}}" data-title = "{{__('Are You Sure To Delete ?')}}"
                                                              data-no="{{__('No')}}" data-yes="{{__('Yes')}}"
                                                              style="color: #7e0000; font-size: 21px;cursor: pointer"><i class="far fa-trash-alt"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="col-12 mt-3 mb-3">
                            <span class="btn btn-primary add-new-row"><i class="fas fa-plus"></i> {{__("Add New Row")}}</span>
                        </div>
                        <div class="tile-footer">
                            <button  type="submit" class="btn btn-primary">
                                <i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Create")}}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section("scripts")
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{env("GOOGLE_API_KEY")}}&callback=initMap" type="text/javascript"></script>
    <script>
        let map, map2;
        let mapCity = [], markerCit = [], ulu = [];
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 31.896102, lng :36.040976 },
                zoom: 8,
                scrollwheel: true,
            });

            const uluru = { lat: 31.896102, lng: 36.040976 };
            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()

                    $.ajax({
                        type: "get",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{route("ajax.shipments_points.index")}}",
                        data: {lat: lat, lng: lng},
                        success: function( response ) {
                            var data = response.data;
                            $('#lat').val(data.city_en)
                            $('#lng').val(data.city_ar)
                            $('#city_urdu_from').val(data.city_ur)
                        },
                        error : function (response) {
                            console.log("Error!");
                        }
                    });
                })

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




            map2 = new google.maps.Map(document.getElementById("map2"), {
                center: { lat: 31.896102, lng :36.040976 },
                zoom: 8,
                scrollwheel: true,
            });

            const uluru2 = { lat: 31.896102, lng: 36.040976 };

            let marker2 = new google.maps.Marker({
                position: uluru2,
                map: map2,
                draggable: true
            });


            google.maps.event.addListener(marker2,'position_changed',
                function (){
                    let lat = marker2.position.lat()
                    let lng = marker2.position.lng()

                    $.ajax({
                        type: "get",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{route("ajax.shipments_points.index")}}",
                        data: {lat: lat, lng: lng},
                        success: function( response ) {
                            var data = response.data;
                            $('#lat2').val(data.city_en)
                            $('#lng2').val(data.city_ar)
                            $('#city_urdu_to').val(data.city_ar)
                        },
                        error : function (response) {
                            console.log("Error!");
                        }
                    });
                })

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


            for (let i =1; i <= {{count($cityAll)}}; i++){
                $(`#RowTemplate`).data("counter", i + 1);
            mapCity[i] = new google.maps.Map(document.getElementById("mapCit" + i), {
                center: { lat: 31.896102, lng :36.040976 },
                zoom: 8,
                scrollwheel: true,
            });

            ulu[i] = { lat: 31.896102, lng: 36.040976 };

            markerCit[i] = new google.maps.Marker({
                position: ulu[i],
                map: mapCity[i],
                draggable: true
            });


            google.maps.event.addListener(markerCit[i],'position_changed',
                function (){
                    let lat = markerCit[i].position.lat()
                    let lng = markerCit[i].position.lng()
                    console.log(1)
                    $.ajax({
                        type: "get",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{route("ajax.shipments_points.index")}}",
                        data: {lat: lat, lng: lng},
                        success: function( response ) {
                            var data = response.data;
                            $('#latCity' + i).val(data.city_en)
                            $('#lngCity' + i).val(data.city_ar)
                            $('#lngCityUrdu' + i).val(data.city_ur)
                        },
                        error : function (response) {
                            console.log("Error!");
                        }
                    });
                })

            google.maps.event.addListener(mapCity[i],'click',
                function (event){
                    pos = event.latLng
                    markerCit[i].setPosition(pos)
                })
            }
        }




        $(document).on("click", ".add-new-row", () => {
            let counter = $(`#RowTemplate`).data("counter");
            $(`#RowTemplate`).data("counter", $(`#RowTemplate`).data("counter") + 1);
            $("#RowTemplate").find(".map").attr("id", "mapCit" + counter)
            $("#RowTemplate").find(".lat").attr("id", "latCity" + counter)
            $("#RowTemplate").find(".lat").attr("name", "city_en_name[" + counter + "]")
            $("#RowTemplate").find(".lng").attr("id", "lngCity" + counter)
            $("#RowTemplate").find(".lng").attr("name", "city_ar_name[" + counter + "]")
            $("#RowTemplate").find(".lng2").attr("id", "lngCityUrdu" + counter)
            $("#RowTemplate").find(".lng2").attr("name", "city_ur_name[" + counter + "]")
            $("#RowTemplate").find(".modelCity").attr("data-target", "#city" + counter)
            $("#RowTemplate").find(".loaiCity").attr("id", "city" + counter)
            let htmlElement = $(`#RowTemplate`).html();
            $('#quantity-prices-box').append($(htmlElement))
            // var map3 = counter + Math.random();
            // counter =  Math.random();
            // console.log(counter);
            mapCity[counter] = new google.maps.Map(document.getElementById("mapCit" + counter), {
                center: { lat: 31.896102, lng :36.040976 },
                zoom: 8,
                scrollwheel: true,
            });

            ulu[counter] = { lat: 31.896102, lng: 36.040976 };

            markerCit[counter] = new google.maps.Marker({
                position: ulu[counter],
                map: mapCity[counter],
                draggable: true
            });


            google.maps.event.addListener(markerCit[counter],'position_changed',
                function (){
                    let lat = markerCit[counter].position.lat()
                    let lng = markerCit[counter].position.lng()
                    console.log(counter)
                    console.log(markerCit);
                    $.ajax({
                        type: "get",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{route("ajax.shipments_points.index")}}",
                        data: {lat: lat, lng: lng},
                        success: function( response ) {
                            var data = response.data;
                            $('#latCity' + counter).val(data.city_en)
                            $('#lngCity' + counter).val(data.city_ar)
                            $('#lngCityUrdu' + counter).val(data.city_ur)

                        },
                        error : function (response) {
                            console.log("Error!");
                        }
                    });
                })

            google.maps.event.addListener(mapCity[counter],'click',
                function (event){
                    pos = event.latLng
                    markerCit[counter].setPosition(pos)
                })
        })
    </script>
    <script type="module" src="{{asset("assets/js/pages/commission.js")}}"></script>
    @include("admin.shipments_cities.templates")
@endsection