<template>

    <div class=" max-w-5xl  text-black bg-white font-mono text-md">
        <div class="grid grid-cols-12 pt-12">
            <div class="col-span-6">
                <div class="grid grid-cols-12">
                    <div class="col-span-2 pt-2 pl-4">#2 </div>
                    <div class="col-span-2 pt-2"></div>
                    <div class="col-span-2 pt-2"></div>
                    <div class="col-span-2 pt-2 "></div>
                    <div class="col-span-1 pt-2 "></div>
                    <div class="col-span-3 text-xs  pt-2 ">{{ customer.customer_phone_number }}</div>
                </div>

                <div class="grid grid-cols-12 pt-2 pb-2">
                    <div class="col-span-9 pl-5">{{ customer.customer_first_name }} {{ customer.customer_last_name }}
                    </div>
                    <div class="col-span-3 ">{{ customer.account_number }}</div>
                    <div class="col-span-12 pl-5">{{ customer.customer_address }}</div>
                    <div class="col-span-8 pl-5">
                        <div class="grid grid-cols-12">
                            <div class="col-span-5"> {{ customer.customer_town }}</div>
                            <div class="col-span-3">
                                <div v-if="customer.customer_state == 0">Ma</div>
                            </div>
                            <div class="col-span-4"> {{ customer.customer_zip }}</div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-12 pl-6 pb-10 ">


                    <div class="col-span-12 ">{{ delivery.dispatcher_notes }}</div>
                    <div class="col-span-12 ">{{ customer_description.description }}</div>







                    <div class="col-span-12 text-lg" v-if="delivery.payment_type == 0">CASH</div>
                    <div class="col-span-12 text-lg" v-else-if="delivery.payment_type == 1">Credit Card</div>
                    <div class="col-span-12 text-lg" v-else-if="delivery.payment_type == 2">Credit Card/Cash</div>
                    <div class="col-span-12" v-else></div>




                </div>
                <div class="grid grid-cols-12 pl-10 ">
                    <div class="col-span-6 ">
                    <div class="col-span-12 pl-5">Auburn Oil
                    </div>
                    <div class="col-span-12 pl-5">PO BOX 123</div>
                    <div class="col-span-8 pl-5">
                        <div class="grid grid-cols-12">
                            <div class="col-span-5"> Auburn</div>
                            <div class="col-span-3">
                                Ma
                            </div>
                            <div class="col-span-4">01501 </div>
                        </div>
                    </div>
                </div>
                <div class="col-span-6 ">
                    <div v-if="past_deliveries1.length > 1">
                        <div class="col-span-6" v-for="past_delivery in past_deliveries1">
                            <div class="">
                                {{ past_delivery.when_delivered }} - {{ past_delivery.gallons_delivered }}
                            </div>
                        </div>
                    </div>
                        <div v-else >
                            <div class="col-span-6 text-center">Have a Great day :)</div>
                        </div>
                    </div>  
                </div>

            </div>

            <div class="col-span-6 ">
                <div class="col-span-4 ">
                    <div class="grid grid-cols-12 ">
                        <div class="col-span-12 h-7 pl-4 pt-2">{{ delivery.when_ordered }}</div>
                        <div class="col-span-12 h-7 pl-4 pt-2">{{ delivery.expected_delivery_date }}</div>
                        <div class="col-span-12 h-7 pl-4 pt-2">{{ delivery.gallons_ordered }}</div>
                        <div class="col-span-12 h-7 pl-4 pt-2">{{ delivery.customer_price }} </div>
                        <div class="col-span-12 h-7 pl-4 pt-4">{{ total_amount }} </div>
                        <div class="col-span-12 h-7 pt-6"></div>
                        <div class="col-span-12 h-7"></div>
                        <div class="col-span-12 h-7 pl-8"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</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 SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
import { notify } from "@kyvg/vue3-notification"

