@extends('templates.'. $template_name .'.layouts.default')

@section('title', trans('message.contact_us'))

@section('content')

<!-- crumb-area-start -->
<div class="crumb-area">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="crumb">
                    <ul class="crumb-list">
                        <li><a href="{!! url('/')!!}">{{trans('message.home')}}</a></li>
                        <li class="active"><a href="#">{{trans('message.contact_us')}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- crumb-area-end -->
<!-- contact-area-start -->
<div class="contact-area">
    <div class="container">
        <!-- contact-form-start -->
        <div class="row">
            <div class="col-xs-12">
                <div class="contact-form-area">
                    <div class="contact-form-head">
                        <h2>{{trans('message.contact_form')}}</h2>
                        <!-- <h1>{{trans('message.contact_form')}}</h1> -->
                    </div>
                    <div class="contact-form-content">
                        <div class="cf-msg"></div>
                        <form action="#" method="post" id="cf">
                            <div class="row">
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <div class="cfc-input-box">
                                        <label>{{trans('message.name')}}<span class="text-danger">*</span></label>
                                        <input type="text" id="input_name" name="input_name" required='required'>
                                    </div>
                                    <div class="cfc-input-box">
                                        <label>{{trans('message.email')}}<span class="text-danger">*</span></label>
                                        <input type="email" id="input_email" name="input_email" required='required'>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <div class="cfc-input-box">
                                        <label>{{trans('message.phone')}}<span class="text-danger">*</span></label>
                                        <input type="number" id="input_phone" name="input_phone" required='required'>
                                    </div>
                                    <div class="cfc-input-box">
                                        <label>{{trans('message.website')}}</label>
                                        <input type="text" id="input_website" name="input_website">
                                    </div>
                                </div>
                                <div class="col-xs-12">
                                    <div class="cfc-input-box">
                                        <textarea class="contact-textarea" placeholder="Message" id="textarea_message" name="textarea_message" required='required'></textarea>
                                    </div>
                                </div>
                                <div class="col-xs-12">
                                    <div class="cfc-input-box">
                                        <button type="submit" id="submit" class="submit hvr-bs" name="submit">{{trans('message.submit')}}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- contact-form-end -->
        <div class="row">
            <div class="col-xs-12">
                <div class="contact-service">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="single-contact-service">
                                <div class="clearfix">
                                    <div class="scs-icon">
                                        <i class="fa fa-envelope-o"></i>
                                    </div>
                                    <div class="scs-content">
                                        <h6>{{trans('message.address')}}</h6>
                                        <p>{{$street}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="single-contact-service">
                                <div class="clearfix">
                                    <div class="scs-icon">
                                        <i class="fa fa-mobile"></i>
                                    </div>
                                    <div class="scs-content">
                                        <h6>{{trans('message.phone')}}</h6>
                                        <p>{{trans('message.phone')}}: {{getPhoneNumberFormat($phone)}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="single-contact-service">
                                <div class="clearfix">
                                    <div class="scs-icon">
                                        <i class="fa fa-map-marker"></i>
                                    </div>
                                    <div class="scs-content">
                                        <h6>{{trans('message.email')}}</h6>
                                        <p>{{$email}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- contact-area-end -->
<!-- map-area-start -->
<div class="map-area">
    <div class="gmap">
        <div id="googleMap"></div>
    </div>
</div>
<!-- map-area-end -->

<style type="text/css">
.contact-area 
{
    background: rgba(0, 0, 0, 0) url("{{$str_path . 'img/bg/contact.jpg'}}") no-repeat scroll left top / cover;
}
.cfc-input-box input[type="email"], 
.cfc-input-box input[type="number"] {
    border: 2px solid #f2f2f2;
    height: 40px;
    padding: 0;
    width: 100%;
}
</style>

@endsection

@section('script')
<!-- google-map-script -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key={{config('global.google_key')}}"></script>
<script>

var shop_name = "{{$shop_name}}",
    shop_email = "{{$email}}";

var map;
var lat = {{$default_lat}},
    lng = {{$default_lng}};

var default_lat_lng = {lat: parseFloat(lat), lng: parseFloat(lng)};

var array_markers = {!!json_encode($array_markers) !!};

// var infoWindow;

function initialize() {
    map = new google.maps.Map(document.getElementById('googleMap'), {
        center: {
            lat: lat,
            lng: lng
        },
        zoom: 14,
        scrollwheel: false
    });
    $.each(array_markers, function(index, value){
        // Add markers
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(value.latitude, value.longitude),
            map: map,
            title: ''
        });
        var infoWindow = new google.maps.InfoWindow({
            content: value.name
        });

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker);
        });
    });
}
google.maps.event.addDomListener(window, "load", initialize);

$(function(){
    $('.cf-msg').hide();
    $('form#cf').submit(function(event){
        event.preventDefault();
        getSentMail();
    });
});

// send mail
function getSentMail()
{
    var url = "{!! url('/send-mail') !!}";
    $.ajax({
        url : url,
        type : 'POST',
        data :
        {
            '_token': '{{ csrf_token() }}',
            name : $('#input_name').val(),
            phone : $('#input_phone').val(),
            email : $('#input_email').val(),
            website : $('#input_website').val(),
            message : $('#textarea_message').val(),
            contact_name : shop_name,
            contact_email : shop_email,
        },
        beforeSend:function()
        {
            // before send
        },
        success:function(data)
        {
            $('#input_name').val('');
            $('#input_phone').val('');
            $('#input_email').val('');
            $('#input_website').val('');
            $('#textarea_message').val('');

            if(data.success == true)
            {               
                $('.cf-msg').fadeIn().html('<div class="alert alert-success"><strong>Success!</strong> Email has been sent successfully.</div>');
                    setTimeout(function() {
                        $('.cf-msg').fadeOut('slow');
                    }, 4000);
            }
            else
            {
                $('.cf-msg').fadeIn().html('<div class="alert alert-danger"><strong>Warning!</strong> Please fillup the informations correctly.</div>')
            }
            $("html, body").animate({ scrollTop: 300 }, "slow");
        }
    });
}

</script>
<!-- google-map-script -->

@endsection