@extends("layouts.home")

@section("content")
<div class="my-4 max-w-[92vw] lg:max-w-4xl 2xl:max-w-7xl">
  @if (!$event)
  <div class="text-center">
    <p class="px-4 py-2 font-semibold badge h-max badge-outline">Tidak ada acara yang ditemukan</p>
  </div>
  @else
  <div class="flex flex-col-reverse md:flex-row w-full gap-4">
    <div class="flex flex-col gap-2 w-full">
      <h1 class="font-bold capitalize text-lg">
        {{$event->title}}
      </h1>
      <div class="">
        <p class="text-lg font-medium">Penyelenggara</p>
        <div class="flex gap-2 items-center">
          <i class="fas fa-user" aria-hidden="true"></i>
          <h1 class="overflow-auto capitalize scrollbar-none whitespace-nowrap">
            {{$event->user?->institute}}
          </h1>
        </div>
      </div>
      <div class="">
        <p class="text-lg font-medium">Waktu Pelakasanaan</p>
        <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>
          <div class="flex items-center">
            <h1 id={{"start{$event->id}"}} class="overflow-auto capitalize scrollbar-none whitespace-nowrap">
              <script>
                document.getElementById("start"+{{$event->id}}).innerHTML = new Date(`${{{$event->start_at}}}`).toLocaleTimeString("id-ID").substring(0,5);
              </script>
            </h1>
            @isset($event->finish_at)                
            <h1 id={{"finish{$event->id}"}} class="overflow-auto capitalize scrollbar-none whitespace-nowrap">
              <script>
                document.getElementById("finish"+{{$event->id}}).innerHTML = ` - ${new Date(`${{{$event->finish_at}}}`).toLocaleTimeString("id-ID").substring(0,5)}`;
              </script>
            </h1>
            @endisset
          </div>
        </div>
      </div>
      <div class="">
        <p class="text-lg font-medium">Kategori</p>
        <a href={{"/app/category/{$event->product?->category?->slug}"}}>
          <div class="border-2 card sm:w-48 bg-base-100 hover:bg-gray-700 hover:text-gray-100">
            @if (isset($event->product?->category?->logo))                
              <figure>
                <img
                  src={{$event->product?->category?->logo}}
                  alt={{$event->product?->category?->title}}
                  class="rounded-lg"
                />
              </figure>
            @endif
            <div class="text-center">
              <h1 class="overflow-auto text-lg font-bold capitalize scrollbar-none ">
                {{$event->product?->category?->title}}
              </h1>
            </div>
          </div>
        </a>   
      </div>
      <div class="divider"></div>
      @isset($event->description)          
      <div class="">
        <p class="text-lg font-semibold">Deskripsi</p>
        <div class="">
          {!! $event->description !!}
        </div>
      </div>
      @endisset
      @isset($event->term_condition)          
      <div class="">
        <p class="text-lg font-semibold">Syarat dan Ketentuan</p>
        <div class="">
          {!! $event->term_condition !!}
        </div>
      </div>
      @endisset
      @isset($event->instruction)          
      <div class="">
        <p class="text-lg font-semibold">Instruksi</p>
        <div class="">
          {!! $event->instruction !!}
        </div>
      </div>
      @endisset

    </div>
    <div class="flex flex-col md:w-96">
      @if (isset($event->cover))
      <figure>
        <img
          src={{$event->cover}}
          alt={{$event->title}}
          width="400"
          class="rounded-lg"
        />
      </figure>
      @endif
      <div class="my-4">
        @isset($event->quota)            
        <div class="flex flex-wrap justify-between items-center">
          <p>Sisa Kuota</p>
          <p class="font-bold text-lg">
            {{$event->quota}}
          </p>
        </div>
        @endisset
        <div class="flex flex-wrap justify-between items-center">
          <p>Total Harga</p>
          @if($event->price)        
          <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>         
          @else
          <p class="font-bold text-lg">
            Rp 0
          </p>
          @endif

        </div>
        <a href="/app/order/create?event_id={{$event->id}}" class="btn btn-sm btn-primary text-white mt-4 w-full">Beli</a>
      </div>
    </div>
  </div>
  @endif
</div>

@endsection