{include file="./index_top.tpl"}
<script type="text/javascript">
    cpkNewCol = "{$lang.cp_new_color}";
    cpkCurCol = "{$lang.cp_cur_color}";
</script>
<script type="text/javascript" src="mybic.js?{$revision}"></script>
<div align=center>
    <br>
    {$lang.Logo_and_colors}<span class='help_bt' h_id='Logo_and_colors'></span>
    <br>
    <br>
    <form action="edit_color.php" method="post" enctype="multipart/form-data" id="edit_colors_form">

        <div class="modal fade" role="dialog" id="gridSystemModal" tabindex="-1" aria-labelledby="gridModalLabel"
             style="display: none;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="gridModalLabel">{$lang.Save_scheme}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-5 col-md-offset-3 col-sm-5 col-sm-offset-3 col-xs-5 col-xs-offset-3">
                                {$lang.Scheme_name}
                                <input type="text" class="form-control" name="scheme_name" id="modal_body_input" onkeyup='checkParams()'>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{$lang.Close}</button>
                        <input type="submit" id="new_scheme_save_btn" name="save_user_scheme" class="btn btn-primary" value="Сохранить схему" disabled>
                    </div>
                </div>
            </div>
        </div>

        <b>{$lang.Title}:</b> &nbsp;<input class="form-control form-control-160" type=text name=title value="{$config.title|htmlspecialchars}" size=30 onblur="checkSpaces(this)"> &nbsp;&nbsp;
        <b>{$lang.Logo}:</b> &nbsp;
        {if !$config.logo}
            <input type=file name=logo class="jfilestyle" data-input="false">
        {else}
            <a class='href_post' href='edit_color.php?del_logo'>{$lang.delete}</a>
        {/if}
        &nbsp;&nbsp;
        <b>{$lang.Logo_size}:</b> &nbsp;
        <input class="form-control form-control-25" type=text name=logo_x value="{$config.logo_x}" size=3>
        x
        <input class="form-control form-control-25" type=text name=logo_y value="{$config.logo_y}" size=3>
        &nbsp;&nbsp;
        <b>{$lang.Logo_indent}:</b> &nbsp;
        <input class="form-control form-control-25" type=text name=logo_top_margin value="{$config.logo_top_margin}">
        <input class="form-control form-control-25" type=text name=logo_bottom_margin value="{$config.logo_bottom_margin}">
        <table align="center">
            <tr>
                <td valign="top" width="520px" height="400px">
                    <div id="all_schemes">
                        <h2 style="margin-top: 10px;margin-bottom: 10px;margin-left: 5px;">{$lang.Select_scheme}</h2>
                        {foreach from=$all_schemes item=one_scheme}
                        <a style="background:transparent;" href="edit_color.php?scheme={$one_scheme.id}"
                           onclick="changeScheme('{$one_scheme.color1}',
                               '{$one_scheme.color2}',
                               '{$one_scheme.color3}',
                               '{$one_scheme.color4}',
                               '{$one_scheme.color7}',
                               '{$one_scheme.bgImgSelect}',
                               '{$one_scheme.secondBgImgSelect}',
                               '{$one_scheme.size_opacity}',
                               '{$one_scheme.radiusMenu}');
                                return false">
                            <img style="margin:5px; border:4px silver solid; {if $one_scheme.active}border:4px #333 solid;{/if}" vspase="4" hspase="4" src="images/schemes/{$one_scheme.id}.png" alt=""></a>
                        {if $one_scheme.id==13}
                        <div id="yet_a_schemes" style="text-align: center;">
                            <a href="" onclick="$('#colorhunt').show(); $('#yet_schemes').show(); $('#yet_a_schemes').hide(); return false;">{$lang.More}</a>
                        </div>
                        <div id="yet_schemes" style="display: none;">
                        {/if}
                        {/foreach}
                        </div>
                    </div>
                </td>
                <td valign="top" width="550px">
                    <div id="test_color">
                        <script>
                            $(function () {
                                var docum = $(document);
                                var all_schemes = $("#all_schemes");
                                var colorhunt = $("#colorhunt_td");
                                var all_schemes_position_y = all_schemes.position().top;
                                var colorhunt_position_y = colorhunt.position().top;
                                var top_position_y = 0;

                                $('#tableBgCheck').click(function () {
                                    if ($('#tableBgCheck').prop("checked")) {
                                        $('#tableBg').val('1');
                                    } else {
                                        $('#tableBg').val('0');
                                    }
                                });

                                $('#radiusMenuCheck').click(function () {
                                    if ($('#radiusMenuCheck').prop("checked")) {
                                        $('#radiusMenu').val('1');
                                    } else {
                                        $('#radiusMenu').val('0');
                                    }
                                });
                            })
                        </script>
                        <h2 style="margin-top: 10px;margin-bottom: 10px;">{$lang.Create_scheme}</h2>
                        {if ($gradient_stat == 1)}
                            <div class='test_color1 test_color4'
                                style="
                                background: {if $bgImg}url('images/backgroundImages/{$bgImg}'),{/if} {$color1|htmlspecialchars};
                                background: {if $bgImg}url('images/backgroundImages/{$bgImg}'),{/if} linear-gradient(to right, {$color1|htmlspecialchars} 0%, {$color4|htmlspecialchars} 100%);
                                position:relative;
                                width:550px;
                                height:100px;
                                border:4px silver solid;
                                overflow:hidden;
                            ">
                                <div class="test_color5"
                                     style="{if $secondBgImg}background: url('images/backgroundImages/{$secondBgImg}');{/if} width: 100%; height: 100px;">
                        {else}
                            <div class='test_color1 test_color4'
                                 style="
                                 background: {if $bgImg}url('images/backgroundImages/{$abgImg}'),{/if} {$color1|htmlspecialchars};
                                 position:relative;
                                 width:550px;
                                 height:100px;
                                 border:4px silver solid;
                                 overflow:hidden;
                             ">
                                <div class="test_color5"
                                     style="{if $secondBgImg}background: url('images/backgroundImages/{$secondBgImg}');{/if} width: 100%; height: 100px;">
                        {/if}
                                <div style="color:white; position:absolute; top:20px; left:30px; font:20px Arial; font-weight:bold;"
                                     id="company_name">PRINT-EXPRESS
                                </div>
                                <div class="sel_color_complany_name" style="position: absolute; bottom: 0; padding-left: 30px;">
                                {if ($radiusMenu == 1)}
                                    <div class='test_color8 test_color_cat_example'
                                         style="background:rgba({if $config.enable_new_design}{$color8rgb}{else}{$color3rgb}{/if},1); color:black; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left; border-radius: 7px 7px 0 0;">{$lang.Begin_work}</div>
                                    <div class='test_color2 test_color_cat_example' id="test_color2"
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left; border-radius: 7px 7px 0 0;">{$lang.Companies}</div>
                                    <div class='test_color2 test_color_cat_example'
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left; border-radius: 7px 7px 0 0;">{$lang.Documents}</div>
                                    <div class='test_color2 test_color_cat_example'
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left; border-radius: 7px 7px 0 0;">{$lang.Staff}</div>
                                    <div class='test_color2 test_color_cat_example'
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left; border-radius: 7px 7px 0 0;">{$lang.Community}</div>
                                    <div style="clear: both"></div>
                                {else}
                                    <div class='test_color8 test_color_cat_example'
                                         style="background:rgba({if $config.enable_new_design}{$color8rgb}{else}{$color3}{/if},1); color:black; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left;">{$lang.Begin_work}</div>
                                    <div class='test_color2 test_color_cat_example' id="test_color2"
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left;">{$lang.Companies}</div>
                                    <div class='test_color2 test_color_cat_example'
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left;">{$lang.Documents}</div>
                                    <div class='test_color2 test_color_cat_example'
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left;">{$lang.Staff}</div>
                                    <div class='test_color2 test_color_cat_example'
                                         style="background:rgba({$color2rgb}, {if $config.enable_new_design}0{else}{$size_opacity}{/if}); color:white; padding:9px; margin: 0px 1px; font:14px Arial; font-weight:bold; float: left;">{$lang.Community}</div>
                                    <div style="clear: both"></div>
                                {/if}
                                </div>
                            </div>
                        </div>
                        <div style="mrgin:20px 0 0 0; margin:0; padding:0;">

                            <table align="center" width="100%">
                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px;"></td>
                                    <td width="52px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding: 7px 0;">
                                        <input type="text" class="colorSelector" id="color1" value="{$color1|htmlspecialchars}" onchange="syncColors('color1', 'main_chart_color');">
                                    </td>
                                    <td valign="middle" align="left"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.Most_dark_color}</td>
                                    <td valign="middle" align="left"
                                        style="border-bottom:1px silver solid; padding:9px 9px 9px 0px; font:11px Arial; color:gray; text-align: right;">
                                        {if ($gradient_stat == 1)}
                                            <input type="checkbox" checked id="gradientCheck">
                                        {else}
                                            <input type="checkbox" id="gradientCheck">
                                        {/if}
                                    </td>
                                    <td width="52px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding: 7px 0;">
                                        <input type="text" class="colorSelector" id="color4" value="{$color4|htmlspecialchars}">
                                    </td>
                                    <td valign="middle" align="left"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.Gradient}</td>
                                </tr>
                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px;"></td>
                                    <td width="52px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding: 7px 0;">
                                        <input type="text" class="colorSelector" id="color2" value="{$color2|htmlspecialchars}">
                                    </td>
                                    <td valign="middle" align="left" colspan="2"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.Middle_color} </td>
                                    <td valign="middle" align="left"
                                        style="border-bottom:1px silver solid; padding:9px 9px 9px 0;">
                                        <input type="range" min="0" max="1" step="0.01" id="sizeOp" oninput="sizeOpacity(this)" value="{$size_opacity}">
                                    </td>
                                    <td valign="middle" align="left"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.opacity}</td>
                                </tr>
                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px;"></td>
                                    <td width="52px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding: 7px 0;">
                                        <input type="text" class="colorSelector" id="color3" value="{$color3|htmlspecialchars}">
                                    </td>
                                    <td valign="middle" align="left" colspan="4"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.Most_light_color}
                                    </td>
                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px; "></td>
                                    <td width="52px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding: 7px 0;">
                                        <input type="text" class="colorSelector" id="color7" value="{$color7|htmlspecialchars}">
                                    </td>
                                    <td valign="middle" align="left" colspan="3" style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">
                                        {$lang.Color_scheme_attribute}</td>
                                    <td width="56px" valign="left" align="left" colspan="3"
                                        style=" font:11px Arial; color:gray; padding:9px;border-bottom:1px silver solid; text-decoration: underline dashed; cursor: pointer;" onclick=changeOnDefaultColor()>
                                        {$lang.Default_color_attribute}
                                    </td>

                                </tr>
                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px; "></td>
                                    <td width="52px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding: 7px 0;">
                                        <input type="text" class="colorSelector" id="color8" value="{$color8|htmlspecialchars}">
                                    </td>
                                    <td valign="middle" align="left" colspan="3" style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">
                                        {$lang.Background_color}</td>
                                    <td width="56px" valign="left" align="left" colspan="3"
                                        style=" font:11px Arial; color:gray; padding:9px;border-bottom:1px silver solid; text-decoration: underline dashed; cursor: pointer;" onclick=changeOnDefaultColorBG()>
                                        {$lang.Default_color_attribute}
                                    </td>
                                </tr>

                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                         style="border-bottom:1px silver solid; padding:9px;"></td>
                                    <td valign="middle" align="left" colspan="4"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">
                                        <select class="form-control form-control-150" name="bgImgSelect" id="bgImgSelect" onchange="changeImg(this.options[this.selectedIndex].value);">
                                            {$files_opt}
                                        </select>
                                    </td>
                                    <td valign="middle" align="left" colspan="4"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.Select_image}</td>
                                </tr>

                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px;"></td>
                                    <td valign="middle" align="left" colspan="4"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">
                                        <select class="form-control form-control-150" name="secondBgImgSelect" id="secondBgImgSelect" onchange="changeSecondImg(this.options[this.selectedIndex].value);">
                                            {$second_files_opt}
                                        </select>
                                    </td>
                                    <td valign="middle" align="left" colspan="4"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.Select_second_background}</td>
                                </tr>
                                <tr>
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px;"></td>
                                    <td valign="middle" align="left" colspan="4"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">
                                        <input type="file" name="user_bg_img" class="jfilestyle" data-input="false">
                                    </td>
                                    <td valign="middle" align="left" colspan="4"
                                        style="border-bottom:1px silver solid; padding:9px; font:11px Arial; color:gray;">{$lang.Upload_background}</td>
                                </tr>
                                <!-- сохранение пользовательской цвет. схемы, решили временно скрыть -->
                                <tr style="display: none; visibility: hidden; opacity: 0;">
                                    <td width="30px" valign="middle" align="center"
                                        style="border-bottom:1px silver solid; padding:9px;"></td>
                                    <td valign="middle" align="left" colspan="2"
                                        style="border-bottom:1px silver solid; padding:9px;">
                                        <span style="color: gray; font-size: 12px; border-bottom: 1px dashed; cursor: pointer;" data-toggle="modal" data-target="#gridSystemModal" id="save_user_scheme_btn">{$lang.Save_scheme}</span>
                                    </td>
                                    <td valign="middle" align="center" colspan="3"
                                        style="border-bottom:1px silver solid; padding:9px;">
                                        <span style="color: gray; font-size: 11px;">{$lang.Saved_schemas}: &nbsp;</span>
                                        <select class="form-control form-control-150" name="user_schame" id="user_schame" onchange="splitValue(this.options[this.selectedIndex].value);" >
                                            <!-- рсскомментируй, когда придет время -->
                                            <!-- {$user_schemes} -->
                                            <!-- а ниже удали -->
                                            <option>{$lang.select_scheme}</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top" width="520px" align="center" id="colorhunt_td">
                    <div id="colorhunt" style="display: none;">{$lang.Be_inspired_by} <a href="http://colorhunt.co"
                                                                                    target="_blank">colorhunt.co</a>
                    </div>
                </td>
                <td valign="top" width="550px">&nbsp;</td>
            </tr>
        </table>
        <input type=hidden name='cust_style' value='1'>
        <input type=hidden id='input_color1' name='color1' value='{$color1|htmlspecialchars}'>
        <input type=hidden id='input_color2' name='color2' value='{$color2|htmlspecialchars}'>
        <input type=hidden id='input_color3' name='color3' value='{$color3|htmlspecialchars}'>
        <input type=hidden id='input_color4' name='color4' value='{$color4|htmlspecialchars}'>
        <input type=hidden id='input_color5' name='add_button_color' value='{$config.add_button_color|htmlspecialchars}'>
        <input type=hidden id='input_color7' name='color7' value='{$color7|htmlspecialchars}'>
        <input type=hidden id='input_color8' name='color8' value='{$color8|htmlspecialchars}'>
        <input type=hidden id='gradient_stat' name='gradient_stat' value='{$gradient_stat}'>
        <input type=hidden id='size_opacity' name='size_opacity' value='{$size_opacity}'>
        <input type=hidden id='bgImg' name='bgImg' value='{$bgImgSelect}'>
        <input type=hidden id='secondBgImg' name='secondBgImg' value='{$secondBgImgSelect}'>
        <input type=hidden id='tableBg' name='tableBg' value='{$tableBg}'>
        <input type=hidden id='radiusMenu' name='radiusMenu' value='{$radiusMenu}'>
        <input type=hidden id='input_main_chart_color' name='main_chart_color' value='{$main_chart_color|htmlspecialchars}'>
        <input type=hidden id='input_additionals_chart_color' name='additionals_chart_color' value='{$additionals_chart_color|htmlspecialchars}'>
        <input type=hidden id='chart_colors' name='chart_colors' value='{$chart_colors}'>

        <br>
        {if ($user.group_id==1 OR ($user.sub_admin==1 AND $user.sub_admin_rights.logo_color==1))}
            <script>
                const syncColors = (first_color_input_id, second_color_input_id) => {
                    $('#' + second_color_input_id).spectrum('set', $('#'+first_color_input_id).val());
                    if($('#input_' + second_color_input_id)){
                        $('#input_' + second_color_input_id).val($('#'+first_color_input_id).val());
                    }
                    $('#' + second_color_input_id).trigger('change');
                }
                const showAdditionalBlock = (e) => {
                    $('#additional_block').toggleClass('additional_block-showed');
                }
                const addAdditionalColor = (color = '') => {
                    let number = 0;
                    if($('[id^=additional_chart_color_]').length > 0){
                        number = parseInt($('[id^=additional_chart_color_]').last().attr('id').replace('additional_chart_color_', '')) + 1;
                    }
                    {literal}
                    $('#additional_colors__container').append(`
                        <tr>
                            <td>
                                <input type="text" class="colorSelector" id="additional_chart_color_`+number+`" `+(color != '' ? 'value="' + color + '"' : '')+`>
                                `+(color == '' ? '<button type="button" onclick="deleteAdditionalColor(\'additional_chart_color_'+number+'\');"><img src="./images/b_drop.png" alt="Удалить" /></button>' : '')+`
                            </td>
                        </tr>
                    `);

                    $(`#additional_chart_color_${number}`).spectrum(colorpickerSetings);
                    {/literal}
                }
                const deleteAdditionalColor = (id) => {
                    $('#' + id).parent().parent().remove();
                }
                const fillAdditionalColors = (is_manual = false) => {
                    $('#additional_colors__container').html('');

                    if($('#input_additionals_chart_color').val() == '' || is_manual){
                        let main_color = $('#input_main_chart_color').val();
                        let current_num_row = -1;

                        for(let num_row in colorpickerSetings.palette){
                            for(let color of colorpickerSetings.palette[num_row]){
                                if(color == main_color){
                                    current_num_row = num_row;
                                    break;
                                }
                            }
                            if(current_num_row != -1){
                                break;
                            }
                        }

                        if(current_num_row == -1){
                            current_num_row = 1;
                        }

                        for(let color of colorpickerSetings.palette[current_num_row]){
                            if(color != main_color){
                                addAdditionalColor(color);
                            }
                        }
                    }
                    else {
                        for(let color of JSON.parse($('#input_additionals_chart_color').val())){
                            addAdditionalColor(color);
                        }
                    }
                }
                $('#edit_colors_form').submit(function (e) {
                    e.preventDefault();
                    let json_object = {
                        main: $('#main_chart_color').val(),
                        additionals: []
                    };
                    for(let item of $('[id^=additional_chart_color_]')){
                        json_object.additionals.push($(item).val());
                    }
                    $('#chart_colors').val(JSON.stringify(json_object));
                    this.submit();
                });
            </script>
            <a href="#" onclick="showAdditionalBlock(); return false;">{$lang.Additional}</a>
            <div id="additional_block">
                <table border=0 cellpadding=3>
                    <tr>
                        <td align=right>{$lang.alt_css_path}<span class="help_bt" h_id="alt_css_path"></span>:</td>
                        <td><input class="form-control form-control-160" type=text name="alt_css" placeholder="/backup/mystyle.css?{$revision}" value="{$config.alt_css|htmlspecialchars}" size="30"></td>
                    </tr>
                    <tr>
                        <td align=right>{$lang.alt_favicon}<span class="help_bt" h_id="alt_favicon"></span>:</td>
                        <td>
                            {if !$config.alt_favicon}
                                <input type=file name=alt_favicon class="jfilestyle" data-input="false">
                            {else}
                                <a class='href_post' href='edit_color.php?del_fav'>{$lang.delete}</a>
                            {/if}
                        </td>
                    </tr>
                    <tr>
                        <td align=right>{$lang.Add_bg_title_table}<span class="help_bt" h_id="alt_table_img"></span>:</td>
                        <td>
                            {if ($tableBg == 1)}
                                <input type="checkbox" checked id="tableBgCheck">
                            {else}
                                <input type="checkbox" id="tableBgCheck">
                            {/if}
                        </td>
                    </tr>
                    <tr>
                        <td align=right>{$lang.Add_radius_menu}<span class="help_bt" h_id="alt_radius"></span>:</td>
                        <td>
                            {if ($radiusMenu == 1)}
                                <input type="checkbox" checked id="radiusMenuCheck" onchange="chengeRadius()">
                            {else}
                                <input type="checkbox" id="radiusMenuCheck" onchange="chengeRadius()">
                            {/if}
                        </td>
                    </tr>
                    <tr>
                        <td align=right>{$lang.Select_font}<span class="help_bt" h_id="alt_font"></span>:</td>
                        <td>
                            <select class="form-control form-control-160" name="font_select">
                                {$font_option}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align=right>{$lang.Main_chart_color}<span class="help_bt" h_id="main_chart_color"></span>:</td>
                        <td>
                            <input type="text" class="colorSelector" id="main_chart_color" value="{$main_chart_color|htmlspecialchars}" onchange="fillAdditionalColors(true)">
                        </td>
                    </tr>
                    <tr>
                        <td align=right style="padding-top: 11px; vertical-align: top;">{$lang.Additional_chart_colors}<span class="help_bt" h_id="additional_chart_colors"></span>:</td>
                        <td>
                            <table id="additional_colors__container" style="margin-left: -3px;">
                                {foreach from=$additional_chart_colors key=i item=additional_chart_color}
                                    <tr>
                                        <td>
                                            <input type="text" class="colorSelector" id="additional_chart_color_{$i}" value="{$additional_chart_color|htmlspecialchars}">
                                            {if (int)$i > 7}<button onclick="deleteAdditionalColor()"><img src="./images/b_drop.png" alt="Удалить" /></button>{/if}
                                        </td>
                                    </tr>
                                {{/foreach}}
                            </table>
                            <a href="#" onclick="addAdditionalColor(); return false;">{$lang.Add}</a>
                        </td>
                    </tr>
                </table>
            </div>
            <script>
                $('.colorSelector').each(function (i, item) {
                    var hex;
                    colorpickerSetings.change = function(color) {
                        hex = color.toHexString();

                        // Собираем rgba цвет
                        let r = color['_r'];
                        let g = color['_g'];
                        let b = color['_b'];
                        let a;

                        if ($('#size_opacity').val()) {
                            a = $('#size_opacity').val(); //Подтягивание текущей прозрачности
                        } else {
                            a = color['_a'];
                        }

                        let rgbaString = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')' ;

                        if (hex) {
                            $(item).css('background-color', hex);
                            if ($('#gradientCheck').prop('checked')) {
                                switch($(item).attr('id')) {
                                    case 'color2':
                                        //$('.test_' + $(item).attr('id')).css('background-color', hex);  //старое назначение цвета
                                        $('.test_' + $(item).attr('id')).css('background-color', rgbaString);
                                        break;
                                    case 'color3':
                                        $('.test_' + $(item).attr('id')).css('background-color', hex);
                                        break;
                                    case 'color1':
                                        if ($('#bgImg').val()) {
                                            $('.test_color1').css('background', 'url(images/backgroundImages/' + $('#bgImg').val() + '), linear-gradient(to right, ' + hex + ' 0%, ' + $('#color4').css('background-color') + ' 100%)');
                                        } else {
                                            $('.test_color1').css('background', 'linear-gradient(to right, ' + hex + ' 0%, ' + $('#color4').css('background-color') + ' 100%)');
                                        }
                                        break;
                                    case 'color4':
                                        if ($('#bgImg').val()) {
                                            $('.test_color4').css('background', 'url(images/backgroundImages/' + $('#bgImg').val() + '), linear-gradient(to right, ' + $('#color1').css('background-color') + ' 0%, ' + hex + ' 100%)');
                                        } else {
                                            $('.test_color4').css('background', 'linear-gradient(to right, ' + $('#color1').css('background-color') + ' 0%, ' + hex + ' 100%)');
                                        }
                                        break;
                                }
                            } else {
                                switch($(item).attr('id')) {
                                    case 'color2':
                                        //$('.test_' + $(item).attr('id')).css('background-color', hex); //старое назначение цвета
                                        $('.test_' + $(item).attr('id')).css('background-color', rgbaString);
                                        break;
                                    case 'color3':
                                        $('.test_' + $(item).attr('id')).css('background-color', hex);
                                        break;
                                    case 'color1':
                                        if ($('#bgImg').val()) {
                                            $('.test_color1').css('background', 'url(images/backgroundImages/' + $('#bgImg').val() + '), linear-gradient(to right, ' + hex + ' 0%, ' + hex + ' 100%)');
                                        } else {
                                            $('.test_color1').css('background', 'linear-gradient(to right, ' + hex + ' 0%, ' + hex + ' 100%)');
                                        }
                                        break;
                                }
                            }
                            $('#input_' + $(item).attr('id')).val(hex);
                        }
                    };
                    $(this).spectrum(colorpickerSetings);
                });



                function splitValue(sel)
                {
                    var strItem = sel.split('|');
                    console.log(sel);
                    changeScheme(strItem[0], strItem[1], strItem[2], strItem[3], strItem[4], strItem[5], strItem[6], strItem[7]);
                }

                function changeScheme(col1, col2, col3, col4, col7, bgImg, secondBgImg, opacity, radius_menu)
                {
                    let color1 = document.getElementById("color1");
                    let color2 = document.getElementById("color2");
                    let color3 = document.getElementById("color3");
                    let color7 = document.getElementById("color7");

                    color1.style.backgroundColor = '#' + col1;
                    color2.style.backgroundColor = '#' + col2;
                    color3.style.backgroundColor = '#' + col3;
                    color7.style.backgroundColor = '#' + col7;

                    $('#color1').spectrum('set', '#' + col1);
                    $('#color2').spectrum('set', '#' + col2);
                    $('#color3').spectrum('set', '#' + col3);
                    $('#color7').spectrum('set', '#' + col7);

                    document.getElementById("input_color1").value = '#' + col1;
                    document.getElementById("input_color2").value = '#' + col2;
                    document.getElementById("input_color3").value = '#' + col3;
                    document.getElementById("input_color7").value = '#' + col7;

                    $('#sizeOp').val(opacity);
                    $('#size_opacity').val(opacity);
                    $('#bgImgSelect').val(bgImg);
                    $('#secondBgImgSelect').val(secondBgImg);
                    $('#bgImg').val(bgImg);
                    $('#radiusMenu').val(radius_menu);

                    if (radius_menu == 1) {
                        $('.test_color2').css('border-radius', '7px 7px 0 0');
                        $('.test_color8').css('border-radius', '7px 7px 0 0');
                        $('#radiusMenuCheck').prop("checked", true);
                    } else {
                        $('.test_color2').css('border-radius', '0');
                        $('.test_color8').css('border-radius', '0');
                        $('#radiusMenuCheck').prop("checked", false);
                    }

                    if ($('#gradientCheck').prop("checked")) {
                        document.getElementById("input_color4").value = '#' + col4;
                        document.getElementById("color4").style.backgroundColor = '#' + col4;
                        $('#color4').spectrum('set', '#' + col4);

                        if (bgImg) {
                            $('.test_color1').css('background', 'url(images/backgroundImages/' + bgImg + '), linear-gradient(to right, #' + col1 + ' 0%, #' + col4 + ' 100%)');
                        } else {
                            $('.test_color1').css('background','linear-gradient(to right, #' + col1 + ' 0%, #' + col4 + ' 100%)');
                        }
                    } else {
                        document.getElementById("input_color4").value = '#' + col1;
                        document.getElementById("color4").style.backgroundColor = '#' + col1;
                        if (bgImg) {
                            $('.test_color1').css('background', 'url(images/backgroundImages/' + bgImg + '), linear-gradient(to right, #' + col1 + ' 0%, #' + col1 + ' 100%)');
                        } else {
                            $('.test_color1').css('background', 'linear-gradient(to right, #' + col1 + ' 0%, #' + col1 + ' 100%)');
                        }
                    }
                    if (secondBgImg) {
                        $('.test_color5').css('background', 'url(images/backgroundImages/' + secondBgImg + ')');
                    }

                    $('.test_color8').css('backgroundColor', '#' + col3);
                    var opacity_hex = hexToRgbA($('#input_color2').val(), opacity);
                    $('.test_color2').css('background-color', opacity_hex);
                }

                $('#gradientCheck').click(function () {
                    if ($('#gradientCheck').prop("checked")) {
                        $('#gradient_stat').val('1');
                        if ($('#bgImgSelect').val()) {
                            $('.test_color1').css('background', 'url(images/backgroundImages/' + $('#bgImgSelect').val()
                            + '), linear-gradient(to right, ' + $('#input_color1').val() + ' 0%, ' + $('#input_color4').val() + ' 100%)'
                            );
                        } else {
                            $('.test_color1').css('background', 'linear-gradient(to right, ' + $('#input_color1').val() + ' 0%, ' + $('#input_color4').val() + ' 100%)');
                        }
                    } else {
                        $('#gradient_stat').val('0');
                        if ($('#bgImgSelect').val()) {
                            $('.test_color1').css('background', 'url(images/backgroundImages/' + $('#bgImgSelect').val()
                            + '), linear-gradient(to right, ' + $('#input_color1').val() + ' 0%, ' + $('#input_color1').val() + ' 100%)'
                            );
                        } else {
                            $('.test_color1').css('background', 'linear-gradient(to right, ' + $('#input_color1').val() + ' 0%, ' + $('#input_color1').val() + ' 100%)');
                        }
                    }
                    if ($('#secondBgImgSelect').val()) {
                        $('.test_color5').css('background', 'url(images/backgroundImages/' + $('#secondBgImgSelect').val() + ')');
                    }
                });

                function checkParams()
                {
                    if ($('#modal_body_input').val() !== '') {
                        $('#new_scheme_save_btn').removeAttr('disabled');
                    } else {
                        $('#new_scheme_save_btn').attr('disabled', 'disabled');
                    }
                }


