{% extends "module.html.twig" %}

{% block head %}
    {{ parent() }}
    {% if modulo and modulo.id %}
    <link rel="stylesheet" type="text/css" href="{{ resources('css/bootstrap-switch.min.css', module.chave) }}">
    <script type="text/javascript" src="{{ resources('js/bootstrap-switch.min.js', module.chave) }}"></script>
    {% else %}
    <script type="text/javascript" src="{{ resources('js/SimpleAjaxUploader.min.js', module.chave) }}"></script>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="module-content">
        <div class="header">
            <img src="{{ resources('images/icon.png', module.chave) }}" />
            <h2>{{ module.nome }}</h2>
            <p>{{ module.descricao }}</p>
        </div>
        {% if modulo and modulo.id %}
            <input id="modulo_id" type="hidden" value="{{ modulo.id }}" />
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-sobre" data-toggle="tab">{% trans %}Sobre{% endtrans %}</a></li>
                <li><a href="#tab-css" data-toggle="tab">CSS</a></li>
                <li><a href="#tab-javascript" data-toggle="tab">Javascript</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab-sobre" class="tab-pane active">
                    <div class="info">
                        <div class="icon">
                            <img src="{{ resources('images/icon.png', module.chave) }}" />
                        </div>
                        <div class="text nome">
                            <label>{% trans %}Nome{% endtrans %}</label>
                            <span>{{ modulo.nome }}</span>
                        </div>
                        <div class="text chave">
                            <label>{% trans %}Chave{% endtrans %}</label>
                            <a href="{{ baseUrl() }}/modules/{{ modulo.chave }}">
                                <span>{{ modulo.chave }}</span>
                            </a>
                        </div>
                        <div class="text descricao">
                            <label>{% trans %}Descrição{% endtrans %}</label>
                            <p>{{ modulo.descricao }}</p>
                        </div>
                        <div>
                            <input
                                type="checkbox"
                                data-on-color="success"
                                data-off-color="default"
                                data-on-text="On"
                                data-off-text="Off"
                                {% if modulo.status %}checked{% endif %}>
                        </div>
                    </div>
                </div>
                <div id="tab-css" class="tab-pane">
                    <div class="resource-buttons">
                        <h4 class="css">CSS</h4>
                        <button onclick="SGA.Modulos.Resource.save('css')"
                                class="btn btn-primary">
                            <span class="glyphicon glyphicon-save"></span>
                            {% trans %}Salvar{% endtrans %}
                        </button>
                        <button onclick="SGA.Modulos.Resource.load('css')"
                                class="btn btn-default">
                            <span class="glyphicon glyphicon-refresh"></span>
                            {% trans %}Recarregar{% endtrans %}
                        </button>
                    </div>
                    <textarea id="css" class="form-control" rows="20">{{ css }}</textarea>
                </div>
                <div id="tab-javascript" class="tab-pane">
                    <div class="resource-buttons">
                        <h4 class="js">Javascript</h4>
                        <button onclick="SGA.Modulos.Resource.save('js')"
                                class="btn btn-primary">
                            <span class="glyphicon glyphicon-save"></span>
                            {% trans %}Salvar{% endtrans %}
                        </button>
                        <button onclick="SGA.Modulos.Resource.load('js')"
                                class="btn btn-default">
                            <span class="glyphicon glyphicon-refresh"></span>
                            {% trans %}Recarregar{% endtrans %}
                        </button>
                    </div>
                    <textarea id="js" class="form-control" rows="20">{{ javascript }}</textarea>
                </div>
            </div>
            <div class="buttons">
                <a href="{{ baseUrl() }}/modules/{{ module.chave }}" class="btn btn-default">
                    <span class="glyphicon glyphicon-chevron-left"></span>&nbsp;
                    {% trans %}Voltar{% endtrans %}
                </a>
                <a href="{{ baseUrl() }}/modules/{{ module.chave }}/edit" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus-sign"></span>&nbsp;
                    {% trans %}Novo{% endtrans %}
                </a>
                <form action="{{ baseUrl() }}/modules/{{ module.chave }}/delete/{{ modulo.id }}" method="post" onsubmit="return confirm('{% trans %}Deseja realmente desinstalar esse módulo?{% endtrans %}')" class="pull-right">
                    <button type="submit" class="btn btn-danger">
                        <span class="glyphicon glyphicon-trash"></span>
                        {% trans %}Desinstalar{% endtrans %}
                    </button>
                </form>
            </div>
            <script>
                $('input:checkbox').bootstrapSwitch().on('switchChange.bootstrapSwitch', function(event, state) {
                    SGA.ajax({
                        type: 'post',
                        url: "{{ baseUrl() }}/modules/{{ module.chave }}/toggle",
                        data: {
                            id: {{ modulo.id }}
                        }
                    });
                });
            </script>
        {% else %}
            <div class="row">
                <button id="btn-upload" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-file"></span>&nbsp;
                    {% trans %}Escolha o arquivo{% endtrans %}
                </button>
                <a href="{{ baseUrl() }}/modules/{{ module.chave }}"
                        class="btn btn-default">
                    <span class="glyphicon glyphicon-chevron-left"></span>&nbsp;
                    {% trans %}Voltar{% endtrans %}
                </a>
                <div id="pic-progress-wrap" class="progress-wrap">
                </div>
                <p class="help-block">Selecione o arquivo ZIP de instalação módulo.</p>
                <div id="errormsg" class="alert alert-danger" style="display: none">
                </div>
                <div id="picbox" class="alert alert-success" style="display: none">
                </div>
            </div>
            <script>
                ;(function() {
                    "use strict";

                    var btn = document.getElementById('btn-upload'),
                        wrap = document.getElementById('pic-progress-wrap');

                    new ss.SimpleUpload({
                        button: btn,
                        url: '{{ baseUrl() }}/modules/{{ module.chave }}/install',
                        name: 'uploadfile',
                        responseType: 'json',
                        allowedExtensions: ['zip'],
                        onSubmit: function(filename, extension) {
                            var prog = document.createElement('div'),
                                outer = document.createElement('div'),
                                bar = document.createElement('div'),
                                size = document.createElement('div');

                            prog.className = 'prog';
                            size.className = 'size';
                            outer.className = 'progress progress-striped active';
                            bar.className = 'progress-bar progress-bar-success';

                            outer.appendChild(bar);
                            prog.innerHTML = '<span style="vertical-align:middle;">'+ filename + ' - </span>';
                            prog.appendChild(size);
                            prog.appendChild(outer);
                            wrap.appendChild(prog); // 'wrap' is an element on the page

                            this.setProgressBar(bar);
                            this.setProgressContainer(prog);
                            this.setFileSizeBox(size);
                        },
                        startXHR: function() {
                            $('#picbox').text('').hide();
                            $('#errormsg').text('').hide();
                        },
                        onComplete: function(filename, response) {
                            if (response.success === true) {
                                $('#picbox').text(response.message).show();
                            } else {
                                $('#errormsg').text(response.message).show();
                            }
                        }
                    });
                })();
            </script>
        {% endif %}
    </div>
{% endblock %}