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

/**
 * Frontpage Sortable Control
 * 
 * Custom control for managing frontpage sections with drag & drop reordering
 * and enable/disable toggles, similar to the blog sortable control.
 *
 * @package pawfect
 */

/**
 * Class pawfect_Customize_Frontpage_Sortable_Control
 */
class pawfect_Customize_Frontpage_Sortable_Control extends WP_Customize_Control {

    /**
     * Control type.
     */
    public $type = 'pawfect-frontpage-sortable';

    /**
     * Enqueue control related scripts/styles.
     */
    public function enqueue() {
        // Enqueue jQuery UI Sortable
        wp_enqueue_script('jquery-ui-sortable');

        // Enqueue the control CSS and JS
        wp_enqueue_style('pawfect-controls', PAWFECT_THEME_URL . '/inc/customizer/assets/css/controls.css', array(), PAWFECT_THEME_VERSION);
        wp_enqueue_script('pawfect-frontpage-sortable-js', PAWFECT_THEME_URL . '/inc/customizer/assets/js/frontpage-sortable.js', array('jquery', 'jquery-ui-sortable'), PAWFECT_THEME_VERSION, true);
    }

    /**
     * Render the control's content.
     */
    public function render_content() {
        $value = $this->value();

        // Define all available frontpage sections with their icons and labels
        $all_sections = array(
            'hero_slider' => array(
                'label' => esc_html__( 'Hero Slider', 'pawfect' ),
                'icon' => '🎬',
                'pro_only' => false
            ),
            'press_mentions' => array(
                'label' => esc_html__( 'Press Mentions', 'pawfect' ),
                'icon' => '📰',
                'pro_only' => false
            ),
            'feature_highlight' => array(
                'label' => esc_html__( 'Feature Highlight', 'pawfect' ),
                'icon' => '⭐',
                'pro_only' => false
            ),
            'why_choose' => array(
                'label' => esc_html__( 'Why Choose Us', 'pawfect' ),
                'icon' => '💎',
                'pro_only' => false
            ),
            'portfolio' => array(
                'label' => esc_html__( 'Portfolio', 'pawfect' ),
                'icon' => '🎨',
                'pro_only' => false
            ),
            'featured_collection' => array(
                'label' => esc_html__( 'Featured Collection', 'pawfect' ),
                'icon' => '🏆',
                'pro_only' => false
            ),
            'testimonial' => array(
                'label' => esc_html__( 'Testimonials', 'pawfect' ),
                'icon' => '💬',
                'pro_only' => false
            ),
            'mission' => array(
                'label' => esc_html__( 'Mission', 'pawfect' ),
                'icon' => '🎯',
                'pro_only' => false
            ),
            'pet_shop' => array(
                'label' => esc_html__( 'Shop by Pet', 'pawfect' ),
                'icon' => '🐾',
                'pro_only' => false
            ),
            'promo_timer' => array(
                'label' => esc_html__( 'Promo Timer', 'pawfect' ),
                'icon' => '⏰',
                'pro_only' => true
            ),
            'crafted' => array(
                'label' => esc_html__( 'Crafted with Care', 'pawfect' ),
                'icon' => '🛠️',
                'pro_only' => false
            ),
            'blog' => array(
                'label' => esc_html__( 'Blog', 'pawfect' ),
                'icon' => '📝',
                'pro_only' => false
            ),
            'promo_banner' => array(
                'label' => esc_html__( 'Promo Banner', 'pawfect' ),
                'icon' => '🎉',
                'pro_only' => false
            ),
            'instagram' => array(
                'label' => esc_html__( 'Instagram Gallery', 'pawfect' ),
                'icon' => '📸',
                'pro_only' => true
            ),
            'cta' => array(
                'label' => esc_html__( 'Call to Action', 'pawfect' ),
                'icon' => '📢',
                'pro_only' => false
            ),
            'woocommerce' => array(
                'label' => esc_html__( 'WooCommerce Products', 'pawfect' ),
                'icon' => '🛒',
                'pro_only' => false
            ),
        );

        // Default configuration with visibility states
        $default_config = array(
            'hero_slider' => array('order' => 0, 'visible' => true),
            'press_mentions' => array('order' => 1, 'visible' => true),
            'feature_highlight' => array('order' => 2, 'visible' => true),
            'why_choose' => array('order' => 3, 'visible' => true),
            'portfolio' => array('order' => 4, 'visible' => true),
            'featured_collection' => array('order' => 5, 'visible' => true),
            'testimonial' => array('order' => 6, 'visible' => true),
            'mission' => array('order' => 7, 'visible' => true),
            'pet_shop' => array('order' => 8, 'visible' => true),
            'promo_timer' => array('order' => 9, 'visible' => false),
            'crafted' => array('order' => 10, 'visible' => true),
            'blog' => array('order' => 11, 'visible' => true),
            'promo_banner' => array('order' => 12, 'visible' => true),
            'instagram' => array('order' => 13, 'visible' => false),
            'cta' => array('order' => 14, 'visible' => true),
            'woocommerce' => array('order' => 15, 'visible' => true),
        );

        // Parse current value or use default
        $current_config = $default_config;
        if (!empty($value) && is_array($value)) {
            $current_config = $value;
        }

        // Sort sections by order
        uasort($current_config, function($a, $b) {
            $order_a = isset($a['order']) ? $a['order'] : 0;
            $order_b = isset($b['order']) ? $b['order'] : 0;
            return $order_a - $order_b;
        });
        ?>

        <span class="customize-control-title"><?php echo esc_html($this->label); ?></span>
        <?php if (!empty($this->description)): ?>
            <span class="description customize-control-description"><?php echo esc_html($this->description); ?></span>
        <?php endif; ?>

        <!-- Hidden input to store the value -->
        <input type="hidden" <?php $this->link(); ?> value="<?php echo esc_attr(json_encode($current_config)); ?>" />

        <!-- FRONTPAGE SECTIONS WITH INLINE VISIBILITY TOGGLES -->
        <div class="customizer-layout-container">
            <div class="customizer-layout-heading"><?php esc_html_e( 'Frontpage Sections', 'pawfect' ); ?></div>
            <ul id="pawfect-frontpage-elements" class="sortable-list" data-control-id="<?php echo esc_attr($this->id); ?>">
                <?php foreach ($current_config as $section_id => $config): ?>
                    <?php if (isset($all_sections[$section_id])): ?>
                        <?php
                        $section_data = $all_sections[$section_id];
                        $is_visible = isset($config['visible']) ? $config['visible'] : true;
                        $is_pro_only = $section_data['pro_only'];

                        $visibility_class = $is_visible ? '' : ' pawfect-disabled';
                        $pro_class = $is_pro_only ? ' pawfect-pro-only' : '';
                        ?>
                        <li class="sortable-item<?php echo esc_attr( $visibility_class . $pro_class ); ?>"
                            data-section-id="<?php echo esc_attr($section_id); ?>"
                            data-visible="<?php echo esc_attr( $is_visible ? 'true' : 'false' ); ?>"
                            data-pro-only="<?php echo esc_attr( $is_pro_only ? 'true' : 'false' ); ?>"
                            style="<?php echo esc_attr( $is_visible ? '' : 'opacity: 0.5;' ); ?>">
                            <span class="pawfect-element-icon"><?php echo esc_html($section_data['icon']); ?></span>
                            <span class="pawfect-element-label">
                                <?php echo esc_html($section_data['label']); ?>
                                <?php if ($is_pro_only): ?>
                                    <span class="pawfect-pro-badge"><?php esc_html_e( 'Pro', 'pawfect' ); ?></span>
                                <?php endif; ?>
                            </span>
                            <span class="pawfect-visibility-toggle"
                                  data-section="<?php echo esc_attr($section_id); ?>"
                                  <?php if ( $is_pro_only ) { echo 'data-pro-only="true"'; } ?>
                                  title="<?php echo esc_attr( $is_visible ? __( 'Click to hide', 'pawfect' ) : __( 'Click to show', 'pawfect' ) ); ?>">
                                <?php if ($is_visible): ?>
                                    <span class="dashicons dashicons-visibility"></span>
                                <?php elseif ($is_pro_only): ?>
                                    <span class="dashicons dashicons-lock"></span>
                                <?php else: ?>
                                    <span class="dashicons dashicons-hidden"></span>
                                <?php endif; ?>
                            </span>
                        </li>
                    <?php endif; ?>
                <?php endforeach; ?>
            </ul>
        </div>

        <?php
    }
}
