@extends('site.layout.app') @section('style')

<link rel="stylesheet" type="text/css" href="/css/connection.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">
@endsection


@section('content')

<div id="contact-page">
    <div class="container">
        <div class="">
            <div class="text-center ">
                <div class="col-md-12 ">
                    <h1 class="font-color-blue">{{$mainConfig['fieldJson']['connection-title']}}</h1>
                    <h5 class="font-color-gray">{{$mainConfig['fieldJson']['connection-content']}}</h5>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
            <div class="tab-content">
                <div class="tab-pane active" id="hk">
                    <div class="col-md-12 col-xs-12 contact-feature">
                        <div id="googleMap-hk" class="contact-Map-detail img-responsive"></div>
                    </div>
                    <!-- /.col -->
                    <div class="container">
                        <div class="row">
                            <div class="col-md-7  col-md-offset-3 ">
                                <div class="row contact-feature">
                                    <div class="col-sm-12">
                                        <div class="contact-page-country">
                                            <div class="contact-page-address">
                                                <div class="icon">
                                                    <i class="fa fa-map-marker"></i>
                                                    <a href="#hk" aria-controls="hk" data-toggle="tab"
                                                       >
                                                        <p>{{$mainConfig['fieldJson']['connection-icon-address']}}</p>
                                                    </a>
                                                    <a href="#china" aria-controls="china" data-toggle="tab"
                                                       class="">
                                                       <span> {{$mainConfig['fieldJson']['connection-icon-second-address']}}</span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                                <div class="row">
                                <div class="col-sm-12 col-xs-12">
                                        <div class="icon">
                            
                                            <a
                                                title="company">{{$mainConfig['fieldJson']['connection-company']}}</a>
                                        </div>
                                    </div>
                                    <div class="col-sm-5 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-envelope"></i>
                                            <abbr
                                                title="envelope">{{$mainConfig['fieldJson']['connection-icon-email']}}</abbr>
                                        </div>
                                    </div>
                                    <!--/.col-->
                                    <div class="col-sm-7 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-wechat"></i>
                                            <a href="contact">{{$mainConfig['fieldJson']['connection-icon-weichat']}}</a>
                                        </div>
                                    </div>
                                    <!--/.col-->
                                </div>
                                <div class="row contact-page-icon">
                                    <div class="col-sm-5 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-phone"></i>
                                            <abbr
                                                title="phone">{{$mainConfig['fieldJson']['connection-icon-phone']}}</abbr>
                                        </div>
                                    </div>
                                    <!--/.col-->
                                    <!-- <div class="col-sm-7 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-qq"></i>
                                            <abbr title="QQ">{{$mainConfig['fieldJson']['connection-icon-qq']}}</abbr>
                                        </div>
                                    </div>
                                    <!--/.col--> 
                                </div>
                                <!-- /.row -->
                            </div>
                        </div>
                    </div>
                    <div class="row contact-divider" id="back">
                        <li class="divider"> @include('admin.partials.notification')</li>
                    </div>
                    <div class="row contact-feature text-center">
                        <div class="col-md-6 col-md-offset-3 col-xs-12">
                            <form class="from-horizontal" method="POST" action="{{ URL('connection') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control"
                                               placeholder="名字"
                                               name="name"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control"
                                               placeholder="電話"
                                               name="phone"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control"
                                               placeholder="標題"
                                               name="title"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="email" class="form-control"
                                               placeholder="電郵地址"
                                               name="email"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-xs-12">
                                    <div class="form-group">
                            <textarea type="text" class="form-control"
                                      placeholder="{{$mainConfig['fieldJson']['connection-help']}}" name="content"
                                      required="required"></textarea>
                                    </div>
                                </div>
                                <!--/.col-->
                                <div class="col-lg-12 col-md-12 col-xs-12">
                                    <button type="submit" class="btn btn-default btn-lg " id="contact-button">
                                        {{$mainConfig['fieldJson']['connection-button']}}
                                    </button>
                                </div>
                            </form>
                        </div>
                        <!-- /.col -->

                    </div>
                    <!-- /.row -->
                </div>


                <div class="tab-pane" id="china">
                    <div class="row">
                        <div class="col-md-12 contact-feature">
                            <div id="googleMap-china" class="contact-Map-detail"></div>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6  col-md-offset-3 ">
                                <div class="row contact-feature">
                                    <div class="col-sm-12">
                                        <div class="contact-page-country">
                                            <div class="contact-page-address">
                                                <div class="icon">
                                                    <i class="fa fa-map-marker"></i>
                                                    <a href="#hk" aria-controls="hk" data-toggle="tab"
                                                       >
                                                        <p>{{$mainConfig['fieldJson']['connection-icon-address']}}</p>
                                                    </a>
                                                    <a href="#china" aria-controls="china" data-toggle="tab"
                                                       class="">
                                                       <span> {{$mainConfig['fieldJson']['connection-icon-second-address']}}</span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                                <div class="row">
                                <div class="col-sm-12 col-xs-12">
                                        <div class="center">
                                            <abbr
                                                title="company">{{$mainConfig['fieldJson']['connection-company']}}</abbr>
                                        </div>
                                    </div>
                                    <div class="col-sm-5 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-envelope"></i>
                                            <abbr
                                                title="envelope">{{$mainConfig['fieldJson']['connection-icon-email']}}</abbr>
                                        </div>
                                    </div>
                                    <!--/.col-->
                                    <div class="col-sm-7 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-wechat"></i>
                                            <a href="contact">{{$mainConfig['fieldJson']['connection-icon-weichat']}}</a>
                                        </div>
                                    </div>
                                    <!--/.col-->
                                </div>
                                <div class="row contact-page-icon">
                                    <div class="col-sm-5 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-phone"></i>
                                            <abbr
                                                title="phone">{{$mainConfig['fieldJson']['connection-icon-phone']}}</abbr>
                                        </div>
                                    </div>
                                    <!--/.col-->
                                    <!-- <div class="col-sm-7 col-xs-12">
                                        <div class="icon">
                                            <i class="fa fa-qq"></i>
                                            <abbr title="QQ">{{$mainConfig['fieldJson']['connection-icon-qq']}}</abbr>
                                        </div>
                                    </div>
                                    <!--/.col--> 
                                </div>
                                <!-- /.row -->
                            </div>
                        </div>
                    </div>
                    <div class="row contact-divider" id="back">
                        <li class="divider"> @include('admin.partials.notification')</li>
                    </div>
                    <div class="row contact-feature text-center">
                        <div class="col-md-6 col-md-offset-3 col-xs-12">
                            <form class="from-horizontal" method="POST" action="{{ URL('connection') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control"
                                               placeholder="名字"
                                               name="name"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control"
                                               placeholder="電話"
                                               name="phone"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control"
                                               placeholder="標題"
                                               name="title"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <input type="email" class="form-control"
                                               placeholder="電郵地址"
                                               name="email"
                                               required="required">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-xs-12">
                                    <div class="form-group">
                            <textarea type="text" class="form-control"
                                      placeholder="{{$mainConfig['fieldJson']['connection-help']}}" name="content"
                                      required="required"></textarea>
                                    </div>
                                </div>
                                <!--/.col-->
                                <div class="col-lg-12 col-md-12 col-xs-12">
                                    <button type="submit" class="btn btn-default btn-lg " id="contact-button">
                                        {{$mainConfig['fieldJson']['connection-button']}}
                                    </button>
                                </div>
                            </form>
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>
        </div>
    </div>
    <!-- /.tab-contact -->
</div>
<!-- /.contact-page -->
@endsection
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="/js/gmaps.min.js"></script>
@section('extra-script')


<script type="text/javascript">
    var map;
    $(document).ready(function () {
        map = new GMaps({
            div: '#googleMap-hk',
            lat: 22.312456,
            lng: 114.21932889999994
        });
    });
</script>

<script type="text/javascript">
    var map;
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

        var target = $(e.target).attr("href") // activated tab
        console.log(target);
        if (target === '#china') {
            var map = new GMaps({
                el: '#googleMap-china',
                lat: 22.778698,
                lng: 114.476881
            });
        }
    });

</script>
@endsection