<?php $helper = $this->getHelper() ?>
<?php $params = $this->getParams() ?>
<?php $exist = false ?>
<?php $child = null ?>
<?php $settings = null ?>
<?php $categories = $helper->getModel('Mageplaza\Shopbybrand\Model\Category')->getCollection()->addFieldToFilter('status', 1) ?>
<?php $options = $helper->getModel('Mageplaza\Shopbybrand\Model\Brand')->getCollection() ?>

<div class="edit-static-form">
    
    <div class="line">
        <div class="col-des-12 builder-title">
            <h2><?php echo __('Mageplaza - Shop by Brand') ?></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="mageplaza_brand">
        <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)
                    ->setBuilderChild($child)
                    ->setDisableContent(1)
                    ->setBuilderHelper($helper)
                    ->setTemplate('MGS_Fbuilder::panel/create/element/widgets/general_tab.phtml')->toHtml() ;
            ?>
            
            <div class="data item title" aria-labeledby="tab-label-additional-title" data-role="collapsible" id="tab-label-additional">
                <a class="data switch" tabindex="-1" data-toggle="switch" href="#additional" id="tab-label-additional-title">
                    <?php echo __('Brand Config') ?>
                </a>
            </div>
            
            <div class="data item content" id="additional" data-role="content" style="display:none">
            
            
                
                <div class="form-group line">
                    <label for="show_type" class="col-des-4 control-label"><?php echo __('Display type') ?></label>
                    <div class="col-des-8">
                        <select id="show_type" class="input-text" name="setting[show_type]" onchange="changeBrandType()">
                            <option value="Featured"<?php if ($exist && ($settings['show_type']=='Featured')): ?> selected="selected"<?php endif ?>><?php echo _('Featured Brand') ?></option>
                            <option value="OptionId"<?php if ($exist && ($settings['show_type']=='OptionId')): ?> selected="selected"<?php endif ?><?php if (count($options)==0): ?> disabled="disabled"<?php endif ?>><?php echo _('Selected Brands') ?></option>
                            <option value="CategoryId"<?php if ($exist && ($settings['show_type']=='CategoryId')): ?> selected="selected"<?php endif ?><?php if (count($categories)==0): ?> disabled="disabled"<?php endif ?>><?php echo _('Brands by Category') ?></option>
                        </select>
                    </div>
                </div>
            
                <div class="form-group line" id="brand-category" style="display:none">
                <?php if (count($categories)>0): ?>        
                    <?php
                        $arrCats = [];
                    if ($exist && isset($settings['category_id'])) {
                        $arrCats = $settings['category_id'];
                    }
                    ?>
                    
                        <label for="category_id" class="col-des-4 control-label"><?php echo __('Category') ?></label>
                        <div class="col-des-8">
                            <select multiple="multiple" name="setting[category_id][]" class="multiple input-text" size="5" id="category_id">
                                <?php foreach ($categories as $brandCategory): ?>
                                    <?php $value = $brandCategory->getId(); ?>
                                    <option value="<?php echo $value ?>"<?php if ($arrCats != null && in_array($value, $arrCats)): ?> selected="selected"<?php endif ?>><?php echo $brandCategory->getName() ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>
                    
                <?php else: ?>
                    <div role="alert" class="col-des-12 alert alert-danger"><?php echo __('Please go to admin panel > Catalog > [Shop by Brand] Categories to add category first.') ?></div>
                <?php endif ?>
                </div>
                
                <div class="form-group line" id="brand-option" style="display:none">
                <?php if (count($options)>0): ?>        
                    <?php
                        $arrOp = [];
                    if ($exist && isset($settings['option_id'])) {
                        $arrOp = $settings['option_id'];
                    }
                    ?>
                    
                        <label for="option_id" class="col-des-4 control-label"><?php echo __('Brand') ?></label>
                        <div class="col-des-8">
                            <div class="masonry-list" id="list-images">
                                <?php $i=0; foreach ($options as $_option): $i++ ?>
                                    <?php $optionValue = $_option->getOptionId() ?>
                                    <div class="image-item">
                                        <div class="img-div">
                                            <img class="img-responsive" src="<?php echo $helper->getMediaUrl().$_option->getImage() ?>"/>
                                        </div>
                                        
                                        <div class="image-action">
                                            <div class="admin__actions-switch" data-role="switcher">
                                                <input type="checkbox" name="setting[option_id][]" id="option_id<?php echo $i ?>" class="admin__actions-switch-checkbox imagetoadd" value="<?php echo $optionValue ?>" <?php if ($arrOp != null && in_array($optionValue, $arrOp)): ?> checked="checked"<?php endif ?>/>
                                                <label for="option_id<?php echo $i ?>" class="admin__actions-switch-label">
                                                    <span data-text-off="<?php echo __('Hide') ?>" data-text-on="<?php echo __('Show') ?>" class="admin__actions-switch-text"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach ?>
                            </div>
                        </div>
                    
                <?php else: ?>
                    <div role="alert" class="col-des-12 alert alert-danger"><?php echo __('Please go to admin panel > Catalog > [Shop by Brand] Categories to add category first.') ?></div>
                <?php endif ?>
                </div>
                
                <div class="form-group line grid-perrow">
                    <label for="perrow" class="col-des-4 control-label"><?php echo __('Items per row (default)') ?></label>
                    <div class="col-des-8">
                        <select id="perrow" class="input-text" name="setting[perrow]">
                            <option value="1"<?php if ($exist && ($settings['perrow']==1)): ?> selected="selected"<?php endif ?>>1</option>
                            <option value="2"<?php if ($exist && ($settings['perrow']==2)): ?> selected="selected"<?php endif ?>>2</option>
                            <option value="3"<?php if ($exist && ($settings['perrow']==3)): ?> selected="selected"<?php endif ?>>3</option>
                            <option value="4"<?php if ($exist && ($settings['perrow']==4)): ?> selected="selected"<?php endif ?>>4</option>
                            <option value="5"<?php if ($exist && ($settings['perrow']==5)): ?> selected="selected"<?php endif ?>>5</option>
                            <option value="6"<?php if ($exist && ($settings['perrow']==6)): ?> selected="selected"<?php endif ?>>6</option>
                            <option value="7"<?php if ($exist && ($settings['perrow']==7)): ?> selected="selected"<?php endif ?>>7</option>
                            <option value="8"<?php if ($exist && ($settings['perrow']==8)): ?> selected="selected"<?php endif ?>>8</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group line grid-perrow">
                    <label for="perrow_tablet" class="col-des-4 control-label"><?php echo __('Items per row (tablet)') ?></label>
                    <div class="col-des-8">
                        <select id="perrow_tablet" class="input-text" name="setting[perrow_tablet]">
                            <option value="1"<?php if ($exist && ($settings['perrow_tablet']==1)): ?> selected="selected"<?php endif ?>>1</option>
                            <option value="2"<?php if ($exist && ($settings['perrow_tablet']==2)): ?> selected="selected"<?php endif ?>>2</option>
                            <option value="3"<?php if ($exist && ($settings['perrow_tablet']==3)): ?> selected="selected"<?php endif ?>>3</option>
                            <option value="4"<?php if ($exist && ($settings['perrow_tablet']==4)): ?> selected="selected"<?php endif ?>>4</option>
                            <option value="5"<?php if ($exist && ($settings['perrow_tablet']==5)): ?> selected="selected"<?php endif ?>>5</option>
                            <option value="6"<?php if ($exist && ($settings['perrow_tablet']==6)): ?> selected="selected"<?php endif ?>>6</option>
                            <option value="7"<?php if ($exist && ($settings['perrow_tablet']==7)): ?> selected="selected"<?php endif ?>>7</option>
                            <option value="8"<?php if ($exist && ($settings['perrow_tablet']==8)): ?> selected="selected"<?php endif ?>>8</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group line grid-perrow">
                    <label for="perrow_mobile" class="col-des-4 control-label"><?php echo __('Items per row (mobile)') ?></label>
                    <div class="col-des-8">
                        <select id="perrow_mobile" class="input-text" name="setting[perrow_mobile]">
                            <option value="1"<?php if ($exist && ($settings['perrow_mobile']==1)): ?> selected="selected"<?php endif ?>>1</option>
                            <option value="2"<?php if ($exist && ($settings['perrow_mobile']==2)): ?> selected="selected"<?php endif ?>>2</option>
                            <option value="3"<?php if ($exist && ($settings['perrow_mobile']==3)): ?> selected="selected"<?php endif ?>>3</option>
                            <option value="4"<?php if ($exist && ($settings['perrow_mobile']==4)): ?> selected="selected"<?php endif ?>>4</option>
                            <option value="5"<?php if ($exist && ($settings['perrow_mobile']==5)): ?> selected="selected"<?php endif ?>>5</option>
                            <option value="6"<?php if ($exist && ($settings['perrow_mobile']==6)): ?> selected="selected"<?php endif ?>>6</option>
                            <option value="7"<?php if ($exist && ($settings['perrow_mobile']==7)): ?> selected="selected"<?php endif ?>>7</option>
                            <option value="8"<?php if ($exist && ($settings['perrow_mobile']==8)): ?> selected="selected"<?php endif ?>>8</option>
                        </select>
                    </div>
                </div>
                
                
                <div class="form-group line" id="use-slider">
                    <label for="use_slider" class="col-des-4 control-label"><?php echo __('Use slider') ?></label>
                    <div class="col-des-8">
                        <div class="admin__actions-switch" data-role="switcher">
                            <input type="checkbox"<?php if ($exist && $settings['use_slider']): ?> checked="checked"<?php endif ?> value="1" name="setting[use_slider]" id="use_slider" class="admin__actions-switch-checkbox" onclick="useSlider()">
                            <label for="use_slider" 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>
                
                <?php
                    echo $this->getLayout()->createBlock('Magento\Framework\View\Element\Template')
                        ->setExist($exist)
                        ->setSettings($settings)
                        ->setDisableSliderMargin(1)
                        ->setTemplate('MGS_Fbuilder::panel/create/element/widgets/slider_setting.phtml')->toHtml() ;
                ?>
            </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">
    require([
        'jquery',
    ], function(jQuery){
        (function($) {
            $(document).ready(function(){
                changeBrandType();
            });
        })(jQuery);
    });
    
    function changeBrandType(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                var showType = $('#show_type').val();
                if(showType == 'Featured'){
                    $('#brand-category').hide();
                    $('#brand-option').hide();
                }else{
                    if(showType == 'OptionId'){
                        $('#brand-category').hide();
                        $('#brand-option').show();
                    }else{
                        $('#brand-category').show();
                        $('#brand-option').hide();
                    }
                }
            })(jQuery);
        });
        
    }
</script>