@extends('layouts/admin/masters.master')

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

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

@section('content')
 <div class="flex items-center space-x-5">
  <div>
    <h1 class="text-xl font-opensans-bold">Events</h1>
  </div>
  <div class="text-sm border border-lime-500 hover:bg-lime-500 hover:text-white rounded-sm">
   <a href="/Admin/Events/Add-Event" class="block px-2 py-1">
     Add New
   </a>
  </div>
 </div>  

 @if(count($events)>0) 

 <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:items-end sm:justify-between">
  <div class="flex divide-x divide-gray-500 text-sm">
    <div class="pr-2">
      All ({{$events->total()}})
    </div>
    <div class="px-2">
      Open ({{ App\Models\Event::all()->where('status','==','open')->count() }})
    </div>
    <div class="px-2">
      Closed ({{ App\Models\Event::all()->where('status','==','closed')->count() }})
    </div>
    <div class="pl-2">
      Cancelled ({{ App\Models\Event::all()->where('status','==','cancelled')->count() }})
    </div>
  </div>

  <div>
    <div class="space-x-2 flex">
     <div class="grow">
      <input type="text" id="search_term" class="w-full sm:w-40 rounded-sm px-2 py-1 focus:outline-none border border-lime-500" value="{{request()->Term}}" placeholder="Enter Order no."> 
     </div>
     <div class="flex items-center rounded-sm border border-lime-500 px-2 py-1 font-opensans-bold text-sm hover:bg-lime-500 hover:text-white cursor-pointer" onclick="getTerm()">
      Search
     </div>
    </div>  
  </div>
 </div>

<div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:items-end sm:justify-between">
 <div class="flex flex-col sm:flex-row sm:space-x-2 space-y-3 sm:space-y-0">
  <div class="">
    <select id="sort" class="w-full sm:w-40 rounded-sm p-1 focus:outline-none border border-lime-500 text-gray-500">
      <option value="">Sort</option>
      <option value="Status" {{ request()->Sort == "Status"  ? "selected" : "" }}>Status</option>
      <option value="Random" {{ request()->Sort == "Random"  ? "selected" : "" }}>Random</option>
    </select>
  </div>

  <div class="flex items-center justify-center rounded-sm border border-lime-500 px-2 py-1 font-opensans-bold hover:bg-lime-500 hover:text-white cursor-pointer" onclick="getFilter()">
    Filter
  </div>
 </div>

 <div class="text-sm">
   ({{$events->count()}}) Items
 </div>
</div>

@if(Session::has('success'))
  <div class="capitalize border border-green-600 rounded-sm p-2 text-center text-green-600 text-sm font-opensans-bold">
    {{ Session::get('success') }}
  </div>
@endif

