@extends('layout.layout')
@section('css')
    <!-- Scripts -->
    <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.css')}}" 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/wongwah/carousel.css')}}" rel="stylesheet">
    <style>
        .navbar{
            background-color: rgba(0,0,0,.2);
        }
        #app{
            padding-bottom: 0;
        }
        .fa-quote-left, .fa-quote-right, .slogan{
            display: inline;
        }
        .fa-quote-left{
            margin-right: 24px;
        }
        .fa-quote-right{
            margin-left: 24px;
        }
        .middle-section:before{
            background-image: url(images/wongwah/area-bg.jpg);
        }
        @media (max-width: 768px) {
            .navbar{
                background-color: #000000;
            }
        }
        @media (max-width: 480px) {
            .fa-quote-left, .fa-quote-right{
                display: none;
            }
        }
    </style>

    <style>
        .top-banner .wrapper.style3 {
                    }
        .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')
<div id="app">
    <section>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li  data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li  data-target="#myCarousel" data-slide-to="1" class=""></li>
                <li  data-target="#myCarousel" data-slide-to="2" class=""></li>
                <li  data-target="#myCarousel" data-slide-to="3" class=""></li>
                <li  data-target="#myCarousel" data-slide-to="4" class=""></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                @foreach($index_carousel as $key =>$val)
                <div class="item">
                    <img src="{{asset('upload/'.$val->img)}}">
                    <div class="carousel-caption">
                        <h3>{{$val->title1}}</h3>
                        <hr style="width: 200px ;  color: white ; margin: 12px auto " >
                        <p>{{$val->title2}}</p>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span  class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span  class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>

    <section class="sloganSection text-center">
        <div class="sloganWrapper">
            <i class="fa fa-quote-left fa-2x" aria-hidden="true"></i><h3 class="slogan">{{$index_slogans->slogan}}</h3><i class="fa fa-quote-right fa-2x" aria-hidden="true"></i>
                    </div>
    </section>

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

            <div class="consistent-header text-center">
                <h2>{{$index_item->title}}</h2>
                <p>{{$index_item->body}}</p>

            </div>

            <div class="row">
                <div class="col-sm-2 col-sm-offset-1 consistent-wrapper">
                    <img src="{{asset('upload/'.$index_item->img1)}}">
                    <h4>{{$index_item->item1}}</h4>
                </div>

                <div class="col-sm-2 consistent-wrapper">
                    <img src="{{asset('upload/'.$index_item->img2)}}">
                    <h4>{{$index_item->item2}}</h4>
                </div>

                <div class="col-sm-2 consistent-wrapper">
                    <img src="{{asset('upload/'.$index_item->img3)}}">
                    <h4>{{$index_item->item3}}</h4>
                </div>

                <div class="col-sm-2 consistent-wrapper">
                    <img src="{{asset('upload/'.$index_item->img4)}}">
                    <h4>{{$index_item->item4}}</h4>
                </div>

                <div class="col-sm-2 consistent-wrapper">
                    <img src="{{asset('upload/'.$index_item->img5)}}">
                    <h4>{{$index_item->item5}}</h4>
                </div>

            </div>

        </div>
    </section>

    <br>

    <!-- 工程實績 -->
    <section>
        <div id="marketing" class="container">
            <h2 class="text-center">工程實績 / Our Portfolio</h2>
                <div class="row">
                    @foreach($case_category as $val)
                    <div class="col-md-4 col-xs-12 case-card slide">
                        <div>
                            <a href="{{asset('Case/'.$val->id)}}" class="case-imglinks">
                                <img class="application-img" src="{{asset('upload/'.$val->img)}}" alt="電子科技業">
                            </a>

                            <header class="color-title">
                                <h3>{{$val->name}}</h3>
                            </header>
                            <p class="subtitle">{{$val->introduction}}</p>
                            <a href="{{asset('Case/'.$val->id)}}" class="button more-about">{{$val->name}}案例</a>
                        </div>
                    </div>
                    @endforeach
                   
                </div>
        </div>
    </section>
    <!-- /工程實績 -->

    <!-- 關於 & 營業項目 -->
    <section class="middle-section">
        <div class="middle-container">
            <div id="main" class="container">
                <div class="about-content">
                    <div class="col-md-6 off-left">
                        <header>
                            <h3 class="section-title">{{$index_about->title}}</h3>
                        </header>
                        <div>
                            <div class="company-image-wrapper">
                                <img src="{{asset('upload/'.$index_about->qrcode_img)}}" width="100%">
                            </div>
                            <br>
                            <p>
                                {{$index_about->body}}
                            </p>
                            <a href="{{asset('About')}}" class="button more-about">更多關於旺華</a>
                        </div>
                    </div>
                    <div class="col-md-6 off-right">
                        <header>
                            <h3 class="section-title">營業項目</h3>
                        </header>
                        <div class="business-item-wrapper">
                            <div class="col-xs-12" style="padding-left:0;">
                                <ul class="list-group ">
                                    @foreach($case_category as $key=> $val)
                                    <li class="col-xs-6"><a class="list-group-item" href="BusinessItem/{{$val->id}}">{{$val->name}}</a></li>
                                    @endforeach
                                </ul>
                            </div>
                           
                            <div class="qrcodes col-xs-12">
                                <h3 class="section-title">掃描網址：</h3>
                                <div>
                                    @include('layout.qrcode')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    <!-- / 關於 & 營業項目 -->
    <!-- 優勢 & 諮詢表單  -->
    <div class="container-fluid bottom-section">
        <div class="row">
            <div class="col-md-6 col-xs-12">
                <header>
                    <h3>我們的優勢</h3>
                    <hr>
                </header>
                <div class="row">
                    <div class="col-xs-12">
                        <div>
                            <ul class="style1">
                                @foreach($index_advantage as $val)
                                <li class="first">

                                    <div class="advantage">
                                        <img src="{{asset('upload/'.$val->img)}}" alt="">
                                    </div>
                                    <div class="advantage ">
                                        <h4 class="advantage-title">{{$val->title}}</h4>
                                        <p>{{$val->body}}</p>
                                    </div>

                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <br>
            </div>
            <div class="col-md-6 col-xs-12 inquiry-wrapper">
                <div id="inquiry" class="pageSec">
                    <h2 class="section-title sec-title">諮詢表單</h2>
                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div id="inquire">
                                <div class="inquire-title">
                                    <h2 style="display:inline;"></h2><span style="display:inline;">(標示<span class="text-red">*</span>為必填欄位)</span>
                                </div>
                                <br>
                                    <fieldset>
                                        <form method="POST" action="{{route('MailSend')}}">
                                        <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                                        <div class="form-group">
                                            <label class="control-label col-md-4" for="name">
                                                <span class="text-red">*</span>
                                                問題類別:&nbsp;
                                            </label>
                                            <div class="col-md-8">
                                                <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-md-4" for="name">
                                                <span class="text-red">*</span>
                                                姓名:&nbsp;
                                            </label>

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

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

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

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

                                        <div class="form-group">
                                            
                                            <label class="control-label col-xs-4 col-md-4">
                                                <span class="text-red">*</span>
                                                驗證碼：
                                            </label>
                                            <div class="col-xs-8 col-md-8">
                                                <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>
                                        @if($errors->has('captcha'))
                                            <div class="col-md-12">
                                                <p class="text-danger text-left"><strong>{{$errors->first('captcha')}}</strong></p>
                                            </div>
                                        @endif
                                        </form>
                                    </fieldset>
                                </form>

                            </div>
                        </div>
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </div>
    <!-- /優勢 & 諮詢表單 -->
</div>
@stop
<!-- Scripts -->
@section('script')
    <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(){
            $(window).scroll(function(){
                var pos = $(window).scrollTop();
                if(pos > 90){
                    $('.navbar').addClass('bg-navbar')
                }
                else{
                    $('.navbar').removeClass('bg-navbar')

                }
            });
        });
        $('.item').first().addClass('active');
    </script>
@stop