@extends('layouts.master')

@section('css')
    @include('layouts.css')
    <style>

        .modal {
          display: none;
          position: fixed;
          z-index: 99999;
          padding-top: 100px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background: rgba(0,0,0,0.8);
          /* background-color: black; */
          /* opacity: 0.5; */
        }
        /* Modal Content */
        .modal-content {
          position: relative;
          background-color: #fefefe;
          margin: auto;
          padding: 0;
          width: 70%;
          height: 80%;
          /* max-width: 1200px; */
        }
        
        /* The Close Button */
        .close {
          color: white;
          position: absolute;
          top: 10px;
          right: 25px;
          font-size: 35px;
          font-weight: bold;
        }
        
        @media only screen and (max-width: 1024px) {
          .modal-content {
          position: relative;
          background-color: #fefefe;
          margin: auto;
          padding: 0;
          width: 90%;
          /* max-width: 1200px; */
        }
        }
        
        </style>

@endsection

@section('script')
    @include('layouts.script')
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7snxOKBMdhBh1SG_gXem8OMMc1c_Sh1c"
    type="text/javascript"></script>
    {{-- <script src="{{URL::asset('unitegallery/js/jquery-11.0.min.js')}}"></script> --}}
    <script type="text/javascript">
        jQuery(document).ready(function(){
            // openColorBox()
            openModal()
            var main = document.getElementById('main')
            var data = { zoom: 10, center: {lat:13.1246677, lng:101.2027479}}
            var first = new google.maps.Map(main, data)
                new google.maps.Marker({
                    map: first,
                    position:{lat:13.1246677,lng:101.2027479},
                    animation:google.maps.Animation.DROP,
                })
        });

        // function  openColorBox(){
        //     //กำหนดขนาดและหน้าเว็บที่จะแสดงใน popup สามารถใส่เป็นภาพก็ได้นะครับ
        //     // var text_html = `
        //     // <video width="100%" height="100%" controls autoplay="autoplay" loop muted playsinline>
        //     // <source src="${url}images/VDO/vdo-pr.mp4" type="video/mp4">
        //     // <source src="${url}images/VDO/vdo-pr.ogg" type="video/ogg">
        //     // Your browser does not support the video tag.
        //     // </video>`
            
        //     var text_html = `<img src="${url}images/VDO/fair_banner_1.jpg?v=1" width="100%" height="auto" >`
        //     // var text_html = `<img src="${url}images/VDO/S__38944773.jpg?v=1" width="100%" height="auto" >`
        //     setTimeout(function(){ 
        //         $.colorbox({width:"70%",height:"auto",html:text_html}); 
        //      }, 1000);
             
        // }

        function openModal() {
            document.getElementById("myModal").style.display = "block";
        }
        function closeModal() {
            document.getElementById("myModal").style.display = "none";
        }
      

    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-74236059-7"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-74236059-7');
    </script>

@endsection

@section('slider')

<div id="popup"></div>
<script src="https://intranet.spi.co.th/popup/popup.js?v=20251217021206"></script>

<div class="site-block-wrap" >
  
    <div class="owl-carousel with-dots">
      <div class="site-blocks-cover overlay overlay-2" style="background-image: url({{url('images/Archive/VIEW1.jpg')}});" data-aos="fade" id="home-section">


        <div class="container">
          <div class="row align-items-center justify-content-center">
            <div class="col-md-12 mt-lg-5 text-center">
                <h1 class="text-shadow">{{__("messages.headTitle")}}</h1>
                <p class="mb-5 text-shadow">{{__("messages.headTitleSub")}}</p>

            </div>
          </div>
        </div>



      </div>

      <div class="site-blocks-cover overlay overlay-2" style="background-image: url({{url('images/Archive/VIEW2.jpg')}});" data-aos="fade" id="home-section">
        <div class="container">
                <div class="row align-items-center justify-content-center">
                  <div class="col-md-12 mt-lg-5 text-center">
                    <h1 class="text-shadow">{{__("messages.headTitle")}}</h1>
                    <p class="mb-5 text-shadow">{{__("messages.headTitleSub")}}</p>

                  </div>
                </div>
              </div>
      </div>
      <div class="site-blocks-cover overlay overlay-2" style="background-image: url({{url('images/Archive/VIEW3.jpg')}});" data-aos="fade" id="home-section">
        <div class="container">
                <div class="row align-items-center justify-content-center">
                  <div class="col-md-12 mt-lg-5 text-center">
                    <h1 class="text-shadow">{{__("messages.headTitle")}}</h1>
                    <p class="mb-5 text-shadow">{{__("messages.headTitleSub")}}</p>
                  </div>
                </div>
              </div>
      </div>
    </div>
  </div>
