283 lines
18 KiB
PHP
283 lines
18 KiB
PHP
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
|
|
@if (session()->has('message'))
|
|
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
|
|
class="bg-green-500 text-white p-3 rounded-lg shadow-md mb-4">
|
|
{{ session('message') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 p-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-semibold text-neutral-800 dark:text-neutral-100">Daftar Item</h2>
|
|
<button wire:click="create()"
|
|
class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg">
|
|
Tambah Item
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<input type="text" wire:model.live.debounce.300ms="search" placeholder="Cari item..."
|
|
class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-neutral-300 dark:border-neutral-700 rounded-md dark:bg-neutral-800 dark:text-neutral-200">
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
<thead class="bg-neutral-50 dark:bg-neutral-800">
|
|
<tr>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider cursor-pointer"
|
|
wire:click="sortBy('name')">
|
|
Nama Item
|
|
@if ($sortBy == 'name')
|
|
@if ($sortDirection == 'asc')
|
|
↑
|
|
@else
|
|
↓
|
|
@endif
|
|
@endif
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|
Gambar
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider cursor-pointer"
|
|
wire:click="sortBy('price')">
|
|
Harga
|
|
@if ($sortBy == 'price')
|
|
@if ($sortDirection == 'asc')
|
|
↑
|
|
@else
|
|
↓
|
|
@endif
|
|
@endif
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider cursor-pointer"
|
|
wire:click="sortBy('type_item_id')">
|
|
Tipe Item
|
|
@if ($sortBy == 'type_item_id')
|
|
@if ($sortDirection == 'asc')
|
|
↑
|
|
@else
|
|
↓
|
|
@endif
|
|
@endif
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider cursor-pointer"
|
|
wire:click="sortBy('is_available')">
|
|
Tersedia
|
|
@if ($sortBy == 'is_available')
|
|
@if ($sortDirection == 'asc')
|
|
↑
|
|
@else
|
|
↓
|
|
@endif
|
|
@endif
|
|
</th>
|
|
<th scope="col" class="relative px-6 py-3">
|
|
<span class="sr-only">Aksi</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-neutral-900 divide-y divide-neutral-200 dark:divide-neutral-700">
|
|
@forelse ($items as $item)
|
|
<tr>
|
|
<td
|
|
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
|
{{ $item->name }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
|
|
@if ($item->image_url)
|
|
<img src="{{ asset($item->image_url) }}" alt="{{ $item->name }}"
|
|
class="h-10 w-10 object-cover rounded">
|
|
@else
|
|
<span class="text-neutral-400">Tidak ada gambar</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
|
|
Rp{{ number_format($item->price, 0, ',', '.') }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
|
|
{{ $item->typeItem->name ?? 'N/A' }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
|
@if ($item->is_available)
|
|
<span
|
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
|
|
Ya
|
|
</span>
|
|
@else
|
|
<span
|
|
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
|
|
Tidak
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<button wire:click="edit({{ $item->id }})"
|
|
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-500 mr-2">Edit</button>
|
|
<button wire:click="confirmDelete({{ $item->id }})"
|
|
class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-500">Hapus</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6"
|
|
class="px-6 py-4 text-center text-sm text-neutral-500 dark:text-neutral-300">
|
|
Tidak ada data item yang ditemukan.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ $items->links() }}
|
|
</div>
|
|
</div>
|
|
|
|
@if ($isModalOpen)
|
|
<div class="fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50">
|
|
<div
|
|
class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl p-6 w-full max-w-lg mx-auto overflow-y-auto max-h-[90vh]">
|
|
<h3 class="text-lg leading-6 font-medium text-neutral-900 dark:text-neutral-100 mb-4">
|
|
{{ $itemId ? 'Edit Item' : 'Tambah Item Baru' }}
|
|
</h3>
|
|
<form wire:submit.prevent="store">
|
|
<div class="mb-4">
|
|
<label for="name"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">Nama Item</label>
|
|
<input type="text" id="name" wire:model.lazy="name"
|
|
class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-700 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-700 dark:text-neutral-100">
|
|
@error('name')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="description"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">Deskripsi</label>
|
|
<textarea id="description" wire:model.lazy="description" rows="3"
|
|
class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-700 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-700 dark:text-neutral-100"></textarea>
|
|
@error('description')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="price"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">Harga</label>
|
|
<input type="number" step="0.01" id="price" wire:model.lazy="price"
|
|
class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-700 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-700 dark:text-neutral-100">
|
|
@error('price')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="new_image"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">Gambar Item</label>
|
|
<input type="file" id="new_image" wire:model="new_image"
|
|
class="mt-1 block w-full text-sm text-neutral-700 dark:text-neutral-200 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-neutral-700 dark:file:text-neutral-200 dark:hover:file:bg-neutral-600">
|
|
@error('new_image')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
|
|
@if ($new_image)
|
|
<div class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">Pratinjau Gambar Baru:
|
|
</div>
|
|
<img src="{{ $new_image->temporaryUrl() }}" class="mt-2 h-20 w-20 object-cover rounded">
|
|
@elseif ($image_url)
|
|
<div class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">Gambar Saat Ini:</div>
|
|
<img src="{{ asset($image_url) }}" class="mt-2 h-20 w-20 object-cover rounded">
|
|
@endif
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="is_available"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">Tersedia?</label>
|
|
<input type="checkbox" id="is_available" wire:model="is_available"
|
|
class="mt-1 rounded border-neutral-300 dark:border-neutral-700 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
|
@error('is_available')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="type_item_id"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">Tipe Item</label>
|
|
<select id="type_item_id" wire:model.lazy="type_item_id"
|
|
class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-700 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-700 dark:text-neutral-100">
|
|
<option value="">-- Pilih Tipe Item --</option>
|
|
{{-- --- UBAH: Gunakan $allTypeItems yang dilewatkan dari komponen Livewire --- --}}
|
|
@foreach ($allTypeItems as $typeItem)
|
|
<option value="{{ $typeItem->id }}">{{ $typeItem->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('type_item_id')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- --- BARU: Bagian untuk pemilihan Bundles (multi-select) --- --}}
|
|
<div class="mb-4">
|
|
<label for="bundle_ids"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">Bundles</label>
|
|
{{-- --- UBAH: Tambahkan 'multiple' dan 'wire:model.live' untuk mendukung multi-select --- --}}
|
|
<select id="bundle_ids" wire:model.live="bundle_ids" multiple
|
|
class="mt-1 block w-full rounded-md border-neutral-300 dark:border-neutral-700 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-neutral-700 dark:text-neutral-100 h-48">
|
|
<option value="">-- Pilih Bundles (Opsional) --</option>
|
|
{{-- --- UBAH: Gunakan $allBundles yang dilewatkan dari komponen Livewire --- --}}
|
|
@foreach ($allBundles as $bundle)
|
|
<option value="{{ $bundle->id }}">{{ $bundle->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
{{-- --- BARU: Error messages untuk bundle_ids dan bundle_ids.* --- --}}
|
|
@error('bundle_ids')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
@error('bundle_ids.*')
|
|
<span class="text-red-500 text-xs">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
{{-- --- AKHIR BARU: Bagian untuk pemilihan Bundles --- --}}
|
|
|
|
<div class="flex justify-end gap-2">
|
|
<button type="button" wire:click="closeModal()"
|
|
class="inline-flex justify-center rounded-md border border-neutral-300 dark:border-neutral-700 shadow-sm px-4 py-2 bg-white dark:bg-neutral-700 text-base font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
|
|
Simpan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@if ($isDeleteModalOpen)
|
|
<div class="fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50">
|
|
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl p-6 w-full max-w-sm mx-auto">
|
|
<h3 class="text-lg leading-6 font-medium text-neutral-900 dark:text-neutral-100 mb-4">
|
|
Konfirmasi Hapus
|
|
</h3>
|
|
<p class="text-neutral-600 dark:text-neutral-300 mb-6">
|
|
Apakah Anda yakin ingin menghapus item ini? Tindakan ini tidak dapat dibatalkan.
|
|
</p>
|
|
<div class="flex justify-end gap-2">
|
|
<button type="button" wire:click="closeDeleteModal()"
|
|
class="inline-flex justify-center rounded-md border border-neutral-300 dark:border-neutral-700 shadow-sm px-4 py-2 bg-white dark:bg-neutral-700 text-base font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
|
Batal
|
|
</button>
|
|
<button type="button" wire:click="delete()"
|
|
class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
|
|
Hapus
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|