<script setup>
const props = defineProps({
  modelValue: Boolean,
  id: String,
  docId: String
})

const emit = defineEmits(['update:modelValue', 'update:docId'])

const documentAction = ref(props.docId || 'DR')
const submitDocumentAction = async () => {
  await $fetch('/api/orders/'+props.id+'/document-action', {
    method: 'POST',
    headers: useRequestHeaders(['cookie']),
    body: {
      documentAction: documentAction.value
    }
  })
  emit('update:modelValue', false)
  emit('update:docId', documentAction.value)
}
</script>

<template>
  <div class="modal" :class="{'active': modelValue}" :style="{display: modelValue ? 'block' : 'none'}">
    <div class="modalDialog modalCenter" @click.self="emit('update:modelValue', false)">
      <div class="modalContent">
        <div class="modalHeader">
          <h3 class="modalTitle">Document Action</h3>
          <div class="cursor-pointer" @click="emit('update:modelValue', false)">
            <span class="tf-icon ti ti-x ti-sm me-1"></span>
          </div>
        </div>
        <div class="modalBody">
          <div class="d-flex items-center">
            <label class="label d-block mr-2 w-280px">Select Document Action</label>
            <select v-model="documentAction" class="select">
              <option value="CO">Completed</option>
              <option value="DR">Draft</option>
              <option value="VO">Void</option>
            </select>
          </div>
          <p>Generate documents and complete transaction</p>
        </div>
        <div class="modalFooter">
          <div></div>
          <div class="d-flex gap-10px">
            <button type="button" class="button" @click="emit('update:modelValue', false)">Close</button>
            <button type="button" class="button" @click="submitDocumentAction">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>