{% extends 'shared/base.html' %} {% load custom_filters %} {% load static %} {% block content %}

<div class="content">
    <div class="card my-2">
        <div class="card-body bg-success bg-gradient text-white rounded-2">
            <div class="row flex-between-center">
                <div class="col-md d-flex align-items-center">
                    <h5 class="mb-2 mb-md-0">Lista de Protocolos</h5>
                </div>
                <div class="col-auto">
                    <a href="{% url 'cadastro_protocolo' %}" class="btn btn-primary">Cadastrar Protocolo</a>
                </div>
                <div class="col-auto">
                    <a href="{% url 'lista_de_protocolos' %}" class="btn btn-danger">Lista de Protocolos</a>
                </div>
            </div>
        </div>
    </div>
    <div id="messages" class="col-md-12">
        {% for message in messages %}
        <div
            class="alert alert-dismissible fade show {% if message.tags == 'success' %}alert-success {% elif message.tags == 'error' %}alert-danger {% endif %}">
            {{ message }}
        </div>
        {% endfor %}
    </div>

    <div class="card py-3">
        <div class="content-fluid">
            <table id="especiesTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
                width="100%">
                <thead class="bg-success bg-gradient text-white">
                    <tr>
                        <th scope="col">Número do Protocolo</th>
                        <th scope="col">Data de Criação</th>
                        <th scope="col">Quantidade de Mudas</th>
                        <th scope="col">Nome Cliente / Empresa</th>
                        <th class="text-center tamanho"><i class="fa fa-cog"></i></th>
                    </tr>
                </thead>
                <tbody>
                    {% for saida_especie in ultimos_registros %}
                    <tr>
                        <td>{{ saida_especie.cadastrosaida.numero_protocolo }}</td>
                        <td>{{ saida_especie.cadastrosaida.data_criacao|date:"d/m/Y" }}</td>
                        <td>{{ saida_especie.total_qtd_especie }}</td>
                        <td>
                            {% if saida_especie.cadastrosaida.cliente %}
                            {{ saida_especie.cadastrosaida.cliente }}
                            {% else %}
                            {{ saida_especie.cadastrosaida.empresa }}
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <div class="d-flex justify-content-center align-items-center">
                                <form method="POST" action="{% url 'gerar_pdf' %}" class="me-2">
                                    {% csrf_token %}
                                    <input type="hidden" name="numero_protocolo"
                                        value="{{ saida_especie.cadastrosaida.numero_protocolo }}">
                                    <button type="submit" class="btn btn-danger"><i
                                            class="fa-solid fa-file-pdf"></i></button>
                                </form>
                                <form method="POST" action="{% url 'gerar_pdf_termo_conformidade' %}" class="me-2">
                                    {% csrf_token %}
                                    <input type="hidden" name="numero_protocolo"
                                        value="{{ saida_especie.cadastrosaida.numero_protocolo }}">
                                    <button type="submit" class="btn btn-success"><i
                                            class="fa-solid fa-file-pdf"></i></button>
                                </form>
                                <!--
                                    {% if saida_especie.cadastrosaida_id %}
                                        <a href="{% url 'editar_tabela' cadastrosaida_id=saida_especie.cadastrosaida_id %}" class="btn btn-primary">Editar Lista</a>
                                    {% else %}
                                        <p>Não foi possível determinar o ID do cadastro para edição.</p>
                                    {% endif %} -->
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

        </div>
    </div>
</div>

<!-- MODAL DE VISUALIZAÇÃO DE INFORMAÇÕES -->
<div class="modal fade modal-view" id="especiesTableModal" tabindex="-1" role="dialog"
    aria-labelledby="especiesTableModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content rounded-0">
            <div class="modal-body py-0">
                <div class="d-flex main-content">
                    <div class="bg-image promo-img mr-3 d-none d-md-block">
                        <img id="modal-img" src="" alt="Imagem da Espécie" style="width: 400px; height: 600px">
                    </div>
                    <div class="content-text p-4 px-5">
                        <div class="text-end">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="text-center">
                            <h3 class="my-3 line" id="modalTitle"></h3>
                        </div>

                        <div class="text-start" style="width: 300px;">
                            <p><strong>Nome Popular:</strong> <span id="modal-nome"></span></p>
                            <p><strong>Risco de Extinção:</strong> <span id="modal-risco"></span></p>
                            <p><strong>Presença nos Estados:</strong> <span id="modal-estados"></span></p>
                            <p><strong>Familía:</strong> <span id="modal-familia"></span></p>
                            <p><strong>Bioma:</strong> <span id="modal-bioma"></span></p>
                            <p><strong>Formação Vegetal:</strong> <span id="modal-formacao_vegetal"></span></p>
                            <p><strong>Fitofisionomias:</strong> <span id="modal-fitofisionomias"></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END -->

<!-- MODAL PARA EXCLUSÃO DE DADOS -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-delete">
        <div class="modal-content">
            <div class="modal-header flex-column">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="icon-box">
                    <i class="material-icons fa-solid fa-xmark"></i>
                </div>
                <h4 class="modal-title w-100">Tem certeza?</h4>
            </div>
            <div class="modal-body">
                <p>Você realmente deseja excluir esses registros? Este processo não pode ser desfeito.</p>
            </div>
            <p id="especieInfoPopular" class="text-start"></p>
            <p id="especieInfo" class="text-start"></p>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" id="cancelDelete">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Deletar</button>
            </div>
        </div>
    </div>
</div>
<!-- END -->

<script src="{% static 'assets/js/especiesList.js' %}"></script>

<script>
    var deleteUrl = "{% url 'deletar_especies' 0 %}";
</script>

{% endblock %}
</body>

</html>