Basdat/web/js/pages/admin/modals/EditItemModal.js

// assets/js/pages/admin/modals/EditItemModal.js

const EditItemModal = ({ state, handlers }) => {
  const {
    showEditItemModal,
    setShowEditItemModal,
    selectedItemToEdit,
    setSelectedItemToEdit,
    loading,
    photoPreview,
    setPhotoPreview, // <--- Pastikan mengambil setPhotoPreview dari state
  } = state;
  const { handleUpdateItem, handlePhotoChange } = handlers;

  return (
    <Modal
      isOpen={showEditItemModal}
      onClose={() => {
        setShowEditItemModal(false);
        setSelectedItemToEdit(null);
        setPhotoPreview(null);
      }}
      title="✏️ Edit Barang"
      size="large"
    >
      {selectedItemToEdit && (
        <form onSubmit={handleUpdateItem} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block font-semibold mb-2 text-slate-300">
                Nama Barang *
              </label>
              <input
                type="text"
                name="name"
                defaultValue={selectedItemToEdit.name}
                required
                className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
              />
            </div>

            <div>
              <label className="block font-semibold mb-2 text-slate-300">
                Kategori *
              </label>
              <select
                name="category_id"
                defaultValue={selectedItemToEdit.category_id}
                required
                className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
              >
                {state.categories &&
                  state.categories.map((cat) => (
                    <option key={cat.id} value={cat.id}>
                      {" "}
                      {/* Sesuaikan value dengan slug/id dari DB */}
                      {cat.name}
                    </option>
                  ))}
              </select>
            </div>
          </div>

          {/* ✅ BAGIAN BARU: STATUS DROPDOWN */}
          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Status Barang *
            </label>
            <select
              name="status"
              defaultValue={selectedItemToEdit.status}
              required
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            >
              <option value="unclaimed">Unclaimed (Aktif/Belum Diklaim)</option>
              <option value="pending_claim">
                Pending Claim (Sedang Diverifikasi)
              </option>
              <option value="verified">Verified (Terverifikasi)</option>
              <option value="expired">Expired (Kadaluarsa)</option>
              <option value="case_closed">
                Case Closed (Selesai/Diarsipkan)
              </option>
            </select>
            <p className="text-xs text-yellow-400 mt-1">
              ℹ️ Ubah status ke <strong>Unclaimed</strong> jika ingin
              mengaktifkan kembali barang Expired agar bisa diklaim user.
            </p>
          </div>
          {/* ✅ AKHIR BAGIAN BARU */}

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Update Foto Barang (Opsional)
            </label>
            <input
              type="file"
              name="photo"
              accept="image/*"
              onChange={handlePhotoChange}
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700 focus:outline-none"
            />
            {/* Tampilkan preview foto baru ATAU foto lama */}
            <div className="mt-3">
              <p className="text-xs text-slate-400 mb-1">Preview:</p>
              <img
                src={photoPreview || selectedItemToEdit.photo_url}
                alt="Preview"
                className="w-full h-48 object-cover rounded-xl border-2 border-blue-500"
              />
            </div>
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Lokasi *
            </label>
            <input
              type="text"
              name="location"
              defaultValue={selectedItemToEdit.location}
              required
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Deskripsi Umum *
            </label>
            <textarea
              name="description"
              defaultValue={selectedItemToEdit.description}
              required
              rows="3"
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Ciri Khusus Rahasia * 🔒
            </label>
            <textarea
              name="secret_details"
              defaultValue={selectedItemToEdit.secret_details}
              required
              rows="3"
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block font-semibold mb-2 text-slate-300">
                Tanggal Ditemukan *
              </label>
              <input
                type="date"
                name="date_found"
                defaultValue={selectedItemToEdit.date_found?.split("T")[0]}
                required
                className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
              />
            </div>

            <div>
              <label className="block font-semibold mb-2 text-slate-300">
                Kontak Pelapor *
              </label>
              <input
                type="text"
                name="reporter_contact"
                defaultValue={selectedItemToEdit.reporter_contact}
                required
                className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
              />
            </div>
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Nama Pelapor *
            </label>
            <input
              type="text"
              name="reporter_name"
              defaultValue={selectedItemToEdit.reporter_name}
              required
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div>
            <label className="block font-semibold mb-2 text-slate-300">
              Alasan Edit *
            </label>
            <textarea
              name="reason"
              required
              rows="2"
              className="w-full px-4 py-3 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Jelaskan alasan edit..."
            />
          </div>

          <button
            type="submit"
            disabled={loading}
            className="w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl hover:from-blue-700 hover:to-blue-800 transition font-semibold shadow-lg disabled:from-slate-600 disabled:to-slate-700"
          >
            {loading ? "⏳ Menyimpan..." : "✅ Update Barang"}
          </button>
        </form>
      )}
    </Modal>
  );
};

window.EditItemModal = EditItemModal;