<?php
/**
 * Provide a admin area view for the channels page
 *
 * @link       https://example.com
 * @since      1.0.0
 *
 * @package    Subscription_System
 */

// If this file is called directly, abort.
if (!defined('WPINC')) {
    die;
}
?>

<div class="wrap">
    <h1><?php echo esc_html__('Channels', 'subscription-system'); ?></h1>
    
    <?php settings_errors('subscription_messages'); ?>
    
    <div class="subscription-admin-container">
        <div class="subscription-admin-main">
            <div class="subscription-admin-card">
                <h2><?php echo esc_html__('All Channels', 'subscription-system'); ?></h2>
                
                <table class="wp-list-table widefat fixed striped">
                    <thead>
                        <tr>
                            <th><?php echo esc_html__('ID', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Name', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Description', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Status', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Created At', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Actions', 'subscription-system'); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (!empty($channels)) : ?>
                            <?php foreach ($channels as $channel) : ?>
                                <tr>
                                    <td><?php echo esc_html($channel->id); ?></td>
                                    <td><?php echo esc_html($channel->name); ?></td>
                                    <td><?php echo esc_html($channel->description); ?></td>
                                    <td>
                                        <span class="status-badge status-<?php echo esc_attr(strtolower($channel->status)); ?>">
                                            <?php echo esc_html(ucfirst($channel->status)); ?>
                                        </span>
                                    </td>
                                    <td><?php echo esc_html(date_i18n(get_option('date_format') . ' ' . get_option('time_format'), strtotime($channel->created_at))); ?></td>
                                    <td>
                                        <a href="#" class="edit-channel" data-id="<?php echo esc_attr($channel->id); ?>" data-name="<?php echo esc_attr($channel->name); ?>" data-description="<?php echo esc_attr($channel->description); ?>" data-status="<?php echo esc_attr($channel->status); ?>">
                                            <?php echo esc_html__('Edit', 'subscription-system'); ?>
                                        </a> | 
                                        <a href="<?php echo esc_url(wp_nonce_url(admin_url('edit.php?post_type=subscription&page=subscription-channels&action=delete&channel_id=' . $channel->id), 'delete_channel_' . $channel->id)); ?>" class="delete-channel" onclick="return confirm('<?php echo esc_js(__('Are you sure you want to delete this channel?', 'subscription-system')); ?>')">
                                            <?php echo esc_html__('Delete', 'subscription-system'); ?>
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else : ?>
                            <tr>
                                <td colspan="6"><?php echo esc_html__('No channels found.', 'subscription-system'); ?></td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="subscription-admin-sidebar">
            <div class="subscription-admin-card">
                <h2><?php echo esc_html__('Add New Channel', 'subscription-system'); ?></h2>
                
                <form method="post" action="">
                    <?php wp_nonce_field('subscription_add_channel', 'subscription_nonce'); ?>
                    
                    <div class="form-field">
                        <label for="channel_name"><?php echo esc_html__('Name', 'subscription-system'); ?> <span class="required">*</span></label>
                        <input type="text" id="channel_name" name="channel_name" required>
                    </div>
                    
                    <div class="form-field">
                        <label for="channel_description"><?php echo esc_html__('Description', 'subscription-system'); ?></label>
                        <textarea id="channel_description" name="channel_description" rows="5"></textarea>
                    </div>
                    
                    <div class="form-field">
                        <label for="channel_status"><?php echo esc_html__('Status', 'subscription-system'); ?></label>
                        <select id="channel_status" name="channel_status">
                            <option value="active"><?php echo esc_html__('Active', 'subscription-system'); ?></option>
                            <option value="inactive"><?php echo esc_html__('Inactive', 'subscription-system'); ?></option>
                        </select>
                    </div>
                    
                    <p class="submit">
                        <input type="submit" name="add_channel" class="button button-primary" value="<?php echo esc_attr__('Add Channel', 'subscription-system'); ?>">
                    </p>
                </form>
            </div>
            
            <div class="subscription-admin-card" id="edit-channel-form" style="display: none;">
                <h2><?php echo esc_html__('Edit Channel', 'subscription-system'); ?></h2>
                
                <form method="post" action="">
                    <?php wp_nonce_field('subscription_edit_channel', 'subscription_nonce'); ?>
                    <input type="hidden" id="edit_channel_id" name="channel_id">
                    
                    <div class="form-field">
                        <label for="edit_channel_name"><?php echo esc_html__('Name', 'subscription-system'); ?> <span class="required">*</span></label>
                        <input type="text" id="edit_channel_name" name="channel_name" required>
                    </div>
                    
                    <div class="form-field">
                        <label for="edit_channel_description"><?php echo esc_html__('Description', 'subscription-system'); ?></label>
                        <textarea id="edit_channel_description" name="channel_description" rows="5"></textarea>
                    </div>
                    
                    <div class="form-field">
                        <label for="edit_channel_status"><?php echo esc_html__('Status', 'subscription-system'); ?></label>
                        <select id="edit_channel_status" name="channel_status">
                            <option value="active"><?php echo esc_html__('Active', 'subscription-system'); ?></option>
                            <option value="inactive"><?php echo esc_html__('Inactive', 'subscription-system'); ?></option>
                        </select>
                    </div>
                    
                    <p class="submit">
                        <input type="submit" name="edit_channel" class="button button-primary" value="<?php echo esc_attr__('Update Channel', 'subscription-system'); ?>">
                        <button type="button" class="button cancel-edit"><?php echo esc_html__('Cancel', 'subscription-system'); ?></button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .subscription-admin-container {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
    }
    
    .subscription-admin-main {
        flex: 2;
        margin-right: 20px;
    }
    
    .subscription-admin-sidebar {
        flex: 1;
        min-width: 300px;
    }
    
    .subscription-admin-card {
        background: #fff;
        border: 1px solid #ccd0d4;
        box-shadow: 0 1px 1px rgba(0,0,0,.04);
        margin-bottom: 20px;
        padding: 15px;
    }
    
    .form-field {
        margin-bottom: 15px;
    }
    
    .form-field label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
    }
    
    .form-field input[type="text"],
    .form-field textarea,
    .form-field select {
        width: 100%;
    }
    
    .required {
        color: #dc3232;
    }
    
    .status-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 600;
    }
    
    .status-active {
        background-color: #d4edda;
        color: #155724;
    }
    
    .status-inactive {
        background-color: #f8d7da;
        color: #721c24;
    }
</style>

<script>
jQuery(document).ready(function($) {
    // Edit channel
    $('.edit-channel').on('click', function(e) {
        e.preventDefault();
        
        var id = $(this).data('id');
        var name = $(this).data('name');
        var description = $(this).data('description');
        var status = $(this).data('status');
        
        $('#edit_channel_id').val(id);
        $('#edit_channel_name').val(name);
        $('#edit_channel_description').val(description);
        $('#edit_channel_status').val(status);
        
        $('#edit-channel-form').show();
    });
    
    // Cancel edit
    $('.cancel-edit').on('click', function() {
        $('#edit-channel-form').hide();
    });
});
</script> 