@extends('website.layouts.web')
@section('content')
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>



    <!-- Begin: Main Slider -->
    <div class="mainSlider innerBan">
        <img src="{{ asset('website/images/banner11.jpg') }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2 class="slideOne">Reservations</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->

    <section class="reservationinneer">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="scheduleForm " data-aos="fade-down">
                        <h2>Request a Reservation</h2>
                        <form class="container-fluid" action="{{route('reservation.email')}}" method="post">
                            @csrf
                            <div class="scheduleForm ">
                                <div class="srpw">
                                    <div class="steps">
                                        <ul id="progressbar">
                                            <li class="active">
                                                <div class="doOne doOne_step1">
                                                    <span>01</span>
                                                    <div class="reserve">reservation request</div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="doOne doOne_step2">
                                                    <span>02</span>
                                                    <div>passenger contact information</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <fieldset class="fieldset_1">
                                    <div class="row">
                                        <div class="col-md-6 cpti">
                                            <div class="form-group">

                                                <input type="date" placeholder="PICK-UP DATE*" name="pick_up_date"
                                                       class="form-control @error('pick_up_date') is-invalid @enderror" value="{{ old('pick_up_date') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <input type="time" placeholder="PICKUP TIME" name="pick_up_time"
                                                       class="form-control @error('pick_up_time') is-invalid @enderror" value="{{ old('pick_up_time') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <h5>Location Type:</h5>
                                            <div class="form-check-inline">
                                                <label class="form-check-label"
                                                       for="radio1">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio1"
                                                           name="location_type" value="all"
                                                           checked>All search
                                                </label>
                                            </div>
                                            <div class="form-check-inline">
                                                <label class="form-check-label"
                                                       for="radio2">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio2"
                                                           name="location_type"
                                                           value="address">Address
                                                </label>
                                            </div>
                                            <div class="form-check-inline">
                                                <label class="form-check-label radio3">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio3"
                                                           name="location_type"
                                                           value="airport">Airport

                                                </label>
                                            </div>
                                            <div class="form-check-inline">
                                                <label class="form-check-label radio4">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio4"
                                                           name="location_type"
                                                           value="casino">Casino

                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">

                                            <input type="text" id="pac-input" class="controls form-control" name="pick"
                                                   placeholder="PICK-UP" onkeydown="return (event.keyCode!=13);">
                                        </div>
                                        <div class="col-md-12">
                                            <h5>Location Type:</h5>
                                            <div class="form-check-inline">
                                                <label class="form-check-label"
                                                       for="radio1">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio1"
                                                           name="location_type" value="all"
                                                           checked>All search
                                                </label>
                                            </div>
                                            <div class="form-check-inline">
                                                <label class="form-check-label"
                                                       for="radio2">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio2"
                                                           name="location_type"
                                                           value="address">Address
                                                </label>
                                            </div>
                                            <div class="form-check-inline">
                                                <label class="form-check-label radio3">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio3"
                                                           name="location_type"
                                                           value="airport">Airport

                                                </label>
                                            </div>
                                            <div class="form-check-inline">
                                                <label class="form-check-label radio4">
                                                    <input type="radio"
                                                           class="form-check-input" id="radio4"
                                                           name="location_type"
                                                           value="casino">Casino

                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" id="pac-output" class="controls form-control" name="drop"
                                                   placeholder="DROP-OFF" onkeydown="return (event.keyCode!=13);">
                                        </div>

                                        <div class="col-md-12">
                                            <ul class="list-unstyled secd">
                                                <li>
                                                    <h5>travellers*</h5>
                                                    <div class="number">
                                                        <span class="minus">-</span>
                                                        <input type="text" value="01" name="travellers">
                                                        <span class="plus">+</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <h5>Car seats*</h5>
                                                    <div class="number">
                                                        <span class="minus">-</span>
                                                        <input type="text" value="01" name="seats">
                                                        <span class="plus">+</span>
                                                    </div>
                                                </li>
                                                {{--                                                                        <li>--}}
                                                {{--                                                                            <h5>bags*</h5>--}}
                                                {{--                                                                            <div class="number">--}}
                                                {{--                                                                                <span class="minus">-</span>--}}
                                                {{--                                                                                <input type="text" value="01" name="bags">--}}
                                                {{--                                                                                <span class="plus">+</span>--}}
                                                {{--                                                                            </div>--}}
                                                {{--                                                                        </li>--}}
                                            </ul>
                                        </div>
{{--                                        <div class="col-md-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <input type="date" name="" id="" class="form-control"></div>--}}

{{--                                        </div>--}}
{{--                                        <div class="col-md-6">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <input type="time" name="" id="" class="form-control"></div>--}}
{{--                                        </div>--}}
{{--                                        <div class="col-md-12">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <select name="" id="" class="form-control">--}}
{{--                                                    <option value="">1 passenger</option>--}}
{{--                                                </select>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}
{{--                                        <div class="col-md-12">--}}
{{--                                            <h6><a href=""><i class="fas fa-plus-circle"></i>Add Stop</a></h6>--}}
{{--                                        </div>--}}
{{--                                        <div class="col-md-12">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <input type="text" placeholder="Promo code" class="form-control"></div>--}}
{{--                                        </div>--}}
                                        <input type="button" name="Continue"
                                               class="themeBtn thmbord next contnue" value="Continue"/>
                                    </div>

                                </fieldset>
                                <fieldset class="fieldset_2" style="display: none;">
                                    <h2 class="headingOne"> passenger contact information</h2>
                                    <div class="form-container">
                                        <div class="container-fluid">
                                            <div class="row">

                                                <div class="col-md-6 cpti">
                                                    <div class="form-group">

                                                        <input type="text" placeholder="First Name*"
                                                               class="form-control @error('first_name') is-invalid @enderror"
                                                               name="first_name" value="{{ old('first_name') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <input type="text" placeholder="Last Name*"
                                                               class="form-control @error('last_name') is-invalid @enderror"
                                                               name="last_name" value="{{ old('last_name') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <input type="text" placeholder="Email Address*"
                                                               class="form-control @error('email') is-invalid @enderror"
                                                               name="email" value="{{ old('email') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <input type="text"
                                                               placeholder="Phone No.(optional)*"
                                                               class="form-control" name="phone_no"
                                                               value="{{ old('phone_no') }}">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group descri">
                                                                        <textarea name="" placeholder="Description"
                                                                                  id="" cols="30" rows="10"
                                                                                  name="description">{{ old('description') }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="d-flex align-items-center justify-content-center">
                                                        <input type="button" name="previous"
                                                               class="previous themeBtn thmbord" value="Back"/>
                                                        <input type="submit" class="next themeBtn thmbord"
                                                               value="Submit">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </fieldset>

                                {{--                                <div class="col-12">--}}
                                {{--                                    <div class="d-flex">--}}
                                {{--                                        <button class="themeBtn" id="addMarker" type="submit">Submit--}}
                                {{--                                        </button>--}}
                                {{--                                    </div>--}}
                                {{--                                </div>--}}


                                <div class="col-12">
                                    <div id="map" style="height: 500px;"></div>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
    <script>

        function initAutocomplete() {
            const directionsRenderer = new google.maps.DirectionsRenderer();
            const directionsService = new google.maps.DirectionsService();
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: {lat: 41.85, lng: -87.65},
                disableDefaultUI: true,
            });

            directionsRenderer.setMap(map);
            directionsRenderer.setPanel(document.getElementById("sidebar"));

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

            // Bias the SearchBox results towards current map's viewport.
            map.addListener("bounds_changed", () => {
                searchBox.setBounds(map.getBounds());
            });

            let markers = [];

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            let location1 = ''
            searchBox1.addListener("places_changed", () => {
                const places = searchBox.getPlaces();

                if (places.length == 0) {
                    return;
                }

                // Clear out the old markers.
                markers.forEach((marker) => {
                    marker.setMap(null);
                });
                markers = [];

                places.forEach((place) => {
                    if (!place.geometry || !place.geometry.location) {
                        console.log("Returned place contains no geometry");
                        return;
                    }
                    console.log(place.geometry.location)
                    calculateAndDisplayRoute(directionsService, directionsRenderer);
                    // Create a marker for each place.
                });
            });
            map.setOptions({styles: styles["hide"]});
            // document.getElementById("start").addEventListener("change", onChangeHandler);
            // document.getElementById("end").addEventListener("change", onChangeHandler);
        }

        function calculateAndDisplayRoute(directionsService, directionsRenderer) {
            const start = document.getElementById("pac-input").value;
            const end = document.getElementById("pac-output").value;

            console.log(start, '------------------', end)

            directionsService
                .route({
                    origin: start,
                    destination: end,
                    travelMode: google.maps.TravelMode.DRIVING,
                })
                .then((response) => {
                    directionsRenderer.setDirections(response);
                })
                .catch((e) => window.alert("Directions request failed due to " + status));
        }
        $(document).ready(function () {
            $('body').on('click', '.thmbord', function () {
                if ($(this).val() == 'Back') {
                    $('.fieldset_1').prop('style', "display: block;");
                    $('.fieldset_2').prop('style', "display: none;");
                    $('.fieldset_1').find('.row').prop('style', "");

                    $('.doOne_step2').parent().removeClass('active');
                } else {
                    $('.next').parent().prop('style', "display: block;");
                    $('.fieldset_1').prop('style', "display: none;");
                    $('.fieldset_2').prop('style', "display: block;");
                }
            });
        });
    </script>
@endsection