<template>
    <div
      v-if="isOpen"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
        <h2 class="text-xl font-bold mb-4">Tambah Sales</h2>

        <form @submit.prevent="handleSubmit" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700">Nama Sales</label>
            <input v-model="form.nama" type="text" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700">No HP</label>
            <input v-model="form.no_hp" type="text" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required />
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700">Alamat</label>
            <textarea v-model="form.alamat" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-[#c6a77d] focus:outline-none" required></textarea>
          </div>

          <div class="flex justify-end gap-2 mt-6">
            <button type="button" @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
            <button type="submit" class="px-4 py-2 bg-[#c6a77d] text-white rounded hover:bg-[#b09065]">Simpan</button>
          </div>
        </form>
      </div>
    </div>
  </template>

  <script setup>
  import { ref } from "vue";
  import axios from "axios";

  const props = defineProps({
    isOpen: Boolean,
  });

  const emit = defineEmits(["close"]);

  const form = ref({
    nama: "",
    no_hp: "",
    alamat: "",
  });

  const handleSubmit = async () => {
    try {
      await axios.post("/api/sales", form.value);
      emit("close");
    } catch (error) {
      console.error("Error creating sales:", error);
    }
  };
  </script>
