<?php $helper = $this->getHelper() ?>
<?php $params = $this->getParams() ?>
<?php $exist = false ?>
<?php $child = null ?>
<div class="edit-static-form">
    <div class="line">
        <div class="col-des-12 builder-title">
            <h2><?php echo __('Divider Block') ?></h2>
        </div>
    </div>
    <form id="section-form" enctype="multipart/form-data" method="POST" action="<?php echo $this->getUrl('fbuilder/element/save') ?>" data-hasrequired="<?php echo __('* Required Fields') ?>" data-mage-init='{"validation":{}}'>
        <?php if ($pageId = $this->getRequest()->getParam('page_id')): ?>
            <input type="hidden" name="page_id" value="<?php echo $pageId ?>">
        <?php else: ?>
            <input type="hidden" name="product_id" value="<?php echo $this->getRequest()->getParam('product_id') ?>">
            <input type="hidden" name="overriden" value="<?php echo $this->getRequest()->getParam('overriden') ?>">
        <?php endif ?>
        <input type="hidden" name="page_type" value="<?php echo $this->getRequest()->getParam('page_type') ?>">
        <input id="block_type" type="hidden" name="type" value="divider">
        <input id="block_block_name" type="hidden" name="block_name" value="<?php echo $params['block'] ?>">
        <?php if (isset($params['id'])): ?>
            <?php
                $child =  $this->getModel('MGS\Fbuilder\Model\Child')->load($params['id']);
                $exist = true;
                $settings = json_decode($child->getSetting(), true);
            ?>
            <input type="hidden" name="child_id" value="<?php echo $params['id'] ?>">
        <?php endif ?>
        
        <div class="mgs-tab data items product" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php
                echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
                    ->setExist($exist)
                    ->setDisableContent(1)
                    ->setDisableBackground(1)
                    ->setBuilderChild($child)
                    ->setBuilderHelper($helper)
                    ->setTemplate('MGS_Fbuilder::panel/create/element/widgets/general_tab.phtml')->toHtml() ;
            ?>
            
            <div class="data item title" aria-labeledby="tab-label-content-title" data-role="collapsible" id="tab-label-content">
                <a class="data switch" tabindex="-1" data-toggle="switch" href="#content" id="tab-label-content-title">
                    <?php echo __('Content Config') ?>
                </a>
            </div>
            
            <div class="data item content" id="content" data-role="content" style="display:none">
                <div class="line form-group">
                    <div class="col">
                        <label class="control-label" for="width"><?php echo __('Width') ?></label><br/>
                        <input type="text" class="input-text validate-number" id="width" name="setting[width]"<?php if ($exist && $settings['width']): ?> value="<?php echo $settings['width'] ?>"<?php endif ?> onchange="setPreview()" placeholder="<?php echo __('px. Empty for full') ?>"/>
                    </div>
                    
                    <div class="col">
                        <label class="control-label" for="style"><?php echo __('Style') ?></label><br/>
                        <select name="setting[style]" id="style" onchange="setPreview()">
                            <option value="solid"<?php if ($exist && ($settings['style']=='solid')): ?> selected="selected"<?php endif ?>><?php echo __('Solid'); ?></option>
                            <option value="double_solid"<?php if ($exist && ($settings['style']=='double_solid')): ?> selected="selected"<?php endif ?>><?php echo __('Double solid'); ?></option>
                            <option value="dotted"<?php if ($exist && ($settings['style']=='dotted')): ?> selected="selected"<?php endif ?>><?php echo __('Dotted'); ?></option>
                            <option value="double_dotted"<?php if ($exist && ($settings['style']=='double_dotted')): ?> selected="selected"<?php endif ?>><?php echo __('Double dotted'); ?></option>
                            <option value="dashed"<?php if ($exist && ($settings['style']=='dashed')): ?> selected="selected"<?php endif ?>><?php echo __('Dashed'); ?></option>
                            <option value="double_dashed"<?php if ($exist && ($settings['style']=='double_dashed')): ?> selected="selected"<?php endif ?>><?php echo __('Double dashed'); ?></option>
                            <option value="shadown"<?php if ($exist && ($settings['style']=='shadown')): ?> selected="selected"<?php endif ?>><?php echo __('Shadown'); ?></option>
                        </select>
                    </div>
                    
                    <div class="col">
                        <label class="control-label" for="border_align"><?php echo __('Align') ?></label><br/>
                        <select name="setting[border_align]" id="border_align" onchange="setPreview()">
                            <option value="center"<?php if ($exist && ($settings['border_align']=='center')): ?> selected="selected"<?php endif ?>><?php echo __('Center'); ?></option>
                            <option value="left"<?php if ($exist && ($settings['border_align']=='left')): ?> selected="selected"<?php endif ?>><?php echo __('Left'); ?></option>
                            <option value="right"<?php if ($exist && ($settings['border_align']=='right')): ?> selected="selected"<?php endif ?>><?php echo __('Right'); ?></option>
                        </select>
                    </div>
                    
                    <div class="col">
                        <label class="control-label" for="border_width"><?php echo __('Border width') ?></label><br/>
                        <input type="text" class="input-text validate-number" id="border_width" name="setting[border_width]"<?php if ($exist && $settings['border_width']): ?> value="<?php echo $settings['border_width'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
                    </div>
                    
                    <div class="col">
                        <label class="control-label" for="border_color"><?php echo __('Border color') ?></label><br/>
                        <input type="text" class="input-text color-input" id="border_color" name="setting[border_color]"<?php if ($exist && $settings['border_color']): ?> value="<?php echo $settings['border_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                </div>
                
                <hr/>
                
                <div class="line form-group">
                    <div class="col">
                        <label for="show_text" class="control-label"><?php echo __('Show text') ?></label><br/>
                        <div class="admin__actions-switch" data-role="switcher">
                            <input type="checkbox"<?php if ($exist && $settings['show_text']): ?> checked="checked"<?php endif ?> value="1" name="setting[show_text]" id="show_text" class="admin__actions-switch-checkbox" onclick="showText()">
                            <label for="show_text" class="admin__actions-switch-label">
                                <span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
                            </label>
                        </div>
                    </div>
                    <div class="col text-fields">
                        <label class="control-label" for="subtitle"><?php echo __('Text') ?></label><br/>
                        <input type="text" class="input-text required-entry" id="subtitle" name="setting[subtitle]"<?php if ($exist && $settings['subtitle']): ?> value="<?php echo $settings['subtitle'] ?>"<?php endif ?> onchange="setPreview()"/>
                    </div>
                    <div class="col text-fields">
                        <label class="control-label" for="text_font_size"><?php echo __('Font size') ?></label><br/>
                        <input type="text" class="input-text validate-number" id="text_font_size" name="setting[text_font_size]"<?php if ($exist && $settings['text_font_size']): ?> value="<?php echo $settings['text_font_size'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
                    </div>
                    
                    <div class="col text-fields">
                        <label class="control-label" for="text_color"><?php echo __('Color') ?></label><br/>
                        <input type="text" class="input-text color-input" id="text_color" name="setting[text_color]"<?php if ($exist && $settings['text_color']): ?> value="<?php echo $settings['text_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                    
                    <div class="col text-fields">
                        <label for="text_fontweight" class="control-label"><?php echo __('Font bold') ?></label><br/>
                        <div class="admin__actions-switch" data-role="switcher">
                            <input type="checkbox"<?php if ($exist && $settings['text_fontweight']): ?> checked="checked"<?php endif ?> value="1" name="setting[text_fontweight]" id="text_fontweight" class="admin__actions-switch-checkbox" onclick="changeContentStyle()">
                            <label for="text_fontweight" class="admin__actions-switch-label">
                                <span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="col text-fields">
                        <label class="control-label" for="text_background"><?php echo __('Background') ?></label><br/>
                        <input type="text" class="input-text color-input" id="text_background" name="setting[text_background]"<?php if ($exist && $settings['text_background']): ?> value="<?php echo $settings['text_background'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                    
                    <div class="col text-fields">
                        <label class="control-label" for="text_padding"><?php echo __('Padding') ?></label><br/>
                        <input type="text" class="input-text validate-number" id="text_padding" name="setting[text_padding]"<?php if ($exist && $settings['text_padding']): ?> value="<?php echo $settings['text_padding'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                </div>
                
                <hr/>
                
                <div class="line form-group">
                    <div class="col">
                        <label for="show_icon" class="control-label"><?php echo __('Show Icon') ?></label><br/>
                        <div class="admin__actions-switch" data-role="switcher">
                            <input type="checkbox"<?php if ($exist && $settings['show_icon']): ?> checked="checked"<?php endif ?> value="1" name="setting[show_icon]" id="show_icon" class="admin__actions-switch-checkbox" onclick="showIconFields()">
                            <label for="show_icon" class="admin__actions-switch-label">
                                <span data-text-off="<?php echo __('No') ?>" data-text-on="<?php echo __('Yes') ?>" class="admin__actions-switch-text"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="col icon-fields">
                        <label class="control-label"><?php echo __('Icon font class') ?></label><br/>
                        <input type="text" class="input-text input-icon-choose required-entry" id="icon" name="setting[icon]"<?php if ($exist && $settings['icon']): ?> value="<?php echo $settings['icon'] ?>"<?php endif ?> onchange="setPreview()"/>
                    </div>
                    
                    <div class="col icon-fields">
                        <label class="control-label" for="icon_padding"><?php echo __('Width') ?></label><br/>
                        <input type="text" class="input-text validate-number required-entry" id="icon_padding" name="setting[icon_padding]"<?php if ($exist && $settings['icon_padding']): ?> value="<?php echo $settings['icon_padding'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                    
                    <div class="col icon-fields">
                        <label class="control-label" for="icon_font_size"><?php echo __('Font size') ?></label><br/>
                        <input type="text" class="input-text validate-number" id="icon_font_size" name="setting[icon_font_size]"<?php if ($exist && $settings['icon_font_size']): ?> value="<?php echo $settings['icon_font_size'] ?>"<?php endif ?> onchange="changeContentStyle()" placeholder="px"/>
                    </div>
                    
                    <div class="col icon-fields">
                        <label class="control-label" for="icon_color"><?php echo __('Color') ?></label><br/>
                        <input type="text" class="input-text color-input" id="icon_color" name="setting[icon_color]"<?php if ($exist && $settings['icon_color']): ?> value="<?php echo $settings['icon_color'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                    
                    <div class="col icon-fields">
                        <label class="control-label" for="icon_border"><?php echo __('Border') ?></label><br/>
                        <input type="text" class="input-text color-input" id="icon_border" name="setting[icon_border]"<?php if ($exist && $settings['icon_border']): ?> value="<?php echo $settings['icon_border'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                    
                    <div class="col icon-fields">
                        <label class="control-label" for="icon_background"><?php echo __('Background') ?></label><br/>
                        <input type="text" class="input-text color-input" id="icon_background" name="setting[icon_background]"<?php if ($exist && $settings['icon_background']): ?> value="<?php echo $settings['icon_background'] ?>"<?php endif ?> onchange="changeContentStyle()"/>
                    </div>
                    
                    
                </div>
                <hr/>

                <div class="content-block mgs-divider-block" id="mgs-divider-sample" style="margin-top:50px">
                    <div id="divider-container">
                        <span class="divider-text" id="divider-text" style="display:none">
                            <span class="text"></span>
                        </span>
                        
                        <span class="divider-text double-icon" id="divider-double-icon" style="display:none">
                            <span class="text-icon-container">
                                <span class="icon"></span>
                                <span class="text"></span>
                                <span class="icon"></span>
                            </span>
                        </span>
                        
                        <span class="divider-icon" id="divider-icon" style="display:none">
                            <span></span>
                        </span>
                        
                        <hr/>
                    </div>
                </div>
                
                <style type="text/css" id="divider-custom-css"></style>
            </div>
        
            <?php if ($exist): ?>
                <?php
                    echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
                        ->setExist($exist)
                        ->setBuilderChild($child)
                        ->setBuilderHelper($helper)
                        ->setTemplate('MGS_Fbuilder::panel/create/element/widgets/code_tab.phtml')->toHtml() ;
                ?>
                
            <?php endif ?>
        </div>
        
        <div class="line">
            <div class="form-group">
                <div class="col-des-12 builder-action">
                    <div class="buttons">
                        <?php if (!$exist): ?>
                            <button type="button" class="action" onclick="history.go(-1)"><span><?php echo __('Back') ?></span></button>
                        <?php endif ?>
                        <button type="submit" class="action primary"><span><?php echo __('Submit') ?></span></button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<?php
    echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
        ->setExist($exist)
        ->setBuilderChild($child)
        ->setBuilderHelper($helper)
        ->setTemplate('MGS_Fbuilder::panel/create/element/widgets/font_list.phtml')->toHtml() ;
