{% extends "propesqBundle::layout.html.twig" %}

{% block stylesheets %}
    <!-- TODO: verificar caminho do arquivo -->
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/propesq/js/upload/css/bootstrap-image-gallery.min.css') }}" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/propesq/js')}}/upload/css/jquery.fileupload-ui.css">
    
    <script src="{{ asset('bundles/propesq/js')}}/upload/vendor/jquery.ui.widget.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/tmpl.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/load-image.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/canvas-to-blob.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/bootstrap-image-gallery.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.iframe-transport.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload-fp.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload-ui.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/locale.js"></script>
    <style>
        div#modal-gallery{
            margin-top: 0 !important;
        }

        .modal-gallery .modal-body{
            max-height: 400px !important;
        }

        .modal-body  .modal-image {
            display: block;
            width: auto;
            max-height: 100% !important;
        }

        .template-download td{
            vertical-align: middle;
        }
    </style>
{% endblock %}

{% block content %}
<div id="form-container">
    <div class="title">
        <h2>
   {%if entity.id is defined and entity.id is not null%} 
            {{'cabecalho.alterar.tipologia'|trans}}
        {%else%}  
            {{'cabecalho.incluir.tipologia'|trans}}
        {%endif%}
        </h2>
    </div>    

    {{ form_errors(form) }}
    
    <form id="fileuploadList" action="{%if entity.id is defined and entity.id is not null %} {{ path('tipologia_imagelistedit', { 'id': entity.id }) }} {%else%}  {{ path('tipologia_imagelistnew', {'token': uploadcontroller} ) }} {%endif%}" method="POST" enctype="multipart/form-data" style="display: none;"></form>       
    <form id="fileuploadSend" action="{%if entity.id is defined and entity.id is not null %} {{ path('tipologia_imageedit', { 'id': entity.id }) }} {%else%}  {{ path('tipologia_imagenew', {'token': uploadcontroller}) }} {%endif%}" method="POST" enctype="multipart/form-data" style="display: none;"></form>       
    <form id="formulario-tipologia" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null %} {{ path('tipologia_update', { 'id': entity.id }) }} {%else%} {{ path('tipologia_create') }} {%endif%}" method="post" {{ form_enctype(form) }}>
        <fieldset style="float: left; margin: 10px;">

            {{ form_widget(form._token) }}
            
            <input type='hidden' name='uploadcontroller' value='{{uploadcontroller}}'>
            {% if not includeLayout %}
                <input type='hidden' name='noLayout' value='true'>
            {% endif %}

            <div class="control-group">
                {{ form_label(form.txtNome) }}
                <div class="controls">
                    {{ form_widget(form.txtNome,{ 'attr': {'class': 'input-xlarge focus'} }) }}
                    <span class="help-inline">{{ form_errors(form.txtNome) }}</span>
                </div>
            </div>
                <div class="control-group">
                {{ form_label(form.codTipologiaMpa) }}
                <div class="controls">
                    {{ form_widget(form.codTipologiaMpa,{ 'attr': {'class': 'input-xlarge'} }) }}
                    <span class="help-inline">{{ form_errors(form.codTipologiaMpa) }}</span>
                </div>
            </div>
            <div class="control-group">
                {{ form_label(form.txtDescricao) }}
                <div class="controls">
                    {{ form_widget(form.txtDescricao,{ 'attr': {'class': 'input-xlarge'} }) }}
                    <span class="help-inline">{{ form_errors(form.txtDescricao) }}</span>
                </div>
            </div>
                
            <div class="row-fluid">                
                <div class="span12">
                    <div class="" style="margin-left: 20px;">
                        <div class="page-header" style="margin-left: -1%;">
                            <h1>Envio de fotos</h1>
                        </div>
                        <blockquote>
                            <p>Envio e visualização de fotos da tipologia de embarcação. Caso queira ver a foto em tamanho real, clique sobre a foto para iniciar a visualização.</p>
                        </blockquote>

                        <div class="row fileupload-buttonbar">
                            <div class="span12" style="margin-left: 15px;">
                                <!-- The fileinput-button span is used to style the file input field as button -->
                                <span class="btn btn-success fileinput-button">
                                    <i class="icon-plus icon-white"></i>
                                    <span>Selecionar fotos...</span>
                                    <input type="file" name="files[]" multiple>
                                </span>
                                <!--<button type="submit" class="btn btn-primary start">
                                    <i class="icon-upload icon-white"></i>
                                    <span>Iniciar envio ao servidor</span>
                                </button>-->
                                <button type="reset" class="btn btn-warning cancel">
                                    <i class="icon-ban-circle icon-white"></i>
                                    <span>Cancelar envio</span>
                                </button>
                                <button type="button" class="btn btn-danger delete">
                                    <i class="icon-trash icon-white"></i>
                                    <span>Excluir fotos selecionadas</span>
                                </button>
                                <input type="checkbox" class="toggle">
                            </div>
                            <!-- The global progress information -->
                            <div class="span5 fileupload-progress fade">
                                <!-- The global progress bar -->
                                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                    <div class="bar" style="width:0%;"></div>
                                </div>
                                <!-- The extended global progress information -->
                                <div class="progress-extended">&nbsp;</div>
                            </div>
                        </div>
                        <!-- The loading indicator is shown during file processing -->
                        <div class="fileupload-loading"></div>
                        <br>
                        <!-- The table listing the files available for upload/download -->
                        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
                    </div>
                    <!-- modal-gallery is the modal dialog used for the image gallery -->
                    <div id="modal-gallery" class="modal modal-gallery hide feide" data-filter=":odd">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">&times;</a>
                            <h3 class="modal-title"></h3>
                        </div>
                        <div class="modal-body"><div class="modal-image"></div></div>
                        <div class="modal-footer">
                            <a class="btn modal-download" target="_blank">
                                <i class="icon-download"></i>
                                <span>Download</span>
                            </a>
                            <a class="btn btn-success modal-play modal-slideshow" data-slideshow="2500">
                                <i class="icon-play icon-white"></i>
                                <span>Slideshow</span>
                            </a>
                            <a class="btn btn-info modal-prev">
                                <i class="icon-arrow-left icon-white"></i>
                                <span>Anterior</span>
                            </a>
                            <a class="btn btn-primary modal-next">
                                <span>Próxima</span>
                                <i class="icon-arrow-right icon-white"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <div class=" div-actions">
            <button type="submit" class="btn btn-primary">{{'acao.salvar'|trans}}</button>
            <a class="cancelar"{% if not includeLayout %} onclick="$(this).parents('.modal').find('.close').click(); return false;" {% endif %} href="javascript:;" title="{{'acao.cancelar'|trans}}">
                {{'acao.cancelar'|trans}}
            </a>
        </div>
    </form>
