<div class="wrap">
    <h1 class="wp-heading-inline"><?php echo esc_html__('Plan Categories', 'subscription-system'); ?></h1>
    <a href="#" class="page-title-action" id="show-add-category"><?php echo esc_html__('Add New Category', 'subscription-system'); ?></a>
    <hr class="wp-header-end">
    
    <?php settings_errors('subscription_messages'); ?>
    
    <!-- Add Category Form -->
    <div id="add-category-section" class="postbox" style="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__('Category 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"><?php echo esc_html__('Cancel', 'subscription-system'); ?></button>
                </p>
            </form>
        </div>
    </div>
    
    <!-- Categories List Table -->
    <div class="tablenav top">
        <!-- Any table navigation elements -->
    </div>
    
    <table class="wp-list-table widefat fixed striped">
        <!-- Table content -->
    </table>
</div>

<script>
jQuery(document).ready(function($) {
    // Initially hide the add category form if you want it to be hidden by default
    // $('#add-category-section').hide();
    
    // Show add category form when "Add New Category" button is clicked
    $('#show-add-category').on('click', function(e) {
        e.preventDefault();
        $('#add-category-section').show();
        $('#category_name').focus();
        $('html, body').animate({
            scrollTop: $('#add-category-section').offset().top - 50
        }, 300);
    });
    
    // Hide add category form when cancel button is clicked
    $('#cancel-add-category').on('click', function() {
        // Clear form fields
        $('#category_name').val('');
        $('#description').val('');
        
        // Hide the form if you want it to be hidden after canceling
        // $('#add-category-section').hide();
        
        // Or just scroll back to the top
        $('html, body').animate({
            scrollTop: 0
        }, 300);
    });
});
</script> 