<div class="rental-modal-wrap">
    <!-- Car Booking Modal -->
    <div class="modal fade" id="carBookingModal" tabindex="-1" aria-labelledby="carBookingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content booking-modal">

                <!-- Header -->
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold d-flex align-items-center" id="carBookingModalLabel">
                        <i class="bi bi-car-front-fill text-dark me-2 fs-4"></i>
                        Car Booking Form
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Body -->
                <div class="modal-body">



                    <form id="car-booking-form" class="contact-form" novalidate>
                        <div class="row g-3">

                            <div class="col-md-12">
                                <label class="form-label"><i class="bi bi-car-front"></i> Select Car</label>
                                <select name="car" id="car-name" class="form-control">
                                    <option value="">Choose your car</option>
                                    <option>Sedan</option>
                                    <option>Maruthi Ciaz</option>
                                    <option>Eritiga</option>
                                    <option>SUV</option>
                                    <option>Tempo Traveller (Non AC)</option>
                                    <option>Tempo Traveller (AC)</option>
                                    <option>Innova Crysta</option>
                                    <option>Etios</option>
                                    <option>Hycross</option>
                                    <option>Coach</option>
                                    <option>Urbania 12+1</option>
                                </select>
                                <small class="text-danger error-message" id="car-error"></small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label"><i class="bi bi-person-fill"></i> Full Name</label>
                                <input type="text" name="name" id="name" class="form-control">
                                <small class="text-danger error-message" id="name-error"></small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label"><i class="bi bi-telephone-fill"></i> Phone</label>
                                <input type="tel" name="phone" id="phone" class="form-control">
                                <small class="text-danger error-message" id="phone-error"></small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label"><i class="bi bi-calendar-date"></i> Trip Date</label>
                                <input type="date" name="trip_date" id="trip-date" class="form-control">
                                <small class="text-danger error-message" id="trip-date-error"></small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label"><i class="bi bi-clock-history"></i> Days</label>
                                <input type="number" name="days" id="days" min="1" class="form-control">
                                <small class="text-danger error-message" id="days-error"></small>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label"><i class="bi bi-chat-dots-fill"></i> Message</label>
                                <textarea name="message" id="message" rows="3" class="form-control"></textarea>
                                <small class="text-danger error-message" id="message-error"></small>
                            </div>

                            <div class="col-12 text-center mt-3">
                                <button type="submit" class="liquid-btn">Confirm Booking</button>
                            </div>

                        </div>
                    </form>






                </div>

            </div>
        </div>
    </div>
</div>



<!-- in form auto select car name -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modalEl = document.getElementById('carBookingModal');
        const carSelect = document.getElementById('car-name');


        document.querySelectorAll('.book-now-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const carName = this.getAttribute('data-car');
                carSelect.value = carName;
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            });
        });
    });
</script>


<!-- form validation -->
<script>
    document.getElementById('car-booking-form').addEventListener('submit', function(e) {
        e.preventDefault();

        // Clear all previous errors
        document.querySelectorAll('.error-message').forEach(el => el.textContent = '');

        let isValid = true;

        const car = document.getElementById('car-name').value;
        const name = document.getElementById('name').value.trim();
        const phone = document.getElementById('phone').value.trim();
        const tripDate = document.getElementById('trip-date').value;
        const days = document.getElementById('days').value.trim();
        const message = document.getElementById('message').value.trim();

        // Validation
        if (car === '') {
            document.getElementById('car-error').textContent = 'Please select a car';
            isValid = false;
        }

        if (name.length < 3) {
            document.getElementById('name-error').textContent = 'Please enter a valid name';
            isValid = false;
        }

        if (!/^\d{10,15}$/.test(phone)) {
            document.getElementById('phone-error').textContent = 'Enter a valid phone number';
            isValid = false;
        }

        if (tripDate === '') {
            document.getElementById('trip-date-error').textContent = 'Select trip date';
            isValid = false;
        }

        if (days === '' || parseInt(days) < 1) {
            document.getElementById('days-error').textContent = 'Enter valid number of days';
            isValid = false;
        }

        if (message.length < 10) {
            document.getElementById('message-error').textContent = 'Message should be at least 10 characters';
            isValid = false;
        }

        if (!isValid) return;

        // Prepare FormData
        const formData = new FormData();
        formData.append('car', car);
        formData.append('name', name);
        formData.append('phone', phone);
        formData.append('trip_date', tripDate);
        formData.append('days', days);
        formData.append('message', message);

        // Submit via fetch
        fetch('car-mail.php', {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                Toastify({
                    text: data.message || 'Booking submitted successfully!',
                    duration: 3000,
                    backgroundColor: data.status === 'success' ? 'green' : 'red'
                }).showToast();

                if (data.status === 'success') document.getElementById('car-booking-form').reset();
            })
            .catch(() => {
                Toastify({
                    text: 'Something went wrong. Please try again!',
                    duration: 3000,
                    backgroundColor: 'red'
                }).showToast();
            });
    });
</script>