{#
    /**
     * This file is part of FacturaScripts
     * Copyright (C) 2017-2020 Carlos Garcia Gomez <carlos@facturascripts.com>
     *
     * This program is free software: you can redistribute it and/or modify
     * it under the terms of the GNU Lesser General Public License as
     * published by the Free Software Foundation, either version 3 of the
     * License, or (at your option) any later version.
     *
     * This program 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 Lesser General Public License for more details.
     *
     * You should have received a copy of the GNU Lesser General Public License
     * along with this program. If not, see http://www.gnu.org/licenses/.
     */
#}
{% extends "Master/MenuTemplate.html.twig" %}
{% from 'Macro/Forms.html.twig' import simpleSelect as simpleSelect %}

{% block bodyHeaderOptions %}
    {{ parent() }}
    <div class="container-fluid mb-3">
        {{ parent() }}
        <div class="row">
            <div class="col-4 d-print-none">
                <a href="{{ fsc.backPage }}" class="btn btn-sm btn-secondary">
                    <i class="fas fa-arrow-left fa-fw" aria-hidden="true"></i>
                    <span class="d-none d-md-inline-block">{{ i18n.trans('back') }} </span>
                </a>
                <a href="{{ fsc.url() ~ '?code=' ~ fsc.selectedViewName }}" class="btn btn-sm btn-secondary" title="{{ i18n.trans('refresh') }}">
                    <i class="fas fa-redo" aria-hidden="true"></i>
                </a>
            </div>
            <div class="col text-right">
                <h1 class="h4">
                    {{ fsc.title }} <i class="{{ fsc.getPageData()['icon'] }}" aria-hidden="true"></i>
                </h1>
            </div>
        </div>
    </div>
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header">
                        <span class="text-info">{{ fsc.selectedViewName }}</span>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            <input type="hidden" name="code" value="{{ fsc.selectedViewName }}" />
                            <div class="row">
                                <div class="col-3">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-users"></i>
                                            </span>
                                        </div>
                                        {% set userList = {'': i18n.trans('all')} | merge(fsc.getUserList()) %}
                                        {{ simpleSelect(
                                            'nick',
                                            'nick',
                                            fsc.selectedUser,
                                            userList,
                                            FALSE,
                                            FALSE,
                                            {'onChange': 'this.form.submit()'})
                                        }}
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <form method="post" name="main_form">
                        <input type="hidden" name="action" value="save"/>
                        <input type="hidden" name="code" value="{{ fsc.selectedViewName }}"/>
                        <input type="hidden" name="nick" value="{{ fsc.selectedUser }}"/>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>{{ i18n.trans('title') }}</th>
                                        <th class="text-center">{{ i18n.trans('display') }}</th>
                                        <th>{{ i18n.trans('level') }}</th>
                                        <th>{{ i18n.trans('readonly') }}</th>
                                        <th width="150">{{ i18n.trans('decimals') }}</th>
                                        <th>{{ i18n.trans('width') }}</th>
                                        <th class="text-right" width="130">{{ i18n.trans('sort') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for group in fsc.columns %}
                                        {% for col in group.columns %}
                                            {{ _self.editGroupColumn(col, i18n) }}
                                        {% endfor %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {% if fsc.model.exists() %}
                                    <div class="col">
                                        <button class="btn btn-sm btn btn-danger" type="button" onclick="deleteOptions();">
                                            <i class="fas fa-trash-alt fa-fw" aria-hidden="true"></i> {{ i18n.trans('delete') }}
                                        </button>
                                    </div>
                                {% endif %}
                                <div class="col text-right">
                                    <button class="btn btn-sm btn btn-secondary" type="reset">
                                        <i class="fas fa-undo fa-fw" aria-hidden="true"></i> {{ i18n.trans('undo') }}
                                    </button>
                                    <button class="btn btn-sm btn-primary" type="submit">
                                        <i class="fas fa-save fa-fw" aria-hidden="true"></i> {{ i18n.trans('save') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block css %}
    {{ parent() }}
    <style>
        body {
            background-color: #FAFBFC;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        function deleteOptions() {
            bootbox.confirm({
                title: "{{ i18n.trans('confirm-delete')|raw }}",
                message: "{{ i18n.trans('are-you-sure') }}",
                closeButton: false,
                buttons: {
                    cancel: {
                        label: "<i class='fas fa-times'></i> {{ i18n.trans('cancel') }}"
                    },
                    confirm: {
                        label: "<i class='fas fa-check'></i> {{ i18n.trans('delete') }}",
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                    if (result) {
                        document.main_form.action.value = 'delete';
                        document.main_form.submit();
                    }
                }
            });
        }
    </script>
{% endblock %}

{% macro editGroupColumn(col, i18n) %}
    <tr>
        <td title="{{ i18n.trans('title') }}">
            <input type="text" class="form-control" name="{{ col.name }}-title" placeholder="{{ i18n.trans(col.title) }}" autocomplete="off" />
        </td>
        <td class="text-center">
            {{ _self.editGroupColumnDisplay(col, i18n) }}
        </td>
        <td title="{{ i18n.trans('level') }}">
            <input type="number" class="form-control" name="{{ col.name }}-level" min="0" max="99" step="1" value="{{ col.level }}" />
        </td>
        <td title="{{ i18n.trans('readonly') }}">
            {{ simpleSelect(
                col.name ~ '-readonly',
                col.name ~ '-readonly',
                col.widget.readonly,
                {'true':i18n.trans('yes'), 'false':i18n.trans('no'), 'dinamic':i18n.trans('auto')},
                FALSE,
                FALSE,
                {})
            }}
        </td>
        <td title="{{ i18n.trans('decimals') }}">
            {% if col.widget.gridFormat() is not empty %}
                <input type="number" name="{{ col.name }}-decimal" min="0" max="7" step="1" value="{{ col.widget.decimal }}" class="form-control" />
            {% endif %}
        </td>
        <td title="{{ i18n.trans('width') }}">
            {{ simpleSelect(
                col.name ~ '-numcolumns',
                col.name ~ '-numcolumns',
                col.numcolumns,
                {'0':i18n.trans('auto'), '1':'1', '2':'2', '3':'3', '4':'4', '5':'5', '6':'6', '7':'7', '8':'8', '9':'9', '10':'10', '11':'11', '12':'12'},
                FALSE,
                FALSE,
                {})
            }}
        </td>
        <td title="{{ i18n.trans('sort') }}">
            <input type="number" name="{{ col.name }}-order" value="{{ col.order }}" class="form-control text-right" />
        </td>
    </tr>
{% endmacro %}

{% macro editGroupColumnDisplay(col, i18n) %}
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        {% if col.display == 'left' %}
            <label class="btn btn-outline-secondary active" title="{{ i18n.trans('left') }}">
                <input type="radio" name="{{ col.name }}-display" value="left" checked="">
                <i class="fas fa-align-left"></i>
            </label>
        {% else %}
            <label class="btn btn-outline-secondary" title="{{ i18n.trans('left') }}">
                <input type="radio" name="{{ col.name }}-display" value="left">
                <i class="fas fa-align-left"></i>
            </label>
        {% endif %}

        {% if col.display == 'center' %}
            <label class="btn btn-outline-secondary active" title="{{ i18n.trans('center') }}">
                <input type="radio" name="{{ col.name }}-display" value="center" checked="">
                <i class="fas fa-align-center"></i>
            </label>
        {% else %}
            <label class="btn btn-outline-secondary" title="{{ i18n.trans('center') }}">
                <input type="radio" name="{{ col.name }}-display" value="center">
                <i class="fas fa-align-center"></i>
            </label>
        {% endif %}

        {% if col.display == 'right' %}
            <label class="btn btn-outline-secondary active" title="{{ i18n.trans('right') }}">
                <input type="radio" name="{{ col.name }}-display" value="right" checked="">
                <i class="fas fa-align-right"></i>
            </label>
        {% else %}
            <label class="btn btn-outline-secondary" title="{{ i18n.trans('right') }}">
                <input type="radio" name="{{ col.name }}-display" value="right">
                <i class="fas fa-align-right"></i>
            </label>
        {% endif %}

        {% if col.display == 'none' %}
            <label class="btn btn-outline-secondary active" title="{{ i18n.trans('hide') }}">
                <input type="radio" name="{{ col.name }}-display" value="none" checked="">
                <i class="fas fa-eye-slash"></i>
            </label>
        {% else %}
            <label class="btn btn-outline-secondary" title="{{ i18n.trans('hide') }}">
                <input type="radio" name="{{ col.name }}-display" value="none">
                <i class="fas fa-eye-slash"></i>
            </label>
        {% endif %}
    </div>
{% endmacro %}