<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>
          <li>
            <router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
              Edit Delivery
            </router-link>
          </li>
        </ul>
      </div>

      <div class="grid grid-cols-1 rounded-md p-6 ">
        <div class="text-[24px]">Create Oil Delivery {{ customer_id }}
        </div>
        <form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="checkoutOil">


          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
            <label class="block text-white text-sm font-bold cursor-pointer label">Order </label>
            <div class=""></div>
            <div class=""></div>
            <div class=""></div>
          </div>

          <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
            <button class="btn">
              Create Oil Order
            </button>
          </div>
        </form>
      </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 SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
import useValidate from "@vuelidate/core";
import {notify} from "@kyvg/vue3-notification"
import {minLength, required} from "@vuelidate/validators";

export default defineComponent({
  name: 'PayCancel',

  components: {
    Header,
    SideBar,
    Footer,
  },

  data() {
    return {
      v$: useValidate(),
      user: null,
      customer: null,
      customer_id: null,
      stripe: null,
    }
  },
  validations() {
    return {
      CreateOilOrderForm: {
        basicInfo: {
          gallons_ordered: {required, minLength: minLength(1)},
          expected_delivery_date: {required},
        },
      },
    };
  },
  created() {
    this.userStatus()
  },
  watch: {
    $route() {
      this.getCustomer(this.$route.params.id);
    },
  },
  mounted() {
    this.getCustomer(this.$route.params.id)
    this.getStripePublishableKey();
  },

  methods: {
    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
          })
    },
    getCustomer(user_id: any) {
      let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
      axios({
        method: "get",
        url: path,
        withCredentials: true,
      })
          .then((response: any) => {
            this.customer = response.data;
            this.customer_id = response.datauser_id

          })
          .catch(() => {
            notify({
              title: "Error",
              text: "Could not find customer",
              type: "error",
            });
          });
    },
    checkoutOil() {
      // Get Checkout Session ID
      fetch('http://localhost:5001/create-checkout-session', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ book_id: book.id }),
      })
        .then((result) => result.json())
        .then((data) => {
          // Redirect to Stripe Checkout
          return this.stripe.redirectToCheckout({ sessionId: data.sessionId });
        })
        .then((res) => {
          console.log(res);
        });
    },

    getStripePublishableKey() {
      fetch('http://localhost:5001/config')
        .then((result) => result.json())
        .then((data) => {
          // Initialize Stripe.js
          this.stripe = Stripe(data.publicKey);
        });
    },

  },
})
</script>

<style scoped></style>