Kasir/resources/js/components/CreateItemModal.vue

<template>
  <Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
    <div class="p-6">
      
      <div v-if="!success">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
        <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">
          <h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
          
          <!-- QR Code -->
          <div class="flex justify-center mb-4">
            <PrintBarcode :code="createdItem?.kode_item" :item="product"/>
          </div>

          <!-- Item Info -->
          <div class="text-center text-gray-700 font-medium mb-1">
            {{ createdItem?.kode_item }}
          </div>
          <div class="text-center text-gray-500 text-sm mb-6">
            {{ product?.nama }} - {{ createdItem?.nampan?.nama || 'Brankas' }}
          </div>

          <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="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, watch } from 'vue';
import axios from 'axios';
import Modal from './Modal.vue';
import InputSelect from './InputSelect.vue';
import PrintBarcode from './PrintBarcode.vue';

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

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

// 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);

// QR Code rendering/printing moved to PrintBarcode component


// 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);

    emit('itemAdded'); // 🔔 penting

    loadNampanList();
  } 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 = '';
  createdItem.value = null;
};


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

  emit('close');
};

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

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