@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-in-shipping-info" 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 p-0">
        <div class="container-xxl">

            <div class="row">
                <div class="col">
                    <ul class="breadcrumb font-weight-bold text-6 justify-content-center my-5" dir="ltr">
                        <li class="text-transform-none me-2">
                            <span
                                    class="text-decoration-none text-color-primary">{{ __("routes.Shopping Cart") }}</span>
                        </li>
                        <li class="text-transform-none text-color-grey-lighten me-2">
                            <span
                                    class="text-decoration-none text-color-primary">{{ __("routes.Shipping info") }}</span>
                        </li>
                        <li class="text-transform-none text-color-grey-lighten me-2">
                            <span
                                    class="text-decoration-none text-color-grey-lighten text-color-hover-primary">{{ __("routes.Checkout") }}</span>
                        </li>
                        <li class="text-transform-none text-color-grey-lighten">
                            <span
                                    class="text-decoration-none text-color-grey-lighten text-color-hover-primary">{{ __("routes.Order Complete") }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="section border-0 m-0 py-0 pb-5">
        <div class="container-xxl">
            <div class="row mb-3">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <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;">
                                            <i class="bi bi-plus-circle text-12"></i>
                                            <p class="text-5 mb-0 mt-2">
                                                {{ __("routes.Add new address") }}
                                            </p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <livewire:select-address />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('script')

    <script>

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

            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