@extends("layouts.home")

@section("content")
<div class="flex flex-col gap-4 w-full max-w-4xl 2xl:max-w-7xl mx-auto">
  <div class="flex items-center justify-between w-full px-4 sm:px-0">
    <p class="text-xl font-bold capitalize">Kategori</p>
    <div class="flex gap-2">
      <button onclick="handleHorizontalScroll('category', -10)" class='text-lg btn btn-neutral btn-circle btn-sm'><i class='fas fa-arrow-left'></i></button>
      <button onclick="handleHorizontalScroll('category', 10)" class='text-lg btn btn-neutral btn-circle btn-sm'><i class='fas fa-arrow-right'></i></button>
    </div>
  </div>
  <div class="box-content flex flex-col items-start justify-center w-full gap-4 py-4 bg-white rounded-xl">
    @if (count($categories) == 0)
      <p class="px-4 py-2 font-semibold text-center badge h-max badge-outline">Belum ada kategori yang ditambahkan</p>
    @else
    <div class="w-full">
      <div id="category" class="grid grid-flow-col grid-rows-1 max-w-[92vw] lg:max-w-4xl 2xl:max-w-7xl gap-4 overflow-auto scrollbar-none px-4 justify-start">
        @foreach ($categories as $category)
          <a href={{"/app/category/{$category['slug']}"}}>
            <div class="border-2 card sm:w-48 bg-base-100 hover:bg-gray-700 hover:text-gray-100">
              @if (isset($category['logo']))                
                <figure>
                  <img
                    src={{$category['logo']}}
                    alt={{$category['title']}}
                    class="rounded-lg"
                  />
                </figure>
              @endif
              <div class="text-center">
                <h1 class="overflow-auto text-lg font-bold capitalize scrollbar-none ">
                  {{$category['title']}}
                </h1>
              </div>
            </div>
          </a>        
        @endforeach
      </div>
    </div>
    @endif
  </div>
</div>
<div class="flex flex-col gap-4 w-full max-w-4xl 2xl:max-w-7xl mx-auto">
  <div class="flex items-center justify-between w-full px-4 sm:px-0">
    <p class="text-xl font-bold capitalize">Rekomendasi</p>
    <div class="flex gap-2">
      <button onclick="handleHorizontalScroll('recomendation', -10)" class='text-lg btn btn-neutral btn-circle btn-sm'><i class='fas fa-arrow-left'></i></button>
      <button onclick="handleHorizontalScroll('recomendation', 10)" class='text-lg btn btn-neutral btn-circle btn-sm'><i class='fas fa-arrow-right'></i></button>
    </div>
  </div>
  <div class="box-content flex flex-col items-start justify-center w-full gap-4 py-4 bg-white rounded-xl">
    @if (count($recomendations) == 0)
      <p class="px-4 py-2 font-semibold text-center badge h-max badge-outline">Belum ada acara yang ditambahkan</p>
    @else
    <div class="w-full">
      <div id="recomendation" class="grid grid-flow-col grid-rows-1 max-w-[92vw] lg:max-w-4xl 2xl:max-w-7xl gap-4 overflow-auto scrollbar-none px-4 justify-start">
        @foreach ($recomendations 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={{"recomendation_date{$event->id}"}} class="overflow-auto capitalize scrollbar-none whitespace-nowrap">
                    <script>
                      document.getElementById("recomendation_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={{"recomendation_time{$event->id}"}} class="overflow-auto capitalize scrollbar-none whitespace-nowrap">
                    <script>
                      document.getElementById("recomendation_time"+{{$event->id}}).innerHTML = new Date(`${{{$event->start_at}}}`).toLocaleTimeString("id-ID").substring(0,5);
                    </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
      </div>
    </div>
    @endif
  </div>
</div>
<div class="flex flex-col gap-4 w-full max-w-4xl 2xl:max-w-7xl mx-auto">
  <div class="flex items-center justify-between w-full px-4 sm:px-0">
    <p class="text-xl font-bold capitalize">Acara Terdekat</p>
    <a href="/app/explore" class="btn btn-sm btn-neutral w-max">Lainnya</a>
  </div>
  <div class="box-content flex flex-col items-start justify-center w-full gap-4 py-4 bg-white rounded-xl">
    @if (count($events) == 0)
      <p class="px-4 py-2 font-semibold text-center badge h-max badge-outline">Belum ada acara yang ditambahkan</p>
    @else
    <div id="event" class="flex flex-wrap max-w-[92vw] lg:max-w-4xl 2xl:max-w-7xl gap-4 overflow-auto scrollbar-none px-4 justify-start">
      @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").substring(0,5);
                    </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
    </div>
    @endif
  </div>
</div>

@endsection

@section('script')
<script>
const handleHorizontalScroll = (elementId, step, speed = 25, distance = 100) => {
  const element = document.getElementById(elementId)
  let scrollAmount = 0;
  const slideTimer = setInterval(() => {
    element.scrollLeft += step;
    scrollAmount += Math.abs(step);
    if (scrollAmount >= distance) {
      clearInterval(slideTimer);
    }
  }, speed);
}
</script>
@endsection