<?php $__env->startSection('content'); ?>
    <main>
      <section class="sub-header">
        <div class="container">
          <div class="contain">
            <h1>
                <?php echo e(__('messages.contact_us')); ?>

            </h1>

            <ul class="list">
              <li>
                <a href="<?php echo e(route('home')); ?>">
                    <?php echo e(__('messages.home')); ?>

                </a>
              </li>

              <li>
                <span>
                    <?php echo e(__('messages.contact_us')); ?>

                </span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section class="contact-us general-section pattern-section">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 col-12 mb-3 order-mobile-1">
              <div class="contact-info">
                <a href="<?php echo e(route('home')); ?>" target="_blank" class="contact-data">
                  <img
                    src="<?php echo e(asset('assets/images/contact/location.svg')); ?>"
                    loading="lazy"
                    alt=""
                  />

                  <p>    <?php echo e(__('messages.location')); ?></p>

                  <span>
                    <?php if(App::getLocale() == 'ar'): ?>
                    <?php echo e($socials->ar_location); ?>

                <?php else: ?>
                    <?php echo e($socials->en_location); ?>

                <?php endif; ?>

                  </span>
                </a>

                <a
                  href="mailto:info@gmail.com"
                  target="_blank"
                  class="contact-data"
                >
                  <img
                    src="<?php echo e(asset('assets/images/contact/sms.svg')); ?>"
                    loading="lazy"
                    alt=""
                  />

                  <p> <?php echo e(__('messages.email')); ?> </p>

                  <span>
                    <?php if(App::getLocale() == 'ar'): ?>
                    <?php echo e($socials->email); ?>

                <?php else: ?>
                    <?php echo e($socials->email); ?>

                <?php endif; ?>

                  </span>
                </a>

                <a
                  href="tel:542280536"
                  target="_blank"
                  class="contact-data"
                >
                  <img
                    src="<?php echo e(asset('assets/images/contact/call.svg')); ?>"
                    loading="lazy"
                    alt=""
                  />

                  <p> <?php echo e(__('messages.phone')); ?> </p>

                  <span>
                    <?php if(App::getLocale() == 'ar'): ?>
                    <?php echo e($socials->phone); ?>

                <?php else: ?>
                    <?php echo e($socials->phone); ?>

                <?php endif; ?>

                  </span>
                </a>
              </div>
            </div>
            <div class="col-lg-8 col-12 mb-3 order-mobile-0">
                <form class="form-contain" method="POST" id="contactForm">
                    <?php echo csrf_field(); ?>

                    <div class="custom-heading">
                        <h1><?php echo e(__('messages.need_help')); ?></h1>
                        <p><?php echo e(__('messages.contac')); ?></p>
                    </div>

                    <div class="form-group">
                        <label for="name"><?php echo e(__('messages.name')); ?></label>
                        <div class="form-icon">
                            <img src="<?php echo e(asset('assets/images/contact/user.svg')); ?>" loading="lazy" alt="" />
                            <input type="text" class="form-control" placeholder="<?php echo e(__('messages.name')); ?>" id="name" name="name" required />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="email"><?php echo e(__('messages.email')); ?></label>
                        <div class="form-icon">
                            <img src="<?php echo e(asset('assets/images/contact/email.svg')); ?>" loading="lazy" alt="" />
                            <input type="email" class="form-control" placeholder="example@gmail.com" id="email" name="email" required />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="telephone"><?php echo e(__('messages.phone')); ?></label>
                        <div class="form-icon">
                            <img src="<?php echo e(asset('assets/images/contact/call.svg')); ?>" loading="lazy" alt="" />
                            <input type="text" class="form-control" placeholder="<?php echo e(__('messages.phone')); ?>" name="phone" required />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message"><?php echo e(__('messages.message')); ?></label>
                        <div class="form-icon text-area">
                            <img src="<?php echo e(asset('assets/images/contact/edit.svg')); ?>" loading="lazy" alt="" />
                            <textarea name="massage" id="message" class="form-control" placeholder="<?php echo e(__('messages.message')); ?>" cols="30" rows="10" required></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <?php echo NoCaptcha::renderJs(); ?>

                        <?php echo NoCaptcha::display(); ?>

                        <div id="recaptchaError" class="text-danger" style="display: none;">
                            هذا التحقق مطلوب.
                        </div>
                    </div>

                    <button type="submit" class="custom-btn primary-color">
                        <img src="<?php echo e(asset('assets/images/icons/send.svg')); ?>" class="arrow" loading="lazy" alt="" />
                        <span><?php echo e(__('messages.send_now')); ?></span>
                    </button>
                </form>

                <!-- Modal -->
                <div class="modal fade" id="DoneContactModal" tabindex="-1" role="dialog" aria-labelledby="DoneContactModal" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="contain">
                                    <img src="<?php echo e(asset('assets/images/icons/check_circle.svg')); ?>" loading="lazy" alt="" />
                                    <h1><?php echo e(__('messages.request_success')); ?></h1>
                                    <p><?php echo e(__('messages.contact_soon')); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- jQuery for Ajax and Modal -->
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script>
                $(document).ready(function () {
                    $('#contactForm').on('submit', function (e) {
                        e.preventDefault(); // Prevent form submission

                        var recaptchaResponse = grecaptcha.getResponse(); // Get the reCAPTCHA response
                        if (recaptchaResponse.length === 0) {
                            $('#recaptchaError').show(); // Show error if reCAPTCHA is not checked
                            return; // Prevent form submission
                        } else {
                            $('#recaptchaError').hide(); // Hide error if reCAPTCHA is checked
                        }

                        var formData = $(this).serialize(); // Serialize form data

                        $.ajax({
                            url: "<?php echo e(route('send_massage')); ?>",
                            type: "POST",
                            data: formData,
                            success: function (response) {
                                if (response.success) {
                                    // Show the modal on successful response
                                    $('#DoneContactModal').modal('show');
                                    // Clear form fields after success
                                    $('#contactForm')[0].reset();
                                    grecaptcha.reset(); // Reset reCAPTCHA
                                } else {
                                    alert("Error: " + response.message);
                                }
                            },
                            error: function (response) {
                                alert("Something went wrong. Please try again.");
                            }
                        });
                    });

                    // Optionally, listen for reCAPTCHA checkbox clicks to hide error message when clicked
                    grecaptcha.render('your-recaptcha-element-id', {
                        'callback': function(response) {
                            $('#recaptchaError').hide(); // Hide error if reCAPTCHA is checked
                        }
                    });
                });
            </script>

          </div>
        </div>
      </section>
    </main>


    <?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\cementstate\resources\views/contact-us.blade.php ENDPATH**/ ?>