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

@section('content')
 <div>
  <h1 class="text-xl font-opensans-bold">Payments</h1>
 </div>  

 @if(count($payments)>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 ({{$payments->total()}})
    </div>
    <div class="px-2">
      Today ({{$today_payments}})
    </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="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="Event" {{ request()->Sort == "Event"  ? "selected" : "" }}>Event</option>
      <option value="Method" {{ request()->Sort == "Method"  ? "selected" : "" }}>Method</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">
   ({{$payments->count()}}) Items
 </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 class="w-14">SN</th>
      <th class="w-40">Reference No.</th>
      <th class="w-40">Ticket No.</th>
      <th class="w-40">Event</th>
      <th class="w-40">Amount</th>
      <th class="w-40">Method</th>
      <th class="w-40">Date</th>
    </tr>   
   </thead>
   <tbody>
 
  @foreach($payments as $payment)
   <tr class="capitalize text-sm">
     <td>{{ $payments->firstItem() + $loop->index }}</td>
     <td class="font-opensans-bold text-green-500">
       {{ $payment->reference_no }}
     </td>
     <td>
      @foreach($payment->ticket as $ticket)
       {{ $ticket->ticket_no }}
      @endforeach 
     </td>
     <td>
       {{ $payment->event->tittle }}
     </td>
     <td class="text-red-500 font-opensans-bold">
      UGX {{ number_format($payment->amount) }} 
     </td>
     <td>
       {{ $payment->method }}
     </td>
     <td>
       {{ $payment->created_at->format('M d, Y') }}
     </td>
   </tr>
  @endforeach
   </tbody>
  </table>

  {{ $payments->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