@extends('site.layouts.master')

@section('title'){{ $tag->name.' Phimxhay.org' }}@stop
@section('meta_description'){{ $tag->note }}@stop
@section('meta_image'){{ $tag->image }}@stop

@section('style-libraries')
    <link rel="stylesheet" href="{{ url('css/video-js.css')}}">
    <link rel="stylesheet" href="{{ url('css/select2.min.css')}}">
@stop

@section('styles')
    
@stop

@section('content')

<div id="content" style="min-height: calc(100vh - 320px);" class="mb-50">
    @if(!@$_GET['page'] || $_GET['page'] == 1)
    @if(isset($sliders))
    <section class="list-chanel mt-20 slider-tags">
      <div class="w3-container">
        <div class="swiper-chanel swiper-container" pagination="false" style="position: relative;">
          <div class="swiper-wrapper">
              @foreach($sliders as $live)
                <div class="w3-col m3 s6 swiper-slide">
                  <img class="swiper-gl-image img-video" src="{{ $live->image }}" alt="">
                  <p class="mt-5 title-trim">{{\Str::title(\Str::limit($live->name, 50, '...'))}}</p>
                  <a class="btn-play" href="{{ route('category.play' , @$live->slug ? $live->slug : 1) }}">
                    <i class="fa fa-play"></i>
                  </a>
                  <!-- <div class="bookmart hot">HOT</div> -->
                </div>
              @endforeach
            </div>
            <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </section>
    @endif
    @endif

    @if ($ads_below_movie_box)
      <section>
      <div class="w3-container">
        <div class="w3-col m12">
          <a href="{{@$ads_below_movie_box->link_ads}}" target="_blank">
            <img src="{{url(@$ads_below_movie_box->content)}}" alt="" width="100%">
          </a>
        </div>
      </div>
      </section>
    @endif
    <section class="list-chanel mt-20">
			<div class="w3-container">
				<h3>Tags: {{$tag->name}}</h3>
        <div class="container-dropdown">
          <div class="dropdown text-filter-category" onclick="toggleDropdown(event)">
            <div>
                <p>Bộ lọc: Tất cả <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></p>
            </div>
            <div class="dropdown-content" id="myDropdown">
                <a href="#">Tất cả</a>
                <a href="#">Diễn viên độc thân</a>
                <a href="#">Nhiều nữ diễn viên</a>
            </div>
          </div>
          <div class="dropdown text-filter-category" onclick="toggleDropdownArrange(event)">
            <div>
                <p>Sắp xếp theo: Ngày phát hành <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></p>
            </div>
            <div class="dropdown-content" id="dropdown-content-arrange">
                <a href="#">Ngày phát hành</a>
                <a href="#">Lượt xem hôm nay</a>
                <a href="#">Lượt xem hàng tuần</a>
            </div>
          </div>
        </div>
        <div class="video-chanel" pagination="false" style="position: relative;">
          @include('site.pages.home.items', ['items' => $categoryContents])
				</div>
        <div style="clear: both;"></div>
        {{ $categoryContents->appends(request()->query())->links() }}
			</div>
		</section>

      
</div>

@stop

@section('scripts')
    <script>
      $(function () {
        $(document).ready(function(){
           var swiperChanel = new Swiper('.swiper-chanel', {
            slidesPerView: 2,
            spaceBetween: 5,
            speed: 500,
            // loop: true,
            slidesPerGroup: 3,
            slidesOffsetBefore: 5,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
              breakpoints: {
                  "@0.00": {
                      slidesPerView: 2.5,
                      spaceBetween: 10,
                  },
                  "@0.75": {
                      slidesPerView: 3.5,
                      spaceBetween: 20,
                  },
                  "@1.00": {
                      slidesPerView: 4,
                      spaceBetween: 20,
                  },
                  "@1.50": {
                      slidesPerView: 5.5,
                      spaceBetween: 20,
                  },
              },
          });

           
        });
      });
      function toggleDropdown(event) {
          var dropdownContent = document.querySelector('.dropdown-content');
          dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
          event.stopPropagation();
          document.addEventListener('click', function(event) {
            var dropdown = document.querySelector('.dropdown');
            if (!dropdown.contains(event.target)) {
                var dropdownContent = document.querySelector('.dropdown-content');
                dropdownContent.style.display = 'none';
            }
        });
      }

      function toggleDropdownArrange(event) {
          var dropdownContent = document.querySelector('#dropdown-content-arrange');
          dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
          event.stopPropagation();
          document.addEventListener('click', function(event) {
            var dropdown = document.querySelector('.dropdown');
            if (!dropdown.contains(event.target)) {
                var dropdownContent = document.querySelector('#dropdown-content-arrange');
                dropdownContent.style.display = 'none';
            }
        });
      }
   </script>
@stop