@extends('layout.layout')
@section('css')
    <link href="{{asset('css/components.css')}}" rel="stylesheet">
    <link href="{{asset('css/font-awesome.min.css')}}" rel="stylesheet">
    <link href="{{asset('css/app.css')}}" rel="stylesheet">
    <link href="{{asset('css/animate.css')}}" rel="stylesheet">

    
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->

    <!-- Fonts -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="bookmark" href="favicon.ico">

    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700' rel='stylesheet' type='text/css'>

    <!-- Styles -->
    <link href="{{asset('css/app.cs')}}s" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('css/wongwah/header.css')}}" />
    <link rel="stylesheet" href="{{asset('css/wongwah/index.css')}}" />
    <link rel="stylesheet" href="{{asset('css/wongwah/footer.css')}}" />

    
    <link href="{{asset('css/docs.min.css')}}" rel="stylesheet">
    <link href="{{asset('css/wongwah/pageLayout.css')}}" rel="stylesheet">
    <link href="{{asset('css/wongwah/contactus.css')}}" rel="stylesheet">
    <link href="{{asset('css/wongwah/inquiry.css')}}" rel="stylesheet">

    <style>
        .top-banner .wrapper.style3 {
            background-image: url('{{asset('upload/'.$banner->img)}}');
        }
        .color-title, a.photo-more{
            color: #3776c6;
        }
        .section-title{
            color: #FFFFFF;
        }
        .navbar-default .navbar-nav > li:not(.open):hover:before{
            border-bottom: 10px solid #3776c6;
        }
        .button, .nav-id li.active a{
            background: #3776c6;
        }
        .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
            background-color: #3776c6;
        }
        #footer h3, #footer a:hover, #footer a:focus{
            color: white;
        }
    </style>
@stop
@section('content')
<!-- 首頁navber -->
@include('layout.nav')
<!-- 首頁navber -->
<div id="app">
    
    <section class="top-banner">
        <div class="pageBanner wrapper style3">
            <div class="inner">
                <header class="align-center">
                    <h3 class="slogan">{{$banner->title1}}</h3>
                    <h1 class="slogan-c">{{$banner->title2}}</h1>
                </header>
            </div>
        </div>
    </section>

    <section class="inquirySec">
        <div class="container">

            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{asset('/')}}"><i class="glyphicon glyphicon-home"></i></a></li>
                <li class="breadcrumb-item active">聯絡我們</li>
            </ol>

            
            <div class="pageSec">
                <h2 class="sec-title">聯絡資訊</h2>
                <br>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <div class="inquirypic-wrapper">
                            <img src="{{asset('upload/'.$contact_config->img)}}" width="100%">
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <table id="contact-table" class="table table-responsive" style="width:100%">
                            <tbody>
                                <tr>
                                    <td><i class="fa fa-copyright"></i></td>
                                    <td>公司名稱</td>
                                    <td>{{$contact_config->company}}</td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-phone"></i></td>
                                    <td>聯絡電話</td>
                                    <td><a href="tel:{{$contact_config->tel}}">{{$contact_config->tel}}</a></td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-mobile"></i></td>
                                    <td>行動電話</td>
                                    <td><a href="tel:{{$contact_config->mobile_phone}}">{{$contact_config->mobile_phone}}</a></td>
                                </tr>
                                 <tr>
                                    <td><i class="fa fa-fax"></i></td>
                                    <td>傳真</td>
                                    <td><a href="tel:{{$contact_config->fax}}">{{$contact_config->fax}}</a></td>
                                </tr>
                                {{--
                                <tr>
                                    <td><i class="fa fa-map-marker"></i></td>
                                    <td>營業地址</td>
                                    <td>{{$contact_config->address}}</td>
                                </tr>
                                --}}
                                <tr>
                                    <td><i class="fa fa-envelope"></i></td>
                                    <td>電子郵件信箱</td>
                                    <td><a href="mailto:{{$contact_config->mail}}">{{$contact_config->mail}}</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <br>

            
            <div id="inquiry" class="pageSec">
                <h2 class="sec-title">諮詢表單</h2>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="jumbotron">
                            <h1>歡迎!</h1>
                            <p>旺華工程股份有限公司歡迎您有任何疑問或寶貴意見，可透過本諮詢表單提出您的想法或意見，我們將會盡快回覆您的需求，謝謝您的指教!</p>
                            <p>Welcomes you with any questions or valuable comments. You can submit your ideas or comments through this enquiry form. We will reply your request as soon as possible. Thank you for your advice!</p>
                        </div>
                                                <div id="inquire">
                            <div class="inquire-title">
                                <h2 style="display:inline;"></h2><span style="display:inline;">(標示<span class="text-red">*</span>為必填欄位)</span>
                            </div>
                            <br>                                                                                                                    <form id="inquire-form" class="form-horizontal" role="form" action="{{route('MailSend')}}" method="POST">
                                <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                <fieldset>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="name">
                                            <span class="text-red">*</span>
                                            問題類別:&nbsp;
                                        </label>
                                        <div class="col-sm-6">
                                            <input list="faqtype" class="form-control" name="faqType" value="" required>
                                            <datalist id="faqtype">
                                                <option value="提供意見">
                                                <option value="工程報價">
                                                <option value="營業項目與服務範圍">
                                                <option value="工程進度">
                                                <option value="其他">
                                            </datalist>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="name">
                                            <span class="text-red">*</span>
                                            姓名:&nbsp;
                                        </label>

                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="name" name="name" value="" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="telephone">聯絡電話:&nbsp;</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="telephone" name="telephone" value="">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="email">
                                            <span class="text-red">*</span>
                                            E-mail:&nbsp;
                                        </label>
                                        <div class="col-sm-6">
                                            <input type="email" class="form-control" id="email" name="email" value="" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="comments">
                                            <span class="text-red">*</span>
                                            意見或詢問內容:&nbsp;
                                        </label>
                                        <div class="col-sm-8">
                                            <textarea class="form-control" rows="8" id="comments" name="comments" required></textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        
                                        <label class="control-label col-md-2">
                                            <span class="text-red">*</span>
                                            驗證碼：
                                        </label>
                                        <div class="col-md-6">
                                           <img src="{{captcha_src()}}"  alt="captcha" class="captcha-img"  style="cursor: pointer" onclick="this.src='{{captcha_src()}}'+Math.random()">
                                                <input id="captcha" name="captcha" type="captcha" class="form-control  {{$errors->has('captcha')?'parsley-error':''}}" autocomplete="off" placeholder="請輸入驗證碼" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-2">&nbsp;</label>
                                        <div class="col-sm-8 text-right">
                                            <button id="inquire-btn" class="btn btn-default btn-dark" onclick="sendMyForm()">送出表單</button>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>

                        </div>
                    </div>
                </div>
                <br>
            </div>
        </div>
    </section>

