{{ define "solidarity_bookings_list" }}
{{template "booking_filters" dict "tab" "solidarityService" "filters" .ViewState.filters "geography_filters_enabled" .ViewState.geography_filters_enabled "geography_filters_list" .ViewState.geography_filters_list }}

{{if eq (len .ViewState.bookings) 0}}
<div class="m-10 text-center text-gray-600">Aucun trajet déclaré</div>
{{else}}
{{$inrange := false}}

<div x-data="{
  bookings: [
  {{range .ViewState.bookings}}{{if $inrange}},{{end}}{{$inrange = true}}{{$driver := index $.ViewState.drivers_map .DriverId}}{{$passenger := index $.ViewState.passengers_map .PassengerId}}{
	id: '{{.Id}}',
      	driverId: '{{.DriverId}}',
	driverFirstName: '{{if $driver.Data.first_name}}{{ jsEscape $driver.Data.first_name }}{{end}}',
	driverLastName: '{{if $driver.Data.last_name}}{{ jsEscape $driver.Data.last_name }}{{end}}',
      	passengerId: '{{ .PassengerId }}',
	passengerFirstName: '{{if $passenger.Data.first_name}}{{ jsEscape $passenger.Data.first_name }}{{end}}',
	passengerLastName: '{{if $passenger.Data.last_name}}{{ jsEscape $passenger.Data.last_name }}{{end}}',
      	pickupLabel: '{{if .Journey}}{{ jsEscape .Journey.PassengerPickup.Properties.label }}{{end}}',
      	dropLabel: '{{if .Journey}}{{ jsEscape .Journey.PassengerDrop.Properties.label }}{{end}}',
      	pickupDate: '{{if .Journey}}{{ timeFormat .Journey.PassengerPickupDate "02/01/2006 15:04" }}{{end}}',
      	status: '{{.Status}}',
      	reason: {{ if .Data.reason }}'{{ jsEscape .Data.reason }}'{{ else }}''{{ end }},
      	motivation: {{ if .Data.motivation }}'{{ jsEscape .Data.motivation }}'{{ else }}''{{ 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, reason) {
    if (status === 'WAITING_CONFIRMATION') return { class: 'p-1 text-xs bg-gray-300 rounded-xl', text: 'Attente confirmation' };
    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: reason ? 'Annulé : ' + reason : 'Annulé' };
    return { class: '', text: '' };
  },
  guaranteedMotivations: {{ json .ViewState.guaranteed_trip_motivations }},
  isGuaranteedTrip(motivation) {
    return this.guaranteedMotivations.includes(motivation);
  }
}">

<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">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">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">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">&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="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">
          <a class="text-co-blue" :href="'/app/solidarity-transport/drivers/' + booking.driverId">
            <span x-text="booking.driverFirstName + ' ' + booking.driverLastName"></span>
          </a>
        </td>
        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.pickupLabel"></td>
        <td class="py-4 pl-4 pr-3 text-sm sm:pl-6" x-text="booking.dropLabel"></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, booking.reason).class" x-text="getStatusBadge(booking.status, booking.reason).text"></span>
          <template x-if="booking.motivation && isGuaranteedTrip(booking.motivation)">
            <div class="mt-4">
              <span class="text-xs p-2 bg-co-green text-white rounded-2xl" x-text="'Trajet garanti : ' + booking.motivation"></span>
            </div>
          </template>
        </td>
        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
          <a class="text-co-blue" :href="'/app/solidarity-transport/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}}