@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 ] | ANALYTICS')

@section('content')
 <div>
  <h1 class="text-xl font-opensans-bold">Events Analytics</h1>
 </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 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>
    <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 Reference 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="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 rowspan="2" class="w-14">SN</th>
      <th rowspan="2" class="w-40">Event</th>
      <th rowspan="2" class="w-40">Scheduled</th>
      <th rowspan="2" class="w-40">Status</th>
      <th colspan="3" class="w-40">Analytics</th>
    </tr>
    <tr class="!bg-green-200 text-lime-500">
      <th class="w-20">Viewed</th>
      <th class="w-20">Action</th>
      <th class="w-20">Sold Tickets</th>
    </tr> 
     @foreach($events as $event) 
      <tr>
        <td>{{ $events->firstItem() + $loop->index }}</td>
        <td class="font-opensans-bold text-green-500">
         {{ $event->tittle }}
        </td>
        <td>{{ $event->created_at->format('M d, Y') }}</td>
        <td class="font-opensans-bold">{{ $event->status }}</td>
        <td>{{ $event->views }}</td>
        <td>{{ $event->action }}</td>
        <td>{{ $event->ticket->count() }}</td>
      </tr>
     @endforeach() 
   </thead>
   <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">

  // 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