viaseg html 2

{% extends 'base.html' %}
{% load staticfiles %}
{% load my_tags %}

{% block css %}
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/relatorios.css' %}"/>
    <script src="{% static 'js/questionCircle.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="../../static/js/pdf.js"></script>
    <script src="https://cdn.rawgit.com/simonbengtsson/jsPDF/requirejs-fix-dist/dist/jspdf.debug.js"></script>
    <script src="https://unpkg.com/jspdf-autotable@2.3.2"></script>

{% endblock %}


{% block content %}
<div class="relatorios">
        <div class="relatorios__sidebar">
            <a href="{% url 'list' %}" class="relatorios__sidebar-back"><img src="../../static/img/left-arrow.png">Voltar</a>
            <p>Relatório</p>
        </div>
        <div class="relatorios__content">
            <div class="relatorios__content__filtros">
                <p>Filtros:</p>
                <form method="GET">
                    <div class="filtros__boxes">
                        <input name="check-date" type="checkbox" class="filtros__checkbox">
                        <p>Data da Vistoria: De </p>
                        <div class="circle-help">
                            <input name="initial-date" id="date" type="date" class="filtros__date">
                            <div id="help-id" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id')" onmouseout="disappear('help-id')" class="far fa-question-circle icon"></i>
                        </div>
                        <p> Até </p>
                        <div class="circle-help">
                            <input name="end-date" id="date" type="date" class="filtros__date">
                            <div id="help-id2" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id2')" onmouseout="disappear('help-id2')" class="far fa-question-circle icon"></i>
                        </div>
                    </div>
                    <div class="filtros__boxes">
                        <input name="check-date-register" type="checkbox" class="filtros__checkbox">
                        <p>Data de Cadastro: De </p>
                        <div class="circle-help">
                            <input name="initial-date-register" id="date" type="date" class="filtros__date">
                            <div id="help-id-r1" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id-r1')" onmouseout="disappear('help-id-r1')" class="far fa-question-circle icon"></i>
                        </div>
                        <p> Até </p>
                        <div class="circle-help">
                            <input name="end-date-register" id="date" type="date" class="filtros__date">
                            <div id="help-id-r2" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id-r2')" onmouseout="disappear('help-id-r2')" class="far fa-question-circle icon"></i>
                        </div>
                    </div>
                    <div class="filtros__boxes">
                        <input name="check-group" type="checkbox" class="filtros__checkbox">
                        <p>Grupo de Concessionária: </p>
                        <div class="circle-help">
                            <select name="group" class="filtros__select">
                                <option value="" disabled selected>Selecione...</option>
                                {% for group in group_list %}
                                    <option value="{{group.pk}}" name="{{group.pk}}">{{group.Nome}}</option>
                                {% endfor %}
                            </select>
                            <div id="help-id3" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id3')" onmouseout="disappear('help-id3')" class="far fa-question-circle icon"></i>
                        </div>
                    </div>
                    <div class="filtros__boxes">
                        <input name="check-concessionaria" type="checkbox" class="filtros__checkbox">
                        <p>Concessionária: </p>
                        <div class="circle-help">
                            <select class="filtros__select" name="concessionaria">
                                <option value="" disabled selected>Selecione...</option>
                                {% for concessionaria in concessionaria_list %}
                                    <option value="{{concessionaria.pk}}">{{concessionaria.Nome}}</option>
                                {% endfor %}
                              </select>

                            <div id="help-id4" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id4')" onmouseout="disappear('help-id4')" class="far fa-question-circle icon"></i>
                        </div>
                    </div>
                    <div class="filtros__boxes">
                        <input name="check-setor" type="checkbox" class="filtros__checkbox">
                        <p>Setor: </p>
                        <div class="circle-help">
                            <select name="setor" class="filtros__select">
                                <option value="" disabled selected>Selecione...</option>
                                {% for setor in setor_list %}
                                    <option value="{{setor.pk}}">{{setor.Nome}}</option>
                                {% endfor %}
                              </select>
                            <div id="help-id5" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id5')" onmouseout="disappear('help-id5')" class="far fa-question-circle icon"></i>
                        </div>
                    </div>
                    <div class="filtros__boxes"><!--Falta ajustar!-->
                        <input id="check-vendedor" type="checkbox" class="filtros__checkbox">
                        <p>Vendedor: </p>
                        <div class="circle-help">
                            <select class="filtros__select">
                                <option value="" disabled selected>Selecione...</option>

                              </select>
                            <div id="help-id6" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id6')" onmouseout="disappear('help-id6')" class="far fa-question-circle icon"></i>
                        </div>
                    </div>
                    <div class="filtros__boxes">
                        <input name="check-pagamento" type="checkbox" class="filtros__checkbox">
                        <p>Modo de Pagamento: </p>
                        <div class="circle-help">
                            <select name="pagamento"class="filtros__select">
                                <option value="" disabled selected>Selecione...</option>
                                {% for pagamento in pagamento_list %}
                                    <option value="{{pagamento.pk}}">{{pagamento.Modos}}</option>
                                {% endfor %}
                            </select>
                            <div id="help-id7" class="help">
                                <span> Preencha a lacuna com qual foi a xxxxx em que a vistoria foi realizada</span>
                            </div>
                            <i onmouseover="appear('help-id7')" onmouseout="disappear('help-id7')" class="far fa-question-circle icon"></i>
                        </div>
                    </div>
                    <div class="submit__box">
                        <input type="submit" value="Filtrar" class="button-filtrar">
                        <div class="relatorios__utils">
                            <div class="relatorios__utils__box download">
                                <p>Download:</p>
                                <button class="utils__button" type = "button"><i class="fas fa-download icon-button" onclick="generate()"></i></button>
                            </div>
                            <div class="relatorios__utils__box imprimir">
                                <p>Imprimir:</p>
                                <button class="utils__button" type="button"><i class="fas fa-print icon-button"></i></button>
                            </div>
                        </div>
                    </div>
                </form>
                <table class="tabela-vistorias" id="basic-table">
                        <tr>
                          <th>Número</th>
                          <th>Data de Vistoria</th>
                          <th>Grupo</th>
                          <th>Concessionária</th>
                          <th>Placa</th>
                          <th>Setor</th>
                          <th>Vendedor</th>
                          <th>Modo de Pagamento</th>
                          <th>Valor</th>
                        </tr>

                        {% for relatorio in object_list %}
                            <tr>
                                <td>{{relatorio.pk}}.</td>
                                <td>{{relatorio.Data_de_Registro.day}}/
                                    {{relatorio.Data_de_Registro.month}}/
                                    {{relatorio.Data_de_Registro.year}}
                                </td>
                                <td>{{relatorio.Grupo_da_concessionaria.Nome}}</td>
                                <td>{{relatorio.Concessionaria.Nome}}</td>
                                <td>{{relatorio.Placa}}</td>
                                <td>{{relatorio.Setor.Nome}}</td>
                                <td>{{relatorio.Vendedor}}</td>
                                <td>{{relatorio.Modos_de_pagamento.Modos}}</td>
                                <td>{{relatorio.Valor_pago}}</td>
                            </tr>
                        {% endfor %}
                </table>
            </div>
            {% if is_paginated %}
                <ul class="pagination">
                    {% if page_obj.has_previous %}
                        <li class="no-active"><a href="?{% param_replace page=page_obj.previous_page_number %}">&laquo;</a></li>
                    {% else %}
                        <li class="disabled"><span>&laquo;</span></li>
                    {% endif %}

                    {% for i in paginator.page_range %}
                        {% if page_obj.number == i %}
                            <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
                        {% else %}
                            <li class="no-active"><a href="?{% param_replace page=i %}">{{ i }}</a></li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <li class="no-active"><a href="?{% param_replace page=page_obj.next_page_number %}">&raquo;</a></li>
                    {% else %}
                        <li class="disabled"><span>&raquo;</span></li>
                    {% endif %}
                </ul>
            {% endif %}
            <!-- {%include 'pagination.html'%} -->
        </div>

      </div>
{% endblock %}