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

//

export const showEditOrderForm = async (id, customer_id, department_id, reference, notes) => {
  await Swal.fire({
    title: 'Edit Product',
    html: `
      <form id="editProductForm">
        <div class="field">
          <label class="label">Customer ID</label>
          <div class="control">
            <input class="input" type="text" id="customer_id" value="${customer_id}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Department ID</label>
          <div class="control">
            <input class="input" type="text" id="department_id" value="${department_id}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Reference</label>
          <div class="control">
            <input class="input" type="text" id="reference" value="${reference}" />
          </div>
        </div>
        <div class="field">
          <label class="label">Notes</label>
          <div class="control">
            <input class="input" type="text" id="notes" value="${notes}" />
          </div>
        </div>
      </form>
    `,
    showCancelButton: true,
    confirmButtonText: 'Edit Order',
    preConfirm: () => {
      editOrder(id, document.getElementById('customer_id').value, document.getElementById('department_id').value, document.getElementById('reference').value, document.getElementById('notes').value)
          .then(() => {
            Swal.fire('Order edited successfully');
          })
          .catch((e) => {
            Swal.fire('Error', e.response.data.error ?? e.response, 'error');
          });
    }
  });
}

</script>