@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: 0;
        right: 0;
        display: none;
        -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: 100%;

        z-index: 21;

    }

    .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); */
        background-color:#ec008c;
        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); */
        background-color: #fff;

        margin: auto;

    }
    .hole-all .hole-active a{
        font-size: 16px;
        color: #000;
    }
    @media screen and (max-width: 767px) {
        /* start of medium tablet styles */

    }

    @media screen and (max-width: 479px) {
        /* start of phone styles */
        .slider-hole .box-hole{
            background-color: rgba(00, 00, 00, 0.3);
            width: 100%;
            height: 100%;
            padding-right: 10%;
        }
        .slider-hole .box-hole h2,h1{
            color: #ffffff;
        }

        .slider {
            position: relative;
            height: 170vh;
            width: 100%;
        }
        .hole-all {
            display: inherit;
            position: absolute;
            top: 10%;
            right: 0;
            display: none;
            -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: 100%;

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

            margin: 2px;

        }

    }
    </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">
    <div class="col-12">
        {{-- @php
            dd($files);
        @endphp --}}


        <div id="slider" class="slider">

                @foreach ($files as $item)
                    <div class="slider-item" style="background-image: url({{url('images/gallery/hole'.$id.'/'.$item)}})"></div>
                @endforeach

            <div class="slider-hole" style="display: flex;">
                <div class="box-hole">
                    <h1>HOLE {{$id}} </h1>
                    <h2>Par {{$datahole['par']}} HS {{$datahole['hs']}}</h2>

                    <p><img src="{{url('images/LAYOUT/hole/h'.$id.'.png')}}" alt=""></p>
                    <div class="box-circle">
                        <div class="circle-black"></div>
                        <h2>{{$datahole['b']}}</h2>
                    </div>
                    <div class="box-circle">
                        <div class="circle-blue"></div>
                        <h2>{{$datahole['blu']}}</h2>
                    </div>
                    <div class="box-circle">
                        <div class="circle-white"></div>
                        <h2>{{$datahole['w']}}</h2>
                    </div>
                    <div class="box-circle">
                        <div class="circle-yellow"></div>
                        <h2>{{$datahole['y']}}</h2>
                    </div>
                    <div class="box-circle">
                        <div class="circle-red"></div>
                        <h2>{{$datahole['r']}}</h2>
                    </div>

                    <!-- <p><img src="assets/img/LAYOUT/table/h1.png" alt="" ></p> -->
                    <p><img src="{{url('images/LAYOUT/hole/hole/H'.$id.'.png')}}" height="80%" alt=""></p>

                </div>
            </div>

            <div class="hole-all" style="display: flex;">
                @for ($i = 1; $i <=18; $i++)
                @php
                    $act = $i==$id ? "hole-active" : "hole" ;
                @endphp
                <div class="{{$act}}">
                    <a href="{{url('course/'.$i)}}">HOLE {{$i}}</a>
                </div>
                @endfor

            </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 class="row" style="background-color: #E0E0E0">
    <div class="col-4">
    <img src="{{url('images/LAYOUT/hole/hole/h'.$id.'.png')}}" alt="" width="100%">
    </div>

    <div class="col-7">
        <div class="row" >
            <div class="col-6 " >
                <div class="course1">
                    <img src="{{url('images/LAYOUT/hole/h'.$id.'.png')}}" alt="" width="100%">
                </div>
            </div>
            <div class="col-6 ">
                <div class="course2" >
                    <h1 >HOLE {{$id}}</h1>
                <h5 class="text-pink">{{$datahole}}</h5>
                    <img  src="{{url('images/LAYOUT/table/h'.$id.'.png')}}" alt="" width="70%" height="auto">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12" >

                        <div id="gallery" style="display:none;">

                            <img alt="Preview Image 1"
                            src="{{url('images/gallery/hole1/VIEW C.jpg')}}"
                                data-image="{{url('images/gallery/hole1/VIEW C.jpg')}}"
                                data-description="Preview Image 1 Description">

                           <img alt="Preview Image 2"
                                src="{{url('images/gallery/hole1/VIEW D.jpg')}}"
                                data-image="{{url('images/gallery/hole1/VIEW D.jpg')}}"
                                data-description="Preview Image 2 Description">
                            </div>
                    <p>&nbsp;</p>
            </div>
        </div>
    </div>
    <div class="col-md-1 col-sm-12 col-lg-1 mb-4"  >
        <div class="position-box" >
            @for ($i = 1; $i <=18; $i++)
            @php
                $act = $i==$id ? "bt-hole-active" : "" ;
            @endphp
                <a href="{{url('course/'.$i)}}">
                <div class="bt-hole {{$act}}"> {{$i}}</div>
                </a>
            @endfor
        </div>
    </div>
  </div> --}}
@endsection