<script setup>
defineProps(['bookings']);
import { ref } from 'vue';
import { departments, getDepartments, isLoading, getDepartmentName} from "@/components/pagination/departmentTabs.vue";

const redirectDepartmentOrderPage = (orderId, departmentId) => {
  // Send the user to the order page
  window.location.href = `/admin/${departmentId}/modules/bookings/${orderId}`;
};

// Get the departments (If the departments are not already loaded)
if (departments.value.length === 0) {
  getDepartments();
}
</script>

<template>
  <table class="table is-fullwidth">
    <thead>
    <tr>
      <th>ID</th>
      <th>Customer Number</th>
      <th>Type</th>
      <th>Department</th>
      <th>Reg. nr. Trækker</th>
      <th>Reg. nr. Trailer</th>
      <th>Reference</th>
      <th>Notes</th>
      <th>Date</th>
      <th>Status</th>
      <th>Contact email</th>
      <th>Wash certificate email</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="booking in bookings" :key="booking.id">
      <td>{{ booking.id }}</td>
      <td>{{ booking.customer_number }}</td>
      <td>{{ booking.wash_type }}</td>
      <td>{{ booking.department }}</td>
      <td>{{ booking.regNrTraekker }}</td>
      <td>{{ booking.regNrTrailer }}</td>
      <td>{{ booking.reference_number }}</td>
      <td>{{ booking.notes }}</td>
      <td>{{ booking.date }}</td>
      <td>{{ booking.status }}</td>
      <td>{{ booking.contact_email }}</td>
      <td>{{ booking.washCertificateEmail }}</td>
      <td>
        <div class="buttons">
          <button class="button is-small is-dark" @click="redirectDepartmentOrderPage(booking.id, booking.department_id)">Show</button>
        </div>
      </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="12">Showing {{ bookings.length }} bookings</td>
    </tr>
    </tfoot>
  </table>
</template>

<style scoped>

</style>