</div>

{% raw %}         
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    
    <tr class="template-upload feide">
        <td class="preview"><span class="feide"></span></td>
		<td class="name"><span>{%=file.name%}</span></td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download feide">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>

<!--            <td class="title" style='width: 150px;'>
                <span  style='background-color: blue'>{%=file.title%}</span>
            </td>-->
            <!--<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>-->
            <td colspan="3"></td>
            
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>
{% endraw %}     
<script>

$(function () {
    'use strict';
    $('#formulario-tipologia').fileupload({
        maxFileSize: {{ upload_max_filesize }},
        acceptFileTypes: /(\.|\/)(png|gif|jpg|jpeg|bin)$/i,
        autoUpload: true,
    });
    $('#formulario-tipologia').each(function () {
        var that = this;
        var action = $('#fileuploadList').attr('action');
        $.getJSON(action, function (result) {
            if (result && result.length) {
                $(that).fileupload('option', 'done')
                    .call(that, null, {result: result});
            }
        });
    });
});

var fileNotSend = false;
var counter = 0;
var number_of_files = 0;


$(document).ready(function(){
    $('form#formulario-tipologia').preventDoubleSubmission();
    $('#formulario-tipologia').bind('fileuploadsubmit', function (e, data) {
        data.form = $("#fileuploadSend");
    });
    
    $('#formulario-tipologia').bind('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            number_of_files = number_of_files + 1;
        });
    });


    $('#formulario-tipologia').bind('fileuploadprogressall', function (e, data) {
        number_of_files = number_of_files - 1;
    });

    $('button.cancel').click(function (e) {
        number_of_files = 0;
    });

    $('td.cancel button').live('click',function (e) {
        number_of_files = number_of_files - 1;
    });

    
    $('.cancelar').on('click', function(){
        var cancelarUrl = "{{ path('tipologia') }}" ;
        $.fn.dialog2.helpers.confirm("Você realmente deseja cancelar?", {
            closeOnEscape: false,
            title: 'Atenção!',
            confirm: function() { window.location = cancelarUrl; }, 
            decline: function() { return false; }
        });
    });
});
</script>     
            
{% endblock %}