<?php
/**
 * @var array $categories
 */
$db = \core\Database::getInstance();
$categories = $db->table('service_categories')
    ->where('deleted_at', 'IS', null)
    ->orderBy('sort_order', 'ASC')
    ->get();
?>
<div class="page-title mb-4">
    <h5><i class="fas fa-tags me-2 text-gold"></i>Service Categories</h5>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="glass-card p-0">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-plus card-icon"></i>
                    <h6 class="card-title">Add Category</h6>
                </div>
            </div>
            <div class="card-body">
                <form id="categoryForm" method="POST" action="<?= url('services/categories/store') ?>">
                    <?= csrf_field() ?>
                    <input type="hidden" name="edit_id" id="edit_id" value="">
                    <div class="mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="cat_name" class="form-control bg-transparent"
                               required maxlength="255">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" id="cat_description" class="form-control bg-transparent"
                                  rows="2" maxlength="1000"></textarea>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Sort Order</label>
                                <input type="number" name="sort_order" id="cat_sort_order"
                                       class="form-control bg-transparent" value="0" min="0">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <div class="form-check form-switch mt-4 pt-2">
                                    <input type="hidden" name="is_active" value="0">
                                    <input type="checkbox" name="is_active" id="cat_is_active"
                                           class="form-check-input" value="1" checked>
                                    <label class="form-check-label" for="cat_is_active">Active</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-sm btn-gold" id="categorySubmitBtn">
                            <i class="fas fa-save me-1"></i>Save
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="cancelEditBtn">
                            <i class="fas fa-times me-1"></i>Cancel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="glass-card p-0">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-list card-icon"></i>
                    <h6 class="card-title">All Categories</h6>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-dark table-hover mb-0">
                        <thead>
                            <tr>
                                <th width="60">Order</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th class="text-center">Status</th>
                                <th class="text-center" width="120">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($categories)): ?>
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        <i class="fas fa-tag fa-2x mb-2"></i>
                                        <p class="mb-0">No categories found</p>
                                    </td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($categories as $cat): ?>
                                    <tr>
                                        <td class="text-center"><?= (int)$cat->sort_order ?></td>
                                        <td>
                                            <strong><?= e($cat->name) ?></strong>
                                            <br><small class="text-muted"><?= e($cat->slug) ?></small>
                                        </td>
                                        <td><?= e(truncate($cat->description ?? '-', 60)) ?></td>
                                        <td class="text-center">
                                            <span class="badge bg-<?= statusBadge($cat->is_active ? 'active' : 'inactive') ?>">
                                                <?= $cat->is_active ? 'Active' : 'Inactive' ?>
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group btn-group-sm">
                                                <button type="button" class="btn btn-outline-gold btn-edit-cat"
                                                        data-id="<?= $cat->id ?>"
                                                        data-name="<?= e($cat->name) ?>"
                                                        data-description="<?= e($cat->description ?? '') ?>"
                                                        data-sort_order="<?= (int)$cat->sort_order ?>"
                                                        data-is_active="<?= $cat->is_active ?>"
                                                        title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger btn-delete-cat"
                                                        data-id="<?= $cat->id ?>"
                                                        data-name="<?= e($cat->name) ?>"
                                                        title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteCatModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content bg-dark border-gold">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-exclamation-triangle text-danger me-2"></i>Delete Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete <strong id="deleteCatName"></strong>?</p>
                <p class="text-muted small mb-0">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteCat">Delete</button>
            </div>
        </div>
    </div>
</div>

<?php $inlineScripts = <<<'EOS'
const baseUrl = '___BASEURL___';

$('.btn-edit-cat').click(function() {
    const btn = $(this);
    $('#edit_id').val(btn.data('id'));
    $('#cat_name').val(btn.data('name'));
    $('#cat_description').val(btn.data('description'));
    $('#cat_sort_order').val(btn.data('sort_order'));
    $('#cat_is_active').prop('checked', btn.data('is_active') == 1);
    $('#categorySubmitBtn').html('<i class="fas fa-save me-1"></i>Update');
    $('#cancelEditBtn').removeClass('d-none');
    $('#categoryForm').attr('action', baseUrl + '/services/categories/update/' + btn.data('id'));
});

$('#cancelEditBtn').click(function() {
    resetCategoryForm();
});

function resetCategoryForm() {
    $('#edit_id').val('');
    $('#cat_name').val('');
    $('#cat_description').val('');
    $('#cat_sort_order').val('0');
    $('#cat_is_active').prop('checked', true);
    $('#categorySubmitBtn').html('<i class="fas fa-save me-1"></i>Save');
    $('#cancelEditBtn').addClass('d-none');
    $('#categoryForm').attr('action', baseUrl + '/services/categories/store');
}

$('#categoryForm').submit(function(e) {
    e.preventDefault();
    const form = $(this);
    const url = form.attr('action');
    const data = form.serialize() + '&_csrf_token=' + encodeURIComponent($('meta[name="csrf-token"]').attr('content'));

    $.post(url, data, function(res) {
        if (res.success) {
            location.reload();
        } else {
            alert(res.message || 'Operation failed');
        }
    }, 'json').fail(function(xhr) {
        const msg = xhr.responseJSON ? xhr.responseJSON.message : 'Operation failed';
        alert(msg);
    });
});

$inlineScripts = str_replace('___BASEURL___', rtrim(APP_URL, '/'), $inlineScripts);
?>
