@extends('layouts.master')
@section('slider')
@include('layouts.header')

@endsection
@section('css')
    @include('layouts.css')
    <link rel="stylesheet" href="{{URL::asset('css/style-slider.css')}}">
    <style>
        .slider-hole {
        position: absolute;
        text-align: center;
        top: 0%;
        left: 0;
        display: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        /* width: auto; */
        height: 100%;

        color: rgba(255, 255, 255, 1);
        z-index: 20;
    }

    .slider-hole .box-hole {
        background-color: rgba(14, 13, 13, 0.7);
        width: 20%;
        height: 100%;
        padding-top: 10px;
    }

    .slider-hole .box-hole img {

        width: 100%;
    }
    .hole-all {
        display: inherit;
        position: absolute;
        top: 10%;
        left:30%;
        right: 30%;
        /* display: none; */
        padding: 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        background-color: rgba(14, 13, 13, 0.7);
        /* width: 50%; */
        height:auto;
        border-radius: 5px;
        z-index: 20;
        /* display: table-cell;
vertical-align: middle */
    }

    .hole-all .hole {
        height: auto;
        /* ความสูงปรับให้เป็นออโต้ */
        width: auto;
        /* ความสูงปรับให้เป็นออโต้ */
        border: 3px solid #fff;
        /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
        border-radius: 4px;
        padding: 10px;

        /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* เงาของรูป */
        text-align: center;
        background-color: rgba(0, 0, 0, 0.7);
        margin: auto;

    }
    .hole-all .hole :hover{
        /* border: 3px solid #000; */
        /* background-color: rgba(255, 255, 255, 0.9); */
    }

    .hole-all .hole a{
        font-size: 16px;
        color:#f1f1f1;
    }


    .box-circle {
        text-align: center;
        float: left;
    }

    .circle-black {
        /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
        height: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        width: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        border: 3px solid #fff;
        /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
        border-radius: 50%;
        /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* เงาของรูป */
        background-color: black;
        margin: 10px;

    }

    .circle-blue {
        /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
        height: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        width: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        border: 3px solid #fff;
        /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
        border-radius: 50%;
        /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* เงาของรูป */
        background-color: blue;
        margin: 10px;

    }

    .circle-white {
        /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
        height: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        width: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        border: 3px solid #fff;
        /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
        border-radius: 50%;
        /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* เงาของรูป */
        background-color: white;
        margin: 10px;

    }

    .circle-yellow {
        /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
        height: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        width: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        border: 3px solid #fff;
        /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
        border-radius: 50%;
        /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* เงาของรูป */
        background-color: yellow;
        margin: 10px;

    }

    .circle-red {
        /* ชื่อคลาสต้องตรงกับ <img class="circle"... */
        height: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        width: 50px;
        /* ความสูงปรับให้เป็นออโต้ */
        border: 3px solid #fff;
        /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
        border-radius: 50%;
        /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* เงาของรูป */
        background-color: red;
        margin: 10px;

    }
    .hole-active{
        height: auto;
        /* ความสูงปรับให้เป็นออโต้ */
        width: auto;
        /* ความสูงปรับให้เป็นออโต้ */
        border: 3px solid #ec008c;
        /* เส้นขอบขนาด 3px solid: เส้น #fff:โค้ดสีขาว */
        border-radius: 4px;
        padding: 10px;
        /* ปรับเป็น 50% คือความโค้งของเส้นขอบ*/
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        /* เงาของรูป */
        text-align: center;
        background-color: rgba(0, 0, 0, 0.7);
        margin: auto;

    }
    .hole-all .hole-active a{
        font-size: 16px;
        color:#f1f1f1;
    }
    @media screen and (max-width: 479px) {
        .hole-all{

            display: inherit;
            position: absolute;
            top: 5%;
            left:20%;
            right: 1%;
            /* display: none; */
            padding: 10px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            background-color: rgba(14, 13, 13, 0.7);
            /* width: 50%; */
            height:auto;
            border-radius: 5px;
            z-index: 20;

        }
        /* .hole-all h1{
            font-size: 16px;
        } */
        .ourServiceMenu {
            /* display: flex; */
            align-items: center;
            justify-content: center;
            height: 50%;
            width: 50px;
            position: absolute;
            top: 20%;
            bottom: 30%;
            left: 0;
            z-index: 1;
            background-color: #ec008c;
        }
        .ourServiceMenu img {
            width: 25px ;
        }
        .ourServiceMenu a {
            width: 32px ;
        }
    </style>

@endsection
@section('script')
    @include('layouts.script')
    <script src="{{URL::asset('js/main-slider.js')}}"></script>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-36251023-1']);
        _gaq.push(['_setDomainName', 'jqueryscript.net']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +
                '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>

@endsection

@section('content')

{{-- <div class="row" style="background-color: #E0E0E0">

    <div class="col-md-12" > --}}
 <div class="row" >

    <div class="col-12">
        <div id="slider" class="slider">


                @if ($service == "golf_course")
                    <div class="slider-item active" style="background-image: url({{url('images/slider/'.$service.'.jpg')}})"></div>
                @elseif($service == "golf_cart")
                    <div class="slider-item active" style="background-image: url({{url('images/slider/'.$service.'1.jpg')}})"></div>
                @elseif($service == "pro_shop")
                    <div class="slider-item active" style="background-image: url({{url('images/slider/'.$service.'1.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'2.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'3.jpg')}})"></div>
                @elseif($service == "restaurant")
                    <div class="slider-item active" style="background-image: url({{url('images/slider/'.$service.'1.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'2.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'3.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'4.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'5.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'6.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'7.jpg')}})"></div>
                @elseif($service == "ofuro")
                    <div class="slider-item active" style="background-image: url({{url('images/slider/'.$service.'1.jpg')}})"></div>
                @elseif($service == "locker")
                    <div class="slider-item active" style="background-image: url({{url('images/slider/'.$service.'1.jpg')}})"></div>
                    <div class="slider-item " style="background-image: url({{url('images/slider/'.$service.'2.jpg')}})"></div>
                @endif



            {{-- <div class="slider-item" style="background-image: url({{url('images/golf_course_view/VIEW_D.jpg')}})"></div> --}}
            <!-- <div class="slider-item" style="background-image: url(assets/img/golf_course_view/VIEW_L3.jpg)"></div> -->

            <div class="slider-hole" style="display: flex;">
                    <div class="ourServiceMenu">
                            {{-- <a href="{{url('ourservice/golf_course')}}">
                                <img src="{{url('images/icon/golf.png')}}" alt="">
                                <h3 class="text-white">{{__("messages.golf_course")}}</h3>
                            </a> --}}
                            <div class="ourServiceMenu-square">
                                <a href="{{url('ourservice/golf_cart')}}">
                                    <img src="{{url('images/icon/cart.png')}}" alt="">
                                    <h3 class="text-white">{{__("messages.golf_cart")}}</h3>
                                </a>
                                <a href="{{url('ourservice/pro_shop')}}">
                                    <img src="{{url('images/icon/shop.png')}}" alt="">
                                    <h3 class="text-white">{{__("messages.pro_shop")}}</h3>
                                </a>
                                <a href="{{url('ourservice/restaurant')}}">
                                    <img src="{{url('images/icon/restaurant.png')}}" alt="">
                                    <h3 class="text-white">{{__("messages.restaurant")}}</h3>
                                </a>
                                <a href="{{url('ourservice/ofuro')}}">
                                    <img src="{{url('images/icon/ofuro.png')}}" alt="">
                                    <h3 class="text-white">{{__("messages.ofuro")}}</h3>
                                </a>
                                <a href="{{url('ourservice/locker')}}">
                                    <img src="{{url('images/icon/locker.png')}}" alt="">
                                    <h3 class="text-white">{{__("messages.locker")}}</h3>
                                </a>
                            </div>




                    </div>
            </div>

            <div class="hole-all" style="display: flex;">
                    @if ($service == "golf_course")
                    <div class="">
                        <div class="text-golf-course text-center text-white">
                            <h1>{{__("messages.golf_course")}}</h1>
                            <p>{{__("messages.course_detail")}}</p>
                        </div>
                    </div>
                    @elseif($service == "golf_cart")
                    <div class="">
                        <div class="text-golf-cart text-white">
                            <h1>{{__("messages.golf_cart")}}</h1>
                            <p>{{__("messages.golf_cart_detail")}}</p>
                        </div>
                    </div>
                    @elseif($service == "pro_shop")
                    <div class="">
                        <div class="text-pro-shop">
                            <div class="text-pro-shop-box text-white">
                            <h1>{{__("messages.pro_shop")}}</h1>
                            <p>{{__("messages.pro_shop_detail")}}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($service == "restaurant")
                    {{-- <div >
                        <div class="text-restaurant text-white">
                            <h1>{{__("messages.restaurant")}}</h1>
                            <p>{{__("messages.restaurant_detail")}}</p>
                        </div>                                                                                                                                                                                                 0-
                    </div> --}}
                    <div class="">
                        <div class="text-pro-shop">
                            <div class="text-restaurant text-white">
                            <h1>{{__("messages.restaurant")}}</h1>
                            <p>{{__("messages.restaurant_detail")}}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($service == "ofuro")
                    <div class="">
                        <div class="text-ofuro text-white">
                            <h1>{{__("messages.ofuro")}}</h1>
                            <p>{{__("messages.ofuro_detail")}}</p>
                        </div>
                    </div>
                    @elseif($service == "locker")
                    <div class="">
                        <div class="text-locker text-white">
                            <h1>{{__("messages.locker")}}</h1>
                            <p>{{__("messages.locker_detail")}}</p>
                        </div>
                    </div>
                    @endif
            </div>

            <div class="slider-panel">
                {{-- <div class="slider-panel__navigation">
                    <i class="fas fa-circle indicator active" data-slide-to="0"></i>
                    <i class="far fa-circle indicator" data-slide-to="1"></i>
                    <i class="far fa-circle indicator" data-slide-to="2"></i>
                </div> --}}
                <div class="slider-panel__controls">
                    <i style="font-size: 52px" class="far fa-arrow-alt-circle-left" id="previous"></i>
                    <i style="font-size: 52px" class="far fa-pause-circle" id="pause-play"></i>
                    <i style="font-size: 52px" class="far fa-arrow-alt-circle-right" id="next"></i>
                </div>

            </div>
        </div>





 </div>


 </div>


    {{-- </div>
  </div> --}}
@endsection