<!-- src/pages/customer/list.vue -->
<template>
  <div class="print-container">
    <h1>Customer List</h1>
    <table class="print-table">
      <thead>
        <tr>
          <th>Account Number</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Address</th>
          <th>Town</th>
          <th>Phone Number</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="customer in customers" :key="customer.account_number">
          <td>{{ customer.account_number }}</td>
          <td>{{ customer.customer_first_name }}</td>
          <td>{{ customer.customer_last_name }}</td>
          <td>{{ customer.customer_address }}</td>
          <td>{{ customer.customer_town }}</td>
          <td>{{ customer.customer_phone_number }}</td>
        </tr>
      </tbody>
    </table>
    <button onclick="window.print()" class="print-button">Print</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { adminService } from '../../services/adminService'
import { Customer } from '../../types/models'

// Reactive data
const customers = ref<Customer[]>([])

// Functions
const fetchCustomers = () => {
  adminService.money.customerListReport()
    .then((response) => {
      if (response.data.ok) {
        customers.value = response.data.customers;
      }
    })
    .catch((error) => {
      console.error('Error fetching customer data:', error);
    });
}

// Lifecycle
onMounted(() => {
  fetchCustomers();
})
</script>

<style scoped>
.print-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.print-table th, .print-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

.print-table th {
  font-weight: bold;
}

.print-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

@media print {
  .print-button {
    display: none;
  }
  .print-container {
    padding: 0;
  }
}
</style>
