<meta name="csrf-token" content="{{ csrf_token() }}">

<form id="contact-form1" class="contact-form-items">
    @csrf

    <div class="row g-4">

        <div class="col-lg-12">
            <div class="form-clt">
                <input type="text" name="name" id="name" placeholder="Your Name">
                <small class="text-danger" id="nameError"></small>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="form-clt">
                <input type="email" name="email" id="email" placeholder="Email">
                <small class="text-danger" id="emailError"></small>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="form-clt">
                <input type="tel" name="phone" id="phone" placeholder="Phone Number">
                <small class="text-danger" id="phoneError"></small>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="form-clt">
                <select name="service" id="service" class="single-select w-100">
                    <option value="">Select Service</option>
                    <option>SEO Services</option>
                    <option>Local SEO</option>
                    <option>Content Marketing</option>
                    <option>Social Media Marketing</option>
                    <option>Ecommerce SEO</option>
                    <option>PPC Services</option>
                    <option>Web Development</option>
                    <option>Web Designing</option>
                </select>
                <small class="text-danger" id="serviceError"></small>
            </div>
        </div>

        <!-- OTP SECTION -->
        <div class="col-lg-12" id="otpSection" style="display:none;">
            <div class="form-clt">
                <input type="text" name="otp" id="otp" placeholder="Enter OTP">
                <small class="text-danger" id="otpError"></small>
            </div>
        </div>

        <div class="col-lg-12">
            <button type="submit" class="theme-btn" id="submitBtn">
                <span>Submit Now <i class="icon-arrow-right"></i></span>
            </button>
        </div>

    </div>
</form>


 <script>
document.addEventListener('DOMContentLoaded', function () {

    const form = document.getElementById('contact-form1');
    const submitBtn = document.getElementById('submitBtn');
    const emailInput = document.getElementById('email');
    const otpInput = document.getElementById('otp');
    const otpSection = document.getElementById('otpSection');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    let otpVerified = false;
    let otpSent = false;

    // ================= SEND OTP =================
    emailInput.addEventListener('blur', function () {

        const email = emailInput.value.trim();
        if (!email || otpSent) return;

        document.getElementById('emailError').textContent = 'Sending OTP...';
        document.getElementById('emailError').style.color = '#666';

        fetch('{{ route("send.otp.contact") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ email })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                otpSent = true;
                otpSection.style.display = 'block';
                document.getElementById('emailError').textContent = 'OTP sent successfully!';
                document.getElementById('emailError').style.color = 'green';
            } else {
                document.getElementById('emailError').textContent = data.message;
                document.getElementById('emailError').style.color = 'red';
            }
        })
        .catch(() => {
            document.getElementById('emailError').textContent = 'OTP sending failed';
            document.getElementById('emailError').style.color = 'red';
        });
    });

    // ================= VERIFY OTP =================
    otpInput.addEventListener('blur', function () {

        const otp = otpInput.value.trim();
        const email = emailInput.value.trim();
        if (!otp) return;

        document.getElementById('otpError').textContent = 'Verifying...';
        document.getElementById('otpError').style.color = '#666';

        fetch('{{ route("verify.otp") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ email, otp })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                otpVerified = true;
                document.getElementById('otpError').textContent = 'OTP verified successfully!';
                document.getElementById('otpError').style.color = 'green';
                checkForm();
            } else {
                otpVerified = false;
                document.getElementById('otpError').textContent = data.message;
                document.getElementById('otpError').style.color = 'red';
            }
        });
    });

    // ================= CHECK FORM =================
    function checkForm() {

        const inputs = Array.from(form.querySelectorAll('input, select'))
            .filter(input => !(input.id === 'otp' && otpSection.style.display === 'none'));

        const allFilled = inputs.every(input => input.value.trim() !== '');

        submitBtn.disabled = !(allFilled && otpVerified);
    }

    form.addEventListener('input', checkForm);

    // ================= FORM SUBMIT =================
    form.addEventListener('submit', function (e) {
        e.preventDefault();

        //submitBtn.disabled = true;
        submitBtn.innerHTML = 'Submitting...';

        document.querySelectorAll('small.text-danger').forEach(el => el.textContent = '');

        const formData = new FormData(form);

        fetch('{{ route("contact.store") }}', {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {

            submitBtn.innerHTML = 'Submit Now';

            if (data.success) {
                form.reset();
                otpVerified = false;
                otpSent = false;
                otpSection.style.display = 'none';
               // submitBtn.disabled = true;

                alert('🎉 Form submitted successfully!');  
            } else {
               // submitBtn.disabled = false;
                Object.keys(data.errors || {}).forEach(field => {
                    document.getElementById(field + 'Error').textContent = data.errors[field][0];
                });
            }
        })
        .catch(() => {
            submitBtn.innerHTML = 'Submit Now';
           // submitBtn.disabled = false;
            alert('Something went wrong!');
        });
    });

});
</script>