@extends('front.layouts.app')

@section('content')

<style>
    /* btn css */

.themeBtn2 {
    background: var(--primary);
    font-size: 1.125rem;
  
  color: var(--white) !important;
    text-transform: capitalize;
    font-weight: 600;
    display: inline-block;
    padding: 0.59375rem 1.6875rem;
    border-radius: 38.5px;
    line-height: normal;
    overflow: hidden;
}

.themeBtn2.borderBtn {
    background: transparent;
    border: 1px solid #fff;
    padding: 1.04em 2em;
}

</style>
<section class="main-slider main-slider--inner p-0" id="mainSlider">
    <div class="swiper-container homeSlider">
        <div class="swiper-slide">
            <div class="slide-inner bg-image" data-background="{{ asset('front_ui/images/inner-bann.png') }}">
                <div class="slideOne text-center">
                    <div class="container">
                        <h1>Step</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="step-form">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
                    <form id="msform">
                        <!-- progressbar -->
                        <ul id="progressbar">
                            <li class="active" id="account"><strong>01</strong></li>
                            <li id="personal"><strong>02</strong></li>
                            <li id="confirm"><strong>03</strong></li>
                            
                        </ul>
                      
                        <fieldset class="step-1">

                            <h2 class="mainHead mb-4">Get A Quote</h2>
                            <div class="row justify-content-center">
                                <div class="col-md-6">
                                    <div class="booking-card" id="user-details">
                                        <input type="text" id="name"  placeholder="Name">
<input type="text" id="phone" placeholder="Phone Number" maxlength="12">
                                        <input type="text"  id="email" placeholder="Email address">
                                    </div>
                                </div>
                            </div>
                            <input type="button" name="next" class="next action-button" value="Next" id="next-btn">

                        </fieldset>
                        <fieldset class="book_airport_2">
                            <div class="row justify-content-center">
                                <div class="col-md-12">
                                    <div class="row no-gutters">
                                        <div class="col-md-7">
                                            <div class="way-booking">
                                                <div class="book-taxi">
                                                    <h2>Book your airport texi</h2>
                                                    <p>easy airport transfers to and from your accommodation</p>
                                                </div>
                                                <div class="way-form">
                                                    <div class="way-tb">
                                                        <span>
                                                            <input type="radio" id="tab1" name="tab" checked>
                                                            <label for="tab1">One-way</label>
                                                        </span>
                                                        <span>
                                                            <input type="radio" id="tab2" name="tab">
                                                            <label for="tab2">Return</label>
                                                        </span>
                                                    </div>
                                            
                                                    <!-- Start of form -->
                                                    <article class="form-strt" id="travel-details">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/locimg.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" id="pick-location" placeholder="Enter pick-up location">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/locimg2.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" id="destination-location" placeholder="Enter destination">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-5" id="one-way-date-container">
                                                                <span>
                                                                    <input type="datetime-local" id="one-way-date" placeholder="Enter One-way date">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-5" id="return-date-container" style="display:none;">
                                                                <span>
                                                                    <input type="datetime-local" id="return-date" placeholder="Enter Return date">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/usericon1.png') }}" class="img-fluid" alt="img">
                                                                    <select id="no-of-seats">
                                                                        <option>1</option>
                                                                        <option>2</option>
                                                                        <!-- More options -->
                                                                    </select>
                                                                </span>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/bag.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" id="bags" placeholder="How many bags">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <button class="themeBtn" id="book-now-btn">Book Now</button>
                                                            </div>
                                                        </div>
                                                    </article>
                                                

                                                    {{-- <article class="form-strt">
                                                        <div class="row"> --}}
                                                            {{-- <div class="col-md-6">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/locimg.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" placeholder="enter pick-up location">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/locimg2.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" placeholder="enter destination">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <span>
                                                                    <!-- <img src="images/calendricon.png" class="img-fluid" alt="img"> -->
                                                                    <input type="datetime-local" placeholder="enter destination">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <span>
                                                                    <!-- <img src="images/clndr1.png" class="img-fluid" alt="img"> -->
                                                                    <input type="datetime-local" placeholder="add a return">
                                                                </span>
                                                            </div> --}}

                                                            {{-- <div class="col-md-6">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/locimg.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" id="pick-location" placeholder="Enter pick-up location">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/locimg2.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" id="destination-location" placeholder="Enter destination">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-5" id="one-way-date-container">
                                                                <span>
                                                                    <input type="datetime-local" id="one-way-date" placeholder="Enter One-way date">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-5" id="return-date-container" style="display:none;">
                                                                <span>
                                                                    <input type="datetime-local" id="return-date" placeholder="Enter Return date">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-3">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/usericon1.png') }}" class="img-fluid" alt="img">
                                                                    <select>
                                                                        <option>1</option>
                                                                        <option>2</option>
                                                                    </select>
                                                                </span>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <span>
                                                                    <img src="{{ asset('front_ui/images/bag.png') }}" class="img-fluid" alt="img">
                                                                    <input type="text" placeholder="how many bags">
                                                                </span>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <button class="themeBtn">book now</button>
                                                            </div>
                                                        </div>
                                                    </article> --}}

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <figure class="book-img">
                                                <img src="{{ asset('front_ui/images/2 (1).webp') }}" class="img-fluid " alt="img" style="height: 411px;">
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- <input type="button" name="next" class="next action-button" value="Submit" /> --}}
                            <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                        </fieldset>


                        <fieldset id="finish" style="display: none;">
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-7">
                                        <!--<h2 class="fs-title">Finish:</h2>-->
                                    </div>
                                    <div class="col-5">
                                        <!-- <h2 class="steps">Step 4 - 4</h2> -->
                                    </div>
                                </div> <br><br>
                                <h2 class="purple-text text-center"><strong>SUCCESS !</strong></h2> <br>
                                <div class="row justify-content-center">
                                    <div class="col-3"> <img src="{{ asset('front_ui/images/Group 1321315009.png') }}" class="fit-image"> </div>
                                </div> <br><br>
                                <div class="row justify-content-center">
                                    <div class="col-7 text-center">
                                        <h5 class="purple-text text-center">You Have Successfully Signed Up</h5>
                                        <button class="themeBtn2" id="backHomeBtn">Back Home</button>

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

