@extends('layouts.app')

@section("page-style")
<link href="{{ asset('front-assets/css/pages_css/contact-us.css') }}" rel="stylesheet">
@endsection
@section('content')
    <section class="w-100 clearfix ContactUs py-5 bg-gray" id="ContactUs">
      <div class="ContactUsInner pb-md-5">
        <div class="container">
          <div class="privacyPolicyContant">
            <div class="headingTitle text-center">
              <div class="titleLine textCenterLine">
                <p class="mb-0"><span>Let's Connect</span></p>
              </div>
              <h1>Contact Info</h1>
              <p class="HeadingP">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type.</p>
            </div>
          </div>
          <div class="ContactsData w-100 clearfix pt-3">
            <div class="row">
              <div class="col-lg-4 col-sm-8 mx-auto p-3">
                <div class="ContactBox w-100 text-center">
                  <img src="{{ asset('front-assets/images/icons/4.png') }}" class="img-fluid">
                  <h4>Our Location</h4>
                  <p>Elcina House, 422 , Okhla Industrial Estate , Phase-III , New Delhi , Delhi 110020</p>
                </div>
              </div>
              <div class="col-lg-4 col-sm-8 mx-auto p-3">
                <div class="ContactBox w-100 text-center">
                  <img src="{{ asset('front-assets/images/icons/5.png') }}" class="img-fluid">
                  <h4>Call Us Now</h4>
                  <p>+91-11-41615985</p>
                  <p>+91-11-41011291</p>
                </div>
              </div>
              <div class="col-lg-4 col-sm-8 mx-auto p-3">
                <div class="ContactBox w-100 text-center">
                  <img src="{{ asset('front-assets/images/icons/6.png') }}" class="img-fluid">
                  <h4>Write Us Now</h4>
                  <p>info@elcina.com</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!----------|| Contact us Details Section ||---------->
    <!----------|| Contact us Form Section ||---------->
    <section class="w-100 clearfix ContactUsForm py-5" id="ContactUsForm">
      <div class="ContactUsInner py-md-5">
        <div class="container">
          <div class="privacyPolicyContant">
            <div class="headingTitle text-center">
              <div class="titleLine textCenterLine">
                <p class="mb-0"><span>HAVE A QUESTION?</span></p>
              </div>
              <h1>Get In Touch</h1>
              <p class="HeadingP">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type.</p>
            </div>
          </div>
          <div class="ContactsFormData w-100 clearfix pt-3">
            <form>
              <div class="row">
                <div class="col-md-6 p-3">
                  <div class="form-group m-0">
                    <input type="text" name="fname" placeholder="Your Name*" class="form-control">
                  </div>
                </div>
                <div class="col-md-6 p-3">
                  <div class="form-group m-0">
                    <input type="text" name="lname" placeholder="Your Last Name*" class="form-control">
                  </div>
                </div>
                <div class="col-md-6 p-3">
                  <div class="form-group m-0">
                    <input type="email" name="email" placeholder="Your Email*" class="form-control">
                  </div>
                </div>
                <div class="col-md-6 p-3">
                  <div class="form-group m-0">
                    <input type="text" name="subject" placeholder="Subject*" class="form-control">
                  </div>
                </div>
                <div class="col-md-12 p-3">
                  <div class="form-group m-0">
                    <textarea class="form-control pt-3" placeholder="Your Message*" name="" rows="10"></textarea>
                  </div>
                </div>
                <div class="col-md-12 pt-md-5 py-3 text-center">
                  <button class="btn elcinaBtn FormBtn" type="submit">Submit Now</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!----------|| Contact us Form Section ||---------->
    <!----------|| Contact us Map Section ||---------->
    <section class="w-100 clearfix ContactMap" id="ContactMap">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3673.601598449533!2d76.04584121444117!3d22.964895124245277!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3963177600d4efb5%3A0x33c81c908e54629c!2sSoham%20Web%20Solution%20-%20Web%20Development%20Company!5e0!3m2!1sen!2sin!4v1642413406879!5m2!1sen!2sin"
        width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </section>
@endsection
@section("page-js-script")
    <!---------------|| Js Files ||--------------->
    <!----------|| Scripts ||---------->
    <script type="text/javascript">
      $('.playVideo').on('click', function(e) {
          e.preventDefault();
          
          var video_url = $(this).closest(".knowVIdeoHere").find('.video_url').val();   

          $('#video-overlay').addClass('open');
          $("#video-overlay").append('<iframe width="560" height="315" src="'+video_url+'" frameborder="0" allowfullscreen></iframe>');
      });
      $('.video-overlay, .video-overlay-close').on('click', function(e) {
          e.preventDefault();
          close_video();
      });
      $(document).keyup(function(e) {
          if (e.keyCode === 27) {
              close_video();
          }
      });
      function close_video() {
          $('.video-overlay.open').removeClass('open').find('iframe').remove();
      };
    </script>
@endsection