<?php $helper = $this->getHelper() ?>
<?php $params = $this->getParams() ?>
<?php $exist = false ?>
<?php $child = null ?>
<?php $oldTextAlign = 'top-left' ?>
<?php $oldEffect = '' ?>
<div class="edit-static-form">
    <div class="line">
        <div class="col-des-12 builder-title">
            <h2><?php echo __('Promo Banner 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="promo_banner">
        <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);
                $oldTextAlign = $settings['text_align'];
                $oldEffect = $settings['effect'];
            ?>
            <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)
                    ->setBuilderChild($child)
                    ->setBuilderHelper($helper)
                    ->setTemplate('MGS_Fbuilder::panel/create/element/widgets/general_tab.phtml')->toHtml() ;
            ?>
            
            <div class="data item title" aria-labeledby="tab-label-banner-title" data-role="collapsible" id="tab-label-banner">
                <a class="data switch" tabindex="-1" data-toggle="switch" href="#banner" id="tab-label-banner-title">
                    <?php echo __('Banner Config') ?>
                </a>
            </div>
            
            <div class="data item content" id="banner" data-role="content" style="display:none">
                <div class="line form-group">
                    <div class="col-des-7">
                        <div class="line form-group">
                            <label for="image" class="col-des-3 control-label"><?php echo __('Image') ?></label>
                            <div class="col-des-9">
                                <input type="file" id="image" name="image" onchange="setPreview()">
                                <input type="hidden" name="setting[banner_image]" <?php if ($exist && isset($settings['banner_image'])): ?> value="<?php echo $settings['banner_image'] ?>"<?php endif ?>>
                            </div>
                        </div>
                        
                        <div class="line form-group">
                            <label for="url" class="col-des-3 control-label"><?php echo __('Url') ?></label>
                            <div class="col-des-9">
                                <input type="text" class="input-text" id="url" name="setting[url]"<?php if ($exist && $settings['url']): ?> value="<?php echo $settings['url'] ?>"<?php endif ?>/>
                            </div>
                        </div>
                        
                        <div class="line form-group">
                            <label for="text_content" class="col-des-3 control-label"><?php echo __('Text content') ?></label>
                            <div class="col-des-9">
                                <textarea class="input-text" id="text_content" name="setting[text_content]" onchange="setPreview()"><?php if ($exist && $settings['text_content']): ?><?php echo $settings['text_content'] ?><?php endif ?></textarea>
                            </div>
                        </div>
                        
                        <div class="line form-group">
                            <label for="button_text" class="col-des-3 control-label"><?php echo __('Button text') ?></label>
                            <div class="col-des-9">
                                <input type="text" class="input-text" id="button_text" name="setting[button_text]"<?php if ($exist && $settings['button_text']): ?> value="<?php echo $settings['button_text'] ?>"<?php endif ?> onchange="setPreview()"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-des-5">
                        <div id="banner-temp">
                            <div class="mgs-promobanner promobanner <?php echo $oldEffect ?>" id="banner-container" style="display:block !important">
                                <a href="">
                                    <?php if ($exist && ($settings['banner_image']!='')): ?>
                                        <img src="<?php echo $helper->getMediaUrl() ?>mgs/fbuilder/promobanners<?php echo $settings['banner_image'] ?>" class="banner-image" id="image-temp"/>
                                        
                                    <?php else: ?>
                                        <img src="" class="banner-image" id="image-temp" style="display:none"/>
                                    <?php endif ?>
                                </a>
                                <div class="text <?php echo $oldTextAlign ?>" id="text-container">
                                    <div class="banner-text"></div>
                                    <span class="banner-button">
                                        <button class="btn action primary btn-promo-banner" id="button-temp"><span></span></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <style type="text/css" id="banner-custom-css"></style>
                    </div>
                </div>
                
                <div class="line form-group">
                    
                    <div class="col-des-4">
                        <label for="text_align" class="control-label"><?php echo __('Text align') ?></label><br/>
                        <select id="text_align" class="input-text" name="setting[text_align]" onchange="setPreview()">
                            <option value="top-left"<?php if ($exist && ($settings['text_align']=='top-left')): ?> selected="selected"<?php endif ?>><?php echo __('Top Left') ?></option>
                            <option value="top-middle"<?php if ($exist && ($settings['text_align']=='top-middle')): ?> selected="selected"<?php endif ?>><?php echo __('Top Center') ?></option>
                            <option value="top-right"<?php if ($exist && ($settings['text_align']=='top-right')): ?> selected="selected"<?php endif ?>><?php echo __('Top Right') ?></option>
                            <option value="middle-left"<?php if ($exist && ($settings['text_align']=='middle-left')): ?> selected="selected"<?php endif ?>><?php echo __('Middle Left') ?></option>
                            <option value="middle-center"<?php if ($exist && ($settings['text_align']=='middle-center')): ?> selected="selected"<?php endif ?>><?php echo __('Middle Center') ?></option>
                            <option value="middle-right"<?php if ($exist && ($settings['text_align']=='middle-right')): ?> selected="selected"<?php endif ?>><?php echo __('Middle Right') ?></option>
                            <option value="bottom-left"<?php if ($exist && ($settings['text_align']=='bottom-left')): ?> selected="selected"<?php endif ?>><?php echo __('Bottom Left') ?></option>
                            <option value="bottom-center"<?php if ($exist && ($settings['text_align']=='bottom-center')): ?> selected="selected"<?php endif ?>><?php echo __('Bottom Center') ?></option>
                            <option value="bottom-right"<?php if ($exist && ($settings['text_align']=='bottom-right')): ?> selected="selected"<?php endif ?>><?php echo __('Bottom Right') ?></option>
                        </select>
                    </div>
                    
                    
                    <div class="col-des-4">
                        <label for="effect" class="control-label"><?php echo __('Effect') ?></label><br/>
                        <select id="effect" class="input-text" name="setting[effect]" onchange="setPreview()">
                            <option value=""><?php echo __('No Effect') ?></option>
                            <option value="zoom"<?php if ($exist && ($settings['effect']=='zoom')): ?> selected="selected"<?php endif ?>><?php echo __('Zoom') ?></option>
                            <option value="border-zoom"<?php if ($exist && ($settings['effect']=='border-zoom')): ?> selected="selected"<?php endif ?>><?php echo __('Border Zoom') ?></option>
                            <option value="flashed"<?php if ($exist && ($settings['effect']=='flashed')): ?> selected="selected"<?php endif ?>><?php echo __('Flashed') ?></option>
                            <option value="zoom-flashed"<?php if ($exist && ($settings['effect']=='zoom-flashed')): ?> selected="selected"<?php endif ?>><?php echo __('Zoom Flashed') ?></option>
                            <option value="shadow-corner"<?php if ($exist && ($settings['effect']=='shadow-corner')): ?> selected="selected"<?php endif ?>><?php echo __('Shadow Corner') ?></option>
                            <option value="zoom-shadow"<?php if ($exist && ($settings['effect']=='zoom-shadow')): ?> selected="selected"<?php endif ?>><?php echo __('Zoom Shadow') ?></option>
                            <option value="cup-border"<?php if ($exist && ($settings['effect']=='cup-border')): ?> selected="selected"<?php endif ?>><?php echo __('Cup Border') ?></option>
                            <option value="flashed-zoom"<?php if ($exist && ($settings['effect']=='flashed-zoom')): ?> selected="selected"<?php endif ?>><?php echo __('Flashed Zoom') ?></option>
                            <option value="zoom-out-shadow"<?php if ($exist && ($settings['effect']=='zoom-out-shadow')): ?> selected="selected"<?php endif ?>><?php echo __('Zoom Out Shadow') ?></option>
                            <option value="mist"<?php if ($exist && ($settings['effect']=='mist')): ?> selected="selected"<?php endif ?>><?php echo __('Mist') ?></option>
                            <option value="mist-text"<?php if ($exist && ($settings['effect']=='mist-text')): ?> selected="selected"<?php endif ?>><?php echo __('Mist Text') ?></option>
                        </select>
                    </div>
                    

                    
                    <div class="col-des-4">
                        <label for="text_color" class="control-label"><?php echo __('Text 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="changeBannerStyle()"//>
                    </div>

                </div>
                
                <div class="line form-group">
                    <div class="col-des-4">
                        <label for="button_background" class="control-label"><?php echo __('Button background') ?></label><br/>
                        <input type="text" class="input-text color-input" id="button_background" name="setting[button_background]"<?php if ($exist && $settings['button_background']): ?> value="<?php echo $settings['button_background'] ?>"<?php endif ?> onchange="changeBannerStyle()"//>
                    </div>
                    
                    <div class="col-des-4">
                        <label for="button_color" class="control-label"><?php echo __('Button text') ?></label><br/>
                        <input type="text" class="input-text color-input" id="button_color" name="setting[button_color]"<?php if ($exist && $settings['button_color']): ?> value="<?php echo $settings['button_color'] ?>"<?php endif ?> onchange="changeBannerStyle()"//>
                    </div>
                    
                    <div class="col-des-4">
                        <label for="button_border" class="control-label"><?php echo __('Button border') ?></label><br/>
                        <input type="text" class="input-text color-input" id="button_border" name="setting[button_border]"<?php if ($exist && $settings['button_border']): ?> value="<?php echo $settings['button_border'] ?>"<?php endif ?> onchange="changeBannerStyle()"//>
                    </div>
                </div>
                
                <div class="line form-group">
                    <div class="col-des-4">
                        <label for="button_hover_background" class="control-label"><?php echo __('Button hover background') ?></label><br/>
                        <input type="text" class="input-text color-input" id="button_hover_background" name="setting[button_hover_background]"<?php if ($exist && $settings['button_hover_background']): ?> value="<?php echo $settings['button_hover_background'] ?>"<?php endif ?> onchange="changeBannerStyle()"//>
                    </div>
                    
                    <div class="col-des-4">
                        <label for="button_hover_color" class="control-label"><?php echo __('Button hover text') ?></label><br/>
                        <input type="text" class="input-text color-input" id="button_hover_color" name="setting[button_hover_color]"<?php if ($exist && $settings['button_hover_color']): ?> value="<?php echo $settings['button_hover_color'] ?>"<?php endif ?> onchange="changeBannerStyle()"//>
                    </div>
                    
                    <div class="col-des-4">
                        <label for="button_hover_border" class="control-label"><?php echo __('Button hover border') ?></label><br/>
                        <input type="text" class="input-text color-input" id="button_hover_border" name="setting[button_hover_border]"<?php if ($exist && $settings['button_hover_border']): ?> value="<?php echo $settings['button_hover_border'] ?>"<?php endif ?> onchange="changeBannerStyle()"/>
                    </div>
                </div>
                
                
            </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>

<script type="text/javascript">
    var oldTextAlign = '<?php echo $oldTextAlign ?>';
    var oldEffect = '<?php echo $oldEffect ?>';

    require([
        'jquery',
    ], function(jQuery){
        (function($) {
            $(document).ready(function(){
                $('#image').change( function(event) {        
                    var tmppath = URL.createObjectURL(event.target.files[0]);
                    $("#image-temp").attr('src',URL.createObjectURL(event.target.files[0])).show();
                });
                
                setPreview();
            });
            
            $("#button_text, #text_content").keypress(function( event ){
                setPreview();
            });
        })(jQuery);
    });
    
    function setPreview(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                textContent = $('#text_content').val();
                buttonContent = $('#button_text').val();
                
                textAlign = $('#text_align').val();
                effect = $('#effect').val();
                
                if(textContent!=''){
                    $('#text-container .banner-text').html(textContent);
                }
                
                if(buttonContent!=''){
                    $('#button-temp').show();
                    $('#button-temp span').html(buttonContent);
                }else{
                    $('#button-temp').hide();
                }
                
                if(textAlign != oldTextAlign){
                    $('#text-container').removeClass(oldTextAlign);
                    $('#text-container').addClass(textAlign);
                    oldTextAlign = textAlign;
                }
                
                if(effect != oldEffect){
                    $('#banner-container').removeClass(oldEffect);
                    $('#banner-container').addClass(effect);
                    oldEffect = effect;
                }
            })(jQuery);
        });
        
        changeBannerStyle();
    }
    
    function changeBannerStyle(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                textColor = $('#text_color').val();
                buttonBackground = $('#button_background').val();
                buttonText = $('#button_color').val();
                buttonBorder = $('#button_border').val();
                buttonHoverBackground = $('#button_hover_background').val();
                buttonHoverColor = $('#button_hover_color').val();
                buttonHoverBorder = $('#button_hover_border').val();
                
                customStyle = '*{}';

                if(textColor!=''){
                    customStyle += '#banner-temp .mgs-promobanner .banner-text{color:'+textColor+'}';
                }
                
                if(buttonBackground!=''){
                    customStyle += '#banner-temp .mgs-promobanner .banner-button button.btn-promo-banner{background-color:'+buttonBackground+'}';
                }
                
                if(buttonText!=''){
                    customStyle += '#banner-temp .mgs-promobanner .banner-button button.btn-promo-banner span{color:'+buttonText+'}';
                }
                
                if(buttonBorder!=''){
                    customStyle += '#banner-temp .mgs-promobanner .banner-button button.btn-promo-banner{border-color:'+buttonBorder+'}';
                }
                
                if(buttonHoverBackground!=''){
                    customStyle += '#banner-temp .mgs-promobanner .banner-button button.btn-promo-banner:hover{background-color:'+buttonHoverBackground+'}';
                }
                
                if(buttonHoverColor!=''){
                    customStyle += '#banner-temp .mgs-promobanner .banner-button button.btn-promo-banner:hover span{color:'+buttonHoverColor+'}';
                }
                
                if(buttonHoverBorder!=''){
                    customStyle += '#banner-temp .mgs-promobanner .banner-button button.btn-promo-banner:hover{border-color:'+buttonHoverBorder+'}';
                }
                
                $('#banner-custom-css').html(customStyle);
                
                
            })(jQuery);
        });
    }
</script>