@extends('pwa.template.app.main')
@section('script')
  <script>
    $(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        autoWidth: true,
        margin: 8,
        dots: false,
      });
    });
  </script>
@endsection
@section('head')
  <style>
    .owl-stage {
      display: flex;
    }
  </style>
@endsection
@section('app-content')
  <div class="container pt-4">
    <div class="owl-carousel d-flex mb-3">
      @foreach ($e_categories as $ec)
        <a class="btn btn-outline-primary rounded-pill  @if ($entertainmentcategory->id == $ec->id) active @endif"
          style="border: 1px solid var(--bs-primary); width: fit-content"
          href="{{ route('entertainment.byCategory', $ec->id) }}">
          {{ $ec->nama }}
        </a>
      @endforeach
    </div>
    <div class="row">
      @if (count($entertainments) > 0)
        @foreach ($entertainments as $e)
          <div class="col-12 mb-3">
            <div class="card py-2">
              <div class="card-header bg-white border-0">
                @switch($e->tipe)
                  @case('foto')
                    <img class="mb-2" src="{{ asset('storage/' . $e->file) }}" alt=""
                      style="object-fit: cover; border-radius: 3px; width: 100%;" />
                  @break

                  @case('video')
                    <video class="mb-2" src="{{ asset('storage/' . $e->file) }}" controls
                      style="object-fit: cover; border-radius: 3px; width: 100%;"></video>
                  @break

                  @default
                @endswitch
              </div>
              <div class="card-body py-0">
                <h4 class="mb-1">{{ $e->judul }}</h4>
                <span class="badge text-bg-primary mb-2">{{ $e->kategori }}</span>
                <p> {{ substr($e->deskripsi, 0, 50) . '...' }}</p>
              </div>
              <div class="card-footer d-flex justify-content-end bg-white">
                <a class="btn btn-primary btn-sm" href="{{ route('entertainment.detail', $e->id) }}">
                  Lihat
                </a>
              </div>
            </div>
          </div>
        @endforeach
      @else
        @push('scripts')
          <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        @endpush
        <lottie-player src="https://assets2.lottiefiles.com/packages/lf20_dmw3t0vg.json" background="transparent"
          speed="1" style="width: 100%; height: 100%;" loop autoplay></lottie-player>
      @endif
    </div>
  </div>
@endsection