{#
/**
 * Xibo - Digital Signage - http://www.xibo.org.uk
 * Copyright (C) 2018 Spring Signage Ltd
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}

{# Define some templates #}
{% raw %}
    <script type="text/x-handlebars-template" id="graphConfigTemplate">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="columnType[]">{{ title }}</label>
            <div class="col-sm-4">
                <label for="columnType[]">
                <select class="form-control" name="columnType[]">
                    {{#each columnTypeOptions}}
                    <option value="{{ id }}" {{#if_eq id ../columnType}}selected{{/if_eq}}>{{ value }}</option>
                    {{/each}}
                </select>
                </label>
            </div>
            <div class="col-sm-4">
                <select class="form-control" name="dataSetColumnId[]">
                    <option value=""></option>
                    {{#each columns}}
                    <option value="{{ dataSetColumnId }}" {{#if_eq dataSetColumnId ../dataSetColumnId}}selected{{/if_eq}}>{{ heading }}</option>
                    {{/each}}
                </select>
            </div>
            <div class="col-sm-1">
                <button class="btn btn-default btn-sm"><i class="fa {{ buttonGlyph }}"></i></button>
            </div>
        </div>
    </script>
    <script type="text/x-handlebars-template" id="chartSeriesColorsTemplate">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="seriesColor[]">{{ title }}</label>
            <div class="col-sm-4">
                <input class="form-control color-picker" name="seriesColor[]" value="{{ color }}" />
            </div>
            <div class="col-sm-1">
                <button class="btn btn-default btn-sm"><i class="fa {{ buttonGlyph }}"></i></button>
            </div>
        </div>
    </script>
    <script type="text/x-handlebars-template" id="chartOrderClauseTemplate">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="orderClause[]">{{ title }}</label>
            <div class="col-sm-7">
                <select class="form-control" name="orderClause[]">
                    <option value=""></option>
                    {{#each columns}}
                    <option value="{{ heading }}" {{#if_eq heading ../orderClause}}selected{{/if_eq}}>{{ heading }}</option>
                    {{/each}}
                </select>
            </div>
            <div class="col-sm-3">
                <label for="orderClauseDirection[]">
                    <select class="form-control" name="orderClauseDirection[]">
                        <option value="ASC" {{#if orderClauseAsc}}selected{{/if}}>{{ ascTitle }}</option>
                        <option value="DESC" {{#if orderClauseDesc}}selected{{/if}}>{{ descTitle }}</option>
                    </select>
                </label>
            </div>
            <div class="col-sm-1">
                <button class="btn btn-default btn-sm"><i class="fa {{ buttonGlyph }}"></i></button>
            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="chartFilterClauseTemplate">
        <div class="form-group">
            <label class="col-sm-1 control-label" for="filterClause[]">{{ title }}</label>
            <div class="col-sm-2">
                <label for="filterClauseOperator[]" {{#if_eq title "1"}}class="hidden"{{/if_eq}}>
                <select class="form-control" name="filterClauseOperator[]">
                    {{#each filterOperatorOptions}}
                    <option value="{{ id }}" {{#if_eq id ../filterClauseOperator}}selected{{/if_eq}}>{{ value }}</option>
                    {{/each}}
                </select>
                </label>
            </div>
            <div class="col-sm-3">
                <select class="form-control" name="filterClause[]">
                    <option value=""></option>
                    {{#each columns}}
                    <option value="{{ heading }}" {{#if_eq heading ../filterClause}}selected{{/if_eq}}>{{ heading }}</option>
                    {{/each}}
                </select>
            </div>
            <div class="col-sm-3">
                <label for="filterClauseCriteria[]">
                    <select class="form-control" name="filterClauseCriteria[]">
                        {{#each filterOptions}}
                        <option value="{{ id }}" {{#if_eq id ../filterClauseCriteria}}selected{{/if_eq}}>{{ value }}</option>
                        {{/each}}
                    </select>
                </label>
            </div>
            <div class="col-sm-2">
                <label for="filterClauseValue[]">
                    <input class="form-control" name="filterClauseValue[]" type="text" value="{{ filterClauseValue }}" />
                </label>
            </div>
            <div class="col-sm-1">
                <button class="btn btn-default btn-sm"><i class="fa {{ buttonGlyph }}"></i></button>
            </div>
        </div>
    </script>
{% endraw %}

<script type="text/javascript">
    Handlebars.registerHelper('if_eq', function(a, b, opts) {
        if(a == b) // Or === depending on your needs
            return opts.fn(this);
        else
            return opts.inverse(this);
    });

    function graphFormSetup(dialog) {
        var extra = $('.bootbox').data().extra;

        var $graphConfig = $("#graphConfig");
        var graphConfigTemplate = Handlebars.compile($("#graphConfigTemplate").html());
        var columnTypeOptions = [
            {
                id: "x-axis",
                value: "{% trans "X-Axis" %}"
            },{
                id: "y-axis",
                value: "{% trans "Y-Axis" %}"
            },{
                id: "series-identifier",
                value: "{% trans "Series Identifier" %}"
            }
        ];

        if (dialog.data().extra.config.length === 0) {
            // No existing config, so we add a row to our config div
            context = {
                columns: dialog.data().extra.columns,
                columnTypeOptions: columnTypeOptions,
                title: "1",
                columnType: "",
                dataSetColumnId: "",
                buttonGlyph: "fa-plus"
            };
            $graphConfig.append(graphConfigTemplate(context));
        } else {
            // For each of the existing config options, create form components
            var j = 0;
            $.each(dialog.data().extra.config, function (index, field) {
                j++;

                var context = {
                    columns: dialog.data().extra.columns,
                    columnTypeOptions: columnTypeOptions,
                    title: j,
                    columnType: field.columnType,
                    dataSetColumnId: field.dataSetColumnId,
                    buttonGlyph: ((j === 1) ? "fa-plus" : "fa-minus")
                };

                $graphConfig.append(graphConfigTemplate(context));
            });
        }

        // Nabble the resulting buttons
        $graphConfig.on("click", "button", function (e) {
            e.preventDefault();

            // find the gylph
            if ($(this).find("i").hasClass("fa-plus")) {
                var context = {
                    columns: dialog.data().extra.columns,
                    columnTypeOptions: columnTypeOptions,
                    title: $graphConfig.find('.form-group').length + 1,
                    columnType: "",
                    dataSetColumnId: "",
                    buttonGlyph: "fa-minus"
                };
                $graphConfig.append(graphConfigTemplate(context));
            } else {
                // Remove this row
                $(this).closest(".form-group").remove();
            }
        });

        // Series Colors
        var $seriesColors = $("#seriesColors");
        var seriesColorsTemplate = Handlebars.compile($("#chartSeriesColorsTemplate").html());

        if (dialog.data().extra.seriesColors.length === 0) {
            // No existing config, so we add a row to our config div
            context = {
                title: "1",
                color: "",
                buttonGlyph: "fa-plus"
            };
            $seriesColors.append(seriesColorsTemplate(context));

            $seriesColors.find('.color-picker').colorpicker({format: "hex"});
        } else {
            // For each of the existing config options, create form components
            var j = 0;
            $.each(dialog.data().extra.seriesColors, function (index, field) {
                j++;

                var context = {
                    title: j,
                    color: field,
                    buttonGlyph: ((j === 1) ? "fa-plus" : "fa-minus")
                };

                $seriesColors.append(seriesColorsTemplate(context));
            });

            $seriesColors.find('.color-picker').colorpicker({format: "hex"});
        }

        // Nabble the resulting buttons
        $seriesColors.on("click", "button", function (e) {
            e.preventDefault();

            // find the gylph
            if ($(this).find("i").hasClass("fa-plus")) {
                var context = {
                    title: $seriesColors.find('.form-group').length + 1,
                    color: "",
                    buttonGlyph: "fa-minus"
                };
                $seriesColors.append(seriesColorsTemplate(context));

                $seriesColors.find('.color-picker').colorpicker({format: "hex"});
            } else {
                // Remove this row
                $(this).closest(".form-group").remove();
            }
        });

        // Order Clause
        var orderClauseFields = $("#orderClause");

        if (orderClauseFields.length === 0)
            return;

        var orderClauseTemplate = Handlebars.compile($("#chartOrderClauseTemplate").html());
        var ascTitle = "{% trans "Ascending" %}";
        var descTitle = "{% trans "Descending" %}";

        if (dialog.data().extra.orderClause.length === 0) {
            // Add a template row
            var context = {columns: dialog.data().extra.columns, title: "1", orderClause: "", orderClauseAsc: "", orderClauseDesc: "", buttonGlyph: "fa-plus", ascTitle: ascTitle, descTitle: descTitle};
            orderClauseFields.append(orderClauseTemplate(context));
        } else {
            // For each of the existing codes, create form components
            var i = 0;
            $.each(dialog.data().extra.orderClause, function (index, field) {
                i++;

                var direction = (field.orderClauseDirection === "ASC");

                var context = {columns: dialog.data().extra.columns, title: i, orderClause: field.orderClause, orderClauseAsc: direction, orderClauseDesc: !direction, buttonGlyph: ((i == 1) ? "fa-plus" : "fa-minus"), ascTitle: ascTitle, descTitle: descTitle};

                orderClauseFields.append(orderClauseTemplate(context));
            });
        }

        // Nabble the resulting buttons
        orderClauseFields.on("click", "button", function (e) {
            e.preventDefault();

            // find the gylph
            if ($(this).find("i").hasClass("fa-plus")) {
                var context = {columns: dialog.data().extra.columns, title: orderClauseFields.find('.form-group').length + 1, orderClause: "", orderClauseAsc: "", orderClauseDesc: "", buttonGlyph: "fa-minus", ascTitle: ascTitle, descTitle: descTitle};
                orderClauseFields.append(orderClauseTemplate(context));
            } else {
                // Remove this row
                $(this).closest(".form-group").remove();
            }
        });

        //
        // Filter Clause
        //
        var filterClauseFields = $("#filterClause");
        var filterClauseTemplate = Handlebars.compile($("#chartFilterClauseTemplate").html());
        var filterOptions = [
            {
                id: "starts-with",
                value: "{% trans "starts with" %}"
            },{
                id: "ends-with",
                value: "{% trans "ends with" %}"
            },{
                id: "contains",
                value: "{% trans "contains" %}"
            },{
                id: "equals",
                value: "{% trans "equals" %}"
            },{
                id: "not-starts-with",
                value: "{% trans "does not start with" %}"
            },{
                id: "not-ends-with",
                value: "{% trans "does not end with" %}"
            },{
                id: "not-contains",
                value: "{% trans "does not contain" %}"
            },{
                id: "not-equals",
                value: "{% trans "does not equal" %}"
            },{
                id: "greater-than",
                value: "{% trans "greater than" %}"
            },{
                id: "less-than",
                value: "{% trans "less than" %}"
            }
        ];
        var filterOperatorOptions = [
            {
                id: "OR",
                value: "{% trans "Or" %}"
            },{
                id: "AND",
                value: "{% trans "And" %}"
            }
        ];

        if (dialog.data().extra.filterClause.length === 0) {
            // Add a template row
            context = {
                columns: dialog.data().extra.columns,
                filterOptions: filterOptions,
                filterOperatorOptions: filterOperatorOptions,
                title: "1",
                filterClause: "",
                filterClauseOperator: "AND",
                filterClauseCriteria: "",
                filterClauseValue: "",
                buttonGlyph: "fa-plus"
            };
            filterClauseFields.append(filterClauseTemplate(context));
        } else {
            // For each of the existing codes, create form components
            var j = 0;
            $.each(dialog.data().extra.filterClause, function (index, field) {
                j++;

                var context = {
                    columns: dialog.data().extra.columns,
                    filterOptions: filterOptions,
                    filterOperatorOptions: filterOperatorOptions,
                    title: j,
                    filterClause: field.filterClause,
                    filterClauseOperator: field.filterClauseOperator,
                    filterClauseCriteria: field.filterClauseCriteria,
                    filterClauseValue: field.filterClauseValue,
                    buttonGlyph: ((j === 1) ? "fa-plus" : "fa-minus")
                };

                filterClauseFields.append(filterClauseTemplate(context));
            });
        }

        // Nabble the resulting buttons
        filterClauseFields.on("click", "button", function (e) {
            e.preventDefault();

            // find the gylph
            if ($(this).find("i").hasClass("fa-plus")) {
                var context = {
                    columns: dialog.data().extra.columns,
                    filterOptions: filterOptions,
                    filterOperatorOptions: filterOperatorOptions,
                    title: filterClauseFields.find('.form-group').length + 1,
                    filterClause: "",
                    filterClauseOperator: "AND",
                    filterClauseCriteria: "",
                    filterClauseValue: "",
                    buttonGlyph: "fa-minus"
                };
                filterClauseFields.append(filterClauseTemplate(context));
            } else {
                // Remove this row
                $(this).closest(".form-group").remove();
            }
        });

        // Fill the font colour in with a complimentary colour (if it isn't already filled in)
        var $fontInput = $("#fontColor");

        if ($fontInput.val() == "") {
            // Choose a complementary color
            var color = $c.complement($("#layout").data().backgroundColor);

            $fontInput.val(color);
        }

        // Set up the colour selectors
        $("#backgroundColor").colorpicker({format: "hex"});
        $fontInput.colorpicker({format: "hex"});
    }
</script>