</div>

@stop
{{--
@section('script')
        <!-- Scripts -->
    <script src="{{asset('js/components.js')}}"></script>
    <script src="{{asset('js/ie/html5shiv.js')}}"> </script>
    <script src="{{asset('js/ie/respond.min.js')}}"></script>
    <script src="{{asset('js/jquery.mousewheel.min.js')}}"></script>
    <script src="{{asset('js/jquery.poptrox.min.js')}}"></script>
    <script src="{{asset('js/jquery.scrolly.min.js')}}"></script>
    <script src="{{asset('js/jquery.scrollex.min.js')}}"></script>
    <script src="{{asset('js/jquery.lettering.js')}}"></script>
    <script src="{{asset('js/jquery.textillate.js')}}"></script>

    <script src="{{asset('js/smoothScroll.js')}}"></script>

    <script>

        $(document).ready(function(){

            $(".home").click(function(){
                $("html, body").animate({scrollTop:0}, 500);
            });

            $(window).scroll(function () {

                $(".slideanim").each(function(){
                    var pos = $(this).offset().top;

                    var winTop = $(window).scrollTop();
                    if (pos < winTop + 600) {
                        $(this).addClass("slide");
                    }
                });
            })

        });

        function myMap() {
            var mapx = parseFloat('24.0628792');
            var mapy = parseFloat('120.6726313');
            var myCenter = new google.maps.LatLng(mapx, mapy);
            var mapProp = {center:myCenter, zoom:18, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var marker = new google.maps.Marker({position:myCenter});
            marker.setMap(map);
        }

        function theBodyLoad(){
            if($('.slogan').length > 0){
                $('.slogan').textillate({
                    in: { effect: 'rollIn' },
                    loop: true,
                    out: {
                        effect: 'fadeOut',
                        delayScale: 1.5,
                        delay: 5,
                        sync: false,
                        shuffle: true,
                    }
                });
            }
            if($('.slogan-c').length > 0){
                $('.slogan-c').textillate({
                    in: { effect: 'rollIn' },
                    loop: true,
                    out: {
                        effect: 'fadeOut',
                        delayScale: 1.5,
                        delay: 5,
                        sync: false,
                        shuffle: true,
                    }
                });
            }
        }



    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUBHlB3qV9ODgcVGyKyESZpk_hZcCWhzk&amp;callback=myMap"></script>


    <script>

        $(document).ready(function(){

        });

        $(function () {
            if ( $( "[name='anchor']" ).length ) {
                window.location = '#' + $( "[name='anchor']" ).val();
            }
        });

        function sendMyForm(){
            return false;
            $('#inquire-form').submit();
        }

        $('#captcha-refresh').on('click', function () {
            captcha_create($('img.captcha-img'));
        });

        function captcha_create(_captcha){
            var config = $(_captcha).data('refresh-config');
            $.ajax({
                method: 'GET',
                url: '/get_captcha/' + config,
            }).done(function (response) {
                $(_captcha).prop('src', response);
            });
        }
    </script>
@stop
--}}