@extends('layout')

@section('content')

   <div class="row-fluid row-no-padding content">
      <div class="no-padd col-sm-12 ">
         <div class="column-inner ">
            <div class="prague-shortcode-parent ">
               <div class="prague-shortcode-parent-img" @if(desktop())style="height: 555px;!important"@endif>
                  <span class="overlay"></span>
                  <img src="/theme/tcul_img/real_estate/cusections/6.jpg" data-lazy-src="/theme/tcul_img/real_estate/cusections/6.jpg" class="s-img-switch" alt="middle-banner image" />
               </div>

               <div class="prague-shortcode-content-wrapp">
                  <div class="prague-shortcode-heading light" @if(desktop())style="padding-top: 230px; text-align: center; !important"@endif>
                     <h1 class="parent-title">Get in touch</h2>
                     <div class="parent-subtitle parent-title">Want to get in touch? We’d love to hear from you. Here’s how you can reach us…</div>
                  </div>

                  <div data-unique-key="0bf3c8aa9017e52dd041b7e2c3327621" class="js-load-more"
                     data-start-page="1" data-max-page="2" data-next-link="#">
                     <div class="row prague_services prague_count_col3 prague_gap_col15 no-footer-content prague-load-wrapper"
                        data-columns="prague_count_col3" data-gap="prague_gap_col15" >
                        <div class="col-md-6 prague_filter_class">
                           <div class="portfolio-item">

                              <div class="prague-services-wrapper ">
                                 <span class="services-item-icon"><img class="contact-icon tcul-element-fadeleft" src="/theme/tcul_img/contacticon/phone-call.png" alt="middle-banner image"/></span>

                                 <h4 class="services-item-title tcul-element-fadeleft">Talk to sales</h4>
                                 <div class="services-item-description tcul-element-fadeleft">
                                    <p>Interested in our services? Just pick up the phone and call us.</p>
                                 </div>

                                 <a href="tel:+91 88778 88888" class="prague-services-link a-btn-2 creative tcul-element-fadeleft"
                                    target="_self">
                                    <span class="a-btn-line"></span>
                                    MAKE A CALL </a>

                              </div>

                           </div>
                        </div>
                        <div class="col-md-6 prague_filter_class  p_f_f9e81a7 column_paralax">
                           <div class="portfolio-item">
                              <div class="prague-services-wrapper">
                              <span class="services-item-icon"><img class="contact-icon tcul-element-faderight" src="/theme/tcul_img/contacticon/chat.png" alt="middle-banner image"/></span>
                                 <h4 class="services-item-title tcul-element-faderight">Contact support</h4>
                                 <div class="services-item-description tcul-element-faderight">
                                    <p>Sometimes you need a little help. Don’t worry, We’re here for you.</p>
                                 </div>

                                 <!-- <a href="https://wa.me/+91 88778 88888" class="prague-services-link a-btn-2 creative tcul-element-faderight" target="_self">
                                    <span class="a-btn-line"></span>
                                    CHAT SUPPORT </a> -->
                                 <a href="https://wa.me/+918877888888/" class="prague-services-link a-btn-2 creative tcul-element-faderight" target="_blank">
                                    <span class="a-btn-line"></span>
                                    CHAT SUPPORT </a>
                              </div>

                           </div>
                        </div>
                     </div>
                  </div>

               </div>
            </div>
         </div>
      </div>
   </div> 
   
   <!-- contact form -->
   <div class="container tcul-margin-sm-30t no-padd no-padd margin-lg-70t margin-sm-40t margin-lg-110b margin-xs-70b">
      <div class="row-fluid ">
         <div class="col-sm-12 no-padd">
            <div class="padd-only-xs ">

               <div class="heading Center dark wow animate__fadeInUp" data-wow-duration="1s">
                  <div class="subtitle ">CONTACT</div>
                  <h2 class="title">Let's talk.</h2>
               </div>

            </div>
         </div>
      </div>

      <div class="row-fluid no-padd margin-lg-30t margin-lg-110b margin-sm-20t margin-sm-70b">
         <div class="col-sm-12 col-lg-offset-2 col-lg-8 col-md-offset-1 col-md-10 col-sm-offset-0 col-xs-12 no-padd">
            <div class="padd-only-xs wow animate__fadeInUp" data-wow-duration="1.2s"> 

               <div class="prague-formidable vc_formidable">
                  <div class="frm_forms  with_frm_style frm_style_formidable-style-2-2" id="frm_form_4_container">
                     <form method="post" action="/contactus" id="contact_form">
                        @csrf
                        <div class=" ">
                           <fieldset>
                              <div class="frm_fields_container">
                                 <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                       <div id="frm_field_19_container" class="frm_form_field form-field  frm_required_field frm_none_container">

                                          <input class="field" type="text" id="field_hm4zn" name="name" value=""
                                             placeholder="Name" data-reqmsg="This field cannot be blank."
                                             data-invmsg="Name is invalid" />
                                             <div style="color:red" id="error_name"></div>
                                       </div>
                                       <div id="frm_field_20_container" class="frm_form_field form-field  frm_none_container">

                                          <input class="field" type="text" id="field_rposy" name="mobile" value=""
                                             placeholder="mobile" data-invmsg="mobile is invalid" />
                                             <div style="color:red" id="error_mobile"></div>

                                       </div>
                                       <div id="frm_field_21_container" class="frm_form_field form-field  frm_required_field frm_none_container">

                                          <input class="field" type="email" id="field_pk5zg" name="email" value=""
                                             placeholder="example@mail.com" data-reqmsg="This field cannot be blank."
                                             data-invmsg="Email Address is invalid" />
                                          <div style="color:red" id="error_email"></div>
                                       </div>
                                    </div>
                                    <div class="col-md-6 col-sm-6">
                                       <div id="frm_field_22_container" class="frm_form_field form-field  frm_none_container">
                                          <textarea class="field" name="message" id="field_jkt2l" rows="5"
                                             placeholder="Message" data-invmsg="Paragraph Text is invalid"></textarea>
                                             <div style="color:red" id="error_message"></div>
                                       </div>
                                    </div>
                                 </div>
                                 <input type="hidden" name="item_key" value="" />
                                 <div class="frm_submit">
                                    <input type="submit" id="submit" value="Send" />
                                    <span class="arrow-right"></span>
                                 </div>
                              </div>
                           </fieldset>
                        </div>
                     </form>
                  </div>
               </div>
               <div class="test 4"></div>
            </div>
         </div>
      </div>
   </div>

   <!-- map -->
   <div class="container">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3499.5470293450812!2d77.13213441456128!3d28.703193687631202!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d03d9a6d53011%3A0x261f75792bd1ac2c!2sGD%20Market!5e0!3m2!1sen!2sin!4v1644480511488!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
   </div>

   <!-- company details -->
   <div class="row-fluid margin-lg-0t margin-sm-0t" >
      <div class="column column_container col-sm-12 wow animate__fadeInUp" data-wow-duration="1s">
         <div class="column-inner">
            <div class="heading  Center dark">
               <h4 style="font-family:'Poppins';" class="title">Company details</h4>
               <div class="content">
                  <p>Avon 3D Studio is a company registered in Delhi, INDIA. GST No: 07ABJ FA005 7B1ZO <br> Registered office: G-189, Pitampura Delhi, INDIA </p>
               </div>
            </div>
         </div>
      </div>
   </div>

   <div class="modal fade" id="success_modal" tabindex="-1" role="dialog" aria-labelledby="success_modalCenterTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" style="color:#1C7947" id="success_modalLongTitle">Success</h4>
       </div>
       <div class="modal-body">
         <div class="text-center">
            <h5 style="color:#121212">Thank you, Your Response Noted Shortly, We will Contact You Soon.</h5>
         </div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary close" style="color:#121212">Ok</button>
       </div>
     </div>
   </div>
 </div>


 
<script>
   $('.close').click(function(e){
      e.preventDefault();
      $('#success_modal').modal('hide');
      $("#submit").show();
   });

   //form ajax
   $(document).on("submit","#contact_form",function(e) {
      e.preventDefault();
      $("#submit").hide();
      $.ajax({
            type: "POST",
            url: '/contactus',
            dataType : 'json',
            data:$("#contact_form").serialize(),
            success:function(response){
               if(response.redirect == true){
                  $("#error_name").text('');
                  $("#error_email").text('');
                  $("#error_mobile").text('');
                  $("#error_message").text('');
                  $(".field ").val('');
                  $('#success_modal').modal('show');
               }
            },
            error:function (reject) {
               $("#submit").show();
               $("#error_name").text('');
               $("#error_email").text('');
               $("#error_mobile").text('');
               $("#error_message").text('');
               
               if(reject.status === 422) {
                  var errors = $.parseJSON(reject.responseText)['errors'];
                  $.each(errors, function (key, val) {
                     $("#" +"error_" + key  ).text(val[0]);
                  });
               }
            }
      });
   });
</script>

@endsection