@extends('layouts/guest/masters.master-index')

@section('opengraph')
<!-- Search Engine Optimization by Rank Math - http://s.rankmath.com/home -->
@endsection

@section('tittle','VOICES AND BEATS [ EVENTS MANAGEMENT ] | HOME')

@section('content')
  @if(Session::has('success')) 
    <div class="w-full bg-green-500 p-2 text-center text-white text-sm font-opensans-bold">
       {{Session('success')}}
    </div>
  @endif 

  @if(Session::has('error')) 
    <div class="w-full bg-red-500 p-2 text-center text-white text-sm font-opensans-bold">
       {{Session('error')}}
    </div>
  @endif

  <div class="page-content">
   <div class="intro h-[40rem] relative">
     <div id="header" class="menu-header absolute w-full text-white z-10">
       @include('layouts/guest/includes.header')
     </div>
     

    @if($running_advert) 
     <video class="h-full w-full object-cover" loop muted autoplay>
      <source src="{{asset('assets/videos/'.$running_advert->video)}}" type="video/mp4">
     </video>


     <div class="advert absolute space-y-4 md:space-y-5 bottom-20 left-12 text-white md:w-2/3 lg:w-1/3 p-5 bg-black bg-opacity-25 shadow-md">
       <div class="tittle text-xl md:text-2xl font-opensans-bold text-lime-500">
         <h1>{{ $running_advert->event->tittle }}</h1>
       </div>

       <div class="descripiton text-sm text-gray-300">
         {!! Str::limit( $running_advert->event->body , 250 , '...' ); !!}
       </div>

       <div class="date-venu flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-5 text-sm">
        <div class="flex space-x-2">
          <i class="fa fa-calendar-days text-base text-lime-500"></i>
          <span>
              {{ $running_advert->event->date->format('d M, Y') }}
          </span>
        </div>
        <div class="flex space-x-2">
          <i class="fa fa-map-marker-alt text-base text-lime-500"></i>
          <span>
              {{ $running_advert->event->venue }}
          </span>
        </div>
       </div>

       <div class="buttons flex space-x-5 font-opensans-bold text-sm">
         <div class="bg-lime-500 hover:text-lime-500 rounded-2xl hover:bg-white text-sm">
          <a href="/Events/Buy-Ticket/{{ $running_advert->event->id }}/{{ $running_advert->event->tittle }}" class="py-1 md:py-2 px-5 block">
            BUY TICKET
          </a>
         </div>
         
         <div class="bg-white text-lime-500 rounded-2xl hover:bg-lime-500 hover:text-white text-sm">
          <a href="/Events/{{ $running_advert->event->id }}/{{ $running_advert->event->tittle }}" class="py-1 md:py-2 px-5 block">
            VIEW MORE
          </a>
         </div>
       </div>
     </div>
    @else
      <video class="h-full w-full object-cover" loop muted autoplay>
       <source src="{{asset('assets/videos/p.mp4')}}" type="video/mp4">
      </video>
    @endif

    <div>
   </div>
  </div> 
 
  <div class="px-3 py-5 md:px-20 md:py-10 space-y-5">
    <div class="space-y-5">
     <div class="tittle text-lg md:text-3xl font-opensans-extrabold text-center text-black">
      <h1>Upcoming <span class="text-lime-500">Events</span></h1>
     </div>

     <div class="flex space-x-2 items-center justify-center">
       <div class="border-b border-gray-400 w-20"></div>
       <div>
        <i class="fa fa-calendar-days text-gray-400"></i>
       </div>
       <div class="border-b border-gray-400 w-20"></div>
     </div>
    </div> 

    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-10">
     @foreach($events as $event)
     <div class="space-y-3">
      <div class="h-48 md:h-56 relative">
        <img class="h-full w-full rounded-md shadow-sm" src="{{ asset('assets/images/'.$event->image) }}">
        <div class="ticket-price overflow-x-auto rounded-md bg-white absolute -bottom-3 left-3 right-3 text-sm">
            <table class="w-full border-collapse">
               <thead>
                <tr class="font-opensans-bold text-white bg-lime-500 divide-x divide-white">
                  <th class="w-10"></th>
                  <th class="w-20">KIDS</th>
                  <th class="w-20">ORD</th>
                  <th class="w-20">VIP</th>
                  <th class="w-20">TABLE</th>
                  <th class="w-20">TEN 4 EIGHT</th>
                </tr>  
               </thead>
             <tbody class="text-xs">  
              <tr class="divide-x divide-gray-500">
                <td class="text-sm font-opensans-bold text-left">EARLY</td>
                <td class="@if(Carbon\Carbon::now()->addDays(6) >= $event->date) line-through @endif">
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}
                </td>
                <td class="@if(Carbon\Carbon::now()->addDays(6) >= $event->date) line-through @endif">
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}
                </td>
                <td class="@if(Carbon\Carbon::now()->addDays(6) >= $event->date) line-through @endif">
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}
                </td>
                <td class="@if(Carbon\Carbon::now()->addDays(6) >= $event->date) line-through @endif">
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}
                </td>
                <td class="@if(Carbon\Carbon::now()->addDays(6) >= $event->date) line-through @endif">
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}
                </td>
               </tr>
               <tr class="divide-x divide-gray-500">
                <td class="text-sm font-opensans-bold text-left">GATE</td>
                <td>
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}
                </td>
                <td>
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}
                </td>
                <td>
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}
                </td>
                <td>
                  {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}
                </td>
                <td>
                   {{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ten for eight')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}
                </td>
               </tr>
             </tbody>   
            </table>  
        </div>
      </div>

      <div class="tittle md:text-lg font-opensans-extrabold">
       <h1>
        <a href="/Events/{{ $event->id }}/{{ $event->tittle }}" class="hover:text-lime-500">
            {{ $event->tittle }}
        </a>
       </h1>
      </div>

      <div class="text-sm text-gray-700 text-justify">
        {!! Str::limit( $event->body , 250 , '...' ); !!}
      </div>

      <hr>

      <div class="flex justify-between space-x-5">
        <div class="flex space-x-3 items-center text-sm md:text-base">
          <div class="h-7 md:h-8 w-7 md:w-8 rounded-full bg-black flex items-center justify-center">
            <i class="fa fa-calendar-days text-white"></i>
          </div>
          <div class="text-xs md:text-sm text-gray-600">
            <div class="font-opensans-bold">
              When
            </div>
            <div class="">
              {{ $event->date->format('d M, Y') }}
            </div>
          </div>
        </div>

        <div class="flex space-x-2 items-center text-sm md:text-base">
          <div class="h-7 md:h-8 w-7 md:w-8 rounded-full bg-black flex items-center justify-center">
            <i class="fa fa-map-marker-alt text-white"></i>
          </div>
          <div class="text-xs md:text-sm text-gray-600">
            <div class="font-opensans-bold">
              Location
            </div>
            <div class="text-xs md:text-sm">
              {{ $event->venue }}
            </div>
          </div>
        </div>
      </div>

      <hr>
      
      <div class="flex space-x-5 justify-between font-opensans-bold text-sm">
        <div class="text-sm">
           @if($event->status == "open")
            <a href="/Events/Buy-Ticket/{{ $event->id }}/{{ $event->tittle }}" class="py-1 md:py-2 px-5 block hover:bg-black bg-lime-500 text-white rounded-2xl">
              BUY TICKET
            </a>
           @else
            <span class="py-1 md:py-2 px-5 flex items-center justify-center bg-gray-300  text-gray-600 rounded-2xl cursor-not-allowed">
             BUY TICKET
            </span> 
           @endif 
         </div> 
         
         <div class="bg-black text-white rounded-2xl hover:bg-lime-500 text-sm">
          <a href="/Events/{{ $event->id }}/{{ $event->tittle }}" class="py-1 md:py-2 px-5 block">
            VIEW MORE
          </a>
         </div>
      </div>
     </div>
    @endforeach
    </div>
  </div>   
  </div> 
@endsection