<?php
/**
 * @var VE_Editor $editor
 * @var VE_View_Manager $this
 */
$post=$editor->getPost();

$positionOptions=array(
    'center'=>'Center',
    'top-left'=>'Top left',
    'top-right'=>'Top Right',
    'bottom-left'=>'Bottom left',
    'bottom-right'=>'Bottom Right'
);
$appearanceOptions=array(
    ''=>'Default',
    'center'=>'Center',
);
$placementOptions=array(
    ''=>'None',
    'all'=>'Whole site',
    'post'=>'All posts',
    'page'=>'All pages',
    'category'=>'By Category',

);
$openOptions=array(
    ''=>'Not open automatically',
    'open_on_mouse_out'=>'Open when mouse out of page',
    'open_with_delay'=>'Open after page loaded',
);
function getBackgroundStyleOptions($current_value) {
    $output = '<option value="">' . __( 'Theme defaults', 'visual_editor' ) . '</option>';
    $styles = array(
        __( "Cover", 'visual_editor' ) => 'cover',
        __( 'Contain', 'visual_editor' ) => 'contain',
        __( 'No Repeat', 'visual_editor' ) => 'no-repeat',
        __( 'Repeat', 'visual_editor' ) => 'repeat'
    );
    foreach ( $styles as $name => $style ) {
        $output .= '<option value="' . $style . '"'.selected($style,$current_value,false).'>' . $name . '</option>';
    }
    return $output;
};
$poptions = get_post_meta($post->ID,'_ve_poptions',true);
        if(!is_array($poptions))
        {
            $poptions = array();
        }
