@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Edit Address</h5>
                <form class="form-horizontal" action="{{ route('address-info.update', ['userId' => $userId,'id' => $customerAddress->id]) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Area</label>
                                <input type="text" name="area" id="area" value="{{ $customerAddress->area }}" class="form-control  @error('area') is-invalid @enderror" readonly>
                                @error('area')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Street Name</label>
                                <input type="text" name="street_name" id="street_name" value="{{ $customerAddress->street_name }}" class="form-control  @error('street_name') is-invalid @enderror">
                                @error('street_name')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Building No</label>
                                <input type="text" name="building_no" id="building_no" value="{{ $customerAddress->building_no }}" class="form-control  @error('building_no') is-invalid @enderror">
                                @error('building_no')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Loot Number</label>
                                <input type="text" name="loot_number" id="loot_number" value="{{ $customerAddress->loot_number }}" class="form-control  @error('loot_number') is-invalid @enderror">
                                @error('loot_number')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Latitude</label>
                                <input type="text" name="latitude" id="latitude" value="{{ $customerAddress->latitude }}" class="form-control  @error('latitude') is-invalid @enderror">
                                @error('latitude')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Longitude</label>
                                <input type="text" name="longitude" id="longitude" value="{{ $customerAddress->longitude }}"  class="form-control  @error('longitude') is-invalid @enderror">
                                @error('longitude')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Notes</label>
                                <input type="text" name="notes" id="notes" value="{{ $customerAddress->notes }}" class="form-control  @error('notes') is-invalid @enderror">
                                @error('notes')
                                    <p class="error-validation">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        {{-- <div id="map" style="height: 400px; width: 100%;"></div> --}}

                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="col-lg-12 text-right">
                                    <button type="submit" class="btn btn-info">Save Address</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    {{-- <script async defer src="https://maps.googleapis.com/maps/api/js?key={{env('MAPS_KEY')}}&callback=initMap"></script>

    <script type="text/javascript">
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });

            var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function() {
                var latLng = marker.getPosition();
                // Now you can use latLng.lat() and latLng.lng() to get the latitude and longitude
                console.log('Latitude:', latLng.lat(), 'Longitude:', latLng.lng());
            });
        }
    </script> --}}
@endpush