@extends('frontend.layouts.master')
@section('style')
    <style>
        .pac-container {
            z-index: 99999 !important;
        }
    </style>
@endsection
@section('content')

    <div class="modal fade" id="addAddressModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="formModalLabel">
                        {{ __("routes.Add new address") }}
                    </h4>
                    <button type="button"
                            class="btn-close {{ LaravelLocalization::getCurrentLocaleDirection() == 'rtl' ? 'm-0' : '' }}"
                            data-bs-dismiss="modal" aria-hidden="true">&times;
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{route('address.store')}}" id="address-form" method="POST">
                        @csrf
                        <div class="form-group row g-3">
                            <div class="col-12">
                                <label class="form-label" for="address">{{ __("routes.address") }} <small
                                        class="text-danger">*</small></label>
                                <input type="text" class="form-control" name="address" id="location" placeholder="{{ __("routes.enter-location") }}" required>
                                <div class="text-end">
                                    <small>{{ __("routes.Powered by") }}</small>
                                    <img src="{{asset(('logo/google-logo.png'))}}" width="40px" alt="Google logo" />
                                </div>
                            </div>
                            <div class="col-12">
                                <label for="address_details">{{ __("routes.address-details") }} <small
                                        class="text-danger">*</small></label>
                                <textarea name="address_details" style="min-height: 60px" id="address_details"
                                          class="form-control" required></textarea>
                            </div>
                            <div class="col-6">
                                <label class="form-label" for="flat_number">{{ __("routes.flat-number") }} <small
                                        class="text-info">*</small></label>
                                <input type="number" min="0" name="flat_number" id="flat_number"
                                       class="form-control w-100">
                            </div>
                            <div class="col-6">
                                <label class="form-label" for="villa_number">{{ __("routes.villa-number") }} <small
                                        class="text-info">*</small></label>
                                <input type="number" min="0" name="villa_number" id="villa_number"
                                       class="form-control w-100">
                            </div>
                            <input type="hidden" name="city" id="city"
                                   class="form-control" required>
                            <input type="hidden" name="country" id="country"
                                   class="form-control" required>
                            <div class="col">
                                <button type="button" onclick="submitAddressForm()" class="btn btn-primary">{{__("routes.save")}}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>




    <section class="section border-0 m-0">
        <div class="container-xxl">
            <x-user-panel>
                <div class="row mb-3">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="row justify-content-center ">
                                    <div class="col-lg-6 col-md-6 col-sm-12 box-card">
                                        <a href="javascript: void(0);" class="text-decoration-none"
                                           data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                            <div class="box border text-center border-1 p-4"
                                                 style="border-radius: 10px;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
                                                     fill="#000000" class="bi bi-plus-circle" viewBox="0 0 16 16">
                                                    <path
                                                        d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
                                                    <path
                                                        d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"></path>
                                                </svg>
                                                <p class="text-muted text-4 mb-0 mt-2">
                                                    {{ __("routes.Add new address") }}
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <h2 class="text-capitalize">{{ __("routes.My Addresses") }}</h2>
                                    <p class="text-muted">
                                        {{ __("routes.The following addresses will be used on the checkout page by default.") }}
                                    </p>
                                    @forelse($addresses as $key => $address)
                                        <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                            <div class="position-relative border border-1 p-3"
                                                 style="border-radius: 10px;">
                                                <div class="btn-group position-absolute top-0 right-5" role="group">
                                                    <button id="btnGroupDrop1" type="button"
                                                            class="bg-transparent border-0" data-bs-toggle="dropdown"
                                                            aria-haspopup="true" aria-expanded="false">
                                                        <i class="fa-solid fa-caret-down"></i>
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                                        <a class="dropdown-item text-danger"
                                                           href="{{ route('address.destroy', $address->id) }}"
                                                           onclick="return confirm('are you sure remove this address ?!');">
                                                            <i class="fa-solid fa-trash-alt"></i>
                                                            &nbsp;
                                                            {{ __("routes.Delete") }}
                                                        </a>
                                                    </div>
                                                </div>
                                                <p class="text-muted mb-0">
                                            <span class="text-dark fw-bold">
                                                {{ __("routes.email") }}:
                                            </span>
                                                    {{ $address->user->email }}
                                                </p>
                                                <p class="text-muted mb-0">
                                            <span class="text-dark fw-bold">
                                                {{ __("routes.address") }}:
                                            </span>
                                                    {{ $address->address }}
                                                </p>
                                                <p class="text-muted mb-0">
                                            <span class="text-dark fw-bold">
                                                {{ __("routes.Country") }}:
                                            </span>
                                                    {{ $address->city->country->name }}
                                                </p>
                                                <p class="text-muted mb-0">
                                            <span class="text-dark fw-bold">
                                                {{ __("routes.City") }}:
                                            </span>
                                                    {{ $address->city->name }}
                                                </p>
                                                @if(!is_null($address->postal_code))
                                                    <p class="text-muted mb-0">
                                            <span class="text-dark fw-bold">
                                                {{ __("routes.Postal code") }}:
                                            </span>
                                                        {{ $address->postal_code ?? '' }}
                                                    </p>
                                                @endif
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col-lg-12 col-md-12 col-12-sm text-center">
                                            <i class="fa-solid fa-location-dot text-18"></i>
                                            <p class="text-muted text-4 mt-2">
                                                {{ __("routes.You do not have any addresses") }}
                                            </p>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </x-user-panel>
        </div>
    </section>

@endsection


@section('script')

    <script>

        function submitAddressForm() {
            let form = document.getElementById('address-form');

            if (form.checkValidity()) {
                form.submit();
            } else {
                form.reportValidity();
            }
        }

        let autocomplete;

        function initMap() {
            autocomplete = new google.maps.places.Autocomplete(
                document.getElementById('location'),
                {
                    types: ['geocode'],
                    componentRestrictions: { country: ['qa', 'ae'] },
                    fields: ["address_components", "geometry"],
                }
            );
            autocomplete.addListener('place_changed', () => {
                const place = autocomplete.getPlace();
                if (!place.address_components) {
                    console.log("لم يتم العثور على تفاصيل العنوان.");
                    return;
                }
                if (!place.geometry) {
                    alert("No details available for input: '" + place.name + "'");
                }
                let city = "";
                let country = "";

                for (const component of place.address_components) {
                    const types = component.types;
                    if (types.includes("locality")) {
                        city = component.long_name;
                        document.getElementById('city').value = city;
                    }
                    if (types.includes("country")) {
                        country = component.long_name;
                        document.getElementById('country').value = country;
                    }
                }
            });

        }
    </script>


    <!-- Replace YOUR_API_KEY with your actual Google Maps API key -->
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpGhFuvKcNpH-9Gl4mpGrz03gRjpEYnN8&libraries=places&callback=initMap">
    </script>
@endsection