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">
            <div class="p-2 border border-gray-300 rounded-lg">
              <img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
            </div>
          </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="printItem"
              class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
              <i class="fas fa-print mr-1"></i>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','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 generator - berdasarkan logika dari brankas list
const qrCodeUrl = computed(() => {
  if (createdItem.value && props.product) {
    const itemId = createdItem.value.id || createdItem.value.kode_item;
    const productName = props.product.nama.replace(/\s/g, "");
    const data = `ITM-${itemId}-${productName}`;
    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
  }
  return "";
});

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

// Fungsi print berdasarkan logika dari brankas list
const printItem = () => {
  if (qrCodeUrl.value && createdItem.value && props.product) {
    const printWindow = window.open('', '_blank');
    const itemCode = createdItem.value.kode_item || createdItem.value.id;
    
    printWindow.document.write(`
      <html>
        <head>
          <title>Print QR Code - ${itemCode}</title>
          <style>
            body { 
              font-family: Arial, sans-serif; 
              text-align: center; 
              padding: 20px; 
            }
            .qr-container { 
              border: 2px solid #ccc; 
              padding: 20px; 
              display: inline-block; 
              margin: 20px;
            }
            .item-info {
              margin-top: 10px;
              font-size: 14px;
            }
          </style>
        </head>
        <body>
          <div class="qr-container">
            <img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
            <div class="item-info">
              <div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
              <div>${props.product.nama}</div>
              <div style="color: #666; margin-top: 5px;">${props.product.berat}g</div>
            </div>
          </div>
        </body>
      </html>
    `);
    printWindow.document.close();
    printWindow.print();
  }
};

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>