<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/settings" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Settings
        </a>
        <h1>Brands</h1>
        <div class="page-subtitle">Manage product brands and manufacturers</div>
    </div>
    <button class="btn btn-primary" onclick="showAddBrandModal()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        Add Brand
    </button>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">All Brands</h3>
    </div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Brand Name</th>
                    <th>Description</th>
                    <th>Products Count</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($brands as $brand): ?>
                <tr>
                    <td>
                        <div class="font-medium"><?= e($brand['name']) ?></div>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= e($brand['description'] ?? 'No description') ?>
                        </span>
                    </td>
                    <td>
                        <?php
                        // Get product count for this brand
                        $stmt = db()->prepare("SELECT COUNT(*) FROM products WHERE tenant_id=? AND brand_id=?");
                        $stmt->execute([Auth::tenantId(), $brand['id']]);
                        $productCount = $stmt->fetchColumn();
                        ?>
                        <span class="badge badge-secondary"><?= $productCount ?> products</span>
                    </td>
                    <td>
                        <span class="text-sm text-muted">
                            <?= date('M j, Y', strtotime($brand['created_at'])) ?>
                        </span>
                    </td>
                    <td>
                        <div class="flex gap-2">
                            <button class="btn btn-ghost btn-icon" onclick="editBrand(<?= $brand['id'] ?>, '<?= e($brand['name']) ?>', '<?= e($brand['description'] ?? '') ?>')" title="Edit">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                </svg>
                            </button>
                            <form method="POST" action="<?= APP_URL ?>/settings/delete-brand" onsubmit="return confirm('Are you sure you want to delete this brand? This action cannot be undone.')" style="display:inline;">
                                <?= Security::csrfField() ?>
                                <input type="hidden" name="id" value="<?= $brand['id'] ?>">
                                <button type="submit" class="btn btn-ghost btn-icon text-danger" title="Delete" <?= $productCount > 0 ? 'disabled title="Cannot delete brand with products"' : '' ?>>
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                        <polyline points="3,6 5,6 21,6"></polyline>
                                        <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($brands)): ?>
                <tr>
                    <td colspan="5" class="text-center text-muted py-8">
                        No brands found. Create your first brand to get started.
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Add Brand Modal -->
<div class="modal-overlay" id="addBrandModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add Brand</h3>
            <button class="modal-close" onclick="hideAddBrandModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <form method="POST" action="<?= APP_URL ?>/settings/store-brand">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Brand Name *</label>
                    <input type="text" name="name" class="form-input" placeholder="e.g., Coca-Cola, Nike, Samsung" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-textarea" rows="3" placeholder="Optional description of this brand"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="hideAddBrandModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Brand</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Brand Modal -->
<div class="modal-overlay" id="editBrandModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Edit Brand</h3>
            <button class="modal-close" onclick="hideEditBrandModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <form method="POST" action="<?= APP_URL ?>/settings/update-brand">
            <?= Security::csrfField() ?>
            <input type="hidden" name="id" id="editBrandId">
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Brand Name *</label>
                    <input type="text" name="name" id="editBrandName" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="description" id="editBrandDescription" class="form-textarea" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="hideEditBrandModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Update Brand</button>
            </div>
        </form>
    </div>
</div>

<script>
function showAddBrandModal() {
    document.getElementById('addBrandModal').classList.add('show');
}

function hideAddBrandModal() {
    document.getElementById('addBrandModal').classList.remove('show');
}

function editBrand(id, name, description) {
    document.getElementById('editBrandId').value = id;
    document.getElementById('editBrandName').value = name;
    document.getElementById('editBrandDescription').value = description || '';
    
    document.getElementById('editBrandModal').classList.add('show');
}

function hideEditBrandModal() {
    document.getElementById('editBrandModal').classList.remove('show');
}
</script>
