{% extends 'baseadmin.html' %}

{% block title %}Categorias{% endblock %}

{% block pagetitle %}

    <div class="pageheader">
        <h3><i class="fa fa-book"></i> Categorias</h3>
        <div class="breadcrumb-wrapper">
            <span class="label">Você está em:</span>
            <ol class="breadcrumb">
                <li> <a href="/"> Home </a> </li>
                <li class="active"> Categorias </li>
            </ol>
        </div>
    </div>

{% endblock %}

{% block body %}

    <div class="panel">
        <div class="panel-body">
            <div class="pad-btm form-inline">
                <div class="row">
                    <div class="col-sm-6 text-xs-center">
                        <div class="form-group">
                            <button type="button" id="demo-btn-addrow" class="btn btn-success" data-toggle="modal" data-target="#newcategory">Nova Categoria</button>
                        </div>
                    </div>
                    <div class="col-sm-6 text-xs-center text-right">
                        <form action="/categories/index" method="get">
                            <div class="form-group">
                                <input id="demo-input-search2" name="q" type="text" placeholder="Procurar" class="form-control" autocomplete="off">
                                <div class="btn-group">
                                    <button type="submit" class="btn btn-default"><i class="fa fa fa-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            {% if categories %}
            
                    <table class="table table-bordered table-hover toggle-circle default no-paging footable-loaded footable">
                        <thead>
                            <tr>
                                <th class="text-center">Nome</th>
                                <th class="text-center">Tipo</th>
                                <th class="text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            {% for category in categories %}

                                <tr>
                                    <td class="text-center">{{ category.nome }}</td>
                                    <td class="text-center">{{ category.NOMETIPO }}</td>
                                    <td class="text-center">
                                        <a href="/categories/edit/{{ category.id }}" class="btn btn-warning fa fa-edit text-center"></a>
                                        <button class="btn btn-danger fa fa-trash text-center" onclick="delCategory({{ category.id }})"></button>
                                    </td>
                                </tr>

                            {% endfor %}
                        </tbody>
                        
                        {% if pages > 1 %}

                            <tfoot>
                                <tr>
                                    <td colspan="6" class="footable-visible">
                                        <div class="text-center">
                                            <ul class="pagination">
                                                <li class="footable-page-arrow"><a data-page="first" href="/categories/index{% if query|length > 0 %}?{{ query }}{% endif %}">«</a></li>
                                                
                                                {% if current_page > 1 %}
                                                
                                                    <li class="footable-page-arrow"><a data-page="prev" href="/categories/index?page={{ current_page - 1 }}{% if query|length > 0 %}?{{ query }}{% endif %}">‹</a></li>                                                
                                                
                                                {% else %}
                                                
                                                    <li class="footable-page-arrow"><a data-page="prev" href="/categories/index?page=1{% if query|length > 0 %}?{{ query }}{% endif %}">‹</a></li>
                                                    
                                                {% endif %}
                                                
                                                {% for i in 1..pages %}
                                                    
                                                    {% if current_page == i %}    
                                                        <li class="footable-page active"><a>{{ i }}</a></li>
                                                    {% else %}
                                                        <li class="footable-page"><a data-page="0" href="/categories/index?page={{ i }}{% if query|length > 0 %}?{{ query }}{% endif %}">{{ i }}</a></li>
                                                    {% endif %}
                                                    
                                                {% endfor %}                                                
                                                
                                                {% if current_page < pages %}
                                                
                                                    <li class="footable-page-arrow"><a data-page="next" href="/categories/index?page={{ currentpage + 1 }}{% if query|length > 0 %}?{{ query }}{% endif %}">›</a></li>

                                                {% else %}
                                                
                                                    <li class="footable-page-arrow"><a data-page="next" href="/categories/index?page={{ pages }}{% if query|length > 0 %}?{{ query }}{% endif %}">›</a></li>

                                                {% endif %}                                                
                                                
                                                
                                                <li class="footable-page-arrow"><a data-page="next" href="/categories/index?page={{ pages }}{% if query|length > 0 %}?{{ query }}{% endif %}">›</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            </tfoot>
                        
                        {% endif %}

                    </table>
            {% else %}
            
                <div class="panel">
                    <div class="panel-body">
                        <div class="row">
                            <p>Nenhuma categoria cadastrada{% if query|length > 0 %} para a busca: '{{ query }}'{% endif %}.</p>
                        </div>
                    </div>
                </div>
                
            {% endif %}
        </div>
        <!--===================================================-->
        <!-- End Foo Table - Add & Remove Rows -->
    </div>

{% endblock %}

{% block modal %}
    <div id="newcategory" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="eq-box-sm">
                    <form id="categoryform" name="categoryform" action="/categories/create" method="post">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Nova Categoria</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 col-xs-12">
                                    <div class="form-group">
                                        <label class="control-label">Nome*</label>
                                        <input type="text" class="form-control" id="nomecateg" name="nomecateg" placeholder="Nome" required />
                                    </div>                                        
                                    <div class="form-group">
                                        <label class="control-label">Tipo*</label>
                                        <select id="tipocateg" name="tipocateg" class="form-control" required>
                                            <option value="0">Entrada</option>
                                            <option value="1">Saída</option>
                                        </select>
                                    </div>                                        
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                            <button type="submit" name="newcateg" class="btn btn-success">Salvar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>  
{% endblock %}

{% block footer %}
        <script>
            $(document).ready(function($)
                {

                }
            );
            function delCategory(id) 
            {
                swal({
                  title: "ATENÇÃO!",
                  text: "Deseja realmente remover esse registro? Essa ação é irreversível!",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                })
                .then((willDelete) => {
                  if (willDelete) {
                    window.location.replace("/categories/delete/" + id);
                  }
                });
            }
        </script>
{% endblock %}