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

<div class="content">
    <!-- Cabeçalho -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body bg-success text-white rounded-top">
            <h5 class="mb-0">Relatórios de Espécies</h5>
        </div>
    </div>

    <!-- Filtro de Espécies -->
    <div class="row">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Filtrar Espécies</div>
                </div>
                <div class="card-body">
                    <form method="get" action="{% url 'relatorio_especies' %}">
                        <div class="mb-3">
                            <label for="especie_selecionada" class="form-label">Espécie</label>
                            <select id="especie_selecionada" name="especie_selecionada" class="form-select select2">
                                <option value="" selected>Selecione uma espécie...</option>
                                {% for especie in especies %}
                                <option value="{{ especie.id }}" {% if especie_selecionada and especie_selecionada.id == especie.id %}selected{% endif %}>
                                    {{ especie.nome_popular }} - {{ especie.especies }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Exibir:</label>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input type="checkbox" id="filterAll" class="form-check-input" checked>
                                        <label for="filterAll" class="form-check-label">Todos</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" id="filterSemeadura" class="form-check-input">
                                        <label for="filterSemeadura" class="form-check-label">Semeadura</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" id="filterEstufa" class="form-check-input">
                                        <label for="filterEstufa" class="form-check-label">Estufa</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-check">
                                        <input type="checkbox" id="filterValores" class="form-check-input">
                                        <label for="filterValores" class="form-check-label">Vendas</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" id="filterRepiques" class="form-check-input">
                                        <label for="filterRepiques" class="form-check-label">Repiques</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Informações da Espécie Selecionada -->
        {% if especie_selecionada %}
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Informações da Espécie Selecionada</div>
                </div>
                <div class="card-body">
                    <div class="row">

                        <!-- Detalhes da Espécie -->
                        <div class="col-lg">
                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="especies" class="form-label">Nome Científico</label>
                                        <input type="text" id="especies" class="form-control"
                                            value="{{ especie_selecionada.especies }}" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="popular" class="form-label">Nome Popular</label>
                                        <input type="text" id="popular" class="form-control"
                                            value="{{ especie_selecionada.nome_popular }}" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="familia" class="form-label">Família</label>
                                        <input type="text" id="familia" class="form-control"
                                            value="{{ especie_selecionada.familia }}" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="risco_extincao" class="form-label">Risco de Extinção</label>
                                        <input type="text" id="risco_extincao" class="form-control"
                                            value="{{ especie_selecionada.risco_extincao }}" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="bioma" class="form-label">Bioma</label>
                                        <input type="text" id="bioma" class="form-control"
                                            value="{{ especie_selecionada.bioma }}" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="form-group">
                                        <label for="formacao_vegetal" class="form-label">Formação Vegetal</label>
                                        <input type="text" id="formacao_vegetal" class="form-control"
                                            value="{{ especie_selecionada.formacao_vegetal }}" readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="fitofisionomias" class="form-label">Fitofisionomias</label>
                                        <input type="text" id="fitofisionomias" class="form-control"
                                            value="{{ especie_selecionada.fitofisionomias }}" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="presenca_estados" class="form-label">Presença nos Estados</label>
                                        <input type="text" id="presenca_estados" class="form-control"
                                            value="{{ especie_selecionada.presenca_estados }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Tabela de Vendas por Data -->
    <div class="card shadow-sm filterable" id="valoresTable">
            <div class="card-header">
                <div class="card-title">Relatório de venda</div>
            </div>
            <div class="card-body p-0 mt-3">
            <div class="table-responsive">
                <table id="dataTableEspeciesReport" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
                    <thead class="bg-success bg-gradient text-white">
                        <tr>
                            <th>Data</th>
                            <th>Quantidade Vendida</th>
                            <th>Valor Monetário</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if vendas_por_data and vendas_por_data|length > 0 %}
                            {% for venda in vendas_por_data %}
                            <tr>
                                <td>{{ venda.data|date:"d/m/Y" }}</td>
                                <td>{{ venda.quantidade }}</td>
                                <td>R$ {{ venda.valor_monetario|floatformat:2 }}</td>
                            </tr>
                            {% endfor %}
                            <tr class="table-secondary">
                                <td><strong>Total</strong></td>
                                <td><strong>{{ total_mudas_vendidas }}</strong></td>
                                <td><strong>R$ {{ total_valor_monetario|floatformat:2 }}</strong></td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="3" class="text-center">Nenhuma venda registrada para esta espécie.</td>
                            </tr>
                        {% endif %}
                    </tbody>
                    
                </table>
            </div>
        </div>
    </div>

    <!-- Tabela de Semeaduras -->
    <div class="card shadow-sm filterable" id="semeaduraTableCard">
        <div class="card-header">
            <div class="card-title">Relatório de semeadura</div>
        </div>
        <div class="card-body p-0 mt-3">
            <div class="table-responsive">
                <table id="dataTableSemeadura" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
                    <thead class="bg-success bg-gradient text-white">
                        <tr>
                            <th>Número do Lote</th>
                            <th>Data de Semeio</th>
                            <th>Método</th>
                            <th>Local</th>
                            <th>Abertura</th>
                            <th>Qtd Utilizada</th>
                            <th>Registrado Por</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if semeaduras_por_especie and semeaduras_por_especie|length > 0 %}
                            {% for semeadura in semeaduras_por_especie %}
                            <tr>
                                <td>{{ semeadura.lote__numero_lote }}</td>
                                <td>{{ semeadura.data_semeia|date:"d/m/Y" }}</td>
                                <td>{{ semeadura.metodo_semeadura }}</td>
                                <td>{{ semeadura.local_semeadura }}</td>
                                <td>{{ semeadura.abertura }}</td>
                                <td>{{ semeadura.qtd_sementes_utilizada }}</td>
                                <td>{{ semeadura.registrado_por__username }}</td>
                            </tr>
                            {% endfor %}
                        {% endif %}
                    </tbody>
                    <tfoot>
                        <tr class="table-secondary">
                            <td colspan="5"><strong>Total</strong></td>
                            <td><strong>{{ total_qtd_utilizada }}</strong></td>
                            <td></td>
                        </tr>
                    </tfoot>                    
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Tabela de Repiques -->
<div class="card shadow-sm filterable" id="repiqueTableCard">
    <div class="card-header">
        <div class="card-title">Relatório de repique</div>
    </div>
    <div class="card-body p-0 mt-3">
        <div class="table-responsive">
            <table id="dataTableRepique" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
                <thead class="bg-success bg-gradient text-white">
                    <tr>
                        <th>Número do Lote</th>
                        <th>Data de Repique</th>
                        <th>Quantidade Repicada</th>
                        <th>Registrado Por</th>
                    </tr>
                </thead>
                <tbody>
                    {% if repiques_por_especie and repiques_por_especie|length > 0 %}
                    {% for repique in repiques_por_especie %}
                    <tr>
                        <td>{{ repique.semeadura__lote__numero_lote }}</td>
                        <td>{{ repique.data_repique|date:"d/m/Y" }}</td>
                        <td>{{ repique.quantidade_repicada }}</td>
                        <td>{{ repique.registrado_por__username }}</td>
                    </tr>
                    {% endfor %}
                    {% endif %}
                </tbody>
                <tfoot>
                    <tr class="table-secondary">
                        <td colspan="2"><strong>Total</strong></td>
                        <td><strong>{{ total_qtd_repicada }}</strong></td>
                        <td></td>
                    </tr>
                </tfoot>                
            </table>
        </div>
    </div>
