@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="breadcrumbs">
                        <a href="{!! url('/')!!}">{{trans('message.home')}}</a> \ <span
                                class="active">{{trans('message.contact_us')}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- crumb-area-end -->
    <!-- contact-area-start -->
    <div class="main-content shop-page contact-page">
        <div class="container">
            <div class="row content-form ">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 map-content">
                    <!-- map-area-start -->
                    <div class="map">
                        <div id="googleMap"  style="height: 350px;"></div>
                    </div>
                    <!-- map-area-end -->

                    <div class="information-form">
                        <h4 class=" main-title">Our Store</h4>
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <h5 class="title">{{$shop_name}}</h5>
                                <ul class="list-info">
                                    <li>
                                        <div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></div>
                                        <div class="info">
                                            <h5 class="subtitle">{{trans('message.address')}}</h5>
                                            <a href="#" class="des">{{$street}}</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icon"><i class="fa fa-phone" aria-hidden="true"></i></div>
                                        <div class="info">
                                            <h5 class="subtitle">{{trans('message.phone')}}</h5>
                                            <p class="des">{{$business_contact}}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icon"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
                                        <div class="info">
                                            <h5 class="subtitle">{{trans('message.email')}}</h5>
                                            <p class="des">{{$email}}</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 info-content">
                    <div class="contact-form">
                        <div class="cf-msg"></div>
                        <form action="#" method="post" id="cf">
                            <h4 class="main-title">{{trans('message.contact_form')}}</h4>

                            <label class="label-text" for="input_name">{{trans('message.name')}}<span class="text-danger">*</span></label>
                            <input class="input-info" type="text" id="input_name" name="input_name" required='required'>

                            <label class="label-text" for="input_email">{{trans('message.email')}}<span class="text-danger">*</span></label>
                            <input class="input-info"  type="email" id="input_email" name="input_email" required='required'>

                            <label class="label-text" for="input_phone">{{trans('message.phone')}}<span class="text-danger">*</span></label>
                            <input class="input-info" type="number" id="input_phone" name="input_phone" required='required'>

                            <label class="label-text" for="input_phone">Your Message <span class="text-danger">*</span></label>
                            <textarea rows="8" class="input-info input-note" placeholder="Message" id="textarea_message"
                                      name="textarea_message" required='required'></textarea>

                            <div class="group-button">
                                <button type="submit" id="submit" name="submit" class="button submit" style="border: 0;">
                                    {{trans('message.submit')}}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- contact-area-end -->
@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