<!-- src/pages/delivery/update_tickets/missing_data_home.vue -->
<template>
  <Header/>
  <div class="flex">
    <div class="">
      <SideBar/>
    </div>
    <div class=" w-full px-10 ">
      <div class="text-sm breadcrumbs">
        <ul>
          <li>
            <router-link :to="{ name: 'home' }">
              Home
            </router-link>
          </li>

        </ul>
      </div>
      <div class="flex justify-end">
      </div>

      <div class="overflow-x-auto">
        <div class="flex start">Oil Deliveries</div>
        <table class="table">
          <!-- head -->
          <thead>
          <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Town</th>
            <th>Address</th>

          </tr>
          </thead>
          <tbody>
          <!-- row 1 -->
          <tr v-for="oil in deliveries" :key="oil['id']">
            <router-link :to="{ name: 'customerProfile', params: { id: oil['customer_id'] } }">
              <td>{{ oil['customer_name'] }}</td>
            </router-link>
            <td>
              <div v-if="oil['delivery_status'] == 0">Waiting</div>
              <div v-else-if="oil['delivery_status'] == 1">delivered</div>
              <div v-else-if="oil['delivery_status'] == 2">Out_for_Delivery</div>
              <div v-else-if="oil['delivery_status'] == 3">Cancelled</div>
              <div v-else-if="oil['delivery_status'] == 4">Partial Delivery</div>
              <div v-else-if="oil['delivery_status'] == 5">Issue</div>
              <div v-else-if="oil['delivery_status'] == 10">Finalized</div>
              <div v-else></div>
            </td>

            <td>{{ oil['customer_town'] }}</td>
            <td>{{ oil['customer_address'] }}</td>

            <td class="flex gap-5" v-if="oil['delivery_status'] == 1">
              <router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }">
                <button class="btn btn-success btn-sm ">Finalize</button>
              </router-link>

            </td>
          </tr>
          </tbody>
        </table>
      </div>


    </div>
  </div>


  
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Header from '../../../layouts/headers/headerauth.vue'
import SideBar from '../../../layouts/sidebar/sidebar.vue'
import authService from '../../../services/authService'
import adminService from '../../../services/adminService'

// Reactive data
const token = ref(null)
const user = ref(null)
const deliveries = ref([])

// Lifecycle
onMounted(() => {
  userStatus()
  get_oil_orders()
})

// Functions
const userStatus = async () => {
    try {
        const response = await authService.whoami();
        if (response.data.ok) {
            user.value = response.data.user;
        }
    } catch (error) {
        user.value = null;
    }
}

const get_oil_orders = async () => {
  try {
      const response = await adminService.stats.pendingStatus();
      deliveries.value = response.data?.deliveries || response.data
  } catch (error) {
      console.error("Error fetching pending deliveries", error);
  }
}
</script>

<style scoped>

</style>