<?php
/**
 * Blog Sortable Control
 *
 * @package Pawfect
 */

if (!defined('ABSPATH')) {
    exit;
}



/**
 * Class pawfect_Customize_Blog_Sortable_Control
 */
class pawfect_Customize_Blog_Sortable_Control extends WP_Customize_Control {

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

    /**
     * Constructor.
     */
    public function __construct($manager, $id, $args = array()) {
        parent::__construct($manager, $id, $args);
    }

    /**
     * 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-blog-sortable-js', PAWFECT_THEME_URL . '/inc/customizer/assets/js/blog-sortable.js', array('jquery', 'jquery-ui-sortable'), PAWFECT_THEME_VERSION, true);


    }

    /**
     * Send translatable strings to the JS template.
     */
    public function to_json() {
        parent::to_json();

        $this->json['l10n'] = array(
            'heading'        => esc_html__( 'Blog Post Elements', 'pawfect' ),
            'meta_one'       => esc_html__( 'Meta One (Date, Author)', 'pawfect' ),
            'title'          => esc_html__( 'Title', 'pawfect' ),
            'meta_two'       => esc_html__( 'Meta Two (Categories, Tags)', 'pawfect' ),
            'featured_image' => esc_html__( 'Featured Image', 'pawfect' ),
            'content'        => esc_html__( 'Content/Excerpt', 'pawfect' ),
        );
    }

    /**
     * Render the control's content.
     */
    public function render_content() {
        // This control uses content_template() for JS-based rendering.
    }

    /**
     * Renders the Underscore template for this control.
     * This is the correct method for JavaScript-based controls.
     */
    protected function content_template() {
        ?>
        <label class='pawfect-blog-sortable'>
            <span class="customize-control-title">
                {{{ data.label }}}
            </span>
            <# if ( data.description ) { #>
            <span class="description customize-control-description">{{{ data.description }}}</span>
            <# } #>

            <div class="customizer-layout-container">
                <div class="customizer-layout-heading">{{{ data.l10n.heading }}}</div>
                <ul id="pawfect-blog-elements" class="sortable-list" data-control-id="{{{ data.id }}}">
                    <li class="sortable-item" data-element-id="meta-one" data-visible="true">
                        <span class="pawfect-element-icon">📋</span>
                        <span class="pawfect-element-label">{{{ data.l10n.meta_one }}}</span>
                        <span class="pawfect-visibility-toggle" data-element="meta-one">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                            </svg>
                        </span>
                    </li>
                    <li class="sortable-item" data-element-id="title" data-visible="true">
                        <span class="pawfect-element-icon">📝</span>
                        <span class="pawfect-element-label">{{{ data.l10n.title }}}</span>
                        <span class="pawfect-visibility-toggle" data-element="title">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                            </svg>
                        </span>
                    </li>
                    <li class="sortable-item" data-element-id="meta-two" data-visible="true">
                        <span class="pawfect-element-icon">🏷️</span>
                        <span class="pawfect-element-label">{{{ data.l10n.meta_two }}}</span>
                        <span class="pawfect-visibility-toggle" data-element="meta-two">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                            </svg>
                        </span>
                    </li>
                    <li class="sortable-item" data-element-id="image" data-visible="true">
                        <span class="pawfect-element-icon">🖼️</span>
                        <span class="pawfect-element-label">{{{ data.l10n.featured_image }}}</span>
                        <span class="pawfect-visibility-toggle" data-element="image">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                            </svg>
                        </span>
                    </li>
                    <li class="sortable-item" data-element-id="content" data-visible="true">
                        <span class="pawfect-element-icon">📄</span>
                        <span class="pawfect-element-label">{{{ data.l10n.content }}}</span>
                        <span class="pawfect-visibility-toggle" data-element="content">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                            </svg>
                        </span>
                    </li>
                </ul>
            </div>

            <input type="hidden" {{{ data.inputAttrs }}} value="{{{ data.value }}}" {{{ data.link }}} />
        </label>
        <?php
    }
}