@endsection

@section('content')
<div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      {{-- <img src="{{url("images/VDO/banner-sr-36.jpg")}}"  width="100%" height="auto" /> --}}
      {{-- <img src="{{url("images/VDO/S__48021547.jpg")}}"  width="100%" height="auto" /> --}}
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/2yxKI8wDXjM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
 
 {{-- <section class="site-section bg-light" >
    <div class="container">
        <img src="{{url("images/Promotion/Banner-02.jpg?v=2")}}" width="100%" alt="">
    </div>
  </section>  --}}
<section class="site-section bg-light" id="promotion">
    <div class="container">
      <div class="row mb-5">
        <div class="col-12 text-center">
            <h2 class="section-title mb-3">{{__("messages.promotion")}}</h2>
        </div>
      </div>
     
     
        <div class="row ">
           
            {{-- <div class="ccol-md-12 col-lg-12 text-center" data-aos="fade-up" data-aos-delay="100">
                <h3>{{__("messages.title_romotion1")}}</h3>
                <img src="{{url("images/Promotion/S__64094210.jpg?v=1")}}" width="100%" alt="">
            </div> --}}
           
            {{-- <div class="col-md-12 col-lg-12 text-center" data-aos="fade-up" data-aos-delay="100">
                <h3>{{__("messages.title_romotion1")}}</h3>
                <img src="{{url("images/Promotion/S__54919185.jpg?v=2")}}" width="100%" alt="">
            </div> --}}
          </div>
          {{-- <Br> <Br> --}}
            <div class="row ">
                {{-- <div class="ccol-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
                    <h3>{{__("messages.title_romotion5")}}</h3>
                    <img src="{{url("images/Promotion/S__50290697.jpg?v=1")}}" width="100%" alt="">
                </div> --}}
               
                {{-- <div class="col-md-12 col-lg-12 text-center" data-aos="fade-up" data-aos-delay="100">
                    <h3>{{__("messages.title_romotion1")}}</h3>
                    <img src="{{url("images/Promotion/S__54861842.jpg?v=2")}}" width="100%" alt="">
                </div> --}}
              </div>
              {{-- <Br> <Br> --}}

      {{-- <div class="row">

        <div class="col-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_romotion3")}}</h3>
            <img src="{{url("images/Promotion/S__54861842.jpg?v=1")}}" width="100%" alt="">
        </div>
       
        <div class="col-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_romotion4")}}</h3>
            <img src="{{url("images/Promotion/S__54861841.jpg?v=4")}}" width="100%" alt="">
        </div>
      </div> --}}
      <Br> <Br>
      <div class="row ">

        {{-- <div class="col-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_romotion5")}}</h3>
            <img src="{{url("images/Promotion/S__76488709.jpg?v=1")}}" width="100%" alt="">
        </div> --}}
	{{-- <div class="col-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_romotion6")}}</h3>
            <img src="{{url("images/Promotion/S__76488710.jpg?v=1")}}" width="100%" alt="">
        </div> --}}



      
        {{-- <div class="ccol-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_romotion3")}}</h3>
            <img src="{{url("images/Promotion/S__43638790.jpg?v=1")}}" width="100%" alt="">
        </div> --}}
        {{-- <div class="col-md-12 col-lg-12 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_romotion5")}}</h3>
            <img src="{{url("images/Promotion/S__46071840.jpg?v=2")}}" width="100%" alt="">
        </div> --}}
        {{-- <div class="col-md-12 col-lg-12 text-center" data-aos="fade-up" data-aos-delay="100">
            <img src="{{url("images/Promotion/S__46071842.jpg?v=1")}}" width="100%" alt="">
        </div> --}}
      </div>
      <Br> <Br>
      <div class="row justify-content-center">
          <div class="col-md-6 col-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_annoucement")}}</h3>
            <img src="{{url("images/Promotion/S__54919182.jpg?v=4")}}" width="100%" alt="">
        </div>
        <div class="col-6 col-md-6 col-lg-6 text-center" data-aos="fade-up" data-aos-delay="100">
            <h3>{{__("messages.title_romotion3")}}</h3>
            {{-- <img src="{{url("images/Promotion/S__75800623.jpg?v=5")}}" width="100%" alt=""> --}}
            <img src="{{url("images/Promotion/S__89292805.jpg?v=6")}}" width="100%" alt=""> 
            
        </div>
      </div>
 <Br> <Br>
      <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-8 text-center" data-aos="fade-up" data-aos-delay="100">
            {{-- <h3>{{__("messages.title_romotion3")}}</h3> --}}
            {{-- <img src="{{url("images/Promotion/S__75800623.jpg?v=5")}}" width="100%" alt=""> --}}
            {{-- <img src="{{url("images/Promotion/S__89292805.jpg?v=6")}}" width="100%" alt="">  --}}
            
        </div>
      </div>

    </div>
  </section>
    <section class="py-5 bg-pink site-section how-it-works" id="our_service">
      <div class="">
        <div class="row mb-5 justify-content-center">
          <div class="col-md-7 text-center">
            <h2 class="section-title mb-3 text-white">{{ __('messages.our_service') }}</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2 col-6 text-center">
                <a href="{{'ourservice/golf_course'}}">
                    <img src="{{url('images/icon/golf.png')}}" alt="">
                    <h3 class="text-white">{{__("messages.golf_course")}}</h3>
                </a>
          </div>
          <div class="col-md-2 col-6 text-center">
                <a href="{{'ourservice/golf_cart'}}">
                    <img src="{{url('images/icon/cart.png')}}" alt="">
                    <h3 class="text-white">{{__("messages.golf_cart")}}</h3>
                </a>
          </div>
          <div class="col-md-2 col-6  text-center">
                <a href="{{'ourservice/pro_shop'}}">
                    <img src="{{url('images/icon/shop.png')}}" alt="">
                    <h3 class="text-white">{{__("messages.pro_shop")}}</h3>
                </a>
          </div>
          <div class="col-md-2 col-6  text-center">
                <a href="{{'ourservice/restaurant'}}">
                    <img src="{{url('images/icon/restaurant.png')}}" alt="">
                    <h3 class="text-white">{{__("messages.restaurant")}}</h3>
                </a>
          </div>
          <div class="col-md-2 col-6  text-center">
                <a href="{{'ourservice/ofuro'}}">
                    <img src="{{url('images/icon/ofuro.png')}}" alt="">
                    <h3 class="text-white">{{__("messages.ofuro")}}</h3>
                </a>
          </div>
          <div class="col-md-2 col-6  text-center">
                <a href="{{'ourservice/locker'}}">
                    <img src="{{url('images/icon/locker.png')}}" alt="">
                    <h3 class="text-white">{{__("messages.locker")}}</h3>
                </a>
          </div>
        </div>
      </div>
    </section>
    
    <section class=" bg-light bg-image" id="golf_course">
        <div class="container-hole">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-lg-6 " >
                    <img src="{{url('images/LAYOUT/master.png')}}" width="100%">

                        <div class="row" style="padding: 20px">
                            <div class="col-md-12 col-sm-1 col-lg-12 text-center ">
                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/1')}}">
                                        <div > {{ __('messages.hole') }} 1</div>
                                    </a>
                                </div>
                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/2')}}">
                                        <div > {{ __('messages.hole') }} 2</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/3')}}">
                                        <div > {{ __('messages.hole') }} 3</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/4')}}">
                                        <div > {{ __('messages.hole') }} 4</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/5')}}">
                                        <div > {{ __('messages.hole') }} 5</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/6')}}">
                                        <div > {{ __('messages.hole') }} 6</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/7')}}">
                                        <div > {{ __('messages.hole') }} 7</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/8')}}">
                                        <div > {{ __('messages.hole') }} 8</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/9')}}">
                                        <div > {{ __('messages.hole') }} 9</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/10')}}">
                                        <div > {{ __('messages.hole') }} 10</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/11')}}">
                                        <div > {{ __('messages.hole') }} 11</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/12')}}">
                                        <div > {{ __('messages.hole') }} 12</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/13')}}">
                                        <div > {{ __('messages.hole') }} 13</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/14')}}">
                                        <div > {{ __('messages.hole') }} 14</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/15')}}">
                                        <div > {{ __('messages.hole') }} 15</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/16')}}">
                                        <div > {{ __('messages.hole') }} 16</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/17')}}">
                                        <div > {{ __('messages.hole') }} 17</div>
                                    </a>
                                </div>

                                <div class="bt-hole bt-hole-active">
                                    <a href="{{url('course/18')}}">
                                        <div > {{ __('messages.hole') }} 18</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="col-md-12 col-sm-12 col-lg-6 " style="text-align: center">
                    <div class="text-box">
                        <h2 class="section-title mb-3 text-pink">{{ __('messages.golf_course') }}</h2>
                        <p>
                          {{ __('messages.text_about_us') }}
                        </p>
                    </div>
                    <div class="row text-center">
                        <div class="col-md-12 col-sm-12 col-lg-12">
                            <h4 class="text-pink">{{ __('messages.check-in-point') }}</h4>
                        </div>
                    </div>
                    <div class="row text-center">

                        <div class="col-md-4 col-sm-4 col-lg-4">
                            <p><img src="{{url('images/check-in-point/VIEW_1.jpg?v=1')}}" class="img-circle"></p>
                            <p>{{ __('messages.checkInPointHole1') }}</p>
                        </div>
                        <div class="col-md-4 col-sm-4 col-lg-4">
                            <p><img src="{{url('images/check-in-point/VIEW_2.jpg')}}" class="img-circle"></p>
                            <p>{{ __('messages.checkInPointHole5') }}</p>
                        </div>
                        <div class="col-md-4 col-sm-4 col-lg-4">
                            <p><img src="{{url('images/check-in-point/VIEW_3.jpg')}}" class="img-circle"></p>
                            <p>{{ __('messages.checkInPointHole16') }}</p>
                        </div>
                    </div>
                </div>
                {{-- <div class="col-md-2 col-sm-12 col-lg-2 ">
                    <div class="text-center container-check-point">
                        <h4 class="text-pink">{{ __('messages.check-in-point') }}</h4>
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-lg-12">
                                <p><img src="{{url('images/golf_course_view/VIEW_C.jpg')}}" class="img-circle"></p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-12">
                                <p><img src="{{url('images/golf_course_view/VIEW_C.jpg')}}" class="img-circle"></p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                            </div>
                            <div class="col-md-6 col-sm-6 col-lg-12">
                                <p><img src="{{url('images/golf_course_view/VIEW_C.jpg')}}" class="img-circle"></p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                            </div>
                        </div>

                    </div>
                </div> --}}

            </div>
        </div>
    </section>
    {{-- สกอร์การ์ด --}}
  <section class="site-section bg-light" id="score_card">
    <div class="container">
      <div class="row mb-5">
        <div class="col-12 text-center">
            <h2 class="section-title mb-3">{{__("messages.score_card")}}</h2>
        </div>
      </div>
      <div class="row ">
        <div class="ccol-md-12 col-lg-12 text-center" data-aos="fade-up" data-aos-delay="100">
   
            <img src="{{url("images/score_card.jpg?v=1")}}" width="100%" alt="">

        </div>
       
      </div>
     
    </div>
  </section>
   {{--  / สกอร์การ์ด --}}
    <section class="site-section testimonial-wrap" id="gallery">
      <div class="">
        <div class="row mb-5">
          <div class="col-12 text-center">
            <h2 class="section-title mb-3">{{ __('messages.gallery') }}<h2>
          </div>
        </div>
        <div class="row">
            <div class="col-md-12 mb-12">
                <div id="imgs"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 mb-12">
                {{-- <video width="70%" height="70%" controls autoplay="autoplay" loop muted playsinline>
                     <source src="${url}images/VDO/My_Movie.mp4" type="video/mp4">
                        <source src="${url}images/VDO/My_Movie.ogg" type="video/ogg" >
                     Your browser does not support the video tag.
                </video> --}}
            </div>
        </div>
    </section>
    {{-- <section class="site-section " id="about_us">
      <div class="container">

        <div class="row large-gutters">

          <div class="col-lg-6 ml-auto">

            <h2 class="section-title text-center mb-3">{{ __('messages.about_us') }}</h2>
                <p class="text-center">{{ __('messages.text_about_us') }}</p>
          </div>
          <div class="col-lg-6 mb-5 text-center" >
            <img src="{{url('images/LAYOUT/COURSE.png')}}" width="100%" height="auto">
        </div>
        </div>
      </div>
    </section> --}}
    <section class="bg-light" id="contact" >
        <div class="row">
            <div class="col-md-6 mb-6 ">
                {{-- <div id='main' style='width:100%; height:100%;'></div> --}}
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31081.804959754343!2d101.17322208939298!3d13.148163621252094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3102d04594a59c13%3A0xa4acf9e882ed18eb!2sTreasure%20Hill%20Golf%20And%20Country%20Club!5e0!3m2!1sen!2sth!4v1573723406940!5m2!1sen!2sth"
                width="100%" height="650" frameborder="0" class="map-section" allowfullscreen=""></iframe>
            </div>
            <div class="col-md-6 mb-6 site-section " style="padding-right: 10%;padding-left: 10%">
                <h2 class="section-title mb-3 text-pink text-center">{{ __('messages.contact') }}</h2>
                <ul class="list-unstyled">
                    <li><i class="fas fa-map-marker"></i> {{__("messages.address")}}</li>
                    {{-- <li><i class="fa fa-phone" aria-hidden="true"></i>  038-198-399</li> --}}
                    <li><i class="fa fa-mobile" aria-hidden="true"></i> 095-194-9246 , 064-416-2479</li>
                    {{-- <li><i class="fa fa-fax" aria-hidden="true"></i>  038-263-455</li> --}}
                    <li><i class="fa fa-envelope" aria-hidden="true"></i> treasurehill1999@gmail.com</li>
                    <li><i class="fab fa-line"></i> Line ID : <a href="https://lin.ee/9Nr8OPA" target="_blank" >@605VVGAQ </a></li>
                    <li><i class="fab fa-facebook"></i> <a href="https://www.facebook.com/Treasurehillservice/" target="_blank" >treasurehillservice</a></li>
                    <li><i class="icon-instagram"></i> <a href="https://www.instagram.com/treasurehillgolfclub?igsh=MWtsbzNpNXI3dnNweA==" target="_blank" >treasurehillgolfclub</a></li>
                    <li><svg xmlns="http://www.w3.org/2000/svg" style="width:16px;height:auto;color: gray;" viewBox="0 0 448 512">
                        <path d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg> 
                        <a href="https://www.tiktok.com/@tshgolf" target="_blank" >tshgolf</a></li>
                    
                    <li>
                        <img src="{{url("images/QR.jpg?v=1")}}" width="60%" alt="">
                    </li>
                </ul>


            </div>
        </div>
        {{-- <div id='main' style='width:100%; height:600px; '></div> --}}
        {{-- <div class="">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31081.804959754343!2d101.17322208939298!3d13.148163621252094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3102d04594a59c13%3A0xa4acf9e882ed18eb!2sTreasure%20Hill%20Golf%20And%20Country%20Club!5e0!3m2!1sen!2sth!4v1573723406940!5m2!1sen!2sth"
                width="100%" height="650" frameborder="0" class="map-section" allowfullscreen=""></iframe>

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