@extends('layouts.khtc')
@section('title')
    {{$page->name}} Course
@endsection

@section('seo_meta')
    <meta name="description" content="{{$page->meta_description}}">
    <meta name="keywords" content="{{$page->meta_keywords}}">
    <link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.1/mdb.min.css"
  rel="stylesheet"
/>
<style>
    .youtube-icon {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
 transform: translate(-50%, -50%);
}
.video-detail{
    overflow:hidden;

}
.video-description{
    height:100%;
}
</style>
  
@endsection
@section('breadcrumb')
    <!-- Start Page Title Area -->
    <div style="background-image:url('@if($page->banner){{asset('/uploads/'.$page->banner)}} @else {{asset('/assets/img/banner.png')}} @endif')" class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li> {{ $page->title }}</li>
                </ul>
                <h2> {{ $page->title }}</h2>
            </div>
        </div>
    </div>
    <!-- End Page Title Area -->
@endsection

@section('main')
    <!-- Start Team Area -->
    <section class="team-area ptb-100">
        <div class="container ">
            <div class="section-title">
\                <h2>{{$page->sub_heading}}</h2>
                {!! $page->body !!}
            </div>
            @foreach($videos as $k=>$v)
            <div class="row mb-4">
                <div class="col-md-8" >
                    <div class=" video-detail rounded">
                         <div
                          class="bg-image hover-overlay ripple shadow-1-strong rounded"
                          data-ripple-color="light"
                        >
                          <iframe class="w-100" height="450px"
                      src="https://www.youtube.com/embed/{{$v->watch_key}}"
                      title="{{$v->title}}"
                      allowfullscreen
                    ></iframe>
                    
                          <a href="#!" data-mdb-toggle="modal" data-mdb-target="#videoModal{{$k+1}}">
                            <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
                          </a>
                        </div>
                        <div class="youtube-icon">
                             <a href="#!" data-mdb-toggle="modal" data-mdb-target="#videoModal{{$k+1}}">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="red" class="bi bi-youtube" viewBox="0 0 16 16">
                                      <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
                                    </svg>
                          </a>
       
                        </div>
                        
                        </div>
                </div>
              
                <div class="col-md-4 ">
                    <div class="video-description py-5 px-3 bg-light rounded">
                      
                            <h5 class="card-title">{{$v->title}}</h5>
                            <p class="card-text">{{$v->description}}</p>
                            
                         
                      
                        
                       
                    </div>
                </div>
              
            </div>
             @endforeach

         

        </div>

        <div id="particles-js-circle-bubble-3"></div>
    </section>
    <!-- Modal gallery -->
       
          <!-- Section: Images -->
        
          @foreach($videos as $k=>$v)
          <!-- Section: Modals -->
          <section class="">
            <!-- Modal 1 -->
            <div
              class="modal fade"
              id="videoModal{{$k+1}}"
              tabindex="-1"
              aria-labelledby="exampleModal1Label"
              aria-hidden="true"
            >
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="ratio ratio-16x9">
                    <iframe
                      src="https://www.youtube.com/embed/{{$v->watch_key}}"
                      title="{{$v->title}}"
                      allowfullscreen
                    ></iframe>
                  </div>
        
                  <div class="text-center py-3">
                    <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
            @endforeach
         
          </section>
          <!-- Section: Modals -->
        </section>
        <!-- Modal gallery -->

    <!-- End Team Area -->
@endsection
@section('script')
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.0.1/mdb.min.js"
></script>

@endsection