@extends("layouts.home")
@section("content")
<div class="flex flex-col items-center gap-2 my-4 mt-4">
  <form action={{"/app/category/{$category->slug}"}} class="w-full px-2 md:max-w-sm join">
    <button class="border border-gray-300 join-item btn btn-sm">
      <i class="fa-solid fa-magnifying-glass"></i>
    </button>
    <input
      type="text"
      name="q"
      class="w-full input input-bordered join-item focus:outline-none focus:border-none input-sm"
      placeholder="Cari Karya Cipta Publisherindo di sini"
      value="{{$searchQuery}}"
    >
    <button
      type="submit"
      class="text-white join-item btn btn-primary btn-sm"
    >
      Cari
    </button>
  </form>

  <div class="mt-8">
    @if (count($events) == 0)
        <p class="px-4 py-2 font-semibold text-center badge h-max badge-outline">Tidak ada acara yang ditemukan</p>
      @else      
        @foreach ($events as $event)
          <a href={{"/{$event->slug}"}}>
            <div class="border-2 card w-[80vw] md:card-side sm:w-96 bg-base-100 ">
              @if (isset($event->cover))                
                <figure>
                  <img
                    src={{$event->cover}}
                    alt={{$event->title}}
                    width="400"
                    class="rounded-lg"
                  />
                </figure>
              @endif
              <div class="card-body p-2 w-full @isset($event->cover) max-w-[21rem] md:max-w-[50%] @endisset flex flex-col justify-between">
                <div class="">
                  <h1 class="overflow-auto font-bold capitalize scrollbar-none whitespace-nowrap text-lg">
                    {{$event->title}}
                  </h1>
                  <div class="flex gap-2 items-center">
                    <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                    <h1 id={{"date{$event->id}"}} class="overflow-auto capitalize scrollbar-none whitespace-nowrap">
                      <script>
                        document.getElementById("date"+{{$event->id}}).innerHTML = new Date(`${{{$event->start_at}}}`).toLocaleDateString("id-ID",{weekday:"short",year:"numeric", month:"short", day:"numeric"});
                      </script>
                    </h1>
                  </div>
                  <div class="flex gap-2 items-center">
                    <i class="fas fa-clock" aria-hidden="true"></i>
                    <h1 id={{"time{$event->id}"}} class="overflow-auto capitalize scrollbar-none whitespace-nowrap">
                      <script>
                        document.getElementById("time"+{{$event->id}}).innerHTML = new Date(`${{{$event->start_at}}}`).toLocaleTimeString("id-ID");
                      </script>
                    </h1>
                  </div>
                  <div class="badge badge-sm badge-neutral badge-outline h-max font-bold">
                    {{$event->user?->institute}}
                  </div>
                </div>
                <div class="flex justify-between items-center">
                  <p id={{"price{$event->id}"}} class="font-bold text-lg">
                    <script>
                      document.getElementById("price"+{{$event->id}}).innerHTML = new Intl.NumberFormat("id-ID", {
                          style: "currency",
                          currency: "IDR",
                          minimumFractionDigits: 0,
                          maximumFractionDigits: 0,
                      }).format({{$event->price}});
                    </script>
                  </p>
                  <button class="btn btn-sm btn-primary text-white">Beli</button>
                </div>
              </div>
            </div>
          </a>            
        @endforeach  
    @endif
  </div>
</div>

@endsection