@extends('pwa.template.app.main')

@section('app-content')
  {{-- section blog --}}
  <div class="container mt-5 py-2 pb-4">
    <div class="text" style="display: flex; justify-content: space-between">
      <p class="py-2" style="margin: 0; font-weight: bold;color: black">Seluruh Informasi Warga</p>
    </div>
    <div class="row gy-3 mb-4">
    @if (count($laporan) >= 1)
      @foreach ($laporan->take(5) as $l)
          <div class="col-12">
            <!-- Single Vendor -->
            <div class="single-vendor-wrap bg-img p-4 bg-overlay"
              style="background-image: url('{{ asset('storage/' . $l->foto) }}')">
              <p class="vendor-title text-white d-flex justify-content-between">
                <span><b>{{ $l->nama }}</b></span>
                <span style="white-space: nowrap;">{{ date_format(date_create($l->tanggal), 'd M Y') }}</span>
              </p>
              <div class="vendor-info">
                <p class="mb-1 text-white"><i class="fa-solid fa-location-dot me-1"></i>{{ $l->lokasi }}</p>
                <div class="ratings lh-1">
                  <span class="text-white">
                    Pelapor : {{ $l->user->nama }}
                  </span>
                </div>
              </div><a class="btn btn-warning btn-sm mt-3" href="{{ route('list-laporan.detail', $l->id) }}">Lihat
                Informasi</a>
              <!-- Vendor Profile-->
              {{-- <div class="vendor-profile shadow">
                <figure class="m-0"><img src="img/product/dw.png" alt=""></figure>
              </div> --}}
            </div>
          </div>
        @endforeach
    @else
      <div class="alert alert-primary" role="alert">
        Tidak Ada Informasi Terbaru!
      </div>
    @endif
    </div>
  </div>
@endsection