</div>

<!-- Tabela de Selecao -->
<div class="card shadow-sm filterable" id="selecaoTableCard">
    <div class="card-header">
        <div class="card-title">Relatório de Seleção/Estufa</div>
    </div>
    <div class="card-body p-0 mt-3">
        <div class="table-responsive">
            <table id="dataTableSelecao" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
                <thead class="bg-success bg-gradient text-white">
                    <tr>
                        <th>Número do Lote</th>
                        <th>Data Seleção</th>
                        <th>Quantidade Seleção</th>
                        <th>Registrado Por</th>
                    </tr>
                </thead>
                <tbody>
                    {% for selecao in selecoes_por_especie %}
                    <tr>
                        <td>{{ selecao.semeadura__lote__numero_lote }}</td>
                        <td>{{ selecao.data_selecao|date:"d/m/Y" }}</td>
                        <td>{{ selecao.quantidade_selecao }}</td>
                        <td>{{ selecao.registrado_por__username }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr class="table-secondary">
                        <td colspan="2"><strong>Total</strong></td>
                        <td><strong>{{ total_qtd_selecao }}</strong></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<!-- Tabela de Mortalidades -->
<div class="card shadow-sm filterable" id="mortalidadesTableCard">
    <div class="card-header">
        <div class="card-title">Relatório de Mortalidades/Estufa</div>
    </div>
    <div class="card-body p-0 mt-3">
        <div class="table-responsive">
            <table id="dataTableMortalidades" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
                <thead class="bg-success bg-gradient text-white">
                    <tr>
                        <th>Número do Lote</th>
                        <th>Data Estufa</th>
                        <th>Quantidade Mortalidade</th>
                        <th>Registrado Por</th>
                    </tr>
                </thead>
                <tbody>
                    {% for estufa in estufas_por_especie %}
                    <tr>
                        <td>{{ estufa.semeadura__lote__numero_lote }}</td>
                        <td>{{ estufa.data_estufa|date:"d/m/Y" }}</td>
                        <td>{{ estufa.quantidade_mortalidade }}</td>
                        <td>{{ estufa.registrado_por__username }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr class="table-secondary">
                        <td colspan="2"><strong>Total</strong></td>
                        <td><strong>{{ total_qtd_mortalidade }}</strong></td>
                        <td></td>
                    </tr>
                </tfoot>            
            </table>
        </div>
    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Inicializar DataTables com IDs específicos
        $('#dataTableEspeciesReport').DataTable({
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/pt-BR.json"
            },
            searching: true,
            lengthChange: true,
            pageLength: 25
        });
    
        $('#dataTableSemeadura').DataTable({
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/pt-BR.json"
            },
            searching: true,
            lengthChange: true,
            pageLength: 25
        });
    
        $('#dataTableRepique').DataTable({
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/pt-BR.json"
            },
            searching: true,
            lengthChange: true,
            pageLength: 25
        });
    
        $('#dataTableSelecao').DataTable({
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/pt-BR.json"
            },
            searching: true,
            lengthChange: true,
            pageLength: 25
        });
    
        $('#dataTableMortalidades').DataTable({
            language: {
                url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/pt-BR.json"
            },
            searching: true,
            lengthChange: true,
            pageLength: 25
        });
    
        // Controle de exibição de tabelas com filtros
        const filterAll = document.getElementById("filterAll");
        const filterSemeadura = document.getElementById("filterSemeadura");
        const filterValores = document.getElementById("filterValores");
        const filterRepiques = document.getElementById("filterRepiques");
        const filterEstufa = document.getElementById("filterEstufa");
    
        const tableCardSemeadura = document.getElementById("semeaduraTableCard");
        const tableCardValores = document.getElementById("valoresTable");
        const tableCardRepique = document.getElementById("repiqueTableCard");
        const tableCardSelecao = document.getElementById("selecaoTableCard");
        const tableCardMortalidades = document.getElementById("mortalidadesTableCard");
    
        function toggleTables() {
            if (filterAll.checked) {
                tableCardSemeadura.style.display = "block";
                tableCardValores.style.display = "block";
                tableCardRepique.style.display = "block";
                tableCardSelecao.style.display = "block";
                tableCardMortalidades.style.display = "block";
            } else {
                tableCardSemeadura.style.display = filterSemeadura.checked ? "block" : "none";
                tableCardValores.style.display = filterValores.checked ? "block" : "none";
                tableCardRepique.style.display = filterRepiques.checked ? "block" : "none";
    
                const estufaVisible = filterEstufa.checked;
                tableCardSelecao.style.display = estufaVisible ? "block" : "none";
                tableCardMortalidades.style.display = estufaVisible ? "block" : "none";
            }
        }
    
        filterAll.addEventListener("change", function () {
            if (this.checked) {
                filterSemeadura.checked = false;
                filterValores.checked = false;
                filterRepiques.checked = false;
                filterEstufa.checked = false;
            }
            toggleTables();
        });
    
        [filterSemeadura, filterValores, filterRepiques, filterEstufa].forEach(filter => {
            filter.addEventListener("change", function () {
                filterAll.checked = false;
                toggleTables();
            });
        });
    
        toggleTables();
    });
    </script>
{% endblock %}