{{-- Modal partial for Add/Manage Categories --}}
<div class="modal-header">
    <h5 class="modal-title"><i class="bx bx-category me-1"></i> Manage Categories</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
    {{-- Add New Category --}}
    <form id="addCategoryForm" class="mb-3">
        @csrf
        <div class="d-flex gap-2 align-items-end">
            <div class="project-form flex-grow-1 mb-0">
                <label>New Category Name: <span class="text-danger">*</span></label>
                <input type="text" class="form-control" name="title" id="newCategoryTitle" placeholder="Category Name" required>
            </div>
            <button type="submit" class="green-btn-inner waves-effect btn-sm" style="height:43px;">
                <i class="bx bx-plus"></i> Add
            </button>
        </div>
    </form>

    <hr>

    {{-- Existing Categories --}}
    <div id="categoriesList">
        @forelse($categories as $cat)
        <div class="d-flex gap-2 align-items-center mb-2 category-row" data-id="{{ $cat->id }}">
            <input type="text" class="form-control form-control-sm flex-grow-1 cat-title-input" value="{{ $cat->title }}">
            <button class="green-btn-inner waves-effect btn-sm btn-save-cat" data-id="{{ $cat->id }}" title="Save">
                <i class="bx bx-save"></i>
            </button>
            <button class="black-btn-inner waves-effect btn-sm btn-delete-cat" data-id="{{ $cat->id }}" title="Delete">
                <i class="bx bx-trash"></i>
            </button>
        </div>
        @empty
        <p class="text-muted small">No categories yet.</p>
        @endforelse
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="black-btn-inner waves-effect btn-sm" data-bs-dismiss="modal">Close</button>
</div>

<script>
(function($) {
    // Add category
    $('#addCategoryForm').on('submit', function(e) {
        e.preventDefault();
        var title = $('#newCategoryTitle').val().trim();
        if (!title) return;
        $.post('{{ route("manages.pdf-template-categories.store") }}', {
            _token: '{{ csrf_token() }}',
            title: title
        }, function(res) {
            if (res && res.status === 200) {
                showSuccessToast(res.message || 'Category created.');
                location.reload();
            } else { showErrorToast(res.message || 'Failed'); }
        }).fail(function(xhr) { showErrorToast(xhr.responseJSON?.message || 'Failed'); });
    });

    // Save category
    $(document).on('click', '.btn-save-cat', function() {
        var id = $(this).data('id');
        var title = $(this).closest('.category-row').find('.cat-title-input').val().trim();
        if (!title) return;
        $.ajax({
            url: '/admin/manages/pdf-template-categories/' + id,
            method: 'PUT',
            data: { _token: '{{ csrf_token() }}', title: title },
            success: function(res) {
                showSuccessToast(res.message || 'Saved');
            },
            error: function(xhr) { showErrorToast(xhr.responseJSON?.message || 'Failed'); }
        });
    });

    // Delete category
    $(document).on('click', '.btn-delete-cat', function() {
        var id = $(this).data('id');
        var row = $(this).closest('.category-row');
        confirmDialog({
            title: 'Delete Category',
            text: 'Are you sure you want to delete this category?',
            icon: 'warning',
            confirmButtonText: 'Yes, Delete',
        }).then(function(result) {
            if (!result.isConfirmed) return;
            $.ajax({
                url: '/admin/manages/pdf-template-categories/' + id,
                method: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(res) {
                    showSuccessToast(res.message || 'Deleted');
                    row.fadeOut(300, function() { row.remove(); });
                },
                error: function(xhr) { showErrorToast(xhr.responseJSON?.message || 'Failed'); }
            });
        });
    });
})(jQuery);
</script>