@endsection

@section('script')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAlsWW4P_jWEKbCBfW64LRQq_ZgPX8zA8&libraries=places&callback=initMap" async defer></script>


<script>

let pickLocationInput, destinationLocationInput;
    let pickLocationAutocomplete, destinationLocationAutocomplete;

    function initMap() {
        // Initialize the input fields for autocomplete
        pickLocationInput = document.getElementById('pick-location');
        destinationLocationInput = document.getElementById('destination-location');

        // Create new Autocomplete objects
        pickLocationAutocomplete = new google.maps.places.Autocomplete(pickLocationInput);
        destinationLocationAutocomplete = new google.maps.places.Autocomplete(destinationLocationInput);

        // Set options for the autocomplete (optional)
        const options = {
            types: ['geocode'], // Limits results to addresses
            componentRestrictions: { country: 'US' }, // Optionally restrict results by country
        };

        // Apply the options to the Autocomplete
        pickLocationAutocomplete.setOptions(options);
        destinationLocationAutocomplete.setOptions(options);

        // Add listeners to handle selection of places
        pickLocationAutocomplete.addListener('place_changed', function () {
            const place = pickLocationAutocomplete.getPlace();
            if (!place.geometry) {
                return;
            }
            // Handle pick-up location selection (e.g., display on map, save coordinates, etc.)
            console.log("Pick-up location selected:", place.formatted_address);
        });

        destinationLocationAutocomplete.addListener('place_changed', function () {
            const place = destinationLocationAutocomplete.getPlace();
            if (!place.geometry) {
                return;
            }
            // Handle destination location selection (e.g., display on map, save coordinates, etc.)
            console.log("Destination location selected:", place.formatted_address);
        });
    }



 // Redirect to the home page when the "Back Home" button is clicked
    document.getElementById("backHomeBtn").addEventListener("click", function() {
        window.location.href = "/"; // This redirects to the home page
    });
    
    
document.getElementById("next-btn").addEventListener("click", function () {
    const name = document.getElementById("name").value.trim();
    const phone = document.getElementById("phone").value.trim().replace(/\D/g, ''); // Remove dashes for validation
    const email = document.getElementById("email").value.trim();
    
    const errorMessages = document.querySelectorAll('.error-message');
    errorMessages.forEach(msg => msg.remove());

    let isValid = true;

    // Validate fields
    if (name === "") {
        showError("name", "Name is required");
        isValid = false;
    }

    if (phone === "") {
        showError("phone", "Phone number is required");
        isValid = false;
    } else if (phone.length !== 10) {
        showError("phone", "Phone number must be exactly 10 digits");
        isValid = false;
    }

    if (email === "") {
        showError("email", "Email is required");
        isValid = false;
    }

    // Send AJAX request
    const data = {
        name: name,
        phone: phone,
        email: email
    };

    $.ajax({
        // url: '/send-booking-email', // Backend route to handle email sending
        url: '{{ route('front.sendemail-booking') }}',
        type: 'POST',
        data: data,
        headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success) {
                // toastr.success('Booking details sent to admin!');
            } else {
                // toastr.error('Failed to send booking details.');
            }
        },
        error: function(xhr, status, error) {
            // toastr.error('Something went wrong. Please try again.');
        }
    });
    
    const mainHead = document.querySelector(".step-1");
    const bookAirport = document.querySelector(".book_airport_2");

    if (!isValid) {
        mainHead.style.display = "block";
    } else {
        mainHead.style.display = "none";
        bookAirport.style.display = "block";
        bookAirport.style.opacity = "1";
        bookAirport.style.position = "relative";
    }
});

