@extends('web.layouts.layout')
@section('content')

<main>
    <!-- Start pg_header -->
    @include('web.pages.components.header.header')

    <!-- Start section -->
    <section class="checkout_pg section">
        <div class="container">
            <form method="post" action="{{$action}}" onsubmit="formAction(this)">
                @CSRF
                <div class="row">
                    <div class="col-lg-12">
                        <div class=" mb-5">
                            <!-- Location -->
                            <div class="box mb-5">
                                <h2 class="sec_title bb fw-bold mb-5">    {{__('web.addresses')}}      </h2>

                                <div class="row mb-4">
                                    @if(!auth()->user())
                                        <div class="col-lg-6">
                                            <div class="form-group mb-4">
                                                <input name="name" value="{{$account['user']->name}}" class="form-control" placeholder=" {{__('web.name')}}  "/>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group mb-4">
                                                <input type="email" name="email" value="{{$account['user']->email}}" class="form-control" placeholder="{{__('web.email')}}"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group phone_group mb-4">
                                                <input type="number" name="phone" value="{{$account['user']->phone}}" class="form-control" placeholder="{{__('web.phone')}}"/>
                                                <select class="phoneSelect">
                                                    <option>966</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6"></div>
                                    @endif
                                    @foreach($addresses as $row)
                                    <div class="col-lg-4">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="radio" name="address_id" value="{{$row->id}}" id="locRadio{{$row->id}}" >
                                            <label class="form-check-label" for="locRadio{{$row->id}}">
                                                {!! $row->address !!}
                                            </label>
                                        </div>
                                    </div>
                                    @endforeach
                                    <div class="col-lg-4">
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="radio" value="" name="address_id" id="locRadio0" >
                                            <label class="form-check-label" for="locRadio0">
                                                {{__('web.add_new_address')}}
                                            </label>
                                        </div>
                                    </div>



                                </div>
                                <div class="row mb-0 mt-5" id="newLocForm">
                                    <div class="col-lg-6">
                                        <div class="row">

                                            <div class="col-lg-6">
                                                <div class="mb-4">
                                                    <label class="inputLabel"> {{__('web.country_id')}}  </label>
                                                    <select name="country_id" onchange="fetchCities(this)" class="form-control form-select">
                                                        <option value="">{{__('web.select')}}</option>
                                                        @foreach($countries as $row)
                                                            <option value="{{$row->id}}">{{$row->title}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="mb-4">
                                                    <label class="inputLabel"> {{__('web.city_id')}}  </label>
                                                    <select name="city_id" id="city_id" class="form-control form-select">
                                                        <option value="">{{__('web.select')}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="mb-4">
                                                    <label class="inputLabel">{{__('web.address_details')}}</label>
                                                    <input type="text" name="address"  class="form-control" placeholder="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                        <input type="hidden" name="latitude" id="latitude" value="{{$address->latitude ?? ''}}">
                                        <input type="hidden" name="longitude" id="longitude" value="{{$address->longitude ?? ''}}">
                                        <div id="map" style="width: 100%;height: 20pc"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="butns d-flex align-items-center justify-content-center">
                        <a href="{{route('cart.index')}}" class="butn primary_border_butn me-2"> {{__('web.back')}}  </a>
                        <button type="submit" class="butn primary_butn">
                            {{__('web.next')}}
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </section>



</main>

@endsection

@section('inject_js')
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOuP7Khf-OXuiervHfHONEq9QmLUarsTA&libraries=places"></script>
    <script src="{{url('')}}/assets/web/js/custom/address.js"></script>
    <script>
        let url_fetch_cities = "{{route('web.fetch.cities')}}"
    </script>
    <script type="text/javascript">

        var latlng = new google.maps.LatLng({!! isset($address) ? $address->latitude.', '.$address->longitude : '21.4989, 39.2509' !!});
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Set lat/lon values for this property',
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function(a) {
            var div = document.createElement('div');
            document.getElementsByTagName('body')[0].appendChild(div);
            $("#latitude").val(function() {
                return  a.latLng.lat().toFixed(4);
            });
            $("#longitude").val(function() {
                return  a.latLng.lng().toFixed(4);
            });
        });

    </script>
@endsection