@extends('pwa.template.app.main')
@section('app-content')
  <div class="container pt-3">
    <div class="row gy-3">
      <div class="col-12">
        <!-- Single Vendor -->
        <div class="single-vendor-wrap bg-img p-4 bg-overlay"
          style="background-image: url('https://images.unsplash.com/photo-1560005046-8fcfa2addf38?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80')">
          <h5 class="vendor-title text-white">Dukung Produk UMKM Desa</h5>
          <div class="vendor-info">
            <p class="mb-1 text-white">Cari kebutuhan sehari - hari menjadi lebih mudah dan cepat.</p>
            <div class="ratings lh-1"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
                class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><span
                class="text-white">Toko Terpercaya</span></div>
          </div><a class="btn btn-warning btn-sm mt-3" href="#">Yuk Belanja Sekarang<i
              class="fa-solid fa-arrow-right-long ms-1"></i></a>

        </div>
      </div>
    </div>
  </div>

  <div class="product-catagories-wrapper p-3">
    <div class="container p-4 rounded" style="background: #9E0E13;">
      <h6 class="text-white font-weight-bold">Pembayaran Layanan Digital</h6>
      <div class="row g-2 rtl-flex-d-row-r">
        <!-- Catagory Card -->
        <div class="col-3">
          <div class="card catagory-card">
            <div class="card-body px-2">
              <a href="{{ route('pdam') }}"><img src="{{ asset('pwa/icons/PDAM.png') }}" alt="" /><span>KP-SPAMS Banyu Langgeng</span></a>
            </div>
          </div>
        </div>
        <!-- Catagory Card -->
        <div class="col-3">
          <div class="card catagory-card"  style="height: 100%">
            <div class="card-body px-2 pb-3">
              <a href="{{ route('layanan-digital.listrik') }}"><img src="{{ asset('pwa/icons/Listrik.png') }}"
                  alt="" /><span>
                  Listrik   </span></a>
            </div>
          </div>
        </div>
        <!-- Catagory Card -->
        <div class="col-3">
          <div class="card catagory-card" style="height: 100%">
            <div class="card-body px-2">
              <a href="{{ route('wifi') }}"><img src="{{ asset('pwa/icons/Wifi.png') }}"
                  alt="" /><span>WIFI</span></a>
            </div>
          </div>
        </div>
        <!-- Catagory Card -->
        <div class="col-3">
          <div class="card catagory-card" style="height: 100%">
            <div class="card-body px-2">
              <a href="{{ route('isipulsa') }}"><img src="{{ asset('pwa/icons/Hape.png') }}" alt="" /><span>Pulsa
                  Hp</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container pt-3 pb-5">
    <form action="{{ route('shop') }}" method="get" class="mb-3" style="position: relative">
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Cari Produk Berdasarkan Nama..."
          aria-label="Recipient's username" aria-describedby="basic-addon2" name="keyword" value="{{ $keyword }}">
        <button class="input-group-text bg-primary" type="submit" id="basic-addon2">
          <i class="fa-solid fa-magnifying-glass text-white"></i>
        </button>
      </div>
    </form>
    <div class="row g-2">
      @if (count($produks) > 0)
        <!-- Product Card -->
        @foreach ($produks as $produk)
          <div class="col-6 col-md-4">
            <x-pwa.produk.card :produk="$produk"></x-pwa.produk.card>
          </div>
        @endforeach
      @else
        <div style="text-align: center">
          <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
          <lottie-player src="https://assets4.lottiefiles.com/datafiles/vhvOcuUkH41HdrL/data.json"
            background="transparent" speed="1" style="width: 300px; height: 300px; margin-inline: auto" loop
            autoplay></lottie-player>
          <p>Produk <b>"{{ $keyword }}"</b> Tidak Ditemukan</p>
          <a href="{{ route('shop') }}">Lihat Semua Produk</a>
        </div>
      @endif
    </div>
  </div>
@endsection