function showError(inputId, message) {
    const input = document.getElementById(inputId);
    const error = document.createElement("div");
    error.className = "error-message";
    error.style.color = "red";
    error.style.fontSize = "12px";
    error.innerText = message;
    input.parentNode.insertBefore(error, input.nextSibling);
}

document.getElementById("phone").addEventListener("input", function (e) {
    let input = e.target.value.replace(/\D/g, ''); // Remove non-digits
    input = input.slice(0, 10); // Limit to 10 digits

    let formatted = '';
    if (input.length > 0) {
        formatted = input.slice(0, 3);
    }
    if (input.length >= 4) {
        formatted += '-' + input.slice(3, 6);
    }
    if (input.length >= 7) {
        formatted += '-' + input.slice(6, 10);
    }

    e.target.value = formatted;
});

//  function checkFields() {
//     const name = document.getElementById("name").value.trim();
//     const phone = document.getElementById("phone").value.trim();
//     const email = document.getElementById("email").value.trim();

//     const previousBtn = document.querySelector('.previous');

//     if (name !== "" && phone !== "" && email !== "") {
//         previousBtn.style.display = "none"; // Hide the button
//     } else {
//         previousBtn.style.display = "inline-block"; // Show the button again if any field is empty
//     }
// }

// // Add event listeners on input fields
// document.getElementById("name").addEventListener("input", checkFields);
// document.getElementById("phone").addEventListener("input", checkFields);
// document.getElementById("email").addEventListener("input", checkFields);


// $(".previous").click(function () {
//     // Validate required fields before proceeding
//     const nameField = document.querySelector("#name");
//     const emailField = document.querySelector("#email");
//     const phoneField = document.getElementById("phone");

//     if (
//         nameField.value.trim() !== "" &&
//         emailField.value.trim() !== "" &&
//         phoneField.value.trim() !== ""
//     ) {
//         // Optional: alert('All fields are filled');

//         const mainHead = document.querySelector(".mainHead");
//         const bookAirport = document.querySelector(".book_airport_2");

//         // Toggle visibility for optional UI sections
//         if (mainHead) {
//             mainHead.style.display = "none";
//             mainHead.style.opacity = "0";
//         }
//         if (bookAirport) {
//             bookAirport.style.display = "block";
//             bookAirport.style.opacity = "1";
//             bookAirport.style.position = "relative";
//         }

//         // Proceed with jQuery form step animation
//         let current_fs = $(this).parent();
//         let previous_fs = $(this).parent().prev();

//         // Remove class active from progressbar
//         $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

//         // Show previous fieldset
//         previous_fs.show();

//         // Animate transition
//         current_fs.animate({ opacity: 0 }, {
//             step: function (now) {
//                 let opacity = 1 - now;
//                 current_fs.css({
//                     'display': 'none',
//                     'position': 'relative'
//                 });
//                 previous_fs.css({ 'opacity': opacity });
//             },
//             duration: 500
//         });

//         // Update progress bar index (assuming current is declared globally)
//         setProgressBar(--current);
//     } else {
//         alert("Please fill in all required fields before going back.");
//     }
// });



// $(document).ready(function () {
//  // Toggle return date field based on selected radio button
//  $('input[name="tab"]').change(function () {
//         if ($('#tab2').is(':checked')) {
//             // Show both one-way and return date when "Return" is selected
//             $('#one-way-date-container').show();
//             $('#return-date-container').show();
//         } else {
//             // Show only one-way date when "One-way" is selected
//             $('#one-way-date-container').show();
//             $('#return-date-container').hide();
//         }
//     });

//     // Handle "Book Now" button click to submit data using AJAX
//     $('#book-now-btn').click(function (event) {
//         event.preventDefault(); // Prevent the form from reloading the page

//         var data = {
//             name: $('#name').val(),
//             phone: $('#phone').val(),
//             email: $('#email').val(),
//             pick_location: $('#pick-location').val(),
//             destination_location: $('#destination-location').val(),
//             one_way_date: $('#one-way-date').val(),
//             return_date: $('#return-date').val(),
//             no_of_seats: $('#no-of-seats').val(),
//             bags: $('#bags').val(),
//             travel_type: $('input[name="tab"]:checked').val(), // "one-way" or "return"
//         };

//         console.log(data);

