@extends('layouts.landing.index')
@vite([
  // 'resources/less/home.less',
  // 'resources/js/test.js'
])
@section('content')
<!-- Navigation Bar -->
@include('layouts.landing.nav')

<!-- Content -->
<div id="practice-details" class="mt-2">
  <div class="container-xl">
    <x-landing-breadcrumbs :breadcrumbs="$breadcrumbs"></x-landing-breadcrumbs>
    <div class="row d-flex justify-content-center">
      <div class="col-12 col-lg-10">
        <img src="{{ asset('storage/digital-library/'.$data->image) }}" class="d-block w-100 rounded-5 object-fit-cover" style="height: 400px;" alt="{{ $data->image }}">
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-12 col-lg-4">
        <div class="card">
          <div class="card-body d-flex flex-column gap-3">
            <a class="btn btn-primary btn-lg" href="{{ route('digital-libraries.download', $data->id) }}"><i class="fas fa-download"></i> Download</a>
            <ul class="list-group">
              <li class="list-group-item d-flex align-items-center fs-5">
                Tanggal
                <span class="badge bg-light-primary text-primary ms-auto">{{ date_format($data->created_at, 'F d, Y') }}</span>
              </li>
              <li class="list-group-item d-flex align-items-center fs-5">
                Ukuran
                <span class="badge bg-light-danger text-primary  ms-auto">{{ number_format(($data->file_size / 1000), 2) }} mb</span>
              </li>
              <li class="list-group-item d-flex align-items-center fs-5">
                Tag
                <span class="ms-auto text-primary">{{ $keyword }}</span>

              </li>
            </ul>
{{--            <span>--}}
{{--              <i class="far fa-calendar-check"></i> {{ date_format($data->created_at, 'F d, Y') }} | {{ $keyword }} | <i class="fas fa-hdd"></i> {{ number_format(($data->file_size / 1000), 2) }} mb--}}
{{--            </span>--}}
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <h1 class="mb-4">{{ $data->name }}</h1>
        <p>{{ $data->description }}</p>
      </div>
    </div>

  </div>
</div>
<div id="news" class="bg-white pb-5">
  <div class="container-xl">
    <h2 class="mt-5 mb-4">Pustaka Digital Lainnya</h2>
      <div class="row g-5">
        @foreach ($libraries as $d)
          <div class="col-12 col-sm-6 col-md-6 col-lg-4">
            <div class="card border-0 p-2 bg-transparent">
              @if($d->type == 3)
                <a href="{{ $d->file }}" class="text-decoration-none" target="_blank"><img src="{{ asset('storage/digital-library/'.$d->image) }}" class="img-thumb-card rounded-4" /></a>
              @else
                <a href="{{ route('digital-libraries.detail', [$d->id]) }}" class="text-decoration-none"><img src="{{ asset('storage/digital-library/'.$d->image) }}" class="img-thumb-card rounded-4" /></a>
              @endif

              <div class="card-body p-0 mt-2">
                @if($d->type == 3)
                  <a href="{{ $d->file }}" class="text-decoration-none" target="_blank"><h5 class="card-title">{{ $d->name }}</h5></a>
                @else
                  <a href="{{ route('digital-libraries.detail', [$d->id]) }}" class="text-decoration-none"><h5 class="card-title">{{ $d->name }}</h5></a>
                @endif

                <span class="date">{{ date_format($d->created_at, 'F d, Y') }} | {{ \App\Models\DigitalLibrary::getType($d->type) }}
                  @if($d->type != 3)
                    | <i class="fas fa-hdd"></i> {{ number_format(($d->file_size / 1000), 2) }} mb</span>
                @endif
                <p class="card-text mt-2">{{ substr($d->description, 0, 95)."..." }}</p>
                @if($d->type == 3)
                  <a href="{{ $d->file }}" class="read" target="_blank">Menuju Video</a>
                @else
                  <a href="{{ route('digital-libraries.detail', [$d->id]) }}" class="read">Baca selengkapnya</a>
                @endif
              </div>
            </div>
          </div>
        @endforeach
      </div>
      <div class="d-flex justify-content-center align-items-center mt-5">
        <div>
          <a href="{{ route('digital-libraries') }}" class="btn btn-primary rounded-pill py-2 px-5">Lihat Lebih Banyak</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Footer -->
@include('layouts.landing.footer')
@endsection