<?php
if (!defined('ABSPATH')) exit;

/**
 * All Categories List View
 * primary color: #e53935
 */
function afdp_category_list() {
    $page_slug = 'awesome_food_delivery';

    // Handle Delete Action
    if (isset($_GET['delete']) && current_user_can('manage_options')) {
        $term_id = intval($_GET['delete']);
        if ( isset( $_GET['_wpnonce'] ) && wp_verify_nonce( sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ), 'afdp_delete_cat_' . $term_id ) ) {
    wp_delete_term( $term_id, 'afdp_food_category' );
    echo '<div class="notice notice-success is-dismissible" style="border-left-color: #e53935;"><p>' . esc_html__( 'Category deleted successfully.', 'food-delivery-pickup-soluition' ) . '</p></div>';
}
    }

    $terms = get_terms([
        'taxonomy'   => 'afdp_food_category',
        'hide_empty' => false,
    ]);
    ?>

    <style>
        :root { 
            --fd-primary: #e53935; 
            --fd-primary-hover: #c62828;
            --fd-border: #ccd0d4; 
            --fd-text: #1d2327;
            --fd-text-muted: #64748b;
        }

        .fd-wrap { padding: 20px; }
        .fd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
        .fd-header h2 { font-size: 22px; font-weight: 700; color: var(--fd-text); margin: 0; }
        
        #fd-table-container { background: #fff; border: 1px solid var(--fd-border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        #fd-cat-table { border: none !important; width: 100% !important; margin: 0 !important; border-collapse: collapse; }
        #fd-cat-table thead th { background: #f8f9fa; padding: 16px; font-size: 11px; text-transform: uppercase; color: var(--fd-text-muted); border-bottom: 2px solid #f0f0f1; text-align: left; }
        #fd-cat-table td { padding: 14px 16px; vertical-align: middle; border-bottom: 1px solid #f0f0f1; }
        
        .fd-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid #eee; }

        /* Button System */
        .fd-action-btns { display: flex; gap: 8px; justify-content: flex-end; }
        .btn-fd { 
            display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; 
            border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; 
            transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent;
        }
        .btn-fd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; }

        /* View: Outline Secondary */
        .btn-view-fd { color: #475569; border-color: #cbd5e1; background: #fff; }
        .btn-view-fd:hover { background: #f1f5f9; color: #1e293b; border-color: #94a3b8; }

        /* Edit: Outline Primary */
        .btn-edit-fd { color: var(--fd-primary); border-color: var(--fd-primary); background: transparent; }
        .btn-edit-fd:hover { background: var(--fd-primary); color: #fff; }

        /* Delete: Solid Danger */
        .btn-delete-fd { color: #fff; background: var(--fd-primary); border-color: var(--fd-primary); }
        .btn-delete-fd:hover { background: var(--fd-primary-hover); border-color: var(--fd-primary-hover); }

        .fd-item-badge { background: #f8f9fa; color: #475569; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; border: 1px solid #e2e8f0; }

        /* Switch */
        .fd-switch { position: relative; display: inline-block; width: 34px; height: 18px; }
        .fd-switch input { opacity: 0; width: 0; height: 0; }
        .fd-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 34px; }
        .fd-slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .fd-slider { background-color: var(--fd-primary); }
        input:checked + .fd-slider:before { transform: translateX(16px); }

        .btn-create-main { background: var(--fd-primary); color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; }
    </style>

    <div class="fd-wrap">
        <div class="fd-header">
            <h2>Food Categories</h2>
            <a href="?page=<?php echo esc_url($page_slug); ?>&tab=categories&sub=add" class="btn-create-main">+ Add Category</a>
        </div>

        <div id="fd-table-container">
            <table id="fd-cat-table">
                <thead>
                    <tr>
                        <th width="60">Image</th>
                        <th>Category Name</th>
                        <th>Items</th>
                        <th>Featured</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (!empty($terms)) : foreach ($terms as $term) :
                        $img_id = get_term_meta($term->term_id, 'afdp_category_image', true);
                        $featured = get_term_meta($term->term_id, 'afdp_is_featured', true);
                        
                        // URLs
                        $view_url = admin_url("admin.php?page=$page_slug&tab=categories&sub=view&view={$term->term_id}");
                        $edit_url = admin_url("admin.php?page=$page_slug&tab=categories&sub=add&edit={$term->term_id}");
                        $del_url  = wp_nonce_url(admin_url("admin.php?page=$page_slug&tab=categories&sub=all&delete={$term->term_id}"), 'afdp_delete_cat_' . $term->term_id);
                    ?>
                    <tr>
                        <td>
                            <?php echo $img_id ? wp_get_attachment_image($img_id, [44, 44], false, ['class' => 'fd-thumb']) : '<div class="fd-thumb" style="background:#f1f5f9; display:flex; align-items:center; justify-content:center;"><span class="dashicons dashicons-category" style="color:#cbd5e1"></span></div>'; ?>
                        </td>
                        <td>
                            <span style="font-weight: 600; font-size: 15px; color: var(--fd-text);"><?php echo esc_html($term->name); ?></span>
                        </td>
                        <td>
                            <span class="fd-item-badge"><?php echo esc_html($term->count); ?> Items</span>
                        </td>
                        <td>
                            <label class="fd-switch">
                                <input type="checkbox" class="fd-featured-ajax" data-id="<?php echo esc_attr($term->term_id); ?>" <?php checked($featured, '1'); ?>>
                                <span class="fd-slider"></span>
                            </label>
                        </td>
                        <td>
                            <div class="fd-action-btns">
                                <a href="<?php echo esc_url($view_url); ?>" class="btn-fd btn-view-fd">
                                    <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                                    View
                                </a>
                                <a href="<?php echo esc_url($edit_url); ?>" class="btn-fd btn-edit-fd">
                                    <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z"></path></svg>
                                    Edit
                                </a>
                                <a href="<?php echo esc_url($del_url); ?>" class="btn-fd btn-delete-fd" onclick="return confirm('Delete this category?')">
                                    <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                    Delete
                                </a>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <script>
    jQuery(document).ready(function($) {
        if ($.fn.DataTable) {
            $('#fd-cat-table').DataTable({
                pageLength: 10,
                dom: 'frtip',
                columnDefs: [{ orderable: false, targets: [0, 3, 4] }],
                language: { search: "", searchPlaceholder: "Search categories..." }
            });
        }
    });
    </script>
    <?php
}