<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>
            <th>Gallons</th>
            <th>Date</th>
            <th>Automatic</th>
            <th>Prime</th>
            <th>Same Day</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>
              <div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
              <div v-else> {{ oil['gallons_ordered'] }}</div>
            </td>
            <td>{{ oil['expected_delivery_date'] }}</td>
            <td>
              <div v-if="oil['automatic'] == 0">No</div>
              <div v-else>Yes</div>
            </td>
            <td>
              <div v-if="oil['prime'] == 0">No</div>
              <div v-else>Yes</div>
            </td>
            <td>
              <div v-if="oil['same_day'] == 0">No</div>
              <div v-else>Yes</div>
            </td>

            <td class="flex gap-5">
              <router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
                <button class="btn">View</button>
              </router-link>
              <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
                <button class="btn">Edit</button>
              </router-link>
              <button @click.prevent="deleteCall(oil['id'])" class="btn">Delete</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="flex justify-center" v-if="recordsLength > 9">
        <pagination @paginate="getPage" :records="recordsLength" v-model="page" :per-page="perPage"
                    :options="options">
        </pagination>
        <div class="flex justify-center mb-10"> {{ recordsLength }} items Found</div>
      </div>
    </div>
  </div>

  <Footer/>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import axios from 'axios'
import authHeader from '../../../services/auth.header'
import Header from '../../../layouts/headers/headerauth.vue'
import PaginationComp from '../../../components/pagination.vue'
import SideBar from '../../../layouts/sidebar/sidebar.vue'
import Footer from '../../../layouts/footers/footer.vue'
import {notify} from "@kyvg/vue3-notification";

export default defineComponent({
  name: 'deliveryWaiting',

  components: {
    Header,
    SideBar,
    Footer,
  },

  data() {
    return {
      token: null,
      user: null,
      deliveries: [],
      page: 1,
      perPage: 50,
      recordsLength: 0,
      options: {
        edgeNavigation: false,
        format: false,
        template: PaginationComp
      }
    }
  },

  created() {
    this.userStatus()
  },
  mounted() {
    this.getPage(this.page)
  },
  methods: {
    getPage: function (page: any) {
      // we simulate an api call that fetch the records from a backend
      this.deliveries = [];
      this.get_oil_orders(page)
    },
    userStatus() {
      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
      axios({
        method: 'get',
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
          .then((response: any) => {
            if (response.data.ok) {
              this.user = response.data.user;
            }
          })
          .catch(() => {
            this.user = null
          })
    },
    get_oil_orders(page: any) {
      let path = import.meta.env.VITE_BASE_URL + '/delivery/waiting/' + page;
      axios({
        method: 'get',
        url: path,
        headers: authHeader(),
      }).then((response: any) => {
        this.deliveries = response.data
      })
    },
    deleteCall(delivery_id: any) {
      let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
      axios({
        method: 'delete',
        url: path,
        headers: authHeader(),
      }).then((response: any) => {
        if (response.data.ok) {
          notify({
            title: "Success",
            text: "deleted oil order",
            type: "success",
          });
          this.getPage(this.page)
        } else {
          notify({
            title: "Failure",
            text: "error deleting oil order",
            type: "success",
          });
        }
      })
    },
  },
})
</script>

<style scoped>

</style>