<?php
$pageTitle = 'Project Categories';
$breadcrumb = [['label' => 'Projects', 'url' => APP_URL . '/projects'], ['label' => 'Categories', 'url' => null]];
ob_start();
?>
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Project Categories</h1>
    <button type="button" onclick="document.getElementById('newCategoryForm').classList.toggle('hidden')" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded shadow">
        New Category
    </button>
</div>

<div id="newCategoryForm" class="hidden bg-white rounded-lg shadow p-6 mb-6">
    <form action="<?= APP_URL ?>/projects/categories/create" method="POST" class="flex flex-wrap items-end gap-4">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
        <div class="flex-grow">
            <label class="block text-sm font-medium text-gray-700">Name</label>
            <input type="text" name="name" required class="mt-1 border rounded p-2 w-full">
        </div>
        <div class="flex-grow">
            <label class="block text-sm font-medium text-gray-700">Description</label>
            <input type="text" name="description" class="mt-1 border rounded p-2 w-full">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">Color</label>
            <input type="color" name="color" value="#0A3A6B" class="mt-1 border rounded h-10 w-16">
        </div>
        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded shadow">Save</button>
    </form>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="overflow-x-auto">
    <table class="min-w-full">
        <thead class="bg-gray-100">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projects</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
            <?php if (empty($categories)): ?>
            <tr><td colspan="4" class="px-6 py-8 text-center text-gray-500">No categories yet.</td></tr>
            <?php else: ?>
            <?php foreach ($categories as $cat): ?>
            <tr>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="inline-block w-3 h-3 rounded-full mr-2" style="background-color: <?= htmlspecialchars($cat['color'] ?? '#0A3A6B') ?>"></span>
                    <?= htmlspecialchars($cat['name']) ?>
                </td>
                <td class="px-6 py-4"><?= htmlspecialchars($cat['description'] ?? '') ?></td>
                <td class="px-6 py-4"><?= (int)($cat['project_count'] ?? 0) ?></td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <button type="button" onclick="document.getElementById('editCat<?= $cat['id'] ?>').classList.toggle('hidden')" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button>
                    <form action="<?= APP_URL ?>/projects/categories/<?= $cat['id'] ?>/delete" method="POST" class="inline">
                        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
                        <button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Are you sure? Projects in this category will be uncategorized.')">Delete</button>
                    </form>
                </td>
            </tr>
            <tr id="editCat<?= $cat['id'] ?>" class="hidden bg-gray-50">
                <td colspan="4" class="px-6 py-4">
                    <form action="<?= APP_URL ?>/projects/categories/<?= $cat['id'] ?>/edit" method="POST" class="flex flex-wrap items-end gap-4">
                        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION[CSRF_TOKEN_NAME] ?? '') ?>">
                        <div class="flex-grow">
                            <label class="block text-xs font-medium text-gray-700">Name</label>
                            <input type="text" name="name" value="<?= htmlspecialchars($cat['name']) ?>" required class="mt-1 border rounded p-2 w-full">
                        </div>
                        <div class="flex-grow">
                            <label class="block text-xs font-medium text-gray-700">Description</label>
                            <input type="text" name="description" value="<?= htmlspecialchars($cat['description'] ?? '') ?>" class="mt-1 border rounded p-2 w-full">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700">Color</label>
                            <input type="color" name="color" value="<?= htmlspecialchars($cat['color'] ?? '#0A3A6B') ?>" class="mt-1 border rounded h-10 w-16">
                        </div>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded shadow">Update</button>
                    </form>
                </td>
            </tr>
            <?php endforeach; ?>
            <?php endif; ?>
        </tbody>
    </table>
    </div>
</div>
<?php
$content = ob_get_clean();
require ROOT_PATH . '/modules/shared/views/layouts/main.php';
?>
