{% extends 'baseadmin.html' %}

{% block title %}Produtos{% endblock %}

{% block pagetitle %}

    <div class="pageheader">
        <h3><i class="fa fa-barcode"></i> Produtos</h3>
        <div class="breadcrumb-wrapper">
            <span class="label">Você está em:</span>
            <ol class="breadcrumb">
                <li> <a href="/"> Home </a> </li>
                <li class="active"> Produtos </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="#newproduct">Novo Produto</button>
                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#massupload">Upload em Lote</button>
                        </div>
                    </div>
                    <div class="col-sm-6 text-xs-center text-right">
                        <form action="/products/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 class="btn btn-default"><i class="fa fa fa-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            {% if products %}
            
                    <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">Categoria</th>
                                <th class="text-center">Valor</th>
                                <th class="text-center">Gestão de Estoque?</th>
                                <th class="text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            {% for product in products %}
                            
                                <tr>
                                    <td class="text-center">{{ product.nome }}</td>
                                    <td class="text-center">{{ product.NOMECATEGORIA }}</td>
                                    <td class="text-center">R$ {{ product.valor|number_format(2, '.', ',') }}</td>
                                    <td class="text-center">{{ product.GERENCIARESTOQUE }}</td>
                                    <td class="text-center">
                                        <a href="/products/edit/{{ product.id }}" class="btn btn-warning fa fa-edit text-center"></a>
                                        
                                        {% if product.APAGAR_ESTOQUE <= 0 %}
                                        
                                            <button class="btn btn-danger fa fa-trash text-center" onclick="delProduct({{ product.id }})"></button>
                                            
                                        {% endif %} 
                                        
                                        
                                    </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="/products/index{% if query|length > 0 %}?{{ query }}{% endif %}">«</a></li>
                                                
                                                {% if current_page > 1 %}
                                                
                                                    <li class="footable-page-arrow"><a data-page="prev" href="/products/index?page={{ current_page - 1 }}{% if query|length > 0 %}?{{ query }}{% endif %}">‹</a></li>                                                
                                                
                                                {% else %}
                                                
                                                    <li class="footable-page-arrow"><a data-page="prev" href="/products/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="/products/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="/products/index?page={{ currentpage + 1 }}{% if query|length > 0 %}?{{ query }}{% endif %}">›</a></li>

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

                                                {% endif %}                                                
                                                
                                                
                                                <li class="footable-page-arrow"><a data-page="next" href="/products/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>Nenhum produto cadastrado{% 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="newproduct" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="eq-box-sm">
                    <form id="productform" name="productform" action="/products/create" method="post">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Novo Produto</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="nomeprod" name="nomeprod" placeholder="Nome" required />
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">Código</label>
                                        <input type="text" class="form-control" id="codigoprod" name="codigoprod" placeholder="Código" />
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">Categoria*</label>
                                        <select id="categprod" name="categprod" class="form-control bootstrapselect" data-live-search="true" required>
                                            
                                            {% for category in categories %}
                                            
                                                <option value="{{ category.id }}">{{ category.nome }}</option>
                                                
                                            {% endfor %}
                                            
                                        </select>
                                    </div>   
                                    <div class="form-group">
                                        <label class="control-label">Valor R$</label>
                                        <input type="text" class="form-control" id="valorprod" name="valorprod" placeholder="Valor R$" onkeypress="return isNumberKey(event)" />
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <div class="col-md-6 pad-no">
                                                <div class="checkbox">
                                                    <label class="form-checkbox form-icon active form-text">
                                                    <input type="checkbox" name="stockprod"> Gerenciar estoque</label>
                                                </div>
                                            </div>
                                        </div>
                                    </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>
    <div id="massupload" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="eq-box-sm">
                    <form id="uploadform" name="uploadform" action="/products/massupdate" enctype="multipart/form-data" method="post">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Inserção / Atualização de Produtos em Lote</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">Selecione planilha*</label>
                                        <input type="file" class="form-control" id="sheetprod" name="sheetprod" required />
                                    </div>                                        
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                            <button type="submit" name="newmassupload" class="btn btn-success">Salvar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>      
{% endblock %}

{% block footer %}
        <script>
            $(document).ready(function($)
                {
                    $('.bootstrapselect').selectpicker({
                      size: 4
                    });
                }
            );
            function delProduct(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("/products/delete/" + id);
                  }
                });
            }
        </script>
{% endblock %}