@extends('template.index')

@inject("configCtrl","App\Http\Controllers\ConfigurationController")
@section('title',$configCtrl->get(App::getLocale(),"site_title") .' - Contact')
@section('site_title',$configCtrl->get(App::getLocale(),"site_title"))
@section('description',$configCtrl->get(App::getLocale(),"description"))
@section('keywords',$configCtrl->get(App::getLocale(),"meta_keywords"))
@section('og_title',$configCtrl->get(App::getLocale(),"site_title") .' - Contact')
@section('og_description',$configCtrl->get(App::getLocale(),"description"))

@section('content')
<!-- Page Title
============================================= -->
<section id="page-title">

	<div class="container clearfix">
		<h1>{{ trans("contact.contactUs") }}</h1>
		<span>{{ trans("contact.followUs") }}</span>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="{{ route('home',['lang'=>App::getLocale()]) }}">{{ __('general.home') }}</a></li>
			<li class="breadcrumb-item active" aria-current="page">{{ __('general.contact') }}</li>
		</ol>
	</div>
</section><!-- #page-title end -->

<!-- Google Map
============================================= -->
<section id="google-map" class="gmap slider-parallax"></section>
    <!-- Head Section -->
<section id="content">

			<div class="content-wrap">

				<div class="container clearfix">

					<!-- Postcontent
					============================================= -->
					<div class="postcontent nobottommargin">

						<h3> {{ trans("contact.contactUsNow") }}</h3>

						<div class="form-widget">

							<div class="form-result"></div>

							<form class="nobottommargin" id="template-contactform" name="template-contactform" action="{{ route('contactSave') }}" method="post">
	
								<div class="form-process"></div>
									{!! csrf_field() !!}
								<div class="col_one_third">
									<label for="template-contactform-name">{{ trans("contact.name") }} <small>*</small></label>
									<input type="text" id="template-contactform-name" name="name" value="" class="sm-form-control required"  required />
								</div>

								<div class="col_one_third">
									<label for="template-contactform-email">{{ trans("contact.email") }} <small>*</small></label>
									<input type="email" id="template-contactform-email" name="email"  required value="" class="required email sm-form-control" />
								</div>

								<div class="col_one_third col_last">
									<label for="template-contactform-phone">{{ trans("contact.phone") }}</label>
									<input type="text" id="template-contactform-phone" name="phone" value="" class="sm-form-control" />
								</div>

								<div class="clear"></div>

								<div class="col_full">
									<label for="template-contactform-subject">{{ trans("contact.subject") }} <small>*</small></label>
									<input type="text" id="template-contactform-subject" name="subject" value="" class="required sm-form-control" />
								</div>

								

								<div class="clear"></div>

								<div class="col_full">
									<label for="template-contactform-message">{{ trans("contact.message") }} <small>*</small></label>
									<textarea class="required sm-form-control" id="template-contactform-message" name="message" rows="6" cols="30"></textarea>
								</div>

								<div class="col_full hidden">
									<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
								</div>

			

								<div class="col_full">
									<button class="button button-3d nomargin" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Send Message</button>
								</div>

								<input type="hidden" name="prefix" value="template-contactform-">

							</form>

						</div>

					</div><!-- .postcontent end -->

					<!-- Sidebar
					============================================= -->
					<div class="sidebar col_last nobottommargin">

						<address>
							<strong>Adresse:</strong><br>
							{{$configCtrl->get(App::getLocale(),"adress1")}}
						</address>
						<abbr title="Phone Number"><strong>Telephone:</strong></abbr> {{$configCtrl->get(App::getLocale(),"tel_number")}}<br>
						
						<abbr title="Email Address"><strong>Email:</strong></abbr> {{$configCtrl->get(App::getLocale(),"send_email")}}

					

						<div class="widget noborder notoppadding">

							<a href="{{ $configCtrl->get(App::getLocale(),'social_facebook') }}" title="Facebook" target="_blank" class="social-icon si-small si-dark si-facebook">
								<i class="icon-facebook"></i>
								<i class="icon-facebook"></i>
							</a>

							<a href="{{ $configCtrl->get(App::getLocale(),'social_instagram') }}" title="Instagram" target="_blank" class="social-icon si-small si-dark si-instagram">
								<i class="icon-instagram"></i>
								<i class="icon-instagram"></i>
							</a>

							

						</div>

					</div><!-- .sidebar end -->

				</div>

			</div>

		</section><!-- #content end -->
@endsection


@section("js")
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
          integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
            integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
            crossorigin=""></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var mymap = L.map('google-map', {scrollWheelZoom: false}).setView([{{$mapLat}}, {{$mapLong}}], 16);

            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicGl4aW1pbmQiLCJhIjoiY2pqN2YxbnU2MHdsaDN3cWhtbW56YjhvciJ9.FdFRgQtKXpGvAdjWdmzWjQ', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                id: 'mapbox.streets'
            }).addTo(mymap);
            var marker = L.marker([{{$mapLat}}, {{$mapLong}}]).addTo(mymap);
        });

    </script>

    <script type="text/javascript">
    $(document).ready(function(){
        $("#template-contactform").on("submit",function(e){
            e.preventDefault();
            $.ajax({
                url:$(this).attr("action"),
                method:"post",
                dataType:"json",
                data:$(this).serialize(),
                success:function(data){
                    if(data.success){
                        $(".form-result").html('<div class="style-msg successmsg"><div class="sb-msg"><i class="icon-thumbs-up"></i><srtong>Merci</strong> de nous avoir contacté.</div></div>');
                    }
                }
            });
        });
    });
</script>
@endsection