@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">Praktik Baik</h1>
    <div class="d-flex align-items-center justify-content-center flex-column mt-4">
      <div class="w-50">
        <form action="{{ route('good-practices') }}" 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...">
          </div>
        </form>
      </div>
      <div class="w-75">
        <p class="subtitle my-4">
          Belajar dari pengalaman dan hasil pelaksanaan TPB/SDGs dari para aktor pembangunan yang dilaksanakan secara mandiri maupun dalam kerangka kemitraan multi-pihak.
        </p>
        <ul class="nav nav-pills nav-fill gap-2">
          <li class="nav-item">
            <a class="btn rounded-pill py-2 px-3 {{ !$g ? 'btn btn-primary active' : 'btn-outline-secondary' }}" style="width: 95px; height: 42px;" aria-current="page" href="{{ '/good-practices?s='.$q }}">Semua</a>
          </li>
          @foreach($goals as $goal)
            <li class="nav-item">
              <a class="btn rounded-pill py-2 px-3 {{ $g == $goal->id ? 'btn btn-primary active' : 'btn-outline-secondary' }}" style="width: 95px; height: 42px;" href="{{ '/news?s='.$q.'&g='.$goal->id }}">Goal {{ $goal->code }}</a>
            </li>
          @endforeach
        </ul>
      </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">
            <a href="{{ route('good-practices.detail', [$d->id]) }}" class="text-decoration-none"><img src="{{ asset('storage/good-practice/'.$d->image) }}" class="img-thumb-card rounded-4" /></a>
            <div class="card-body p-0 mt-2">
              <a href="{{ route('good-practices.detail', [$d->id]) }}" class="text-decoration-none"><h5 class="card-title">{{ $d->title }}</h5></a>
              <span class="date">{{ date('F d, Y',strtotime($d->published_at)) }}</span>
              <p class="card-text mt-2">{{ substr($d->summary, 0, 95)."..." }}</p>
              <a href="{{ route('good-practices.detail', [$d->id]) }}" class="read">Baca selengkapnya</a>
            </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