@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>
		<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
============================================= -->
    <!-- Head Section -->
<section id="content">

			<div class="content-wrap">

				<div class="container clearfix">
					<div class="col_half">
						<!-- Postcontent
						============================================= -->
						<div class="">

							<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">Envoyer Message</button>
									</div>

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

								</form>

							</div>

						</div><!-- .postcontent end -->
					</div>
					<div class="col_half col_last">

						<section id="google-map" class="gmap" style="height: 520px; z-index:1;"></section>

					</div><!-- Google Map End -->

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


				</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