<!-- src/pages/admin/promo/create.vue -->
<template>
  <div class="flex">

    <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: 'promo' }">
              Promotions
            </router-link>
          </li>
        </ul>
      </div>

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

          <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">Promotion Name</label>
            <input v-model="form.name_of_promotion" class="input input-bordered input-sm w-full max-w-xs" id="title"
              type="text" placeholder="Name" />
          </div>

          <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">Text Appears on
              Ticket</label>
            <input v-model="form.text_on_ticket" class="input input-bordered input-sm w-full max-w-xs" id="title"
              type="text" placeholder="Text on Ticket max 20 characters" />
          </div>
          <div class="mb-4">
            <label class="block text-white text-sm font-bold mb-2">How much off gallon (0.05 for
              example)</label>
            <input v-model="form.money_off_delivery" class="input input-bordered input-sm w-full max-w-xs" id="title"
              type="text" placeholder="0.01" />
          </div>

          <div class="col-span-12 md:col-span-4 mb-5 md:mb-0">
            <textarea v-model="form.description" rows="4" class="textarea block p-2.5 w-full input-bordered "
              id="description" type="text" placeholder="Description of Promo" />
          </div>

          <div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
            <button class="btn btn-secondary btn-sm" :disabled="isSubmitting">
              {{ isSubmitting ? 'Creating...' : 'Create Promo' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { notify } from "@kyvg/vue3-notification"
import { adminService } from '../../../services/adminService'

const router = useRouter()

// State
const isSubmitting = ref(false)
const form = ref({
  name_of_promotion: '',
  description: '',
  money_off_delivery: '',
  text_on_ticket: '',
})

// Methods
async function onSubmit() {
  if (isSubmitting.value) return
  isSubmitting.value = true

  try {
    const response = await adminService.promos.create({
      name_of_promotion: form.value.name_of_promotion,
      money_off_delivery: form.value.money_off_delivery,
      description: form.value.description,
      text_on_ticket: form.value.text_on_ticket,
    })

    if ((response.data as any).ok) {
      notify({
        title: "Success",
        text: "Promo has been created!",
        type: "success",
      })
      router.push({ name: "promo" })
    } else if ((response.data as any).error) {
      notify({
        title: "Error",
        text: (response.data as any).error,
        type: "error",
      })
    }
  } catch (error) {
    notify({
      title: "Error",
      text: "Failed to create promo",
      type: "error",
    })
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped></style>