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

<!-- Content -->
<div id="news" class="pt-4 pb-5 bg-white">
  <div class="container px-0">
    <x-landing-breadcrumbs :breadcrumbs="$breadcrumbs"></x-landing-breadcrumbs>
    <h1 class="text-center fw-700">Pustaka Digital</h1>
    <div class="d-flex align-items-center justify-content-center flex-column mt-4">
      <div class="w-50">
        <form action="{{ route('digital-libraries') }}" method="get">
          {{ csrf_field() }}
          <div class="input-group input-group-lg">
            <span class="input-group-text rounded-start-pill" id="basic-addon1">
              <i class="fa fa-search"></i>
            </span>
            <input name="s" value="{{ $q }}" type="text" class="form-control rounded-end-pill bg-transparent" placeholder="Cari disini...">
            <input type="hidden" name="t" value="{{ $type }}" />
          </div>
        </form>
      </div>
      <div class="w-75">
        <p class="subtitle my-4 text-center">
          Baca berbagai referensi, publikasi dan buku panduan dari berbagai sumber untuk mendukung pelaksanaan TPB/SDGs.
        </p>
        <div class="d-flex justify-content-center w-100">
          <ul class="nav nav-pills gap-2">
            <li class="nav-item">
              <a class="btn rounded-pill py-2 px-3 {{ !$type ? 'btn btn-primary active' : 'btn-outline-secondary' }}" style="width: 95px; height: 42px;" aria-current="page" href="{{ '/digital-libraries?s='.$q }}">Semua</a>
            </li>
            @foreach($types as $typeItem)
              <li class="nav-item">
                <a class="btn rounded-pill py-2 px-3 {{ $type == $typeItem['key'] ? 'btn btn-primary active' : 'btn-outline-secondary' }}" style="height: 42px;" href="{{ '/digital-libraries?s='.$q.'&t='.$typeItem['key'] }}">{{ $typeItem['label'] }}</a>
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
    <div class="row g-5 mt-2">
      @foreach ($data->items() 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 mt-5">
      {{ $data->links() }}
    </div>
  </div>
</div>

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