?>
    
<script type="text/javascript">
    require([
        'jquery',
    ], function(jQuery){
        (function($) {
            $(document).ready(function(){
                setPreview();
                showText();
                showIconFields();
            });
            
            $("#subtitle").keypress(function( event ){
                setPreview();
            });
        })(jQuery);
    });
    
    function showText(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                if($('#show_text').prop("checked") == true){
                    $('.text-fields').show();
                }else{
                    $('.text-fields').hide();
                }
            })(jQuery);
        });
        setPreview();
    }
    
    function showIconFields(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                if($('#show_icon').prop("checked") == true){
                    $('.icon-fields').show();
                }else{
                    $('.icon-fields').hide();
                }
            })(jQuery);
        });
        setPreview();
    }
    
    function setPreview(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                style = $('#style').val();
                border_align = $('#border_align').val();
                subtitle = $('#subtitle').val();
                icon = $('#icon').val();
                width = $('#width').val();
                
                styleClass = 'mgs-divider mgs-divider-'+style;
                if(width!='' && !isNaN(width) && width>0){
                    styleClass += ' divider-'+border_align;
                }
                
                $('#divider-container').attr('class', styleClass);
                
                $('#mgs-divider-sample .text').html(subtitle);
                
                $('#divider-double-icon .icon').attr('class', 'icon '+icon);
                $('#divider-icon span').attr('class', icon);
                
                if($('#show_text').prop("checked") == true && $('#show_icon').prop("checked") == true){
                    $('#divider-icon, #divider-text').hide();
                    $('#divider-double-icon').show();
                }else{
                    if($('#show_text').prop("checked") == true){
                        $('#divider-double-icon, #divider-icon').hide();
                        $('#divider-text').show();
                    }else{
                        $('#divider-double-icon, #divider-text').hide();
                        $('#divider-icon').show();
                    }
                }
                
                if($('#show_text').prop("checked") == false && $('#show_icon').prop("checked") == false){
                    $('#divider-icon, #divider-text, #divider-double-icon').hide();
                }
                
            })(jQuery);
        });
        
        changeContentStyle();
    }
    
    function hexToRgb(hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }
    
    function changeContentStyle(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                width = $('#width').val();
                border_width = $('#border_width').val();
                border_color = $('#border_color').val();
                text_font_size = parseFloat($('#text_font_size').val());
                text_color = $('#text_color').val();
                text_background = $('#text_background').val();
                text_padding = $('#text_padding').val();
                icon_font_size = $('#icon_font_size').val();
                icon_color = $('#icon_color').val();
                icon_border = $('#icon_border').val();
                icon_background = $('#icon_background').val();
                icon_padding = $('#icon_padding').val();
                style = $('#style').val();

                $customStyle = '*{}';
                
                if(width!='' && !isNaN(width) && width>0){
                    //$customStyle += '#mgs-divider-sample hr, #mgs-divider-sample.mgs-divider-block .double-icon, #mgs-divider-sample.mgs-divider-block .divider-icon, #mgs-divider-sample.mgs-divider-block .divider-text{max-width:'+width+'px}';
                    
                    $customStyle += '#mgs-divider-sample .mgs-divider{max-width:'+width+'px}';
                }
                
                if(border_width!=''){
                    $customStyle += '#mgs-divider-sample.mgs-divider-block .mgs-divider hr{border-width:'+border_width+'px}';
                }
                if(border_color!=''){
                    if(style=='shadown'){
                        rgb = hexToRgb(border_color);

                        $customStyle += '#mgs-divider-sample.mgs-divider-block .mgs-divider hr::after{background: -webkit-radial-gradient(50% -50% ellipse,rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',.5) 0,rgba(255,255,255,0) 65%);background: radial-gradient(ellipse at 50% -50%,rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',.5) 0,rgba(255,255,255,0) 65%);}';
                    }else{
                        $customStyle += '#mgs-divider-sample.mgs-divider-block .mgs-divider hr{border-color:'+border_color+'}';
                    }
                }
                
                if($('#show_text').prop("checked") == true){
                    if(text_font_size!='' && !isNaN(text_font_size) && text_font_size>0){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-text span{font-size:'+text_font_size+'px}';
                        
                        $marginTop = text_font_size/2;
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-text{height:'+text_font_size+'px;line-height:'+text_font_size+'px;margin-top:-'+$marginTop+'px}';
                    }
                    if(text_color!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-text span{color:'+text_color+'}';
                    }
                    if(text_background!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-text span{background-color:'+text_background+'}';
                    }
                    if(text_padding!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-text span{padding:0 '+text_padding+'px}';
                    }
                }
                
                if($('#show_icon').prop("checked") == true){
                    if(icon_font_size!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon span, #mgs-divider-sample .mgs-divider .text-icon-container span.icon{font-size:'+icon_font_size+'px;}';
                        
                        $marginTop = icon_font_size/2;
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon{height:'+icon_font_size+'px;line-height:'+icon_font_size+'px;margin-top:-'+$marginTop+'px; height:'+icon_font_size+'px;}';
                        
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon span::before,#mgs-divider-sample .mgs-divider .text-icon-container span.icon:before{margin-top:-'+$marginTop+'px}';
                    }
                    
                    if(icon_color!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon span, #mgs-divider-sample .mgs-divider .text-icon-container span.icon{color:'+icon_color+'}';
                    }
                    if(icon_background!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon span, #mgs-divider-sample .mgs-divider .text-icon-container span.icon{background-color:'+icon_background+'}';
                    }
                    if(icon_padding!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon span, #mgs-divider-sample .mgs-divider .text-icon-container span.icon{width:'+icon_padding+'px; height:'+icon_padding+'px}';

                        $marginTop = icon_padding/2;
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon{height:'+icon_padding+'px; margin-top:-'+$marginTop+'px}';

                    }
                    if(icon_border!=''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-icon span, #mgs-divider-sample .mgs-divider .text-icon-container span.icon{border:1px solid '+icon_border+';}';
                    }
                }
                
                if($('#show_text').prop("checked") == true && $('#show_icon').prop("checked") == true){
                    if(icon_font_size==''){
                        $customStyle += '#mgs-divider-sample .mgs-divider .text-icon-container span.icon{font-size:15px;}';
                        $customStyle += '#mgs-divider-sample .mgs-divider .text-icon-container span.icon::before{margin-top:-7.5px}';
                    }
                    
                    $textHeight = 20;
                    if(text_font_size!=''){
                        $textHeight = text_font_size;
                    }
                    $height = $textHeight;
                    $iconHeight = icon_padding;
                    if($height<$iconHeight){
                        $height = $iconHeight;
                    }
                    $marginTop = $height/2;
                    $top = $marginTop/2;
                    $customStyle += '#mgs-divider-sample .mgs-divider .divider-text{height:'+$height+'px; line-height:'+$height+'px; margin-top:-'+$marginTop+'px}';
                    
                    if(icon_padding>text_font_size){
                        $customStyle += '#mgs-divider-sample .mgs-divider .divider-text span.text{position:relative; top:-'+$top+'px; background:transparent}';
                    }
                }
                //alert($customStyle);
                $('#divider-custom-css').html($customStyle);
            })(jQuery);
        });
    }
</script>