/*
==========================================================
GLOBAL LEAD MODAL
==========================================================
*/

(() => {

    'use strict';

    /*
    ==========================================================
    CONFIGURATION
    ==========================================================
    */

    const WHATSAPP_NUMBER = '254748352165'; // Change this

    /*
    ==========================================================
    ELEMENTS
    ==========================================================
    */

    const modal = document.getElementById('leadModal');

    if (!modal) return;

    const form = document.getElementById('leadForm');

    const overlay = modal;

    const closeBtn = modal.querySelector('.lead-modal-close');

    const hiddenService = document.getElementById('leadService');

    const displayService = document.getElementById('leadServiceDisplay');

    /*
    ==========================================================
    OPEN MODAL
    ==========================================================
    */

    /*

	function openModal(service = '') {

        hiddenService.value = service;

        displayService.value = service;

        overlay.classList.add('show');

        document.body.style.overflow = 'hidden';

        const firstInput = document.getElementById('leadName');

        if (firstInput) {

            setTimeout(() => {

                firstInput.focus();

            }, 200);

        }

    }

	*/


	function openModal(service = '') {

    if (hiddenService) {
        hiddenService.value = service;
    }

    if (displayService) {
        displayService.value = service;
    }

    overlay.classList.add('show');

    document.body.style.overflow = 'hidden';

    const firstInput = document.getElementById('leadName');

    if (firstInput) {

        setTimeout(() => firstInput.focus(), 200);

    }

}


    /*
    ==========================================================
    CLOSE MODAL
    ==========================================================
    */

    function closeModal() {

        overlay.classList.remove('show');

        document.body.style.overflow = '';

    }

    /*
    ==========================================================
    OPEN BUTTONS
    ==========================================================
    */

    document.addEventListener('click', function (e) {

        const trigger = e.target.closest('.open-lead-modal');

        if (!trigger) return;

        e.preventDefault();

        const service = trigger.dataset.service || '';

        openModal(service);

    });

    /*
    ==========================================================
    CLOSE BUTTON
    ==========================================================
    */

    closeBtn.addEventListener('click', closeModal);

    /*
    ==========================================================
    CLICK OUTSIDE
    ==========================================================
    */

    overlay.addEventListener('click', function (e) {

        if (e.target === overlay) {

            closeModal();

        }

    });

    /*
    ==========================================================
    ESC KEY
    ==========================================================
    */

    document.addEventListener('keydown', function (e) {

        if (e.key === 'Escape') {

            closeModal();

        }

    });

    /*
    ==========================================================
    VALIDATION
    ==========================================================
    */

    function value(id) {

        return document.getElementById(id).value.trim();

    }

   
   
   /*
==========================================================
FORM SUBMIT
==========================================================
*/

form.addEventListener('submit', async function (e) {

    e.preventDefault();

    const submitBtn = form.querySelector('.lead-submit');

    submitBtn.disabled = true;

    submitBtn.innerHTML =
        '<i class="fa-solid fa-spinner fa-spin"></i> Sending...';

    const data = new FormData();

    data.append('name', value('leadName'));

    data.append('email', value('leadEmail'));

    data.append('phone', value('leadPhone'));

   // data.append('business', value('leadBusiness'));

   // data.append('service', value('leadServiceDisplay'));

   // data.append('budget', value('leadBudget'));

   // data.append('timeline', value('leadTimeline'));

  //  data.append('message', value('leadMessage'));

    data.append('page', window.location.href);

    try {

        const response = await fetch('/api/website/lead', {

            method: 'POST',

            body: data,

            headers: {

                'X-Requested-With': 'XMLHttpRequest'

            }

        });

        const result = await response.json();

        if (result.success) {

            alert(
                'Thank you! Your enquiry has been sent successfully. We will contact you shortly.'
            );

           /*

		 form.reset();

            hiddenService.value = '';

            displayService.value = '';

            closeModal();

	*/


	
form.reset();

if (hiddenService) {
    hiddenService.value = '';
}

if (displayService) {
    displayService.value = '';
}

closeModal();




        } else {

            alert(result.message || 'Unable to submit your enquiry.');

        }

    } catch (error) {

        console.error(error);

        alert(
            'A server error occurred while sending your enquiry.'
        );

    }

    submitBtn.disabled = false;

    submitBtn.innerHTML =
        '<i class="fa-solid fa-paper-plane"></i> Request a Call Back';

});
   

})();