//         $.ajax({
//             url: '{{ route('front.submit-booking') }}',  // The URL for your request
//             type: 'POST',
//             data: data,
//             headers: {
//                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  // Add CSRF token to header
//             },
//             success: function (response) {
//                 alert(response)
//                 if (response.success) {
//                     // Show success notification using Toastr
//                     toastr.success(response.message);  // Success toaster
//                 } else {
//                     toastr.error('Booking failed, please try again.');  // Error toaster
//                 }
//             },
//             error: function (xhr, status, error) {
//                 toastr.error('Something went wrong. Please try again later.');  // Error toaster
//             }
//         });
//     });

// });

$(document).ready(function () {
    // Toggle return date field based on selected radio button
    $('input[name="tab"]').change(function () {
        if ($('#tab2').is(':checked')) {
            // Show the entire form & return date field
            $('#travel-details').show();
            $('#one-way-date-container').show();
            $('#return-date-container').show();
        } else {
            // Show only one-way date when "One-way" is selected
            $('#travel-details').show();
            $('#one-way-date-container').show();
            $('#return-date-container').hide();
        }
    });

    // Trigger change event to apply correct visibility on page load
    $('input[name="tab"]:checked').trigger('change');

    // Handle "Book Now" button click to submit data using AJAX
    // $('#book-now-btn').click(function (event) {
    //     event.preventDefault(); // Prevent form reload

    //     var data = {
    //         name: $('#name').val(),
    //         phone: $('#phone').val(),
    //         email: $('#email').val(),
    //         pick_location: $('#pick-location').val(),
    //         destination_location: $('#destination-location').val(),
    //         one_way_date: $('#one-way-date').val(),
    //         return_date: $('#tab2').is(':checked') ? $('#return-date').val() : null, // Only include return date if "Return" is selected
    //         no_of_seats: $('#no-of-seats').val(),
    //         bags: $('#bags').val(),
    //         travel_type: $('input[name="tab"]:checked').val(), // "one-way" or "return"
    //     };

    //     console.log("Submitting Data:", data);

    //     $.ajax({
    //         url: '{{ route('front.submit-booking') }}',  // The URL for your request
    //         type: 'POST',
    //         data: data,
    //         dataType: 'json', // Ensure response is JSON
    //         headers: {
    //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //         },
    //         success: function (response) {
    //             console.log("Response:", response);
    //             if (response.success) {
    //                 toastr.success(response.message);
    //             } else {
    //                 toastr.error('Booking failed, please try again.');
    //             }
    //         },
    //         error: function (xhr, status, error) {
    //             console.log("Error:", xhr.responseText);
    //             toastr.error('Something went wrong. Please try again later.');
    //         }
    //     });
    // });
   $('#book-now-btn').click(function (event) {
        event.preventDefault(); // Prevent form reload

        // Remove old errors
        const errorMessages = document.querySelectorAll('.error-message');
        errorMessages.forEach(msg => msg.remove());

        const travelType = $('input[name="tab"]:checked').attr('id'); // tab1 or tab2

        const pickLocation = $('#pick-location').val().trim();
        const destinationLocation = $('#destination-location').val().trim();
        const oneWayDate = $('#one-way-date').val().trim();
        const returnDate = $('#return-date').val().trim();

        let hasError = false;

        if (!pickLocation) {
            showError("pick-location", "Pick-up location is required.");
            hasError = true;
        }

        if (!destinationLocation) {
            showError("destination-location", "Destination is required.");
            hasError = true;
        }

        if (!oneWayDate) {
            showError("one-way-date", "One-way date is required.");
            hasError = true;
        }

        if (travelType === 'tab2' && !returnDate) {
            showError("return-date", "Return date is required.");
            hasError = true;
        }

        if (hasError) {
            // toastr.error("Please fill the required fields.");
            return; // Stop submission
        }

        // Proceed to send data
        var data = {
            name: $('#name').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            pick_location: pickLocation,
            destination_location: destinationLocation,
            one_way_date: oneWayDate,
            return_date: travelType === 'tab2' ? returnDate : null,
            no_of_seats: $('#no-of-seats').val(),
            bags: $('#bags').val(),
            travel_type: travelType === 'tab1' ? 'one-way' : 'return',
        };

        console.log("Submitting Data:", data);

        $.ajax({
            url: '{{ route('front.submit-booking') }}',
            type: 'POST',
            data: data,
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                // if (response.success) {
                //     toastr.success(response.message);
                // } else {
                //     toastr.error('Booking failed, please try again.');
                // }
                if (response.success) {
                    toastr.success(response.message);
            
                    // Hide current form steps (if any)
                    $('.step-1, .book_airport_2, .step-3').hide();
            
                    // Show finish step
                    $('#finish').show();
                } else {
                    toastr.error('Booking failed, please try again.');
                 }   
            },
            error: function (xhr) {
                console.log("Error:", xhr.responseText);
                toastr.error('Something went wrong. Please try again later.');
            }
        });
    });

});
</script>
@endsection