export default defineComponent({
    name: 'Ticket',

    components: {
        Header,
        SideBar,
        Footer,

    },

    data() {
        return {
            loaded: false,
            user: {
                user_id: 0,
            },
            past_deliveries1: [
                {
                    gallons_delivered: 0,
                    when_delivered: '',
                }
            ],
            past_deliveries2: [
                {
                    gallons_delivered: 0,
                    when_delivered: '',
                }
            ],
            delivery: {
                id: '',
                customer_id: 0,
                customer_name: '',
                customer_address: '',
                customer_town: '',
                customer_state: 0,
                customer_zip: '',
                gallons_ordered: 0,
                customer_asked_for_fill: 0,
                gallons_delivered: '',
                customer_filled: 0,
                delivery_status: 0,
                when_ordered: '',
                when_delivered: '',
                expected_delivery_date: '',
                automatic: 0,
                oil_id: 0,
                supplier_price: '',
                customer_price: '',
                customer_temperature: '',
                dispatcher_notes: '',
                prime: 0,
                same_day: 0,
                payment_type: 0,
                payment_card_id: 0,
                driver_employee_id: 0,
                driver_first_name: '',
                driver_last_name: '',
            },
            customer: {
                id: 0,
                user_id: 0,
                customer_first_name: '',
                customer_last_name: '',
                customer_town: '',
                customer_address: '',
                customer_state: 0,
                customer_zip: '',
                customer_apt: '',
                customer_home_type: 0,
                customer_phone_number: '',
                account_number: '',
            },
            customer_description: {
                id: 0,
                customer_id: 0,
                account_number: '',
                company_id: '',
                fill_location: 0,
                description: '',
            },
            priceprime: 0,
            pricesameday: 0,
            total_amount: 0,

        }
    },

    created() {
        this.getOilOrder(this.$route.params.id)
        this.sumdelivery(this.$route.params.id);

    },
    watch: {
        $route() {
            this.getOilOrder(this.$route.params.id)
            this.sumdelivery(this.$route.params.id);
        },
    },
    mounted() {

    },

    methods: {
        getOilOrder(delivery_id: any) {
            let path = import.meta.env.VITE_BASE_URL + "/delivery/order/" + delivery_id;
            axios({
                method: "get",
                url: path,
                withCredentials: true,
            })
                .then((response: any) => {
                    this.delivery = response.data;
                    this.getCustomer(this.delivery.customer_id)

                })
                .catch(() => {
                    notify({
                        title: "Error",
                        text: "Could not get oil order",
                        type: "error",
                    });
                });
        },
        getCustomerDescription(userid: any) {
            let path = import.meta.env.VITE_BASE_URL + '/customer/description/' + userid;
            axios({
                method: 'get',
                url: path,
                headers: authHeader(),
            }).then((response: any) => {

                this.customer_description = response.data
            })
        },

        sumdelivery(delivery_id: any) {
            let path = import.meta.env.VITE_BASE_URL + "/delivery/total/" + delivery_id;
            axios({
                method: "get",
                url: path,
                withCredentials: true,
            })
                .then((response: any) => {
                    if (response.data.ok) {
                        this.priceprime = response.data.priceprime;
                        this.pricesameday = response.data.pricesameday;
                        this.total_amount = response.data.total_amount;
                    }
                })
                .catch(() => {
                    notify({
                        title: "Error",
                        text: "Could not get oil pricing",
                        type: "error",
                    });
                });
        },

        getCustomer(userid: any) {
            let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
            axios({
                method: 'get',
                url: path,
                headers: authHeader(),
            }).then((response: any) => {
                this.customer = response.data
                this.getPastDeliveries1(this.customer.id)
                this.getPastDeliveries2(this.customer.id)
                this.getCustomerDescription(this.customer.id)
            })
        },

        getPastDeliveries1(userid: any) {
            let path = import.meta.env.VITE_BASE_URL + '/delivery/past1/' + userid;
            axios({
                method: 'get',
                url: path,
                headers: authHeader(),
            }).then((response: any) => {
                this.past_deliveries1 = response.data
                console.log(this.past_deliveries1);
            })
        },
        getPastDeliveries2(userid: any) {
            let path = import.meta.env.VITE_BASE_URL + '/delivery/past2/' + userid;
            axios({
                method: 'get',
                url: path,
                headers: authHeader(),
            }).then((response: any) => {
                this.past_deliveries2 = response.data
            })
        },
    },
})
</script>
