Kasir/resources/js/pages/Tray.vue

<template>
  <mainLayout>
    
    <!-- Header -->
<div class="mb-4">
  <!-- Judul -->
  <p style="font-family: 'IM FELL Great Primer', serif; font-style: italic; font-size: 25px;">
    NAMPAN
  </p>

  <!-- Searchbar -->
  <div class="flex justify-end mt-2">
    <div class="w-64">
      <searchbar v-model:search="searchQuery" />
    </div>
  </div>

  <!-- Tombol -->
  <div class="flex gap-2 mt-3 justify-end">
    <!-- Tambah Nampan -->
    <button 
      @click="openModal" 
      class="px-4 py-2 hover:bg-green-700 rounded-md shadow font-semibold"
      style="background-color: #DAC0A3; color: #102C57;">
      Tambah Nampan
    </button>

    <!-- Kosongkan -->
    <button 
      @click="openConfirmModal" 
      class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md">
      Kosongkan
    </button>
  </div>
</div>



    <!-- Search + List -->
    
    <TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray"/>

    <!-- Modal Tambah/Edit Nampan -->
    <div 
      v-if="showModal" 
      class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
    >
      <div class="bg-white rounded-lg shadow-lg p-6 w-96">
        <h2 class="text-lg font-semibold mb-4" style="color: #102C57;">Tambah Nampan</h2>

        <label class="block mb-2 text-sm font-medium" style="color: #102C57;">Nama Nampan</label>
        <input 
          v-model="trayName" 
          type="text" 
          placeholder="Contoh: A4" 
          class="w-full border rounded-md p-2 mb-4"
        />

        <div class="flex justify-end gap-2">
          <button 
            @click="closeModal" 
            class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md">
            Cancel
          </button>

          <button 
            @click="saveTray" 
            class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md" 
            style="color: #102C57;">
            Save
          </button>
        </div>
      </div>
    </div>

    <!-- Modal Konfirmasi Kosongkan -->
    <div 
      v-if="showConfirmModal" 
      class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
    >
      <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
        <h2 class="text-xl font-bold mb-3" style="color: #102C57;">Kosongkan semua nampan?</h2>
        <p class="text-gray-600 mb-6">
          Semua item akan dimasukkan ke brankas. <br/>
          Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
        </p>
        <div class="flex justify-center gap-4">
          <button 
            @click="closeConfirmModal" 
            class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold">
            Batal
          </button>
          <button 
            @click="confirmEmptyTray" 
            class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold">
            Ya
          </button>
        </div>
      </div>
    </div>

  </mainLayout>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import mainLayout from '../layouts/mainLayout.vue'
import searchbar from '../components/searchbar.vue'
import TrayList from '../components/TrayList.vue'

const searchQuery = ref("")
const showModal = ref(false)
const showConfirmModal = ref(false)
const trayName = ref("")
const editingTrayId = ref(null)

// buka modal tambah/edit
const openModal = () => { showModal.value = true }
const closeModal = () => {
  trayName.value = ""
  editingTrayId.value = null
  showModal.value = false
}

// simpan nampan
const saveTray = async () => {
  if (!trayName.value.trim()) {
    alert("Nama Nampan tidak boleh kosong")
    return
  }
  try {
    if (editingTrayId.value) {
      await axios.put(`/api/nampan/${editingTrayId.value}`, { nama: trayName.value })
      alert("Nampan berhasil diupdate")
    } else {
      await axios.post("/api/nampan", { nama: trayName.value })
      alert("Nampan berhasil ditambahkan")
    }
    closeModal()
    location.reload()
  } catch (error) {
    console.error(error)
    alert("Gagal menyimpan nampan")
  }
}

// === Konfirmasi kosongkan nampan ===
const openConfirmModal = () => { showConfirmModal.value = true }
const closeConfirmModal = () => { showConfirmModal.value = false }

const confirmEmptyTray = async () => {
  try {
    await axios.delete("/api/kosongkan-nampan",)
    alert("Semua item berhasil dipindahkan ke Brankas")
    closeConfirmModal()
    location.reload()
  } catch (error) {
    console.error(error)
    alert("Gagal mengosongkan nampan")
  }
}

const editTray = (tray) => {
  trayName.value = tray.nama
  editingTrayId.value = tray.id
  showModal.value = true
}

const deleteTray = async (id) => {
  if (!confirm("Yakin ingin menghapus nampan ini?")) return
  try {
    await axios.delete(`/api/nampan/${id}`)
    alert("Nampan berhasil dihapus")
    location.reload()
  } catch (error) {
    console.error(error)
    alert("Gagal menghapus nampan")
  }
}
</script>