<?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 __('Google Map 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="map">
        <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);
                $address = $settings['address'];
                $addressTitle = $settings['address_title'];
            ?>
            <input type="hidden" name="child_id" value="<?php echo $params['id'] ?>">
        <?php else: ?>
            <?php $address = $helper->getStoreConfig('general/store_information/street_line1').' '.$helper->getStoreConfig('general/store_information/region_id').' '.$helper->getStoreConfig('general/store_information/postcode').' '.$helper->getStoreConfig('general/store_information/city').' '.$helper->getStoreConfig('general/store_information/country_id'); ?>
            <?php $address = trim($address); ?>
            <?php $addressTitle = __('Our Office') ?>
        <?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-video-title" data-role="collapsible" id="tab-label-video">
                <a class="data switch" tabindex="-1" data-toggle="switch" href="#video" id="tab-label-video-title">
                    <?php echo __('Map Config') ?>
                </a>
            </div>

            <div class="data item content" id="video" data-role="content" style="display:none">

                <?php if ($helper->getStoreConfig('locator/general/store_api_key')==''): ?>
                    <div class="form-group line">
                        <div role="alert" class="alert alert-danger col-des-12"><?php echo __('Please go to admin panel > MGS > Locator [Configuration] and add <b>Google API Key</b> first.') ?></div>
                    </div>
                <?php else: ?>


                    <div class="form-group line">
                        <label for="location_address" class="col-des-3 control-label"><?php echo __('By address') ?></label>
                        <div class="col-des-2">
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['location_address']): ?> checked="checked"<?php endif ?> value="1" name="setting[location_address]" id="location_address" class="admin__actions-switch-checkbox" onclick="byAddress()">
                                <label for="location_address" 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-des-7 address-field">
                            <div class="fbuilder-search-product">
                                <input type="text" data-validate="{required:true}" data-mage-init='{"fbuilderSearch":{"formSelector":"#section-form", "url":"<?php echo $this->getUrl('fbuilder/index/address') ?>", "destinationSelector":"#address_autocomplete", "destinationText":"#address_temp", "destinationId":"#address"}}' autocomplete="off" aria-autocomplete="both" aria-haspopup="false" role="combobox" class="input-text" id="address_temp" name="setting[address_temp]" value="<?php echo $address ?>"/>
                                <input type="hidden" name="setting[address]" value="<?php echo $address ?>" id="address">
                                <div id="address_autocomplete" class="search-autocomplete"></div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group line">
                        <label for="location" class="col-des-3 control-label"><?php echo __('By Location (Priority)') ?></label>
                        <div class="col-des-2">
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['location']): ?> checked="checked"<?php endif ?> value="1" name="setting[location]" id="location" class="admin__actions-switch-checkbox" onclick="byLocation()">
                                <label for="location" 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-des-7 location-field">
                            <div class="line">
                                <div class="col-des-6">
                                    <input type="text" class="input-text" id="lat" name="setting[lat]"<?php if ($exist && $settings['lat']): ?> value="<?php echo $settings['lat'] ?>"<?php endif ?> placeholder="<?php echo __('Latitude') ?>"/>
                                </div>

                                <div class="col-des-6">
                                    <input type="text" class="input-text" id="long" name="setting[long]"<?php if ($exist && $settings['long']): ?> value="<?php echo $settings['long'] ?>"<?php endif ?> placeholder="<?php echo __('Longitude') ?>"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group line">
                        <label for="location" class="col-des-3 control-label"><?php echo __('Pin image') ?></label>
                        <?php if (isset($settings['map_icon']) && ($settings['map_icon']!='')): ?>
                            <div class="col-des-2">
                                <div class="image-temp" style="line-height:32px">
                                    <img src="<?php echo $helper->getMediaUrl() ?>mgs/fbuilder/map/<?php echo $settings['map_icon'] ?>" class="background-preview" alt="" style="width:20px; margin-right:10px; position:relative; top:3px"/>
                                    <label for="remove_background">
                                        <input type="checkbox" name="remove_pin_image" value="1" id="remove_pin_image"/> <?php echo __('Remove') ?>
                                    </label>
                                </div>
                            </div>
                        <?php endif ?>
                        <div class="col-des-7">
                            <input type="file" id="pin_icon" name="pin_icon">
                            <input type="hidden" name="setting[map_icon]" <?php if ($exist && isset($settings['map_icon'])): ?> value="<?php echo $settings['map_icon'] ?>"<?php endif ?>>
                        </div>
                    </div>

                    <hr/>


                    <div class="form-group line">
                        <div class="col-des-2">
                            <label for="address_box" class="control-label"><?php echo __('Address Box') ?></label><br/>
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['address_box']): ?> checked="checked"<?php endif ?> value="1" name="setting[address_box]" id="address_box" class="admin__actions-switch-checkbox" onclick="addressBox()">
                                <label for="address_box" 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-des-10 fieldss box-field">
                            <div class="line">
                                <div class="col">
                                    <label for="box_background" class="control-label"><?php echo __('Background') ?></label><br/>
                                    <input type="text" class="input-text color-input" id="box_background" name="setting[box_background]"<?php if ($exist && $settings['box_background']): ?> value="<?php echo $settings['box_background'] ?>"<?php endif ?> onchange="changeBoxStyle()"/>
                                </div>
                                <div class="col">
                                    <label for="box_color" class="control-label"><?php echo __('Color') ?></label><br/>
                                    <input type="text" class="input-text color-input" id="box_color" name="setting[box_color]"<?php if ($exist && $settings['box_color']): ?> value="<?php echo $settings['box_color'] ?>"<?php endif ?> onchange="changeBoxStyle()"/>
                                </div>

                                <div class="col">
                                    <label for="box_width" class="control-label"><?php echo __('Width') ?></label><br/>
                                    <input type="text" class="input-text" id="box_width" name="setting[box_width]"<?php if ($exist && $settings['box_width']): ?> value="<?php echo $settings['box_width'] ?>"<?php endif ?> onchange="changeBoxStyle()"/>
                                </div>

                                <div class="col">
                                    <label for="font_size" class="control-label"><?php echo __('Font size') ?></label><br/>
                                    <input type="text" class="input-text validate-number" id="font_size" name="setting[font_size]"<?php if ($exist && $settings['font_size']): ?> value="<?php echo $settings['font_size'] ?>"<?php endif ?> onchange="changeBoxStyle()" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group line box-field">
                        <label for="address_title" class="col-des-1 control-label"><h4 class="no-margin" style="line-height:32px"><?php echo __('Title') ?></h4></label>
                        <div class="col-des-5">
                            <input type="text" class="input-text" id="address_title" name="setting[address_title]" value="<?php echo $addressTitle ?>" onchange="changeBoxTitle()"/>
                        </div>

                        <label for="title_font_size" class="col-des-2 control-label"><?php echo __('Font size') ?></label>
                        <div class="col-des-4">
                            <input type="text" class="input-text validate-number" id="title_font_size" name="setting[title_font_size]"<?php if ($exist && $settings['title_font_size']): ?> value="<?php echo $settings['title_font_size'] ?>"<?php endif ?> placeholder="<?php echo __('px') ?>" onchange="changeBoxStyle()"/>
                        </div>
                    </div>

                    <div class="form-group line">
                        <div class="col-des-6">

                            <div class="form-group line box-field">
                                <label for="line_one" class="col-des-2 control-label"><?php echo __('Line 1') ?></label>
                                <div class="col-des-10">
                                    <input type="text" class="input-text" id="line_one" name="setting[line_one]"<?php if ($exist && $settings['line_one']): ?> value="<?php echo $settings['line_one'] ?>"<?php endif ?> onchange="addMapInfo()"/>
                                </div>
                            </div>

                            <div class="form-group line box-field">
                                <label for="line_two" class="col-des-2 control-label"><?php echo __('Line 2') ?></label>
                                <div class="col-des-10">
                                    <input type="text" class="input-text" id="line_two" name="setting[line_two]"<?php if ($exist && $settings['line_two']): ?> value="<?php echo $settings['line_two'] ?>"<?php endif ?> onchange="addMapInfo()"/>
                                </div>
                            </div>

                            <div class="form-group line box-field">
                                <label for="line_three" class="col-des-2 control-label"><?php echo __('Line 3') ?></label>
                                <div class="col-des-10">
                                    <input type="text" class="input-text" id="line_three" name="setting[line_three]"<?php if ($exist && $settings['line_three']): ?> value="<?php echo $settings['line_three'] ?>"<?php endif ?> onchange="addMapInfo()" />
                                </div>
                            </div>

                            <div class="form-group line box-field">
                                <label for="line_four" class="col-des-2 control-label"><?php echo __('Line 4') ?></label>
                                <div class="col-des-10">
                                    <input type="text" class="input-text" id="line_four" name="setting[line_four]"<?php if ($exist && $settings['line_four']): ?> value="<?php echo $settings['line_four'] ?>"<?php endif ?> onchange="addMapInfo()" />
                                </div>
                            </div>

                            <div class="form-group line box-field">
                                <label for="line_five" class="col-des-2 control-label"><?php echo __('Line 5') ?></label>
                                <div class="col-des-10">
                                    <input type="text" class="input-text" id="line_five" name="setting[line_five]"<?php if ($exist && $settings['line_five']): ?> value="<?php echo $settings['line_five'] ?>"<?php endif ?> onchange="addMapInfo()" />
                                </div>
                            </div>
                        </div>
                        <div class="col-des-6 box-field">
                            <div id="map-information-temp" class="mgs-map">
                                <div class="map-info">
                                    <h3 class="no-margin-top" id="map-title-temp"><?php echo $addressTitle ?></h3>
                                    <div class="map-detail-info">
                                        <ul id="list-info"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <style type="text/css" id="map-custom-css"></style>
                    </div>

                    <hr/>

                    <div class="form-group line">
                        <div class="col-des-12"><h4 class="no-margin"><?php echo __('Map Setting') ?></h4></div>
                    </div>

                    <div class="form-group line">
                        <div class="col">
                            <label for="map_height" class="control-label"><?php echo __('Height') ?></label><br/>
                            <input type="text" class="input-text validate-number" id="map_height" name="setting[map_height]"<?php if ($exist && $settings['map_height']): ?> value="<?php echo $settings['map_height'] ?>"<?php endif ?> placeholder="px"/>
                        </div>

                        <div class="col">
                            <label for="map_zoom" class="control-label"><?php echo __('Zoom level') ?></label><br/>
                            <input type="text" class="input-text validate-number" id="map_zoom" name="setting[map_zoom]"<?php if ($exist && $settings['map_zoom']): ?> value="<?php echo $settings['map_zoom'] ?>"<?php endif ?>/>
                        </div>

                        <div class="col">
                            <label for="wheel" class="control-label"><?php echo __('Scroll wheel') ?></label><br/>
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['wheel']): ?> checked="checked"<?php endif ?> value="1" name="setting[wheel]" id="wheel" class="admin__actions-switch-checkbox">
                                <label for="wheel" 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">
                            <label for="navigation" class="control-label"><?php echo __('Navigation') ?></label><br/>
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['navigation']): ?> checked="checked"<?php endif ?> value="1" name="setting[navigation]" id="navigation" class="admin__actions-switch-checkbox">
                                <label for="navigation" 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>

                    <div class="form-group line">
                        <div class="col">
                            <label for="type_control" class="control-label"><?php echo __('Type control') ?></label><br/>
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['type_control']): ?> checked="checked"<?php endif ?> value="1" name="setting[type_control]" id="type_control" class="admin__actions-switch-checkbox">
                                <label for="type_control" 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">
                            <label for="scale" class="control-label"><?php echo __('Scale control') ?></label><br/>
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['scale']): ?> checked="checked"<?php endif ?> value="1" name="setting[scale]" id="scale" class="admin__actions-switch-checkbox">
                                <label for="scale" 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">
                            <label for="draggable" class="control-label"><?php echo __('Draggable') ?></label><br/>
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['draggable']): ?> checked="checked"<?php endif ?> value="1" name="setting[draggable]" id="draggable" class="admin__actions-switch-checkbox">
                                <label for="draggable" 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">
                            <label for="grayscale" class="control-label"><?php echo __('Grayscale color') ?></label><br/>
                            <div class="admin__actions-switch" data-role="switcher">
                                <input type="checkbox"<?php if ($exist && $settings['grayscale']): ?> checked="checked"<?php endif ?> value="1" name="setting[grayscale]" id="grayscale" class="admin__actions-switch-checkbox">
                                <label for="grayscale" 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 endif ?>
            </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 currentAnimate = '';
    <?php if ($exist): ?>
        currentAnimate = '<?php echo $settings['animation'] ?>';
    <?php endif ?>

    function changeAnimationClass(animate){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                if(currentAnimate!=''){
                    $('#animation-test').removeClass(currentAnimate);
                }
                $('#animation-test').addClass(animate);
                currentAnimate = animate;
            })(jQuery);
        });
    }

    require([
        'jquery',
    ], function(jQuery){
        (function($) {
            $(document).ready(function(){
                byAddress();
                byLocation();
                addressBox();
                addMapInfo();
                changeBoxTitle();
                changeBoxStyle();
            });

            $("#address_title").keypress(function( event ){
                changeBoxTitle();
            });

            $("#line_one, #line_two, #line_three, #line_four, #line_five").keypress(function( event ){
                addMapInfo();
            });
        })(jQuery);
    });

    function byAddress(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                if($('#location_address').length){
                    if($('#location_address').prop("checked") == true){
                        $('.address-field').show();
                    }else{
                        $('.address-field').hide();
                    }
                }
            })(jQuery);
        });
    }

    function byLocation(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                if($('#location').length){
                    if($('#location').prop("checked") == true){
                        $('.location-field').show();
                    }else{
                        $('.location-field').hide();
                    }
                }
            })(jQuery);
        });
    }

    function addressBox(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                if($('#address_box').length){
                    if($('#address_box').prop("checked") == true){
                        $('.box-field').show();
                    }else{
                        $('.box-field').hide();
                    }
                }
            })(jQuery);
        });
    }

    function changeBoxTitle(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                title = $('#address_title').val();
                $('#map-title-temp').html(title);
            })(jQuery);
        });
    }

    function addMapInfo(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {
                infoHtml = '';
                line1 = $('#line_one').val();
                line2 = $('#line_two').val();
                line3 = $('#line_three').val();
                line4 = $('#line_four').val();
                line5 = $('#line_five').val();
                if(line1!=''){
                    infoHtml += '<li>'+line1+'</li>';
                }
                if(line2!=''){
                    infoHtml += '<li>'+line2+'</li>';
                }
                if(line3!=''){
                    infoHtml += '<li>'+line3+'</li>';
                }
                if(line4!=''){
                    infoHtml += '<li>'+line4+'</li>';
                }
                if(line5!=''){
                    infoHtml += '<li>'+line5+'</li>';
                }

                $('#list-info').html(infoHtml);
            })(jQuery);
        });
    }

    function changeBoxStyle(){
        require([
            'jquery',
        ], function(jQuery){
            (function($) {

                background = $('#box_background').val();
                color = $('#box_color').val();
                width = $('#box_width').val();
                size = $('#font_size').val();
                titleSize = $('#title_font_size').val();


                customStyle = '*{}';

                if(background!=''){
                    customStyle += '#map-information-temp.mgs-map .map-info{background-color:'+background+'}';
                }

                if(color!=''){
                    customStyle += '#map-information-temp.mgs-map .map-info h3, #map-information-temp.mgs-map .map-info .map-detail-info ul li{color:'+color+'}';
                }

                if(width!=''){
                    customStyle += '#map-information-temp.mgs-map .map-info{width:'+width+'px}';
                }

                if(size!=''){
                    customStyle += '#map-information-temp.mgs-map .map-info .map-detail-info ul li{font-size:'+size+'px}';
                }

                if(titleSize!=''){
                    customStyle += '#map-information-temp.mgs-map .map-info h3{font-size:'+titleSize+'px}';
                }

                $('#map-custom-css').html(customStyle);
            })(jQuery);
        });
    }
</script>
