@extends('template.index')

@section('content')
    <!-- Page Banner -->
    <section class="page-banner" style="background-image: url({{asset('images/resource/intern-slider.jpg')}});">
    	<div class="auto-container text-center">
          <h1>{!! trans('devis.contactUsNow') !!}</h1>
          <ul class="bread-crumb">
            <li><a href="{{ route('home') }}">{!! trans('general.home') !!}</a></li>
            <li class="active">{!! trans('general.devis') !!}</li>
          </ul>
        </div>
    </section>

    <!--Contact Us Area-->
    <section class="contact-us-area">
    	<div class="auto-container">
        	<div class="row clearfix">
                 <!--Contact Form-->
            	<div class="col-md-7 col-sm-6 col-xs-12 contact-form wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1000ms">
                    <h2>{!! trans('devis.fillUpForm') !!}</h2>
                    <div class="alert alert-success" id="contact_success" style="display:none;">
                            {!! trans('devis.thanksForMessage') !!}
                    </div>                        	                 
                    <form role="form" id="contact_form" class="contact-form" method="post" action="{{ route('devisSave') }}">
                        {!! csrf_field() !!}
                        <div class="field-container clearfix">
                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <input type="text" name="name" id="name" placeholder="{!! trans('devis.name') !!} *">
                            </div>
                            
                            <div class="form-group col-md-6 col-sm-12 col-xs-12">
                                <input type="email" name="email" id="email" placeholder="{!! trans('devis.email') !!} *">
                            </div>
                            
                            <div class="clearfix"></div>
                            
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <input type="text" name="subject" id="subject" placeholder="{!! trans('devis.subject') !!} *">
                            </div>
                            
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <textarea name="message" id="message" placeholder="{!! trans('devis.message') !!} *"></textarea>
                            </div>
                            
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            	<button type="submit" value="submit" id="btn_submit" class="primary-btn hvr-bounce-to-left"><span class="btn-text">{!! trans('devis.send') !!}</span> <strong class="icon"><span class="f-icon flaticon-letter110"></span></strong></button>
                            </div>
                            
                        </div>
                    </form>
                </div>
                
                 <!--Map Area-->
                <div class="col-md-5 col-sm-6 col-xs-12 map-area wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1000ms">
                	<h2>{!! trans('devis.map') !!}</h2>
                    
                    <div class="our-location" id="map"></div>
                </div>
            
            </div>
        </div>
    </section>
    <!--======= MAP =========-->
    @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('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>
        $(document).ready(function(){
            $("#contact_form").on("submit",function(e){
                e.preventDefault();
                $.ajax({
                    type : $(this).attr("method"),
                    url : $(this).attr("action"),
                    dataType : "json",
                    data:$(this).serialize(),
                    success: function(data) {
                        $("#contact_form").hide();
                        $("#contact_success").show();
                    },
                    error : function(data){
                        $.each(data.responseJSON.errors, function(index,value){
                            $("#"+index).addClass('error');
                        })
                    }
                })
            });
        });
    </script>
    @endsection