@extends('layouts.search') 
@section('title')
	AMDIEX - Contact
@endsection
@section('css')

@endsection
@section('content')
		
		<div class="container" style="padding-top: 25px;">
			<div class="row margin-bottom-30">
				{{-- @include('front.leftside_menu') --}}
				<div class="col-md-12">
					<div class="col-md-9 mb-margin-bottom-30">
						<div class="headline"><h2>Contactez Nous</h2></div>
						<div class="tag-box tag-box-v2">
							<p>Les données personnelles collectées ci-dessous seront uniquement utilisées dans le cadre d’une réponse à votre message.</p>
						</div>
						<p><strong>Toutes les données marquées d’un <span class="color-red">*</span> sont obligatoires pour la saisie</strong></p>
						<form action="" method="post" id="sky-form3" class="sky-form sky-changes-3">
							@csrf
						
								<div class="row">
									<section class="col col-6">
										<label class="label">Nom&prénom / raison sociale <span class="color-red">*</span></label>
										<label class="input">
											<i class="icon-append fa fa-user"></i>
											<input type="text" name="name" id="name" required>
										</label>
									</section>
									<section class="col col-6">
										<label class="label">E-mail <span class="color-red">*</span></label>
										<label class="input">
											<i class="icon-append fa fa-envelope-o"></i>
											<input type="email" name="email" id="email" required>
										</label>
									</section>
								</div>

								<section>
									<label class="label">Objet <span class="color-red">*</span></label>
									<label class="input">
										<i class="icon-append fa fa-tag"></i>
										<input type="text" name="subject" id="subject" required>
									</label>
								</section>

								<section>
									<label class="label">Message <span class="color-red">*</span></label>
									<label class="textarea">
										<i class="icon-append fa fa-comment"></i>
										<textarea rows="4" name="message" id="message" required></textarea>
									</label>
								</section>
							

							<footer style="padding: 0;border-top: 0;">
								<button type="submit" class="btn-u pull-right">Envoyer</button>
							</footer>

							<div class="message">
								<i class="rounded-x fa fa-check"></i>
								<p>votre message a été envoyé avec succès</p>
							</div>
						</form>
					</div><!--/col-md-9-->

					<div class="col-md-3" style="margin-top: 50px;">
						<h4><b>Adresse</b></h4>
						<ul class="list-unstyled who margin-bottom-30">
							<li><a href="#"><i class="fa fa-home"></i>17, Boulevard Moulay Youssef Casablanca 20060 – Maroc</a></li>
							<li><a href="#"><i class="fa fa-envelope"></i>contact@trombino.org</a></li>
							<li><a href="#"><i class="fa fa-phone"></i>+212 5 22 48 00 47</a></li>
							<li><a href="#"><i class="fa fa-fax"></i>+212 5 22 48 02 24</a></li>
							<li><a href="#"><i class="fa fa-globe"></i>https://www.trombino.org/</a></li>
						</ul>

						<h4><b>Heures d'assistance</b></h4>
						<ul class="list-unstyled margin-bottom-30">
							<li><strong>Lundi :</strong> 8:30 à 18:30</li>
							<li><strong>Mardi :</strong> 8:30 à 18:30</li>
							<li><strong>Mercredi :</strong> 8:30 à 18:30</li>
							<li><strong>Jeudi :</strong> 8:30 à 18:30</li>
							<li><strong>Vendredi :</strong> 8:30 à 18:30</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('js')
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			App.init();
			OwlCarousel.initOwlCarousel();
			StyleSwitcher.initStyleSwitcher();
			ParallaxSlider.initParallaxSlider();
			$(".charte").on("click", function() {
			   $('#imagepreview').attr('src', $(this).attr('src'));
			   $('#imagemodal').modal('show');
			});
			$("#imagemodal").click(function(ev){
			    if(ev.target != this) return;
			    $('#imagemodal').modal('hide');
		  	});
		  	$('.marquee').marquee({
			    //speed in milliseconds of the marquee
			    duration: 8000,
			    //gap in pixels between the tickers
			    gap: 50,
			    //time in milliseconds before the marquee will start animating
			    delayBeforeStart: 0,
			    //'left' or 'right'
			    direction: 'up',
			    //true or false - should the marquee be duplicated to show an effect of continues flow
			    duplicated: true
			});
		});
	</script>
	<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog text-center" style="width: 100%;">
	    <div class="">
	      <div class="modal-body">
	        <img src="" id="imagepreview" data-dismiss="modal">
	      </div>
	    </div>
	  </div>
	</div>
@endsection