<?php class ReduxFramework_sortable {

    /**
     * Field Constructor.
     *
     * Required - must call the parent constructor, then assign field and value to vars, and obviously call the render field function
     *
     * @since Redux_Options 2.0.1
    */
    function __construct($field = array(), $value ='', $parent) {
        $this->field = $field;
		$this-&gt;value = $value;
		$this-&gt;args = $parent-&gt;args;
    }

    /**
     * Field Render Function.
     *
     * Takes the vars and outputs the HTML for the field in the settings
     *
     * @since Redux_Options 2.0.1
    */
    function render() {

    	if ( empty( $this-&gt;field['mode'] ) ) {
    		$this-&gt;field['mode'] = "text";
    	}

		if ( $this-&gt;field['mode'] != "checkbox" &amp;&amp; $this-&gt;field['mode'] != "text"  ) {
    		$this-&gt;field['mode'] = "text";
    	}    	

        $class = (isset($this-&gt;field['class'])) ? $this-&gt;field['class'] : '';
        $options = $this-&gt;field['options'];

        if (!empty($this-&gt;value)) {
            foreach ($this-&gt;value as $k=&gt;$v) {
                if (!isset($options[$k])) {
                    unset($this-&gt;value[$k]);
                }
            }
        }

        foreach ($options as $k=&gt;$v) {
            if (!isset($this-&gt;value[$k])) {
                $this-&gt;value[$k] = $v;
            }
        }


        echo '<ul id="'.$this-&gt;field['id'].'-list" class="redux-sortable ' . $class . '">';

        foreach ($this-&gt;value as $k =&gt; $nicename) {
            $value_display = isset($this-&gt;value[$k]) ? $this-&gt;value[$k] : '';
            echo '<li>';
            
            $checked = "";
            $name = $this-&gt;args['opt_name'] . '[' . $this-&gt;field['id'] . '][' . $k . ']';

            if ( $this-&gt;field['mode'] == "checkbox") {
                if (!empty($this-&gt;value[$k])) {
                    $checked = 'checked="checked" ';
                }
                $class .= " checkbox_sortable";

                echo '<input type="hidden" name="'.$name.'" id="'.$this-&gt;field['id'].'-'.$k.'-hidden" value="'.$value_display.'">';
                $name = "";
            }
            if ( $this-&gt;field['mode'] == "checkbox") {
                echo '<div class="checkbox-container">';
            }
            echo '<input rel="'.$this-&gt;field['id'].'-'.$k.'-hidden" class="' . $class . '">field['mode'].'" id="' . $this-&gt;field['id'] . '[' . $k . ']" name="'.$name.'" value="' . esc_attr($value_display) . '" placeholder="' . $nicename . '" /&gt;';
            if ( $this-&gt;field['mode'] == "checkbox") {
                echo '<label for="' . $this-&gt;field['id'] . '[' . $k . ']"><strong>' . $options[$k] . '</strong></label>';

            }
            echo '<span class="compact drag"><i class="icon-move icon-large"></i></span>';
            if ( $this-&gt;field['mode'] == "checkbox") {
                echo '</div>';
            }
            echo '</li>';
        }
        echo '</ul>';
            
    }

    function enqueue() {

        wp_enqueue_script(
            'redux-field-sortable-js',
            ReduxFramework::$_url . 'inc/fields/sortable/field_sortable.min.js',
            array('jquery'),
            time(),
            true
        );


		wp_enqueue_style(
			'redux-field-sortable-css', 
			ReduxFramework::$_url.'inc/fields/sortable/field_sortable.css', 
			time(),
			true
		);	

    }
}