{literal}
                function hexToRgbA(hex, opacity)
                {
                    var c;
                    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
                        c= hex.substring(1).split('');
                        if(c.length== 3){
                            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
                        }
                        c= '0x'+c.join('');
                        return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + opacity + ')';
                    }
                    throw new Error('Bad Hex');
                }
{/literal}
                function sizeOpacity(sel)
                {
                    $('#size_opacity').val(sel.value);
                    var hex11 = hexToRgbA($('#input_color2').val(), sel.value);
                    $('.test_color2').css('background-color', hex11);
                }

                function changeImg(sel)
                {
                    if (sel) {
                        $('.test_color1').css('background', 'url(images/backgroundImages/' + sel + '),' +
                        'linear-gradient(to right, ' + $('#input_color1').val() + ' 0%, ' + $('#input_color4').val() + ' 100%)');
                    } else {
                        $('.test_color1').css('background','linear-gradient(to right, ' + $('#input_color1').val() + ' 0%, ' + $('#input_color4').val() + ' 100%)');
                    }
                    $('#bgImg').val(sel);
                    $('#bgImgSelect').val(sel);
                }

                function changeSecondImg(sel)
                {
                    if (sel) {
                        $('.test_color5').css('background', 'url(images/backgroundImages/' + sel + ')');
                    }
                    $('#secondBgImg').val(sel);
                }

                function chengeRadius()
                {
                    if ($('#radiusMenuCheck').prop('checked')) {
                        $('.test_color2').css('border-radius', '7px 7px 0 0');
                        $('.test_color8').css('border-radius', '7px 7px 0 0');
                    } else {
                        $('.test_color2').css('border-radius', '0');
                        $('.test_color8').css('border-radius', '0');
                    }
                }

                $(window).load(function()
                {
                    changeImg($("#bgImgSelect").val());
                    changeSecondImg($('#secondBgImgSelect').val());
                    fillAdditionalColors();
                })

                function changeOnDefaultColor() {

                    {$color7 = '#feda4e'}
                    const inputHiddenCol7 = document.querySelector('#input_color7');
                    const inputCol7 = document.querySelector('#color7');
                    inputCol7.value = '{$color7|htmlspecialchars}';
                    inputHiddenCol7.value = '{$color7|htmlspecialchars}';
                    // нахожу строки всех палеттов, на данный момент их 5
                    const colorValuePalette = document.getElementsByClassName('sp-cf sp-palette-row sp-palette-row-0');
                    //беру последний паллет, и использую первый находящийся элемент, в который кладу цвет, который нужен по умолчанию
                    colorValuePalette[4].firstElementChild.dataset.color = "rgb(254, 218, 78)"
                    //вызываю клик
                    colorValuePalette[4].firstElementChild.firstElementChild.click();

                }

                function changeOnDefaultColorBG() {
                    const inputHiddenCol8 = $('#input_color8');
                    const inputCol8 = $('#color8');
                    inputCol8.val('#f9f9f9');
                    inputHiddenCol8.val('#f9f9f9');
                    const colorValuePalette = document.getElementsByClassName('sp-cf sp-palette-row sp-palette-row-0');
                    //беру последний паллет, и использую первый находящийся элемент, в который кладу цвет, который нужен по умолчанию
                    colorValuePalette[5].firstElementChild.dataset.color = "#f9f9f9"
                    //вызываю клик
                    colorValuePalette[5].firstElementChild.firstElementChild.click();
                }

                // убирает пробелы, если значение состоит только из них
                function checkSpaces(input) {
                  if (input.value.length != 0 && !input.value.trim().length) {
                    input.value = '';
                  }
                }
            </script>
            <br>
            <br>
            <input type=hidden name="csrf" value="{$csrf}">
            <input type=hidden name="save" value="1">
            <input type=submit class="btn btn-default" name="save" value="{$lang.Save}" id="save_scheme_settings_btn">
            <br>
            <br>
            <br>
            <br>
        {/if}
    </form>
</div>
