@extends('site.layouts.master')

@section('title', @$setting['title'])
@section('meta_image', url('phimxhay.jpg'))

@section('style-libraries')

@stop

@section('styles')
    
@stop

@section('content')
  <div id="content" class="mb-50 home">
    @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="swiper-slide item-chanel">
                <img class="swiper-gl-image lazyload" data-src="{{ $live->image }}" alt="{{ $live->name }}">
                <a class="btn-play" href="{{ route('category.play', $live->slug) }}">
                  <i class="fa fa-play"></i>
                </a>
                <p class="text-center mt-10 title-trim">{{ $live->name }}</p>
              </div>
              @endforeach
            </div>
            <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </section>
    @endif

    <section class="mt-20">
			<div class="w3-container">
				<h3>Phim mới</h3>
        <div class="video-chanel is_new" pagination="false" style="position: relative;">
          @include('site.pages.home.items', ['items' => $news])
        </div>
        <h3 class="text-center text-load">
          <a href="javascript:void(0);" class="loadmore" data-cate="is_new">Tải thêm <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></a>
        </h3>
			</div>
		</section>
    @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="mt-20">
      <div class="w3-container">
        <h3>Trending</h3>
        <div class="video-chanel is_trending" pagination="false" style="position: relative;">
          @include('site.pages.home.items', ['items' => $trendings])
        </div>
        <h3 class="text-center text-load">
          <a href="javascript:void(0);" class="loadmore" data-cate="is_trending">Tải thêm <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></a>
        </h3>
      </div>
    </section>
    @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="mt-20">
      <div class="w3-container">
        <h3>Hot</h3>
        <div class="video-chanel is_hot" pagination="false" style="position: relative;">
          @include('site.pages.home.items', ['items' => $hots])
        </div>
        <h3 class="text-center text-load">
          <a href="javascript:void(0);" class="loadmore" data-cate="is_hot">Tải thêm <img src="{{ asset('site/images/agency/Vector.png') }}" alt=""></a>
        </h3>
      </div>
    </section>
  
@stop

@section('scripts')
    <script>
      $(function () {
        var swiperChanel = new Swiper('.swiper-chanel', {
          slidesPerView: 2,
          spaceBetween: 5,
          speed: 500,
          loop: true,
          slidesPerGroup: 1,
          slidesOffsetBefore: 1,
          autoplay: {
            delay: 5000, 
            disableOnInteraction: false, 
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
            breakpoints: {
                "@0.00": {
                    slidesPerView: 2.5,
                    spaceBetween: 10,
                },
                "@0.75": {
                    slidesPerView: 3.5,
                    spaceBetween: 20,
                }
            },
        });

        var loadmore  = true;

        $('.loadmore').click(function() {
          if(loadmore){
            loadmore = false;

            var page = $(this).attr('page');
            if(page == undefined) page = 1;
            page = parseInt(page) + 1;
            $(this).attr('page', page);
            var cate = $(this).attr('data-cate');
            var url = "{{ route('category.post') }}";
            
            $.ajax({
              url: url, // Route được định nghĩa ở bước 1
              type: 'POST',
              dataType: "json",
              data: {
                  _token: '{{ csrf_token() }}',
                  page : page,
                  cate : cate,
              },
              success: function(response) {
                  $('.'+cate).append(response.html);
                  loadmore = true;
              },
              error: function(xhr) {
                  console.log('Error:', xhr.responseText);
                  loadmore = true;
              }
            });
          }
            

          return false;
        }); 
      });
    
   </script>
@stop