<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <div>
            <h1 class="text-lg font-semibold text-gray-800">Items</h1>
            <p class="text-xs text-gray-400 mt-0.5">Manage products / services used in invoices</p>
        </div>
     <?php $__env->endSlot(); ?>

    <div class="space-y-6" x-data="itemsIndex()" x-init="load()">

        <div class="lg:hidden">
            <h1 class="text-xl font-bold text-gray-900">Items</h1>
            <p class="text-sm text-gray-500">Manage products / services used in invoices</p>
        </div>

        
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div class="flex items-center gap-3 w-full sm:w-auto">
                <div class="relative w-full sm:w-72">
                    <svg class="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 10a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input type="text" x-model="search" @input.debounce.400ms="page = 1; load()"
                           placeholder="Search name, SKU, HS code..."
                           class="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-gray-200 focus:border-indigo-400 focus:ring-indigo-400 placeholder-gray-400">
                </div>

                <label class="flex items-center gap-2 text-xs text-gray-500 whitespace-nowrap">
                    <input type="checkbox" x-model="activeOnly" @change="page = 1; load()"
                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-400">
                    Active only
                </label>
            </div>

            <div class="flex items-center gap-2">
                <a href="<?php echo e(route('items.import')); ?>"
                   class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-gray-200 text-gray-700 bg-white text-sm font-medium hover:bg-gray-50 transition shadow-sm">
                    <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                    Import Items
                </a>
                <a href="<?php echo e(route('items.create')); ?>"
                   class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                    Add Item
                </a>
            </div>
        </div>

        
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-left text-gray-400 text-xs uppercase tracking-wide bg-gray-50/60">
                            <th class="px-5 py-3 font-medium">Item</th>
                            <th class="px-5 py-3 font-medium">SKU</th>
                            <th class="px-5 py-3 font-medium">HS Code</th>
                            <th class="px-5 py-3 font-medium">UoM</th>
                            <th class="px-5 py-3 font-medium">Rate</th>
                            <th class="px-5 py-3 font-medium">Price (Excl. ST)</th>
                            <th class="px-5 py-3 font-medium">Status</th>
                            <th class="px-5 py-3 font-medium text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        <template x-if="loading">
                            <tr><td colspan="8" class="px-5 py-14 text-center text-gray-400 text-sm">Loading...</td></tr>
                        </template>

                        <template x-if="!loading && items.length === 0">
                            <tr><td colspan="8" class="px-5 py-14 text-center text-gray-400 text-sm">
                                No items found — <a href="<?php echo e(route('items.create')); ?>" class="text-indigo-600 font-medium hover:text-indigo-700">add your first one</a>.
                            </td></tr>
                        </template>

                        <template x-for="item in items" :key="item.id">
                            <tr class="hover:bg-gray-50/60">
                                <td class="px-5 py-3.5">
                                    <p class="font-medium text-gray-700" x-text="item.name"></p>
                                    <p class="text-xs text-gray-400 truncate max-w-xs" x-text="item.default_sale_type ?? ''"></p>
                                </td>
                                <td class="px-5 py-3.5 text-gray-500" x-text="item.sku || '—'"></td>
                                <td class="px-5 py-3.5 text-gray-500" x-text="item.hs_code"></td>
                                <td class="px-5 py-3.5 text-gray-500" x-text="item.uom"></td>
                                <td class="px-5 py-3.5 text-gray-500" x-text="item.default_rate"></td>
                                <td class="px-5 py-3.5 text-gray-500" x-text="formatMoney(item.default_price_excl_st)"></td>
                                <td class="px-5 py-3.5">
                                    <button @click="toggleActive(item)"
                                            class="text-xs font-medium px-2 py-0.5 rounded-full transition"
                                            :class="item.is_active ? 'bg-green-50 text-green-700 hover:bg-green-100' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'">
                                        <span x-text="item.is_active ? 'Active' : 'Inactive'"></span>
                                    </button>
                                </td>
                                <td class="px-5 py-3.5">
                                    <div class="flex items-center justify-end gap-1">
                                        <a :href="`/items/${item.id}/edit`" title="Edit"
                                           class="p-1.5 rounded-md text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 transition">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                        </a>
                                        <button @click="remove(item)" title="Delete"
                                                class="p-1.5 rounded-md text-gray-400 hover:text-red-600 hover:bg-red-50 transition">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            
            <div class="flex items-center justify-between px-5 py-3 border-t border-gray-100 text-xs text-gray-400" x-show="!loading && meta.last_page > 1">
                <span x-text="`Page ${meta.current_page} of ${meta.last_page} · ${meta.total} items`"></span>
                <div class="flex items-center gap-2">
                    <button @click="page > 1 && (page--, load())" :disabled="page <= 1"
                            class="px-2.5 py-1 rounded-md border border-gray-200 disabled:opacity-40 hover:bg-gray-50">Prev</button>
                    <button @click="page < meta.last_page && (page++, load())" :disabled="page >= meta.last_page"
                            class="px-2.5 py-1 rounded-md border border-gray-200 disabled:opacity-40 hover:bg-gray-50">Next</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function itemsIndex() {
            return {
                items: [],
                meta: { current_page: 1, last_page: 1, total: 0 },
                search: '',
                activeOnly: false,
                page: 1,
                loading: false,

                async load() {
                    this.loading = true;
                    const params = new URLSearchParams({
                        page: this.page,
                        search: this.search,
                        active_only: this.activeOnly ? 1 : 0,
                    });
                    try {
                        const res = await apiFetch(`<?php echo e(route('items.data')); ?>?${params}`);
                        this.items = res.data;
                        this.meta = { current_page: res.current_page, last_page: res.last_page, total: res.total };
                    } catch (e) {
                        // apiFetch already toasts the error
                    } finally {
                        this.loading = false;
                    }
                },

                async toggleActive(item) {
                    const prev = item.is_active;
                    item.is_active = !item.is_active;
                    try {
                        await apiFetch(`/items/${item.id}`, {
                            method: 'PUT',
                            body: { ...item, is_active: item.is_active },
                        });
                        notify('Status updated.');
                    } catch (e) {
                        item.is_active = prev;
                    }
                },

                async remove(item) {
                    if (!confirm(`Delete "${item.name}"? This cannot be undone.`)) return;
                    try {
                        await apiFetch(`/items/${item.id}`, { method: 'DELETE' });
                        notify('Item deleted.');
                        this.load();
                    } catch (e) {}
                },

                formatMoney(v) {
                    const n = parseFloat(v ?? 0);
                    return n.toLocaleString('en-PK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                },
            };
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH /www/wwwroot/lifeelements.shiningerp.com/resources/views/items/index.blade.php ENDPATH**/ ?>