@extends('front.layouts.main')
@section('content')
  <section class="sec_padd contact-sec mt-5">
  	<div class="container">
  		<div class="row gy-5 gx-md-5">
  			<div class="col-md-7">
  				<div class="contact-lft pe-5">
  					<h2 class="common_head contact-head wow  fadeInUp" data-wow-delay="0.2s">
  						We Would Like to Hear <span>From You</span>
  					</h2>
  					<p class="sub_head contact-subheading wow  fadeInUp" data-wow-delay="0.4s">Appreciate your urge to contact us. Happy to hear any questions you have or provide you with an estimate. If you want to be a part of our video production, do not refrain from contacting us. Just send us a message in the form below.</p>
  				</div>
  			</div>
			<div class="col-md-5">
				<div class="form_sec pt-0">
  						<form name="contact_form" id="contact_form_submit">
  							 @csrf
  						    <div class="contact-form">
			                 <div class="form-group wow  fadeInUp" data-wow-delay="0.2s">
			                   <div class="">
			                     <input type="text" name="name" class="form-control" id="name" placeholder="Name . .">
			                   </div>
			                 </div>
			                 <div class="form-group wow  fadeInUp" data-wow-delay="0.4s">
			                   <div class="">
			                     <input type="email" name="email" class="form-control" id="email" ng-model="contact.email" placeholder="Email . .">
			                   </div>
			                 </div>
			                 <div class="form-group wow  fadeInUp" data-wow-delay="0.6s">
			                   <div class="">
			                     <input type="text" name="phone" class="form-control" id="phone" ng-model="contact.phone" placeholder="Phone . .">
			                   </div>
			                 </div>
			                 <div class="form-group wow  fadeInUp" data-wow-delay="0.8s">
			                   <div class="">
			                     <textarea rows="10" name="message" class="form-control" id="message"  placeholder="Message . ."></textarea>
			                   </div>
			                 </div>
			                 <div class="error-message text-danger" id="name-error"></div>
			                   <div class="error-message text-danger" id="email-error"></div>
			                   <div class="error-message text-danger" id="phone-error"></div>
			                   <div class="error-message text-danger" id="message-error"></div>
			                 <div class="form-group submit-group wow fadeInUp submitContactBttn" data-wow-delay="1s">
			                   <div class="contact-btn-wrapper">
			                   		<input type="submit" name="submit" value="Send" class="btn_cmn"> 
			                   </div>
			                 </div>
			                 <div id="success-message"></div>
			                 <div class="spinner-border text-primary loader" role="status" style="display: none;">
											  <span class="visually-hidden">Loading...</span>
											 </div>
			                </div>
  						</form>
  					</div>
			</div>
  		</div>
  	</div>
  </section>
 @endsection