<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
    <!--[if BLOCK]><![endif]--><?php 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">
            <?php echo e(session('message')); ?>

        </div>
    <?php endif; ?><!--[if ENDBLOCK]><![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 BLOCK]><![endif]--><?php if($sortBy == 'name'): ?>
                                <!--[if BLOCK]><![endif]--><?php if($sortDirection == 'asc'): ?>
                                    &uarr;
                                <?php else: ?>
                                    &darr;
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            <?php endif; ?><!--[if ENDBLOCK]><![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">
                            Deskripsi
                        </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 BLOCK]><![endif]--><?php if($sortBy == 'price'): ?>
                                <!--[if BLOCK]><![endif]--><?php if($sortDirection == 'asc'): ?>
                                    &uarr;
                                <?php else: ?>
                                    &darr;
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            <?php endif; ?><!--[if ENDBLOCK]><![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 BLOCK]><![endif]--><?php if($sortBy == 'type_item_id'): ?>
                                <!--[if BLOCK]><![endif]--><?php if($sortDirection == 'asc'): ?>
                                    &uarr;
                                <?php else: ?>
                                    &darr;
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            <?php endif; ?><!--[if ENDBLOCK]><![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 BLOCK]><![endif]--><?php if($sortBy == 'is_available'): ?>
                                <!--[if BLOCK]><![endif]--><?php if($sortDirection == 'asc'): ?>
                                    &uarr;
                                <?php else: ?>
                                    &darr;
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            <?php endif; ?><!--[if ENDBLOCK]><![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">
                    <!--[if BLOCK]><![endif]--><?php $__empty_1 = true; $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td
                                class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-900 dark:text-neutral-100">
                                <?php echo e($item->name); ?>

                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
                                <!--[if BLOCK]><![endif]--><?php if($item->image_url): ?>
                                    <img src="<?php echo e(asset($item->image_url)); ?>" alt="<?php echo e($item->name); ?>"
                                        class="h-10 w-10 object-cover rounded">
                                <?php else: ?>
                                    <span class="text-neutral-400">Tidak ada gambar</span>
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            </td>
                            <td class="px-6 py-4 text-sm text-neutral-500 dark:text-neutral-300 max-w-xs truncate">
                                <?php echo e($item->description ?? 'Tidak ada deskripsi'); ?>

                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
                                Rp. <?php echo e(number_format($item->price, 0, ',', '.')); ?>

                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-500 dark:text-neutral-300">
                                <?php echo e($item->typeItem->name ?? 'N/A'); ?>

                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <!--[if BLOCK]><![endif]--><?php 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>
                                <?php 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>
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button wire:click="edit(<?php echo e($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(<?php echo e($item->id); ?>)"
                                    class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-500">Hapus</button>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="7"
                                class="px-6 py-4 text-center text-sm text-neutral-500 dark:text-neutral-300">
                                Tidak ada data item yang ditemukan.
                            </td>
                        </tr>
                    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            <?php echo e($items->links()); ?>

        </div>
    </div>

    <!--[if BLOCK]><![endif]--><?php 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">
                    <?php echo e($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">
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="text-red-500 text-xs"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                    </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>
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['description'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="text-red-500 text-xs"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                    </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">
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['price'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="text-red-500 text-xs"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                    </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">
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['new_image'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="text-red-500 text-xs"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->

                        <!--[if BLOCK]><![endif]--><?php if($new_image): ?>
                            <div class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">Pratinjau Gambar Baru:
                            </div>
                            <img src="<?php echo e($new_image->temporaryUrl()); ?>" class="mt-2 h-20 w-20 object-cover rounded">
                        <?php elseif($image_url): ?>
                            <div class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">Gambar Saat Ini:</div>
                            <img src="<?php echo e(asset($image_url)); ?>" class="mt-2 h-20 w-20 object-cover rounded">
                        <?php endif; ?><!--[if ENDBLOCK]><![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">
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['is_available'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="text-red-500 text-xs"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                    </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>
                            <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $allTypeItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $typeItem): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($typeItem->id); ?>"><?php echo e($typeItem->name); ?></option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
                        </select>
                        <!--[if BLOCK]><![endif]--><?php $__errorArgs = ['type_item_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <span class="text-red-500 text-xs"><?php echo e($message); ?></span>
                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><!--[if ENDBLOCK]><![endif]-->
                    </div>

                    <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>
    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
    <!--[if BLOCK]><![endif]--><?php 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>
    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
</div>
<?php /**PATH E:\!PROJECT\dfood-website\resources\views/livewire/item-table.blade.php ENDPATH**/ ?>