<?php
// app/Views/inventory/categories.php
$isInventoryRole = ($_SESSION['role'] === 'inventory');
$baseUrl  = $isInventoryRole ? '/inventory' : '/admin/inventory';
$cashierQs = $ctx['cashier_id'] ? '?cashier_id=' . $ctx['cashier_id'] : '';
$cashierQsAmp = $ctx['cashier_id'] ? '&cashier_id=' . $ctx['cashier_id'] : '';
?>
<div class="space-y-5" x-data="categoriesApp()" x-init="init()">
    
    <?php if (!empty($_GET['success'])): ?>
    <div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,3500)"
         class="rounded-xl px-4 py-3 text-sm font-medium flex items-center gap-2"
         style="background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.3);color:#6ee7b7">
        <i class="fas fa-check-circle"></i> <?php echo htmlspecialchars($_GET['success']); ?>
    </div>
    <?php endif; ?>
    <?php if (!empty($_GET['error'])): ?>
    <div class="rounded-xl px-4 py-3 text-sm font-medium flex items-center gap-2"
         style="background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);color:#f87171">
        <i class="fas fa-exclamation-circle"></i> <?php echo htmlspecialchars($_GET['error']); ?>
    </div>
    <?php endif; ?>

    <!-- HEADER -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h2 class="text-xl font-bold text-white flex items-center gap-2">
                <i class="fas fa-tags text-amber-400"></i> Stock Categories
                <?php if ($cashierName): ?>
                    <span class="text-sm font-medium px-2 py-0.5 rounded-lg" style="background:rgba(245,158,11,0.15);color:#fcd34d">
                        <i class="fas fa-store text-xs mr-1"></i><?php echo htmlspecialchars($cashierName); ?>
                    </span>
                <?php elseif (!$ctx['cashier_id']): ?>
                    <span class="text-sm font-medium px-2 py-0.5 rounded-lg" style="background:rgba(100,116,139,0.2);color:#94a3b8">All Branches</span>
                <?php endif; ?>
            </h2>
            <p class="text-xs text-slate-500 mt-0.5">Manage stock categories to organize inventory items</p>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
            <?php if ($ctx['is_admin'] && !empty($cashiers)): ?>
            <form method="GET" action="<?php echo $baseUrl; ?>/categories" class="flex items-center gap-2">
                <select name="cashier_id" onchange="this.form.submit()"
                        class="text-xs px-3 py-2 rounded-xl text-white outline-none"
                        style="background:rgba(13,33,55,1);border:1px solid rgba(255,255,255,0.12)">
                    <option value="">All Branches</option>
                    <?php foreach($cashiers as $c): ?>
                    <option value="<?php echo $c['id']; ?>" <?php echo $ctx['cashier_id']==$c['id']?'selected':''; ?>>
                        <?php echo htmlspecialchars($c['name']); ?>
                    </option>
                    <?php endforeach; ?>
                </select>
            </form>
            <?php endif; ?>
            <button @click="addModal=true"
                    class="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold text-white transition"
                    style="background:linear-gradient(135deg,#f59e0b,#d97706)">
                <i class="fas fa-plus text-xs"></i> Add Category
            </button>
        </div>
    </div>

    <!-- SUB-NAVIGATION BAR (COHESIVE TABS) -->
    <div class="flex items-center gap-2 border-b border-white/5 pb-0.5">
        <a href="<?php echo $baseUrl; ?><?php echo $cashierQs; ?>" 
           class="text-sm font-medium px-4 py-2 text-slate-400 hover:text-white transition">
            <i class="fas fa-box text-xs mr-1.5"></i>Stock Items
        </a>
        <a href="<?php echo $baseUrl; ?>/categories<?php echo $cashierQs; ?>" 
           class="text-sm font-semibold px-4 py-2 text-amber-400 border-b-2 border-amber-500 transition">
            <i class="fas fa-tags text-xs mr-1.5"></i>Categories
        </a>
        <a href="<?php echo $baseUrl; ?>/suppliers<?php echo $cashierQs; ?>" 
           class="text-sm font-medium px-4 py-2 text-slate-400 hover:text-white transition">
            <i class="fas fa-truck text-xs mr-1.5"></i>Suppliers
        </a>
        <a href="<?php echo $baseUrl; ?>/reports<?php echo $cashierQs; ?>" 
           class="text-sm font-medium px-4 py-2 text-slate-400 hover:text-white transition">
            <i class="fas fa-chart-line text-xs mr-1.5"></i>Reports
        </a>
    </div>

    <!-- MAIN GRID -->
    <?php if (empty($categories)): ?>
    <div class="rounded-2xl p-10 text-center flex flex-col items-center justify-center"
         style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05)">
        <div class="w-16 h-16 rounded-full flex items-center justify-center mb-4 text-slate-500"
             style="background:rgba(255,255,255,0.04)">
            <i class="fas fa-tags text-2xl"></i>
        </div>
        <p class="text-sm text-slate-400">No categories found. Click "Add Category" to create one.</p>
    </div>
    <?php else: ?>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        <?php foreach ($categories as $cat): ?>
        <div class="rounded-2xl p-5 flex flex-col justify-between transition hover:-translate-y-1 duration-200"
             style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07)">
            <div>
                <div class="flex items-start justify-between">
                    <h3 class="text-base font-semibold text-white leading-tight">
                        <?php echo htmlspecialchars($cat['name']); ?>
                    </h3>
                    <span class="text-xs px-2.5 py-0.5 rounded-full font-semibold"
                          style="background:rgba(59,130,246,0.12);color:#93c5fd">
                        <?php echo $cat['item_count']; ?> Items
                    </span>
                </div>
                <p class="text-xs text-slate-400 mt-2 line-clamp-2 min-h-[2.5rem]">
                    <?php echo htmlspecialchars($cat['description'] ?? 'No description provided.'); ?>
                </p>
            </div>
            
            <div class="flex items-center justify-end gap-2 mt-4 pt-3 border-t border-white/5">
                <button @click="openEditModal(<?php echo htmlspecialchars(json_encode($cat)); ?>)"
                        class="text-xs font-medium px-3 py-1.5 rounded-lg hover:text-white transition text-slate-400 hover:bg-white/5">
                    <i class="fas fa-edit mr-1"></i>Edit
                </button>
                <?php if ($cat['item_count'] == 0): ?>
                <button @click="openDeleteModal(<?php echo $cat['id']; ?>, '<?php echo htmlspecialchars($cat['name'], ENT_QUOTES); ?>')"
                        class="text-xs font-medium px-3 py-1.5 rounded-lg hover:text-red-400 transition text-slate-400 hover:bg-red-500/10">
                    <i class="fas fa-trash-alt mr-1"></i>Delete
                </button>
                <?php endif; ?>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <!-- ADD CATEGORY MODAL -->
    <div x-show="addModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100" style="display:none">
        <div class="w-full max-w-md modal-box p-6 space-y-4" @click.away="addModal=false">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-white flex items-center gap-2">
                    <i class="fas fa-tags text-amber-400"></i> Add Category
                </h3>
                <button @click="addModal=false" class="text-slate-400 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="POST" action="<?php echo $baseUrl; ?>/categories/store<?php echo $cashierQs; ?>" class="space-y-4">
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Category Name <span class="text-red-400">*</span></label>
                    <input type="text" name="name" required placeholder="e.g. Raw Ingredients, Beverages" class="form-input">
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Description</label>
                    <textarea name="description" rows="3" placeholder="Brief description of category..." class="form-input"></textarea>
                </div>
                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" @click="addModal=false" class="px-4 py-2 text-xs font-medium text-slate-400 hover:text-white transition">Cancel</button>
                    <button type="submit" class="btn-success text-xs">Save Category</button>
                </div>
            </form>
        </div>
    </div>

    <!-- EDIT CATEGORY MODAL -->
    <div x-show="editModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100" style="display:none">
        <div class="w-full max-w-md modal-box p-6 space-y-4" @click.away="editModal=false">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-bold text-white flex items-center gap-2">
                    <i class="fas fa-edit text-amber-400"></i> Edit Category
                </h3>
                <button @click="editModal=false" class="text-slate-400 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="POST" action="<?php echo $baseUrl; ?>/categories/update<?php echo $cashierQs; ?>" class="space-y-4">
                <input type="hidden" name="id" x-model="editItem.id">
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Category Name <span class="text-red-400">*</span></label>
                    <input type="text" name="name" required x-model="editItem.name" class="form-input">
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Description</label>
                    <textarea name="description" rows="3" x-model="editItem.description" class="form-input"></textarea>
                </div>
                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" @click="editModal=false" class="px-4 py-2 text-xs font-medium text-slate-400 hover:text-white transition">Cancel</button>
                    <button type="submit" class="btn-success text-xs">Update Category</button>
                </div>
            </form>
        </div>
    </div>

    <!-- DELETE CATEGORY CONFIRM MODAL -->
    <div x-show="deleteModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-backdrop"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100" style="display:none">
        <div class="w-full max-w-md modal-box p-6 space-y-4 text-center" @click.away="deleteModal=false">
            <div class="w-12 h-12 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center mx-auto text-xl">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="space-y-2">
                <h3 class="text-base font-bold text-white">Delete Category?</h3>
                <p class="text-xs text-slate-400">Are you sure you want to delete category <strong class="text-white" x-text="deleteItem.name"></strong>?</p>
            </div>
            <form method="POST" action="<?php echo $baseUrl; ?>/categories/delete<?php echo $cashierQs; ?>" class="flex justify-center gap-3 pt-2">
                <input type="hidden" name="id" x-model="deleteItem.id">
                <button type="button" @click="deleteModal=false" class="px-4 py-2 text-xs font-medium text-slate-400 hover:text-white transition">Cancel</button>
                <button type="submit" class="px-4 py-2 text-xs font-semibold rounded-lg bg-red-600 hover:bg-red-700 text-white transition">Delete</button>
            </form>
        </div>
    </div>

</div>

<script>
function categoriesApp() {
    return {
        addModal: false,
        editModal: false,
        deleteModal: false,
        editItem: { id: '', name: '', description: '' },
        deleteItem: { id: '', name: '' },
        init() {
            // initialization
        },
        openEditModal(item) {
            this.editItem = { ...item };
            this.editModal = true;
        },
        openDeleteModal(id, name) {
            this.deleteItem = { id, name };
            this.deleteModal = true;
        }
    }
}
</script>
