{% 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ório de Lotes</h5>
        </div>
    </div>

    <!-- Filtro de Lotes -->
    <div class="row">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Filtrar Lotes</div>
                </div>
                <div class="card-body">
                    <form method="GET">
                        <div class="mb-3">
                            <label for="lote_id" class="form-label">Escolha o Lote</label>
                            <select name="lote_id" id="lote_id" class="form-select select2">
                                <option value="">Todos os lotes</option>
                                {% for lote_option in all_lotes %}
                                    <option value="{{ lote_option.id }}"
                                        {% if lote_option.id|stringformat:"s" == selected_lote_id|stringformat:"s" %}
                                            selected
                                        {% endif %}
                                    >
                                        {{ lote_option.numero_lote }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Checkboxes de filtro -->
                        <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>
                                <div class="col-6">
                                    <div class="form-check">
                                        <input type="checkbox" id="filterRepiques" class="form-check-input">
                                        <label for="filterRepiques" class="form-check-label">Repiques</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" id="filterEstufa" class="form-check-input">
                                        <label for="filterEstufa" class="form-check-label">Estufa/Seleção</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Exemplo: se quiser exibir dados do lote selecionado ao lado -->
        {% if lotes and lotes|length > 0 %}
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Lote Selecionado</div>
                </div>
                <div class="card-body">
                    {% for lote in lotes %}
                    <div class="row mb-2">
                        <div class="col-lg-4">
                            <label class="form-label">Número do Lote</label>
                            <input type="text" class="form-control" readonly
                                   value="{{ lote.numero_lote }}">
                        </div>
                        <div class="col-lg-4">
                            <label class="form-label">Data do Lote</label>
                            <input type="text" class="form-control" readonly
                                   value="{{ lote.data_lote|date:'d/m/Y' }}">
                        </div>
                        <div class="col-lg-4">
                            <label class="form-label">Fornecedor</label>
                            <input type="text" class="form-control" readonly
                                   value="{{ lote.fornecedor }}">
                        </div>
                    </div>

                    <!-- Outras infos do lote -->
                    <div class="row mb-2">
                        <div class="col-lg-4">
                            <label class="form-label">Registrado Por</label>
                            <input type="text" class="form-control" readonly
                                   value="{% if lote.registrado_por %}{{ lote.registrado_por.username }}{% else %}N/D{% endif %}">
                        </div>
                        <div class="col-lg-4">
                            <label class="form-label">Espécie (Científico / Popular)</label>
                            <input type="text" class="form-control" readonly
                                   value="{% if lote.especie %}{{ lote.especie.especies }} / {{ lote.especie.nome_popular }}{% else %}N/D{% endif %}">
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Tabela 2: Semeaduras -->
<div class="card shadow-sm filterable" id="semeaduraTableCard">
    <div class="card-header">
        <div class="card-title">Relatório de Semeaduras</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 do Semeio</th>
                        <th>Método</th>
                        <th>Local</th>
                        <th>Abertura</th>
                        <th>Qtd Utilizada (kg)</th>
                        <th>Sobra (kg)</th>
                        <th>Registrado Por</th>
                    </tr>
                </thead>
                <tbody>
                {% for semeadura in semeaduras %}
                    <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.sobra_sementes }}</td>
                        <td>
                            {% if semeadura.registrado_por %}
                                {{ semeadura.registrado_por.username }}
                            {% else %}
                                Não informado
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Tabela 3: Repiques -->
<div class="card shadow-sm filterable" id="repiqueTableCard">
    <div class="card-header">
        <div class="card-title">Relatório de Repiques</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 do Repique</th>
                        <th>Quantidade Repicada</th>
                        <th>Finalizado?</th>
                        <th>Registrado Por</th>
                    </tr>
                </thead>
                <tbody>
                    {% for repique in repiques %}
                    <tr>
                        <td>
                            {% if repique.cadastro_lote %}
                                {{ repique.cadastro_lote.numero_lote }}
                            {% elif repique.semeadura and repique.semeadura.lote %}
                                {{ repique.semeadura.lote.numero_lote }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ repique.data_repique|date:"d/m/Y" }}</td>
                        <td>{{ repique.quantidade_repicada }}</td>
                        <td>{{ repique.finalizado|yesno:"Sim,Não" }}</td>
                        <td>
                            {% if repique.registrado_por %}
                                {{ repique.registrado_por.username }}
                            {% else %}
                                Não informado
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Tabela 4: Estufa (Mortalidades) -->
<div class="card shadow-sm filterable" id="estufaTableCard">
    <div class="card-header">
        <div class="card-title">Relatório de Estufa (Mortalidades)</div>
    </div>
    <div class="card-body p-0 mt-3">
        <div class="table-responsive">
            <table id="dataTableEstufa" 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 da Estufa</th>
                        <th>Qtd Mortalidade</th>
                        <th>Finalizado?</th>
                        <th>Registrado Por</th>
                    </tr>
                </thead>
                <tbody>
                    {% for estufa in estufas %}
                    <tr>
                        <td>
                            {% if estufa.semeadura and estufa.semeadura.lote %}
                                {{ estufa.semeadura.lote.numero_lote }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ estufa.data_estufa|date:"d/m/Y" }}</td>
                        <td>{{ estufa.quantidade_mortalidade }}</td>
                        <td>{{ estufa.finalizado|yesno:"Sim,Não" }}</td>
                        <td>
                            {% if estufa.registrado_por %}
                                {{ estufa.registrado_por.username }}
                            {% else %}
                                Não informado
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Tabela 5: Seleção -->
<div class="card shadow-sm filterable" id="selecaoTableCard">
    <div class="card-header">
        <div class="card-title">Relatório de Estufa (Seleções)</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 da Seleção</th>
                        <th>Quantidade Selecionada</th>
                        <th>Venda?</th>
                        <th>Registrado por</th>
                    </tr>
                </thead>
                <tbody>
                    {% for selecao in selecoes %}
                    <tr>
                        <td>
                            {% if selecao.semeadura and selecao.semeadura.lote %}
                                {{ selecao.semeadura.lote.numero_lote }}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ selecao.data_selecao|date:"d/m/Y" }}</td>
                        <td>{{ selecao.quantidade_selecao }}</td>
                        <td>{{ selecao.venda|yesno:"Sim,Não" }}</td>
                        <td>
                            {% if selecao.registrado_por %}
                                {{ selecao.registrado_por.username }}
                            {% else %}
                                Não informado
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Scripts para DataTables e exibição condicional das cards -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Inicializar DataTables
    $('#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
    });
    $('#dataTableEstufa').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
    });

    // Controle de exibição de tabelas com filtros
    const filterAll = document.getElementById("filterAll");
    const filterSemeadura = document.getElementById("filterSemeadura");
    const filterRepiques = document.getElementById("filterRepiques");
    const filterEstufa = document.getElementById("filterEstufa");

    const tableCardSemeadura = document.getElementById("semeaduraTableCard");
    const tableCardRepique = document.getElementById("repiqueTableCard");
    const tableCardEstufa = document.getElementById("estufaTableCard");
    const tableCardSelecao = document.getElementById("selecaoTableCard");

    function toggleTables() {
        if (filterAll.checked) {
            tableCardSemeadura.style.display = "block";
            tableCardRepique.style.display = "block";
            tableCardEstufa.style.display = "block";
            tableCardSelecao.style.display = "block";
        } else {
            // Se o checkbox de Semeadura está marcado, exibe. Senão, oculta.
            tableCardSemeadura.style.display = filterSemeadura.checked ? "block" : "none";

            // Se o checkbox de Repiques está marcado, exibe. Senão, oculta.
            tableCardRepique.style.display = filterRepiques.checked ? "block" : "none";

            // Se marcar "Estufa", exibimos Estufa E Seleção
            const showEstufaSelecao = filterEstufa.checked ? "block" : "none";
            tableCardEstufa.style.display = showEstufaSelecao;
            tableCardSelecao.style.display = showEstufaSelecao;
        }
    }

    // Quando "Todos" é marcado, desmarca os outros
    filterAll.addEventListener("change", function () {
        if (this.checked) {
            filterSemeadura.checked = false;
            filterRepiques.checked = false;
            filterEstufa.checked = false;
        }
        toggleTables();
    });

    [filterSemeadura, filterRepiques, filterEstufa].forEach((filter) => {
        filter.addEventListener("change", function () {
            filterAll.checked = false;
            toggleTables();
        });
    });

    toggleTables(); // faz a verificação inicial
});
</script>

{% endblock %}