let formHTMLWhatsApp = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.0/build/css/intlTelInput.css">
<style>
    #enquiryModalWhatsapp .open-btn {
    padding: 15px 35px;
    font-size: 18px;
    border-radius: 50px;
}

#enquiryModalWhatsapp .modal-content {
    border: 0;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .2);
}

#enquiryModalWhatsapp .modal-header {
    background: linear-gradient(135deg, #22c063, #19a955);
    color: #fff;
    padding: 30px;
    border: none;
}

#enquiryModalWhatsapp .modal-title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}

#enquiryModalWhatsapp .btn-close {
    filter: invert(1);
    opacity: 1;
}

#enquiryModalWhatsapp .modal-body {
    padding: 40px;
}

#enquiryModalWhatsapp .subtitle {
    color: #6c757d;
    text-align: center;
    margin-bottom: 30px;
}

#enquiryModalWhatsapp .form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

#enquiryModalWhatsapp .input-group {
    margin-bottom: 22px;
}

#enquiryModalWhatsapp .input-group-text {
    width: 49px;
    justify-content: center;
    background: #22c063;
    color: white;
    border: none;
    font-size: 16px;
}

#enquiryModalWhatsapp .form-control {
    height: 55px;
    border-radius: 0;
    font-size: 16px;
}

#enquiryModalWhatsapp .input-group {
    flex-wrap: wrap;
}

#enquiryModalWhatsapp .input-group .form-control {
    border-left: 0;
}

#enquiryModalWhatsapp .iti {
    width: 100%;
}

#enquiryModalWhatsapp .iti input {
    height: 55px;
    width: 100%;
    padding-left: 95px !important;
}

#enquiryModalWhatsapp .submit-btn {
    height: 55px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(135deg, #22c063, #19a955);
    border: none;
    transition: .3s;
}

#enquiryModalWhatsapp .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(13, 110, 253, .3);
}

#enquiryModalWhatsapp.modal.fade .modal-dialog {
    transform: scale(.8);
    transition: .3s ease;
}

#enquiryModalWhatsapp.modal.show .modal-dialog {
    transform: scale(1);
}

#enquiryModalWhatsapp .invalid-feedback {
    display: none;
}

#enquiryModalWhatsapp .was-validated .form-control:invalid~.invalid-feedback,
#enquiryModalWhatsapp .form-control.is-invalid~.invalid-feedback {
    display: block;
}

#enquiryModalWhatsapp .iti--allow-dropdown {
    width: 87%;
}

#enquiryModalWhatsapp .not-valid-phone {
    border-color: red !important;
    background-image: none !important;
}
.iti__selected-country {
    z-index: 10 !important;
}

@media (max-width: 768px) {
    #enquiryModalWhatsapp .modal-body {
        padding: 25px;
    }

    #enquiryModalWhatsapp .modal-title {
        font-size: 24px;
    }

    #enquiryModalWhatsapp .iti--allow-dropdown {
        width: 85%;
    }
}
</style>
<div class="modal fade" id="enquiryModalWhatsapp" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">
                    <i class="bi bi-envelope-paper-heart-fill"></i>
                    Enquiry Form
                </h2>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="subtitle">Fill your details and we'll get back to you shortly.</p>
                <form method="post" action="https://travelogyoffice.com/enquiry-forms/public/whatsapp-form" id="enquiryForm" novalidate>
                    <input type="hidden" name="redirect" value="https://wa.me/+919910071704?text=Travelogy India" />
                    <input type="hidden" name="currentpage" id="_popup_currentpage_new" />
                    <input type="hidden" name="lastpage" id="_popup_lastpage_new" />
                    <input type="hidden" name="subject" value="WhatsApp Form - Travelogyindia.com" />
                    <input type="hidden" name="department" value="English" />
                    <input type="hidden" name="product_code" value="PI-63" />
                    <input type="hidden" name="tipl_form_id" value="8" />
                    <input type="hidden" name="tipl_website_id" value="1" />
                    <label class="form-label">Name</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-person-fill"></i>
                        </span>
                        <input type="text"
                            id="name" name="name"
                            class="form-control"
                            placeholder="Enter your full name"
                            required>
                        <div class="invalid-feedback">
                            Please enter your name.
                        </div>
                    </div>
                    <label class="form-label">
                        WhatsApp Number
                    </label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-telephone-fill"></i>
                        </span>
                        <input type="tel"
                            id="whatsappphone"
                            onkeyup="validatePhone()"
                            placeholder="99999 99999"
                            class="form-control"
                            required>
                        <input type="hidden" name="tel_no" id="_tel_no" />    
                        <div class="invalid-feedback">
                            Enter a valid phone number.
                        </div>
                    </div>
                    <label class="form-label">
                        Email Address
                    </label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-envelope-fill"></i>
                        </span>
                        <input type="email"
                            id="email" name="email"
                            class="form-control"
                            placeholder="Enter your email"
                            required>
                        <div class="invalid-feedback">
                            Please enter a valid email.
                        </div>
                    </div>
                    <button class="btn btn-primary submit-btn whatsapp-submit-btn w-100">
                        <i class="bi bi-send-fill"></i>
                        Send WhatsApp Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.0/build/js/intlTelInput.min.js"></script>
<script>
const whatsappPhoneInput = document.querySelector("#whatsappphone");
const iti = window.intlTelInput(whatsappPhoneInput, {
    initialCountry: "in",
    separateDialCode: true,
    loadUtils: () =>
        import("https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.0/build/js/utils.js")
});
const whatsappForm = document.getElementById("enquiryForm");
whatsappForm.addEventListener("submit", function (e) {
    e.preventDefault();
    whatsappForm.classList.add("was-validated");
    let valid = whatsappForm.checkValidity();
    if (!iti.isValidNumber()) {
        whatsappPhoneInput.classList.add("is-invalid");
        whatsappPhoneInput.classList.add("not-valid-phone");
        valid = false;
    } else {
        whatsappPhoneInput.classList.remove("is-invalid");
    }
    if (!valid) return;

    const fullNumber = iti.getNumber(); // +919876543210
    const dialCode = "+" + iti.getSelectedCountryData().dialCode;
    const phoneNumber = fullNumber.replace(dialCode, '');

    document.getElementById("_popup_currentpage_new").value = window.location.href;
    document.getElementById("_popup_lastpage_new").value = document.referrer;

    document.getElementById('_tel_no').value = dialCode +'-'+phoneNumber;
    // document.getElementById("enquiryForm").submit();
    const formData = new FormData(whatsappForm);
    const serializedData = new URLSearchParams(formData).toString();
    $(".whatsapp-submit-btn").prop("disabled", true).text("Sending...");
    $.post('https://travelogyoffice.com/enquiry-forms/public/whatsapp-form', serializedData, function(response) {
        $(".whatsapp-submit-btn").prop("disabled", false).text("Send WhatsApp Message");
        if (response.status) {
            window.location.href = response.redirect;
        } else {
            console.error('Error:', response.data);
            // Handle error
        }
        // Handle success (e.g., show a thank you message)
    }).fail(function(xhr, status, error) {
        $(".whatsapp-submit-btn").prop("disabled", false).text("Send WhatsApp Message");
        console.error('Error:', error);
        // Handle error
    });
});
function validatePhone() {
    if (!iti.isValidNumber()) {
        whatsappPhoneInput.classList.add("not-valid-phone");
        valid = false;
    } else {
        whatsappPhoneInput.classList.remove("not-valid-phone");
        valid = true;
    }
}
</script>`;
document.write(formHTMLWhatsApp);