<!-- Add Category Form -->
<div id="add-category-form" class="postbox" style="display: none; margin: 20px 0;">
    <div class="postbox-header">
        <h2 class="hndle"><?php echo esc_html__('Add New Category', 'subscription-system'); ?></h2>
    </div>
    <div class="inside">
        <form method="post" action="">
            <?php wp_nonce_field('subscription_add_category', 'subscription_nonce'); ?>
            <table class="form-table" role="presentation">
                <tr>
                    <th scope="row"><label for="category_name"><?php echo esc_html__('Category Name', 'subscription-system'); ?></label></th>
                    <td><input type="text" name="category_name" id="category_name" class="regular-text" required></td>
                </tr>
                <tr>
                    <th scope="row"><label for="description"><?php echo esc_html__('Description', 'subscription-system'); ?></label></th>
                    <td><textarea name="description" id="description" class="large-text" rows="5"></textarea></td>
                </tr>
            </table>
            <p class="submit">
                <input type="submit" name="add_category" class="button button-primary" value="<?php echo esc_attr__('Add Category', 'subscription-system'); ?>">
                <button type="button" class="button" id="cancel-add-category" onclick="jQuery('#add-category-form').hide(); return false;"><?php echo esc_html__('Cancel', 'subscription-system'); ?></button>
            </p>
        </form>
    </div>
</div>

<script>
jQuery(document).ready(function($) {
    // Show add category form
    $('#show-add-category').on('click', function(e) {
        e.preventDefault();
        $('#add-category-form').show();
        $('#category_name').focus();
        $('html, body').animate({
            scrollTop: $('#add-category-form').offset().top - 50
        }, 300);
    });
    
    // Hide add category form when cancel button is clicked
    $('#cancel-add-category').on('click', function() {
        $('#add-category-form').hide();
    });
    
    // Edit category
    $('.edit-category').on('click', function() {
        var id = $(this).data('id');
        var name = $(this).data('name');
        var description = $(this).data('description');
        
        $('#edit_category_id').val(id);
        $('#edit_category_name').val(name);
        $('#edit_description').val(description);
        
        $('#edit-category-form').show();
        $('#edit_category_name').focus();
        $('html, body').animate({
            scrollTop: $('#edit-category-form').offset().top - 50
        }, 300);
    });
    
    // Hide edit category form when cancel button is clicked
    $('#cancel-edit-category').on('click', function() {
        $('#edit-category-form').hide();
    });
});
</script> 