<!-- Path: app/Views/admin/categories.view.php -->
<div class="bg-slate-50 min-h-[calc(100vh-64px)] py-8">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-6 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-navy-900">Emergency Categories</h1>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Add Form -->
            <div class="md:col-span-1">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <h3 class="font-bold text-navy-900 mb-4">Add New Category</h3>
                    <form id="addCategoryForm">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-slate-700 mb-1">Name</label>
                            <input type="text" name="name" required class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-brandBlue-500">
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-slate-700 mb-1">Description</label>
                            <textarea name="description" rows="3" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:border-brandBlue-500"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-navy-900 hover:bg-navy-800 text-white py-2 rounded-md font-semibold transition-colors">Add Category</button>
                    </form>
                </div>
            </div>

            <!-- List -->
            <div class="md:col-span-2">
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-slate-50 text-slate-500 text-sm uppercase border-b border-slate-200">
                                <th class="p-4 font-semibold">Name</th>
                                <th class="p-4 font-semibold">Description</th>
                                <th class="p-4 font-semibold text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 text-sm">
                            @foreach($categories as $cat)
                                <tr>
                                    <td class="p-4 font-bold text-navy-900">{{ $cat['name'] }}</td>
                                    <td class="p-4 text-slate-600">{{ $cat['description'] }}</td>
                                    <td class="p-4 text-right">
                                        <button class="delete-btn text-red-500 hover:text-red-700 font-medium" data-id="{{ $cat['id'] }}"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@addScript
<script>
$(document).ready(function() {
    $('#addCategoryForm').on('submit', function(e) {
        e.preventDefault();
        $.post('{{APP_URL}}/admin/categories', $(this).serialize(), function(res) {
            if(res.status === 'success') location.reload();
        });
    });

    $('.delete-btn').on('click', function() {
        let id = $(this).data('id');
        if(confirm('Delete category?')) {
            $.post(`{{APP_URL}}/admin/categories/${id}/delete`, function(res) {
                if(res.status === 'success') location.reload();
            });
        }
    });
});
</script>
@endAddScript