Kasir/resources/js/components/CreateItemModal.vue

<template>
  <Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>

      <div v-if="!success">
        <div class="mb-4">
          <label class="block text-gray-700 mb-2">Pilih Nampan</label>
          <InputSelect v-model="selectedNampan" :options="positionListOptions" :disabled="loading" />
        </div>

        <div class="flex justify-end gap-3">
          <button @click="handleClose" :disabled="loading"
            class="px-4 py-2 text-white bg-gray-400 hover:bg-gray-500 rounded-lg transition-colors disabled:opacity-50">
            Batal
          </button>
          <button @click="createItem" :disabled="loading"
            class="px-4 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors disabled:bg-A disabled:cursor-not-allowed flex items-center gap-2">
            <svg v-if="loading" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
              </circle>
              <path class="opacity-75" fill="currentColor"
                d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
              </path>
            </svg>
            {{ loading ? 'Membuat...' : 'Buat Item' }}
          </button>
        </div>
      </div>

      <!-- Success State -->
      <div v-else>
        <div class="text-center">
          <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
              </path>
            </svg>
          </div>

          <h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
          <p class="text-gray-600 mb-2">
            Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{
              selectedNampanName }}.
          </p>
          <p class="text-sm text-gray-500 mb-6">
            ID Item: <strong>{{ createdItem.id }}</strong>
          </p>

          <div class="flex flex-row justify-between gap-3">
            <button @click="handleClose"
              class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors">
              Selesai
            </button>
            <button @click="printItem"
              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
              disabled>
              Print
            </button>
            <button @click="addNewItem"
              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
              Buat Lagi
            </button>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import axios from 'axios';
import Modal from './Modal.vue';
import InputSelect from './InputSelect.vue';

// Props
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  product: {
    type: Object,
    default: null
  }
});

// Emits
const emit = defineEmits(['close']);

// State
const selectedNampan = ref('');
const nampanList = ref([]);
const positionListOptions = ref([
  { value: '', label: 'Brankas', selected: true },
])
const success = ref(false);
const loading = ref(false);
const createdItem = ref(null);

// Computed
const selectedNampanName = computed(() => {
  if (!selectedNampan.value) return 'Brankas';

  console.log("Selected nampan ID:", selectedNampan.value);
  const nampan = nampanList.value.find(n => n.id === Number(selectedNampan.value));
  console.log("All nampan:", nampanList.value);
  console.log("Selected nampan:", nampan);
  return nampan ? nampan.nama : 'Brankas';
});

// Methods
const loadNampanList = async () => {
  try {
    const response = await axios.get('/api/nampan', {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
        });;
    nampanList.value = response.data;
    positionListOptions.value = [
      { value: '', label: 'Brankas', selected: !selectedNampan.value },
      ...nampanList.value.map(n => ({
        value: n.id,
        label: `${n.nama} (${n.items_count} items)`,
        selected: n.id === selectedNampan.value
      }))
    ];
  } catch (error) {
    console.error('Error loading nampan list:', error);
  }
};

const createItem = async () => {
  if (!props.product) return;

  loading.value = true;

  try {
    const payload = {
      id_produk: props.product.id
    };

    if (selectedNampan.value) {
      payload.id_nampan = selectedNampan.value;
    }

    const response = await axios.post('/api/item', payload, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
        });;

    success.value = true;
    createdItem.value = response.data.data
    console.log('Item created:', createdItem);

  } catch (error) {
    console.error('Error creating item:', error);
    alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
  } finally {
    loading.value = false;
  }
};

const addNewItem = () => {
  success.value = false;
  selectedNampan.value = '';
};

const printItem = () => {
  alert('Wak waw');
};

const handleClose = () => {
  // Reset state
  selectedNampan.value = '';
  success.value = false;
  loading.value = false;

  emit('close');
};

// Watchers
watch(() => props.isOpen, (newValue) => {
  if (newValue) {
    selectedNampan.value = '';
    success.value = false;
    loading.value = false;

    loadNampanList();
  }
});
</script>