@extends('layouts.landing.index')
@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">Kemitraan Multi Pihak</h1>
      <div class="d-flex align-items-center justify-content-center flex-column mt-4">
        <div class="w-50">
          <form action="{{ route('kmp') }}" 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 text-center">
            Berbagai Kemitraan Multi Pihak yang dilaksanakan untuk percepatan pencapaian TPB/SDGs
          </p>
        </div>
      </div>
      @if($data)
        <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('kmp.detail', [$d->id]) }}" class="text-decoration-none"><img src="{{ $d->image ? asset('storage/msp/'.$d->image) : 'https://placehold.co/200x200' }}" class="img-thumb-card rounded-4" /></a>
                <div class="card-body p-0 mt-2">
                  <a href="{{ route('kmp.detail', [$d->id]) }}" class="text-decoration-none"><h5 class="card-title">{{ $d->name }}</h5></a>
                  <span class="date">{{ date('F d, Y',strtotime($d->start_date)) }} - {{ date('F d, Y',strtotime($d->end_date)) }}</span>
                  <p class="card-text mt-2">{!! substr($d->description, 0, 95)."..." !!}</p>
                  <a href="{{ route('kmp.detail', [$d->id]) }}" class="read">Lihat Lebih Detail</a>
                </div>
              </div>
            </div>
          @endforeach
        </div>
        <div class="d-flex justify-content-center mt-5">
          {{ $data->links() }}
        </div>
      @endif
    </div>
  </div>

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