@extends('layouts.app')
@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp
    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="top-head">
                        <h2>{{ __('label.book_your_appointment') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-2 py-sm-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="services-tabs">

                        <div class="tab-content" id="nav-tabContent">
                            @include('customer.book-appoinment.nav-bar')

                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <form class="form" role="post-data" method="POST"
                                        action="/api/book-appointments/store-user" redirect="/book-appointments/summary"
                                        data-message="false">
                                        @csrf
                                        <input type="hidden" name="cart_id" value="{{ $cart->id }}">
                                        <div class="bg-light p-3 my-4">
                                            @php
                                                $serviceNames = [];
                                                $start_time_formatted = date('h:i A', strtotime($cart->start_time));
                                                $end_time_formatted = date('h:i A', strtotime($cart->end_time)); // Example format: 06:00 PM
                                                $date = App\Helpers\GeneralHelper::dateFormat1($cart->date);
                                                $total = $cart->sub_total ? $cart->sub_total : 0;
                                                foreach ($cart->services as $service) {
                                                    $serviceNames[] = $locale == App\Helpers\ConstantHelper::ARABIC ? $service->name_ar : $service->name_en;
                                                }
                                                $services = implode(', ', $serviceNames);
                                            @endphp
                                            <div class="bnooking-help-txt">
                                                <h6>{{ __('static.you_have_selected_services', ['services' => $services, 'start_time' => $start_time_formatted, 'end_time' => $end_time_formatted, 'date' => $date, 'price' => $cart->sub_total]) }}
                                                </h6>
                                                <p>{{ __('label.please_provide_your_details') }}</p>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.first_name') }} <span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" name="first_name"
                                                            value="{{ auth()->user()->first_name }}" class="form-control"
                                                            placeholder="Enter First Name" readonly />
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.last_name') }} <span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" name="last_name"
                                                            value="{{ auth()->user()->last_name }}" class="form-control"
                                                            placeholder="Enter Last Name" readonly />
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.email_id') }} <span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" name="email"
                                                            value="{{ auth()->user()->email }}" class="form-control"
                                                            placeholder="Enter Email-ID" readonly />
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.phone_no') }} <span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" name="mobile_number"
                                                            value="{{ auth()->user()->mobile_number }}"
                                                            class="form-control" placeholder="Enter Mobile No." readonly />
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.selected_address') }}<a href="#"
                                                                data-toggle="modal" data-target="#map-modal"><i
                                                                    class="fa fa-edit ml-2"
                                                                    style="color:green"></i></a></label>
                                                        <input type="text" id="source-latitude" name="source_latitude"
                                                            placeholder="Latitude" value="{{ $branch->latitude }}"
                                                            hidden />
                                                        <input type="text" id="source-longitude" name="source_longitude"
                                                            placeholder="Longitude" value="{{ $branch->longitude }}"
                                                            hidden />
                                                        <input type="text" id="destination-latitude"
                                                            name="destination_latitude" placeholder="Latitude"
                                                            value="{{ isset($sessionBookingInfo['destination_latitude']) ? $sessionBookingInfo['destination_latitude'] : '' }}"
                                                            hidden />
                                                        <input type="text" id="destination-longitude"
                                                            name="destination_longitude" placeholder="Longitude"
                                                            value="{{ isset($sessionBookingInfo['destination_longitude']) ? $sessionBookingInfo['destination_longitude'] : '' }}"
                                                            hidden />
                                                        <input type="text" class="form-control" id="destination-address"
                                                            name="destination_address" placeholder="address"
                                                            value="{{ isset($sessionBookingInfo['destination_address']) ? $sessionBookingInfo['destination_address'] : '' }}"
                                                            readonly />
                                                        <input type="text" id="destination-state"
                                                            name="destination_state" hidden />
                                                        <input type="text" id="destination-city" name="destination_city"
                                                            hidden />
                                                        <input type="text" id="destination-country"
                                                            name="destination_country" hidden />
                                                        <input type="text" id="destination-postal-code"
                                                            name="destination_postal_code" hidden />
                                                        <input type="text" id="destination-area"
                                                            name="destination_area" hidden />
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="search-group search-group-1 form-group custominnergroup">
                                                        <label>{{ __('label.appointment_booking_detail') }}</label>
                                                        <textarea type="text" name="description" rows="5" class="form-control"
                                                            placeholder="{{ __('placeholder.enter_details') }}">{{ @$cart->description }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-flex mt-4 justify-content-between">
                                            <a href="{{ url('book-appointments/slot') }}"
                                                class="btn btn-outline-secondary">
                                                <i class="fas fa-chevron-left mr-1"></i> {{ __('static.back') }}
                                            </a>
                                            <button type="button" class="btn btn-primary" role="button"
                                                data-request="ajax-submit" data-target="[role=post-data]"><i
                                                    class="fas fa-chevron-right mr-1"></i>{{ __('label.next') }}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="map-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <input name="search" class="form-control search-address controls" type="text"
                        placeholder="{{ __('placeholder.search_address') }}" id="map-search"
                        value="{{ isset($sessionBookingInfo['destination_address']) ? $sessionBookingInfo['destination_address'] : '' }}" />
                    <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" style="height: 350px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">{{ __('button.close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('app.MAP_API_KEY') }}&callback=initAutocomplete&libraries=places&v=weekly"
        defer></script>

    <script type="text/javascript">
        let marker; // Declare marker globally
        document.addEventListener("DOMContentLoaded", function() {
            const deviceLatitude =
                "{{ isset($sessionBookingInfo['destination_latitude']) ? $sessionBookingInfo['destination_latitude'] : '' }}";
            const deviceLongitude =
                "{{ isset($sessionBookingInfo['destination_longitude']) ? $sessionBookingInfo['destination_longitude'] : '' }}";
            if (deviceLatitude === '' && deviceLongitude === '' && navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        curlatitude = position.coords.latitude;
                        curlongitude = position.coords.longitude;
                        initMap(curlatitude, curlongitude);
                        updateAddress(curlatitude, curlongitude);
                    },
                    (error) => {
                        console.error("Error getting current location:", error);
                        // Handle error here if needed
                    }
                );
            } else {
                initMap(deviceLatitude, deviceLongitude);
                updateAddress(deviceLatitude, deviceLongitude);
            }
        });

        function initAutocomplete() {
            // Create the search box and link it to the UI element.
            const input = document.getElementById("map-search");
            const searchBox = new google.maps.places.SearchBox(input);

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener("places_changed", () => {
                const places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }
                const place = places[0];
                initMap(place.geometry.location.lat(), place.geometry.location.lng());
                updateAddress(place.geometry.location.lat(), place.geometry.location.lng());
            });
        }

        function initMap(latitude, longitude) {
            latitude = parseFloat(latitude);
            longitude = parseFloat(longitude);

            if (isNaN(latitude) || isNaN(longitude)) {
                latitude = 0; // Default latitude if not provided
                longitude = 0; // Default longitude if not provided
            }

            const map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: latitude,
                    lng: longitude
                },
                zoom: 13,
                mapTypeId: "roadmap",
            });

            // Show the bounce map
            marker = new google.maps.Marker({
                map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: {
                    lat: latitude,
                    lng: longitude
                },
            });

            marker.addListener("click", toggleBounce);

            map.addListener("click", (mapsMouseEvent) => {
                clickedLocation = mapsMouseEvent.latLng;
                const geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    location: clickedLocation
                }, (results, status) => {
                    if (status === "OK") {
                        if (results[0]) {
                            const place = results[0];
                            document.getElementById("map-search").value = place.formatted_address;
                            initMap(clickedLocation.lat(), clickedLocation.lng());
                            updateAddress(clickedLocation.lat(), clickedLocation.lng())
                        } else {
                            console.error("No results found");
                        }
                    } else {
                        console.error("Geocoder failed due to: " + status);
                    }
                });
            });
        }

        function updateAddress(lat, lng) {
            const geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({
                'latLng': latlng
            }, (results, status) => {
                if (status === "OK") {
                    if (results[0]) {
                        const place = results[0];
                        if (place.address_components) {
                            document.getElementById("destination-state").value = getComponentValue(place,
                                "administrative_area_level_1");
                            document.getElementById("destination-city").value = getComponentValue(place,
                                "locality");
                            document.getElementById("destination-country").value = getComponentValue(place,
                                "country");
                            document.getElementById("destination-postal-code").value = getComponentValue(place,
                                "postal_code");
                            document.getElementById("destination-area").value = getComponentValue(place,
                                "sublocality_level_1");
                        }
                        document.getElementById("destination-latitude").value = lat;
                        document.getElementById("destination-longitude").value = lng;
                        document.getElementById("destination-address").value = place.formatted_address;
                    } else {
                        console.error("No results found");
                    }
                } else {
                    console.error("Geocoder failed due to: " + status);
                }
            });
        }

        function getComponentValue(place, type) {
            for (const component of place.address_components) {
                for (const componentType of component.types) {
                    if (componentType === type) {
                        return component.long_name;
                    }
                }
            }
            return "";
        }

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        window.initAutocomplete = initAutocomplete;
    </script>
@endsection