@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 ($ebookcategory->id == $ec->id) active @endif"
            style="border: 1px solid var(--bs-primary); width: fit-content"
            href="{{ route('ebook.byCategory', $ec->id) }}">
            {{ $ec->nama }}
        </a>
        @endforeach
    </div>
    <div class="row">
        @if (count($ebooks) > 0)
        <div class="row">
            @foreach ($ebooks as $e)
            <div class="col-lg-6 mb-3">
              <div class="card product-card" style="height: 320px;">
                <a href="{{ route('ebook.detail', $e->id) }}">
                    <div class="card-body">
                        <div class="produks">
                            <div class="produk-f">
                                <!-- Thumbnail -->
                                <div class="product-thumbnail d-block">
                                    <img class="pic-produk mb-2 rounded" height="500"
                                        src="{{ asset('storage/' . $e->cover) }}" alt="" style="object-fit: cover;">
                                </div>
                            </div>
                            <div class="produk-lt mt-2">
                                <!-- Product Title -->
                                <div class="product-title mb-3" style="height: 30px;">{{ $e->judul }}</div>
                                <!-- Product Price -->
                                <p> {!! substr($e->deskripsi, 0, 50) . '...' !!}</p>
                            </div>
                        </div>
      
                    </div>
                </a>
            </div>
            <a class="mt-3 btn btn-danger w-100" href="{{asset('storage/' . $e->file)}}" target="_blank">Baca ebook</a>

            </div>
             
            @endforeach
          </div>
        @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