{% extends "@corePath/admin/partial/layout_logged_in.html.twig" %}

{% block title %}Theme Settings{% endblock %}
{% block selected_page %}themes{% endblock %}
{% block selected_sub_page %}theme_manage{% endblock %}

{% block body %}

<div class="right_col" role="main">
    <div>
        <div class="page-title">
            <div class="availability-wrapper">
                {{ availabilityIcon|raw }}
            </div>
            <div class="title_left">
                <h3>Theme Settings</h3>
            </div>
        </div>
        <div class="clearfix"></div>

        {{ msg_page_notifications|raw }}

        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <form method="POST" action="{{ ADMIN_WEB_ROOT }}/theme_settings/spirit" name="pluginForm" id="pluginForm" autocomplete="off" enctype="multipart/form-data" class="form-horizontal">
                    <div role="tabpanel" data-example-id="togglable-tabs">
                    <ul id="myTab" class="nav nav-tabs bordered" role="tablist">
                        <li role="presentation" class="{{ selected_tab == 'tab_logo' ? 'active' : '' }}">
                            <a href="#tab_logo" role="tab" data-toggle="tab"
                               aria-expanded="true">Site Logo</a>
                        </li>
                        <li role="presentation" class="{{ selected_tab == 'tab_site_styling' ? 'active' : '' }}">
                            <a href="#tab_site_styling" role="tab" data-toggle="tab"
                               aria-expanded="false">Site Styling</a>
                        </li>
                        <li role="presentation" class="{{ selected_tab == 'tab_file_manager_styling' ? 'active' : '' }}">
                            <a href="#tab_file_manager_styling" role="tab" data-toggle="tab"
                               aria-expanded="false">File Manager Styling</a>
                        </li>
                        <li role="presentation" class="{{ selected_tab == 'tab_advanced' ? 'active' : '' }}">
                            <a href="#tab_advanced" role="tab" data-toggle="tab"
                               aria-expanded="false">Advanced</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in {{ selected_tab == 'tab_logo' ? 'active' : '' }}" id="tab_logo"
                             aria-labelledby="tab_logo">
                            <div class="x_title">
                                <h2>Site Logo</h2>
                                <div class="clearfix"></div>
                            </div>

                            <p>Set the logo used on the site and file manager views.</p>

                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">Site Logo (Dark BG):</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input type="file" name="site_logo" class="form-control"/>
                                    Shown on the login screen &amp; file manager, generally on a dark background. Leave blank to keep existing. Must be a transparent png.<br/><br/>
                                    <img src="{{ mainLogoUrl }}?r={{ random(999999) }}" style="max-height: 80px; background-color: #efefef; padding: 10px;"/><br/><br/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">Site Logo (White BG & Email):</label>
                                <div class="col-md-5 col-sm-5 col-xs-12">
                                    <input type="file" name="site_logo_inverted" class="form-control"/>
                                    Shown on the front-end website and used on emails, on a white background. Leave blank to keep existing. Must be a transparent png.<br/><br/>
                                    <div class="image-hover">
                                        <img src="{{ inverseLogoUrl }}?r={{ random(999999) }}" style="max-height: 80px; background-color: #efefef; padding: 10px;"/>
                                    </div><br/><br/>
                                </div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade in theme-settings {{ selected_tab == 'tab_site_styling' ? 'active' : '' }}" id="tab_site_styling"
                             aria-labelledby="tab_site_styling">
                            <div class="x_title">
                                <h2>Site Styling</h2>
                                <div class="clearfix"></div>
                            </div>

                            <p>Customise the look and feel of the front-end website using the options below. Leave fields empty to use the default values or remove all custom styles on this tab by <a href="#" onclick="resetStyling('site_styling'); return false;">clicking here</a>.</p>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                                    <div class="panel-group custom-accordion" id="accordion1" role="tablist" aria-multiselectable="false">
                                        {% for group, site_styling_elements in site_styling_options %}
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h5 class="panel-title">
                                                        <a class="reload-link" href="#" onclick="reloadPreview('site_styling'); return false;">
                                                            <i class="fa fa-refresh" title="Reload preview"></i>
                                                        </a>
                                                        <a id="headingSite{{ loop.index }}" href="#collapseSite{{ loop.index }}" role="tab" data-toggle="collapse" data-parent="#accordion1" aria-expanded="true" aria-controls="collapseOne">{{ group }}</a>
                                                    </h5>
                                                </div>
                                                <div id="collapseSite{{ loop.index }}" class="panel-collapse collapse {{ loop.index == 1 ? 'in' : '' }}" role="tabpanel" aria-labelledby="headingOne">
                                                    {% for element_name, site_styling_element in site_styling_elements %}
                                                        <div class="form-group">
                                                            <label class="control-label label-sm col-md-6 col-sm-6 col-xs-12">{{ site_styling_element['label'] }}</label>
                                                            {% if site_styling_element['type'] == 'picker' %}
                                                                <div class="input-group color-picker">
                                                                    <input name="site_styling[{{ element_name }}]" type="text" value="{{ site_styling[element_name] is not empty ? site_styling[element_name] : site_styling_element['value'] }}" data-attr-default="{{ site_styling_element['value'] }}" class="form-control input-sm"/>
                                                                    <span class="input-group-addon"><i></i></span>
                                                                </div>
                                                            {% else %}
                                                                <div class="col-md-6 col-sm-6 col-xs-12 no-padding">
                                                                    <input name="site_styling[{{ element_name }}]" type="text" value="{{ site_styling[element_name] is not empty ? site_styling[element_name] : site_styling_element['value'] }}" data-attr-default="{{ site_styling_element['value'] }}" class="form-control input-sm"/>
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>

                                </div>
                                <div class="col-lg-9 col-md-8 col-sm-8 col-xs-12">
                                    <div style="width: 100%; overflow: auto;">
                                        <iframe id="site_styling_iframe" class="iframePreviewFullWidth" style="min-width: 1050px;"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade in theme-settings {{ selected_tab == 'tab_file_manager_styling' ? 'active' : '' }}" id="tab_file_manager_styling"
                             aria-labelledby="tab_file_manager_styling">
                            <div class="x_title">
                                <h2>File Manager Styling</h2>
                                <div class="clearfix"></div>
                            </div>

                            <p>Customise the look and feel of the file manager using the options below. Leave fields empty to use the default values or remove all custom styles on this tab by <a href="#" onclick="resetStyling('file_manager_styling'); return false;">clicking here</a>.</p>

                            <div class="row">
                                <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                                    <div class="panel-group custom-accordion" id="accordion2" role="tablist" aria-multiselectable="false">
                                        {% for group, file_manager_styling_elements in file_manager_styling_options %}
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h5 class="panel-title">
                                                        <a class="reload-link" href="#" onclick="reloadPreview('file_manager_styling'); return false;">
                                                            <i class="fa fa-refresh" title="Reload preview"></i>
                                                        </a>
                                                        <a id="headingFileManager{{ loop.index }}" href="#collapseFileManager{{ loop.index }}" role="tab" data-toggle="collapse" data-parent="#accordion2" aria-expanded="true" aria-controls="collapseOne">{{ group }}</a>
                                                    </h5>
                                                </div>
                                                <div id="collapseFileManager{{ loop.index }}" class="panel-collapse collapse {{ loop.index == 1 ? 'in' : '' }}" role="tabpanel" aria-labelledby="headingOne">
                                                    {% for element_name, file_manager_styling_element in file_manager_styling_elements %}
                                                        <div class="form-group">
                                                            <label class="control-label label-sm col-md-6 col-sm-6 col-xs-12">{{ file_manager_styling_element['label'] }}</label>
                                                            {% if file_manager_styling_element['type'] == 'picker' %}
                                                                <div class="input-group color-picker">
                                                                    <input name="file_manager_styling[{{ element_name }}]" type="text" value="{{ file_manager_styling[element_name] is not empty ? file_manager_styling[element_name] : file_manager_styling_element['value'] }}" data-attr-default="{{ file_manager_styling_element['value'] }}" class="form-control input-sm"/>
                                                                    <span class="input-group-addon"><i></i></span>
                                                                </div>
                                                            {% else %}
                                                                <div class="col-md-6 col-sm-6 col-xs-12 no-padding">
                                                                    <input name="file_manager_styling[{{ element_name }}]" type="text" value="{{ file_manager_styling[element_name] is not empty ? file_manager_styling[element_name] : file_manager_styling_element['value'] }}" data-attr-default="{{ file_manager_styling_element['value'] }}" class="form-control input-sm"/>
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>

                                </div>
                                <div class="col-lg-9 col-md-8 col-sm-8 col-xs-12">
                                    <div style="width: 100%; overflow: auto;">
                                        <iframe id="file_manager_styling_iframe" class="iframePreviewFullWidth" style="min-width: 1050px;"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane fade in theme-settings {{ selected_tab == 'tab_advanced' ? 'active' : '' }}" id="tab_advanced"
                             aria-labelledby="tab_advanced">
                            <div class="x_title">
                                <h2>Advanced</h2>
                                <div class="clearfix"></div>
                            </div>

                            <p>Advanced theme options.</p>

                            <div class="row">
                                <!--
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Front End Website Skin:</label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                        <select name="front_end_site_skin" id="site_skin" class="form-control">
                                            <option value="">- {{ t('none', 'none') }} -</option>
                                            {% for skin in frontEndskinsArr %}
                                                <option{{ front_end_site_skin==skin?' SELECTED':'' }}>{{ skin }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">File Manager Skin:</label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                        <select name="site_skin" id="site_skin" class="form-control">
                                            {% for skin in skinsArr %}
                                                <option{{ site_skin==skin?' SELECTED':'' }}>{{ skin }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                -->
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Site & File Manager Custom CSS Code:</label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                        <textarea name="css_code" class="form-control" placeholder="css code..." style="font-family: monospace; height: 200px;">{{ css_code }}</textarea>
                                        <p class="text-muted">
                                            Optional. Use this field to override any of the site &amp file manager CSS without having to create a new theme. By right-clicking on an element in your browser and selecting 'inspect', you can find the relating CSS rules. These changes will be kept after any script upgrades.
                                        </p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Admin Area Custom CSS Code:</label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                        <textarea name="css_code_admin" class="form-control" placeholder="css code..." style="font-family: monospace; height: 200px;">{{ css_code_admin }}</textarea>
                                        <p class="text-muted">
                                            Optional. Use this field to override any of the admin area CSS without having to create a new theme. By right-clicking on an element in your browser and selecting 'inspect', you can find the relating CSS rules. These changes will be kept after any script upgrades.
                                        </p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Head JS Code:</label>
                                    <div class="col-md-5 col-sm-5 col-xs-12">
                                        <textarea name="head_js_code" class="form-control" placeholder="js code including <script></script> tags..." style="font-family: monospace; height: 200px;">{{ head_js_code }}</textarea>
                                        <p class="text-muted">
                                            Optional. Use this field to add javascript code within the head part of the site. This will include the front-end site, file manager and any embeds. These changes will be kept after any script upgrades.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="x_panel">
                        <div class="x_content">
                            <div class="ln_solid"></div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                    <button type="button" class="btn btn-default" onClick="window.location = '{{ ADMIN_WEB_ROOT }}/theme_manage';">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Update Theme Settings</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input name="selected_tab" id="selected_tab" type="hidden" value="{{ selected_tab }}"/>
                    <input name="submitted" type="hidden" value="1"/>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block head_css %}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">
{% endblock %}

{% block head_js %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
    <script>
        var shownIframe = {
            'site_styling': false,
            'file_manager_styling': false
        };
        $(function () {
            $('.color-picker').colorpicker();
            reloadPreview('site_styling');
            reloadPreview('file_manager_styling');
            assignTabClicks();
        });

        function reloadPreview(container) {
            $.ajax({
                type: "POST",
                url: "{{ ADMIN_WEB_ROOT }}/ajax/theme_style_preview/spirit/"+container,
                data: $("#tab_"+container+" :input").serialize(),
                success: function(data) {
                    refreshIframe(data.container);
                },
                error: function(data) {
                    showError('Failed reloading preview, please try again');
                }
            });
        }

        function refreshIframe(container) {
            if(shownIframe[container] == false) {
                let iframeSrc = '{{ WEB_ROOT }}?preview-styles=1';
                if(container == 'file_manager_styling') {
                    iframeSrc = '{{ WEB_ROOT }}/account?preview-styles=1';
                }
                $("#tab_"+container+" iframe").attr('src', iframeSrc);
                shownIframe[container] = true;
                return;
            }

            document.getElementById(container+"_iframe").src += '';
        }

        function assignTabClicks() {
            $('#myTab a').each(function() {
                $(this).on('click', function() {
                    updateSelectedTab($(this).attr('href').substring(1));
                });
            });
        }

        function updateSelectedTab(tab) {
            $('#selected_tab').val(tab);
        }

        function resetStyling(tab) {
            if(confirm('Are you sure you want to remove all custom styles for this section? Once saved, this can not be reverted.')) {
                $('#tab_'+tab).find('input, select').each(function() {
                    let defaultValue = '';
                    if($(this).attr('data-attr-default').length > 0) {
                        defaultValue = $(this).attr('data-attr-default');
                    }
                    $(this).val(defaultValue);
                    if ($(this).parent('.color-picker').length > 0 && defaultValue.length > 0) {
                        $(this).parent('.color-picker').colorpicker('setValue', defaultValue);
                    }
                });

                reloadPreview(tab);
            }
        }
    </script>
{% endblock %}