<form id="contact-form1" class="contact-form-items" method="POST">
     <?php echo csrf_field(); ?>
     <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="phone" name="phone" id="phone" placeholder="Phone phone">
                 <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>

         <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" disabled>
                 <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 emailInput = document.getElementById('email');
         const submitBtn = document.getElementById('submitBtn');
         const otpSection = document.getElementById('otpSection');
         let otpVerified = false;
         const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
         emailInput.addEventListener('blur', function() {
             const email = emailInput.value.trim();
             if (email === '') return;
             document.getElementById('emailError').textContent = 'Sending OTP...';
             document.getElementById('emailError').style.color = '#666';
             fetch('<?php echo e(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) {
                         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 =
                         'Failed to send OTP. Try again.';
                     document.getElementById('emailError').style.color = 'red';
                 });
         });
         form.addEventListener('input', function() {
             const allFilled = Array.from(form.querySelectorAll('input, select')).every(input => input
                 .value.trim() !== '');
             submitBtn.disabled = !(allFilled && otpVerified);
         });
         document.getElementById('otp').addEventListener('blur', function() {
             const otp = this.value.trim();
             const email = emailInput.value.trim();
             if (otp === '') return;
             document.getElementById('otpError').textContent = 'Verifying...';
             document.getElementById('otpError').style.color = '#666';
             fetch('<?php echo e(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';
                         form.dispatchEvent(new Event('input'));
                     } else {
                         otpVerified = false;
                         document.getElementById('otpError').textContent = data.message;
                         document.getElementById('otpError').style.color = 'red';
                     }
                 });
         });
         form.addEventListener('submit', function(e) {
             e.preventDefault();
             const originalText = submitBtn.innerHTML;
             submitBtn.innerHTML = '<span>Submitting... <i class="fa fa-spinner fa-spin"></i></span>';
             submitBtn.disabled = true;
             document.querySelectorAll('small.text-danger').forEach(e => {
                 e.textContent = '';
             });
             const formData = new FormData(form);
             fetch('<?php echo e(route('contact.store')); ?>', {
                     method: 'POST',
                     headers: {
                         'X-Requested-With': 'XMLHttpRequest'
                     },
                     body: formData
                 })
                 .then(res => res.json())
                 .then(data => {
                     submitBtn.innerHTML = originalText;
                     submitBtn.disabled = false;
                     if (data.success) {
                         form.reset();
                         otpVerified = false;
                         otpSection.style.display = 'none';
                         const successMsg = document.createElement('small');
                         successMsg.textContent = '🎉 Form submitted successfully!';
                         successMsg.style.color = 'green';
                         successMsg.style.display = 'block';
                         successMsg.style.marginTop = '8px';
                         submitBtn.parentNode.appendChild(successMsg);
                         setTimeout(() => successMsg.remove(), 5000);
                     } else {
                         Object.keys(data.errors || {}).forEach(field => {
                             document.getElementById(field + 'Error').textContent = data
                                 .errors[field][0];
                             document.getElementById(field + 'Error').style.color = 'red';
                         });
                     }
                 })
                 .catch(() => {
                     submitBtn.innerHTML = originalText;
                     submitBtn.disabled = false;
                     alert('Something went wrong. Please try again.');
                 });
         });
     });
 </script>
<?php /**PATH C:\xampp\htdocs\smartwebelevate.com\resources\views/frontend/commonForm/common-form.blade.php ENDPATH**/ ?>