<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">
                        <div class="row g-3">

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

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

                            <!-- Phone -->
                            <div class="col-md-6">
                                <div class="input-box">
                                    <label for="phone"><i class="bi bi-telephone-fill"></i> Phone Number</label>
                                    <input type="tel" id="phone" class="form-control" placeholder="Enter your phone number">
                                    <small id="phone-error" class="text-danger error-message"></small>
                                </div>
                            </div>

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

                            <!-- Number of Days -->
                            <div class="col-md-6">
                                <div class="input-box">
                                    <label for="days"><i class="bi bi-clock-history"></i> Number of Days</label>
                                    <input type="number" id="days" class="form-control" placeholder="e.g. 3" min="1">
                                    <small id="days-error" class="text-danger error-message"></small>
                                </div>
                            </div>

                            <!-- Message -->
                            <div class="col-md-12">
                                <div class="input-box">
                                    <label for="message"><i class="bi bi-chat-dots-fill"></i> Additional Message</label>
                                    <textarea id="message" class="form-control" rows="3" placeholder="Any special requests?"></textarea>
                                    <small id="message-error" class="text-danger error-message"></small>
                                </div>
                            </div>

                            <!-- Submit -->
                            <div class="col-12 text-center mt-3">
                                <button type="submit" class="liquid-btn">
                                    Confirm Booking <i class="bi bi-chevron-double-right"></i>
                                </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>

<!-- rental car form validaton -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('car-booking-form');
        const modalEl = document.getElementById('carBookingModal');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            document.querySelectorAll('.error-message').forEach(el => el.textContent = '');
            let isValid = true;

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

            if (car === '') {
                document.getElementById('car-error').textContent = 'Please select a car';
                isValid = false;
            }
            if (name === '') {
                document.getElementById('name-error').textContent = 'Enter your name';
                isValid = false;
            }
            if (!/^[0-9]{10,15}$/.test(phone)) {
                document.getElementById('phone-error').textContent = 'Enter valid phone number';
                isValid = false;
            }
            if (date === '') {
                document.getElementById('trip-date-error').textContent = 'Select trip date';
                isValid = false;
            }
            if (days === '' || days <= 0) {
                document.getElementById('days-error').textContent = 'Enter valid number of days';
                isValid = false;
            }

            if (!isValid) return;

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

            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') {
                        form.reset();
                        bootstrap.Modal.getInstance(modalEl).hide();
                    }
                })
                .catch(() => {
                    Toastify({
                        text: 'Something went wrong. Please try again!',
                        duration: 3000,
                        backgroundColor: 'red'
                    }).showToast();
                });
        });
    });
</script>