<script>
import { ref } from 'vue'
import { createOrder } from "@/components/shop/Orders.vue";
import Swal from "sweetalert2";

//

export const showCreateOrderForm = async () => {
  await Swal.fire({
    title: 'Create Order',
    html: `
      <form id="createOrderForm">
        <div class="field">
          <label class="label">Customer id</label>
          <div class="control">
            <input class="input" type="number" id="customer_id" />
          </div>
        </div>
        <div class="field">
          <label class="label">Department id</label>
          <div class="control">
            <input class="input" type="number" id="department_id" />
          </div>
        </div>
        <div class="field">
          <label class="label">Reference</label>
          <div class="control">
            <input class="input" type="text" id="reference" />
          </div>
        </div>
        <div class="field">
          <label class="label">Notes</label>
          <div class="control">
            <input class="input" type="text" id="notes" />
          </div>
        </div>
      </form>
    `,
    showCancelButton: true,
    confirmButtonText: 'Create',
    preConfirm: () => {
      const customer_id = document.getElementById('customer_id').value;
      const department_id = document.getElementById('department_id').value;
      const reference = document.getElementById('reference').value;
      const notes = document.getElementById('notes').value;
      createOrder(customer_id, department_id, reference, notes).then((response) => {
        Swal.fire({
          title: 'Order created',
          icon: 'success'
        });
      }).catch((error) => {
        Swal.fire({
          title: 'Error',
          icon: 'error'
        });
      });
    }
  });
};
</script>