?>
<a href="#TB_inline?width=600&height=550&inlineId=ve-popup-settings" title="Popup Settings" class="thickbox">Popup Setting</a>
<div id="ve-popup-settings" class="hidden">
    <form class="ve-ajax-form ve-popup-settings pure-form" data-update-values="1">
        <input type="hidden" name="action" value="ve_update_post_meta"/>
        <div class="ve-ui-tabs">
            <ul>
                <li><a href="#popup-setting-tab1">Setting</a></li>
                <li><a href="#popup-setting-tab2">Style</a></li>
            </ul>

            <div id="popup-setting-tab1" class="ui-tabs-panel">
                <p>
                    <label for="ve_post_title">Popup Title:</label>
                    <input class="widefat" id="ve_post_title" type="text" name="post_title" value="<?php echo esc_attr($editor->post->post_title);?>"/>
                </p>
                <p class="ve_row">
                    <label for="position" class="ve_col-sm-3">Popup Options:</label>
                </p>
                <ul class="popup-options-list">
                <?php foreach($poptions as $option){
                    $str = $positionOptions[$option['position']] . "_";
                    $str .= $placementOptions[$option['placement']] . "_";
                    $str .= $openOptions[$option['open']] ;
                    ?>

                       <li><?php echo $str;?></li>

                <?php } ?>
                </ul>


            </div>
            <div id="popup-setting-tab2" class="">
                <?php $img_ids=$post->background_image;?>
                <div class="ve_row ve_ui_section">
                    <div class="ve_col-sm-12">
                        <h3>Animation:</h3>
                        <p class="ve_explain">Type of animation applied to your popup when it appears</p>
                        <div class="ve_col-sm-6">

                            <select name="animation" id="animation" class="pure-input-1-2">
                                <?php ve_animation_select($post->animation)?>
                            </select>
                        </div>
                        <div class="ve_col-sm-6">
                            <div id="popup-test-animation">demo</div>
                        </div>
                        <script type="text/javascript">
                            (function($){
                                var testAnimation=function(x){
                                    x='veani-'+x;
                                    $('#popup-test-animation').removeClass().addClass(x + ' veani-animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                                        $(this).removeClass();
                                    });
                                };
                                $('#animation').on('change',function(){
                                    testAnimation($(this).val());
                                })
                            })(jQuery);
                        </script>
                    </div>
                </div>

                <div class="ve_row ve_ui_section">
                    <h3>Popup's Background:</h3>

                    <div class="ve_col-sm-12">
                        <h4><input type="radio" name="background" value="solid" checked="checked" />Solid color background &nbsp;&nbsp;&nbsp; <input type="radio" name="background" value="image" />Image background</h4>
                    </div>
                    <div class="solid-color bg-type"> <!-- solid color -->
                        <div class="ve_col-sm-5">

                            <div class="color-group">
                                <input type="text" name="background_color" value="<?php echo $post->background_color;?>" class="ve_color-control">
                            </div>
                        </div>

                        <div class="ve_col-sm-4">

                            <div>
                                <input type="number" step="0.1" placeholder="background opacity" name="background_opacity" value="<?php echo $post->background_opacity;?>">
                            </div>
                        </div>
                    </div>

                    <div class="image-bg bg-type"> <!-- image bg -->
                        <div class="ve_col-sm-5">
                            <div class="ve_input_block">
                                <input type="hidden" class="ve-media-selected-images-ids" name="background_image" value="<?php echo $img_ids;?>"/>

                                <div class="ve-media-selected-images" style="float:left">
                                    <ul class="ve-media-selected-images-list">
                                        <?php echo fieldAttachedImages(explode(',',$img_ids));?>
                                    </ul>
                                </div>
                                <a class="ve-media-add-images-btn" style="" href="#" title="Add image">Add image</a>
                            </div>
                        </div>
                        <div class="ve_col-sm-6">
                            <label>Background style</label>
                            <div class="ve_background-style" style="margin-top: 20px">
                                <select name="background_style" class="ve_background-style">
                                    <?php
                                    echo getBackgroundStyleOptions($post->background_style);
                                    ?>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>

                <?php
                    $close_btn_styles=array(
                        'fa-times'=>'times',
                        'fa-times-circle '=>'times circle',
                        'fa-times-circle-o'=>'times circle o',

                    );
                    for($i=3;$i<=17;$i++){
                        if($i==9){
                            continue;
                        }
                        if($i<10){
                            $i='0'.$i;
                        }
                        $close_btn_styles['close-btn-icon-'.$i]='btn '.$i;
                    }
                    $close_btn_positions=array(
                        'right'=>'Right',
                        'left'=>'Left',
                    );
                ?>

                <div class="ve_row ve_ui_section">
                    <h3>Close button:</h3>
                    <div class="ve_col-sm-4">
                        <label for="popup-close-btn-style">Button Style:</label>
                    </div>
                    <div class="ve_col-sm-6">
                        <select id="popup-close-btn-style" name="close_btn_style" class="pure-input-1-3">
                            <?php
                            $close_btn_style=$post->close_btn_style;
                            foreach($close_btn_styles as $o_value=>$o_title){
                                printf('<option value="%s"%s>%s</option>',$o_value,selected($close_btn_style,$o_value,false),$o_title);
                            }?>
                        </select>
                        <script type="application/javascript">
                            (function($) {
                                var formatState=function (state) {
                                    if (!state.id) {
                                        return state.text;
                                    }
                                    var $state = $(
                                        '<span><i class="fa ' + state.element.value.toLowerCase() + '"></i> ' + state.text + '</span>'
                                    );
                                    return $state;
                                };
                                $("#popup-close-btn-style").select2({
                                    width:300,
                                    templateResult: formatState,
                                    templateSelection: formatState
                                });
                            })(jQuery);
                        </script>
                    </div>
                </div>
                <div class="ve_row">
                    <div class="ve_col-sm-4">
                        <label>Position:</label>
                    </div>
                    <div class="ve_col-sm-4">
                        <select name="close_btn_position" class="pure-input-1-1">
                            <?php
                                $close_btn_position=$post->close_btn_position;
                                if(!$close_btn_position){
                                    $close_btn_position='right';
                                }
                                foreach($close_btn_positions as $o_value=>$o_title){
                                    printf('<option value="%s"%s>%s</option>',$o_value,selected($o_value,$close_btn_position,false),$o_title);
                                }
                            ?>
                        </select>
                    </div>
                </div>
                <div class="row ve_ui_section">
                    <h3>Offset:</h3>
                    <p class="small-input">


                        <label for="top">Top:</label>
                        <input class="" type="text" name="close_btn_top" value="<?php echo esc_attr($post->close_btn_top);?>">

                        <label for="left">Left:</label>
                        <input type="text" name="close_btn_left" value="<?php echo esc_attr($post->close_btn_left);?>">

                        <label for="bottom">Bottom:</label>
                        <input type="text" name="close_btn_bottom" value="<?php echo esc_attr($post->close_btn_bottom);?>">

                        <label for="right">Right:</label>
                        <input type="text" name="close_btn_right" value="<?php echo esc_attr($post->close_btn_right);?>">
                        <span class="clearfix"></span>
                    </p>

                </div>

            </div>
        </div>

        <p class="form-control submit">
            <input type="submit" value="Update" class="save"/>
        </p>


    </form>
</div>