{{ define "carpool_bookings_history" }}
{{template "booking_filters" dict "tab" "carpoolHistory" "filters" .ViewState.hist_filters "geography_filters_enabled" .ViewState.geography_filters_enabled "geography_filters_list" .ViewState.geography_filters_list }}
{{if eq (len .ViewState.bookings_history) 0}}
<div class="m-10 text-center text-gray-600">Aucun trajet dans le passé</div>
{{else}}
{{$inrange := false}}

<div x-data="{
  bookings: [
  {{range .ViewState.bookings_history}}{{if $inrange}},{{end}}{{$inrange = true}}{{$driver := index $.ViewState.drivers_map .Driver.Id}}{{$passenger := index $.ViewState.passengers_map .Passenger.Id}}{
      id: '{{.Id}}',
      driverId: '{{if .Driver}}{{.Driver.Id}}{{end}}',
      driverFirstName: '{{if $driver.ID}}{{ jsEscape $driver.Data.first_name }}{{end}}',
      driverLastName: '{{if $driver.ID}}{{ jsEscape $driver.Data.last_name }}{{end}}',
      passengerId: '{{if .Passenger}}{{.Passenger.Id}}{{end}}',
      passengerFirstName: '{{if $passenger.Data}}{{ jsEscape $passenger.Data.first_name }}{{end}}',
      passengerLastName: '{{if $passenger.Data}}{{ jsEscape $passenger.Data.last_name }}{{end}}',
      pickupAddress: '{{ jsEscape .PassengerPickupAddress }}',
      dropAddress: '{{ jsEscape .PassengerDropAddress }}',
      pickupDate: '{{if .PassengerPickupDate}}{{ timeFormat .PassengerPickupDate.AsTime "02/01/2006 15:04" }}{{end}}',
      status: '{{.Status.String}}',
      price: '{{if .Price}}{{ printf "%.2f" (round2 .Price.Amount) }}{{else}}N/A{{end}}',
      currency: '{{if .Price}}{{.Price.Currency}}{{end}}'
    }{{end}}
  ],
  currentPage: 1,
  itemsPerPage: {{ if .ViewState.trips_items_per_page }}{{ .ViewState.trips_items_per_page }}{{ else }}10{{ end }},
  get totalPages() {
    return Math.ceil(this.bookings.length / this.itemsPerPage);
  },
  get paginatedBookings() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    return this.bookings.slice(start, end);
  },
  nextPage() {
    if (this.currentPage < this.totalPages) this.currentPage++;
  },
  prevPage() {
    if (this.currentPage > 1) this.currentPage--;
  },
  goToPage(page) {
    this.currentPage = page;
  },
  getStatusBadge(status) {
    if (status === 'WAITING_DRIVER_CONFIRMATION') return { class: 'p-1 text-xs bg-gray-300 rounded-xl', text: 'Attente confirmation' };
    if (status === 'CONFIRMED') return { class: 'p-1 text-xs bg-co-green rounded-xl', text: 'Confirmé' };
    if (status === 'VALIDATED') return { class: 'p-1 text-xs bg-co-green rounded-xl', text: 'Validé' };
    if (status === 'CANCELLED') return { class: 'p-1 text-xs bg-co-red text-white rounded-xl', text: 'Annulé' };
    return { class: '', text: '' };
  }
}">

<table class="min-w-full divide-y divide-gray-300 border-gray-300 border-t-1">
  <thead class="bg-gray-50">
    <tr>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Conducteur
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Passager
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Départ
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Destination
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Date
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Statut
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          Prix
      </th>
      <th scope="col"
          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
          &nbsp;
      </th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-200 bg-white">
    <template x-for="booking in paginatedBookings" :key="booking.id">
      <tr>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <a class="text-co-blue" :href="'/app/organized-carpool/drivers/' + booking.driverId">
            <span x-text="booking.driverFirstName + ' ' + booking.driverLastName"></span>
          </a>
        </td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <a class="text-co-blue" :href="'/app/beneficiaries/' + booking.passengerId">
            <span x-text="booking.passengerFirstName + ' ' + booking.passengerLastName"></span>
          </a>
        </td>
        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.pickupAddress"></td>
        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.dropAddress"></td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.pickupDate"></td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <span :class="getStatusBadge(booking.status).class" x-text="getStatusBadge(booking.status).text"></span>
        </td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <span x-text="booking.price !== 'N/A' ? booking.price + ' ' + booking.currency : 'N/A'"></span>
        </td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <a class="text-co-blue" :href="'/app/organized-carpool/bookings/' + booking.id">Voir</a>
        </td>
      </tr>
    </template>
  </tbody>
</table>

<!-- Pagination -->
<div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
  <div class="flex flex-1 justify-between sm:hidden">
    <button @click="prevPage()" :disabled="currentPage === 1"
            class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
      Précédent
    </button>
    <button @click="nextPage()" :disabled="currentPage === totalPages"
            class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
      Suivant
    </button>
  </div>
  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700">
        Affichage de
        <span class="font-medium" x-text="(currentPage - 1) * itemsPerPage + 1"></span>
        à
        <span class="font-medium" x-text="Math.min(currentPage * itemsPerPage, bookings.length)"></span>
        sur
        <span class="font-medium" x-text="bookings.length"></span>
        résultats
      </p>
    </div>
    <div>
      <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
        <button @click="prevPage()" :disabled="currentPage === 1"
                class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed">
          <span class="sr-only">Précédent</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
          </svg>
        </button>
        <template x-for="page in totalPages" :key="page">
          <button @click="goToPage(page)"
                  :class="page === currentPage ? 'z-10 bg-co-blue text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-co-blue' : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0'"
                  class="relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:z-20"
                  x-text="page"></button>
        </template>
        <button @click="nextPage()" :disabled="currentPage === totalPages"
                class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 disabled:opacity-50 disabled:cursor-not-allowed">
          <span class="sr-only">Suivant</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
          </svg>
        </button>
      </nav>
    </div>
  </div>
</div>

</div>
{{end}}
{{end}}