<?php
// app/Views/inventory/suppliers.php
$isInventoryRole = ($_SESSION['role'] === 'inventory');
$baseUrl  = $isInventoryRole ? '/restpo/inventory' : '/restpo/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="suppliersApp()" 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-truck text-amber-400"></i> Suppliers
                <?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 vendors and track purchase history</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; ?>/suppliers" 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 Supplier
            </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-medium px-4 py-2 text-slate-400 hover:text-white 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-semibold px-4 py-2 text-amber-400 border-b-2 border-amber-500 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 SUPPLIERS LIST -->
    <?php if (empty($suppliers)): ?>
    <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-truck text-2xl"></i>
        </div>
        <p class="text-sm text-slate-400">No suppliers found. Click "Add Supplier" to create one.</p>
    </div>
    <?php else: ?>
    <div class="overflow-x-auto rounded-2xl" style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06)">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="text-xs font-semibold text-slate-400 border-b border-white/5" style="background:rgba(255,255,255,0.01)">
                    <th class="p-4">Supplier Name</th>
                    <th class="p-4">Contact Person</th>
                    <th class="p-4">Phone / Email</th>
                    <th class="p-4">Address</th>
                    <th class="p-4">Purchases</th>
                    <th class="p-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-white/5 text-xs">
                <?php foreach ($suppliers as $sup): ?>
                <tr class="hover:bg-white/[0.01] transition-colors duration-150">
                    <td class="p-4 font-semibold text-white">
                        <div class="flex flex-col">
                            <span><?php echo htmlspecialchars($sup['name']); ?></span>
                            <?php if ($sup['notes']): ?>
                                <span class="text-[10px] text-slate-500 font-normal mt-0.5 italic"><?php echo htmlspecialchars($sup['notes']); ?></span>
                            <?php endif; ?>
                        </div>
                    </td>
                    <td class="p-4 text-slate-300">
                        <?php echo htmlspecialchars($sup['contact_person'] ?? '—'); ?>
                    </td>
                    <td class="p-4">
                        <div class="flex flex-col gap-0.5">
                            <?php if ($sup['phone']): ?>
                                <span class="text-slate-300"><i class="fas fa-phone text-[9px] text-slate-500 mr-1"></i><?php echo htmlspecialchars($sup['phone']); ?></span>
                            <?php endif; ?>
                            <?php if ($sup['email']): ?>
                                <span class="text-slate-400"><i class="fas fa-envelope text-[9px] text-slate-500 mr-1"></i><?php echo htmlspecialchars($sup['email']); ?></span>
                            <?php endif; ?>
                            <?php if (!$sup['phone'] && !$sup['email']): ?>
                                <span class="text-slate-500">—</span>
                            <?php endif; ?>
                        </div>
                    </td>
                    <td class="p-4 text-slate-400 max-w-[200px] truncate" title="<?php echo htmlspecialchars($sup['address'] ?? ''); ?>">
                        <?php echo htmlspecialchars($sup['address'] ?? '—'); ?>
                    </td>
                    <td class="p-4">
                        <span class="px-2 py-0.5 rounded-full font-semibold"
                              style="background:rgba(16,185,129,0.12);color:#34d399">
                            <?php echo $sup['transaction_count']; ?> logs
                        </span>
                    </td>
                    <td class="p-4 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button @click="openEditModal(<?php echo htmlspecialchars(json_encode($sup)); ?>)"
                                    class="text-xs font-medium px-2.5 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 ($sup['transaction_count'] == 0): ?>
                            <button @click="openDeleteModal(<?php echo $sup['id']; ?>, '<?php echo htmlspecialchars($sup['name'], ENT_QUOTES); ?>')"
                                    class="text-xs font-medium px-2.5 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>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php endif; ?>

    <!-- ADD SUPPLIER 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-truck text-amber-400"></i> Add Supplier
                </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; ?>/suppliers/store<?php echo $cashierQs; ?>" class="space-y-3.5">
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Supplier Name <span class="text-red-400">*</span></label>
                    <input type="text" name="name" required placeholder="e.g. Acme Food Supplies" class="form-input">
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Contact Person</label>
                    <input type="text" name="contact_person" placeholder="e.g. John Doe" class="form-input">
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                        <label class="text-xs font-medium text-slate-400">Phone</label>
                        <input type="text" name="phone" placeholder="e.g. +8801700000" class="form-input">
                    </div>
                    <div class="space-y-1">
                        <label class="text-xs font-medium text-slate-400">Email</label>
                        <input type="email" name="email" placeholder="e.g. info@acme.com" class="form-input">
                    </div>
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Address</label>
                    <textarea name="address" rows="2" placeholder="Supplier location..." class="form-input"></textarea>
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Notes</label>
                    <textarea name="notes" rows="2" placeholder="Any additional notes..." 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 Supplier</button>
                </div>
            </form>
        </div>
    </div>

    <!-- EDIT SUPPLIER 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 Supplier
                </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; ?>/suppliers/update<?php echo $cashierQs; ?>" class="space-y-3.5">
                <input type="hidden" name="id" x-model="editItem.id">
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Supplier 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">Contact Person</label>
                    <input type="text" name="contact_person" x-model="editItem.contact_person" class="form-input">
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-1">
                        <label class="text-xs font-medium text-slate-400">Phone</label>
                        <input type="text" name="phone" x-model="editItem.phone" class="form-input">
                    </div>
                    <div class="space-y-1">
                        <label class="text-xs font-medium text-slate-400">Email</label>
                        <input type="email" name="email" x-model="editItem.email" class="form-input">
                    </div>
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Address</label>
                    <textarea name="address" rows="2" x-model="editItem.address" class="form-input"></textarea>
                </div>
                <div class="space-y-1">
                    <label class="text-xs font-medium text-slate-400">Notes</label>
                    <textarea name="notes" rows="2" x-model="editItem.notes" 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 Supplier</button>
                </div>
            </form>
        </div>
    </div>

    <!-- DELETE SUPPLIER 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 Supplier?</h3>
                <p class="text-xs text-slate-400">Are you sure you want to delete supplier <strong class="text-white" x-text="deleteItem.name"></strong>?</p>
            </div>
            <form method="POST" action="<?php echo $baseUrl; ?>/suppliers/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 suppliersApp() {
    return {
        addModal: false,
        editModal: false,
        deleteModal: false,
        editItem: { id: '', name: '', contact_person: '', phone: '', email: '', address: '', notes: '' },
        deleteItem: { id: '', name: '' },
        init() {
            // init
        },
        openEditModal(item) {
            this.editItem = { ...item };
            this.editModal = true;
        },
        openDeleteModal(id, name) {
            this.deleteItem = { id, name };
            this.deleteModal = true;
        }
    }
}
</script>