<div class="admin overflow-x-auto rounded-md bg-white">
 <table class="w-full border-collapse">
   <thead>
    <tr class="font-opensans-bold text-white bg-lime-500">
      <th class="w-14">SN</th>
      <th class="w-40">Tittle</th>
      <th class="w-40">Ticket Prices</th>
      <th class="w-40">Features</th>
      <th class="w-40">Partners</th>
      <th class="w-14">
       <i class="fas fa-ad"></i>
      </th>
      <th class="w-20">Status</th>
      <th class="w-40">Date</th>
    </tr>   
   </thead>
   <tbody>
 
 @foreach($events as $event)
   <tr class="capitalize text-sm">
     <td>{{ $events->firstItem() + $loop->index }}</td>
     <td class="text-left">
       <div class="flex space-x-2">
        <div class="h-12 w-14">
          <img class="h-full w-full rounded-sm" src="{{ asset('assets/images/'.$event->image) }}">
        </div>
        <div class="grow space-y-3">
          <div class="font-opensans-bold text-sm uppercase">
            {{ $event->tittle }}
          </div>
          <div class="">
           <ul class="flex text-xs font-opensans-bold divide-x divide-gray-500">
            <li class="pr-2 edit">
             <a href="/Admin/Events/Edit-Event/{{ $event->id }}">Edit</a>
            </li>
            <li class="px-2 delete">
              <a href="/Admin/Events/Delete-Event/{{ $event->id }}">Trash</a>
            </li>
            <li class="px-2">
              <a href="/Events/{{ $event->id }}/{{ $event->tittle }}">View</a>
            </li> 
            <li class="pl-2">
              @if($event->publish == 1)
                <a href="/Admin/Events/Update-Event-Publish/{{ $event->id }}/0" class="publish">publish</a>
              @else
                <a href="/Admin/Events/Update-Event-Publish/{{ $event->id }}/1" class="unpublish">unpublish</a>
              @endif
            </li> 
           </ul>
          </div>
        </div> 
       </div>
     </td>
     <td>

      <div class="flex items-center justify-center">
        <event-prices-modal 
          :early_kids="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}'"
          :gate_kids="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','kids')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}'"
          :early_ordinary="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}'"
          :gate_ordinary="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','ordinary')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}'"
          :early_vip="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}'"
          :gate_vip="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','vip')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}'"
          :early_table="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['early_price'])->pivot->early_price) ?? null ?: 'N/A' }}'"
          :gate_table="'{{ number_format($event->ticket_category()->findorFail(App\Models\Ticket_Category::where('name','=','table')->pluck('id')->first(),['gate_price'])->pivot->gate_price) ?? null ?: 'N/A' }}'"
          :early_ten_4_eight="'{{ 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' }}'"
          :gate_ten_4_eight="'{{ 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' }}'">  
        </event-prices-modal>
      </div> 
     </td>
     <td>
      <div>
        <ul class="inline-flex flex-wrap justify-between">
          @foreach($event->feature()->get() as  $event_feature)
           <li class="text-xs rounded-sm m-2 px-2 py-px bg-lime-300 uppercase">
             {{ $event_feature->name }}
           </li>
          @endforeach
        </ul>
      </div>   
     </td>

     <td>
      <div>
        <ul class="inline-flex flex-wrap justify-between">
          @foreach($event->partner()->get() as  $event_partner)
           <li class="text-xs rounded-sm m-2 px-2 py-px bg-lime-300 uppercase">
             {{ $event_partner->name }}
           </li>
          @endforeach
        </ul>
      </div>   
     </td>

     <td>
      @if($event->video_advert->where('status','=','open')->first())
        <i class="fas fa-ad"></i>
      @else
        <i class="fas fa-minus"></i>
      @endif  
     </td>
 
     <td>
         <div class="flex space-x-2 justify-left">
           <div class="font-opensans-bold">
             {{ $event->status }}
           </div>
           <div class="editTrigger text-green-500 cursor-pointer">
             <i class="fas fa-edit fa-md"></i>
           </div>
         </div>
         <div class="flex space-x-2 hidden justify-left">
          <div>
           <form action="/Admin/Events/Update-Event-Status/{{ $event->id }}" method="post"> 
             @csrf
             <select name="status" class="w-40 rounded-sm p-1 focus:outline-none border border-lime-500 capitalize" onchange='if(this.value != 0) { this.form.submit();}'>
                @if(old('status',$event->status) == 'open')   
                  <option value="open" selected>Open</option> 
                 @else
                  <option value="open">Open</option> 
                @endif

                @if(old('status',$event->status) == 'closed')   
                  <option value="closed" selected>Closed</option> 
                 @else
                  <option value="closed">Closed</option> 
                @endif

                @if(old('status',$event->status) == 'cancelled')   
                  <option value="cancelled" selected>Cancelled</option> 
                 @else
                  <option value="cancelled">Cancelled</option> 
                @endif
              </select>
            </form> 
           </div>

           <div class="cancelTrigger text-sm border border-lime-500 hover:bg-lime-500 hover:text-white rounded-sm py-1 px-2 fit-content cursor-pointer">
             Cancel
           </div>  
         </div>
       </td>
     <td>
       {{ $event->date->format('M d, Y') }}
     </td>
   </tr>
   @endforeach 
   </tbody>
  </table>

  {{ $events->appends($_GET)->links('layouts/guest/includes.pagination') }}

  @else
    <div class="w-full p-3 bg-white rounded-lg">
      NO RESULTS FOUND
    </div>
  @endif 
 </div>

@endsection 

@section('script')

 <script type="text/javascript">

  var editTrigger = document.getElementsByClassName("editTrigger");
  var cancelTrigger = document.getElementsByClassName("cancelTrigger");


  for (var i = 0; i < editTrigger.length; i++) {
     editTrigger[i].addEventListener("click", function () {
       
        var closeStatus = this.parentElement;
        var openEditStatus = this.parentElement.nextElementSibling;
        

        closeStatus.style.display = "none";
        openEditStatus.style.display = "flex";

     });
  }

  for (var i = 0; i < cancelTrigger.length; i++) {
     cancelTrigger[i].addEventListener("click", function () {

      var closeEditStatus = this.parentElement;
      var openStatus = this.parentElement.previousElementSibling;
      
      closeEditStatus.style.display = "none";
      openStatus.style.display = "flex";

     });
  }

 // url parameters
  let queryString = window.location.search;  // get url parameters
  let params = new URLSearchParams(queryString);  // create url search params object

   function getTerm() {
        params.delete('Term');
        params.append('Term', document.getElementById("search_term").value);
        document.location.href = "?" + params.toString();
    }


   function getFilter() {
        params.delete('Sort');
        params.append('Sort', document.getElementById("sort").value);
        document.location.href = "?" + params.toString();
    }
     
 </script>

@endsection