<template>
    <div
        class="fixed inset-0 flex items-center justify-center bg-black/65 z-50"
    >
        <div class="bg-white rounded-lg p-6 w-96 shadow-lg">
            <h2 class="text-lg font-bold mb-4">Tambah Akun</h2>

            <form @submit.prevent="createAkun" class="space-y-3">
                <!-- Nama -->
                <label for="nama">Nama</label>
                <InputField
                    v-model="form.nama"
                    id="nama"
                    type="text"
                    :required="true"
                />

                <div>
                    <label for="password">Password</label>
                    <InputField
                        v-model="form.password"
                        id="password"
                        type="password"
                        :required="true"
                    />
                </div>

                <label for="peran">Peran</label>
                <InputSelect
                    v-model="form.role"
                    :options="[
                        { value: 'owner', label: 'Owner' },
                        { value: 'kasir', label: 'Kasir' },
                    ]"
                    placeholder="-- Pilih Peran --"
                />

                <!-- Tombol -->
                <div class="flex justify-end gap-2 mt-4">
                    <button
                        type="button"
                        @click="$emit('close')"
                        class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
                    >
                        Batal
                    </button>
                    <button
                        type="submit"
                        class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
                    >
                        Simpan
                    </button>
                </div>
            </form>

            <!-- Error -->
            <p v-if="errorMessage" class="text-red-500 text-sm mt-3">
                {{ errorMessage }}
            </p>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import InputField from "@/components/InputField.vue";
import InputSelect from "@/components/InputSelect.vue";

export default {
    name: "CreateAkun",
    components: { InputField, InputSelect },
    data() {
        return {
            form: { nama: "", password: "", role: "" },
            errorMessage: "",
        };
    },
    methods: {
        async createAkun() {
            try {
                await axios.post("api/user", this.form, {
                    headers: {
                        Authorization: `Bearer ${localStorage.getItem(
                            "token"
                        )}`,
                    },
                });
                this.form = { nama: "", password: "", role: "" };
                this.$emit("refresh");
                this.$emit("close");
            } catch (err) {
                this.errorMessage =
                    err.response?.data?.message || "Gagal menambah akun.";
                console.error("Gagal tambah akun:", err);
            }
        },
    },
};
</script>
