{% extends 'shared/base.html' %}
{% 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 do Lote</h5>
        </div>
    </div>


    <!-- Filtro de Lotes -->
    <div class="row">
        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Filtrar Lotes</div>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-1">
                            <label for="numero_lote" class="form-label">Número do Lote</label>
                            <select id="numero_lote" name="numero_lote" class="form-select select2">
                                <option value="">Selecione um lote...</option>
                                {% for lote in lotes %}
                                <option value="{{ lote.numero_lote }}" {% if lote == lote_selecionado %}selected{% endif %}>
                                    {{ lote.numero_lote }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Informações do Lote Selecionado -->
        {% if lote_selecionado %}
        <div class="col-md-9">
            <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 do lote -->
                        <div class="col-lg">
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="especies" class="form-label">Espécie</label>
                                        <input type="text" id="especies" class="form-control"
                                            value="{{ lote_selecionado.especie }}" readonly data-bs-toggle="tooltip"
                                            data-bs-placement="top" data-bs-custom-class="custom-tooltip"
                                            data-bs-title="{{ lote_selecionado.especie }}">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="popular" class="form-label">Fornecedor</label>
                                        <input type="text" id="popular" class="form-control"
                                            value="{{ lote_selecionado.fornecedor }}" readonly data-bs-toggle="tooltip"
                                            data-bs-placement="top" data-bs-custom-class="custom-tooltip"
                                            data-bs-title="{{ lote_selecionado.fornecedor }}">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="familia" class="form-label">Data do Lote</label>
                                        <input type="text" id="familia" class="form-control"
                                            value="{{ lote_selecionado.data_lote|date:" d/m/Y" }}" readonly>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="familia" class="form-label">Registrado por</label>
                                        <input type="text" id="familia" class="form-control"
                                            value="{{ lote_selecionado_registrado_por }}" readonly data-bs-toggle="tooltip"
                                            data-bs-placement="top" data-bs-custom-class="custom-tooltip"
                                            data-bs-title="{{ lote_selecionado_registrado_por }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Dados Relacionados -->
    {% if semeaduras_com_repiques %}
    <div class="col-md">
        <div class="card shadow-sm">
            <div class="card-header">
                <div class="card-title">Semeaduras Relacionadas</div>
            </div>
            <div class="card-body">
                <div class="row">
    
                    <!-- Detalhes do lote -->
                    <div class="col-lg">
                        <div class="row">
                            <!-- Contêiner da tabela com overflow horizontal -->
                            <div style="overflow-x: auto;">
                                <table id="semeaduraTableRelated" class="table table-striped table-bordered nowrap" style="width: 100%;">
                                    <thead class="bg-success bg-gradient text-white">
                                        <tr>
                                            <th>Data da Semeadura</th>
                                            <th>Quantidade Utilizada (Kg)</th>
                                            <th>Sobra de Sementes (Kg)</th>
                                            <th>Método de Semeadura</th>
                                            <th>Local</th>
                                            <th>Registrado por</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in semeaduras_com_repiques %}
                                        <tr>
                                            <td>{{ item.semeadura.data_semeia|date:"d/m/Y" }}</td>
                                            <td>{{ item.semeadura.qtd_sementes_utilizada }}</td>
                                            <td>{{ item.semeadura.sobra_sementes }}</td>
                                            <td>{{ item.semeadura.metodo_semeadura }}</td>
                                            <td>{{ item.semeadura.local_semeadura }}</td>
                                            <td>{{ item.registrado_por_semeadura }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <div class="col-md">
        <div class="card shadow-sm">
            <div class="card-header">
                <div class="card-title">Repiques Relacionados</div>
            </div>
            <div class="card-body">
                <div class="row">

                    <!-- Detalhes do lote -->
                    <div class="col-lg">
                        <div class="row">
                            <div style="overflow-x: auto;">
                            <table id="repiquesTableRelated" class="table table-striped table-bordered nowrap" style="width: 100%;">
                                <thead class="bg-success bg-gradient text-white">
                                    <tr>
                                        <th>Data do Repique</th>
                                        <th>Quantidade Repicada (Kg)</th>
                                        <th>Finalizado</th>
                                        <th>Registrado por</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in semeaduras_com_repiques %}
                                    {% for repique in item.repiques_registrados_por %}
                                    <tr>
                                        <td>{{ repique.data_repique|date:"d/m/Y" }}</td>
                                        <td>{{ repique.quantidade_repicada }}</td>
                                        <td>{{ repique.finalizado|yesno:"Sim,Não" }}</td>
                                        <td>{{ repique.registrado_por }}</td>
                                    </tr>
                                    {% endfor %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md">
        <div class="card shadow-sm">
            <div class="card-header">
                <div class="card-title">Mortalidades Relacionadas</div>
            </div>
            <div class="card-body">
                <div class="row">

                    <!-- Detalhes do lote -->
                    <div class="col-lg">
                        <div class="row">
                            <div style="overflow-x: auto;">
                            <table id="mortalidadesTableRelated" class="table table-striped table-bordered nowrap" style="width: 100%;">
                                <thead class="bg-success bg-gradient text-white">
                                    <tr>
                                        <th>Data da Mortalidade</th>
                                        <th>Quantidade</th>
                                        <th>Finalizado</th>
                                        <th>Registrado por</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in semeaduras_com_repiques %}
                                    {% for estufa in item.estufas %}
                                    <tr>
                                        <td>{{ estufa.data_estufa|date:"d/m/Y" }}</td>
                                        <td>{{ estufa.quantidade_mortalidade }}</td>
                                        <td>{{ estufa.finalizado|yesno:"Sim,Não" }}</td>
                                        <td>{{ estufa.registrado_por }}</td>
                                    </tr>
                                    {% endfor %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md">
        <div class="card shadow-sm">
            <div class="card-header">
                <div class="card-title">Seleções Relacionadas</div>
            </div>
            <div class="card-body">
                <div class="row">

                    <!-- Detalhes do lote -->
                    <div class="col-lg">
                        <div class="row">
                            <div style="overflow-x: auto;">
                            <table id="selecaoTableRelated" class="table table-striped table-bordered nowrap" style="width: 100%;">
                                <thead class="bg-success bg-gradient text-white">
                                    <tr>
                                        <th>Data da Seleção</th>
                                        <th>Quantidade Selecionada (Kg)</th>
                                        <th>Venda</th>
                                        <th>Registrado por</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in semeaduras_com_repiques %}
                                    {% for selecao in item.selecoes %}
                                    <tr>
                                        <td>{{ selecao.data_selecao|date:"d/m/Y" }}</td>
                                        <td>{{ selecao.quantidade_selecao }}</td>
                                        <td>{{ selecao.venda|yesno:"Sim,Não" }}</td>
                                        <td>{{ selecao.registrado_por }}</td>
                                    </tr>
                                    {% endfor %}
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <p>Não há semeaduras registradas para este lote.</p>
    {% endif %}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('.select2').select2({
            placeholder: 'Digite para buscar...',
            allowClear: true
        });
        $('#semeaduraTableRelated').DataTable({
            columnDefs: [
                { type: 'date-br', targets: 1 },
                { type: 'diacritics-and-ligatures', targets: '_all' }
            ],
            searching: false,
            lengthChange: false,
            paging: false,
            scrollY: '400px',
            scrollCollapse: true,
            info: false,
            scrollX: true,          // Habilita rolagem horizontal
            fixedHeader: true       // Cabeçalho fixo
        });

        // Replique as mesmas configurações para outras tabelas
        $('#repiquesTableRelated').DataTable({
            columnDefs: [
                { type: 'date-br', targets: 1 },
                { type: 'diacritics-and-ligatures', targets: '_all' }
            ],
            searching: false,
            lengthChange: false,
            paging: false,
            scrollY: '400px',
            scrollCollapse: true,
            info: false,
            scrollX: true,
            fixedHeader: true
        });

        $('#mortalidadesTableRelated').DataTable({
            columnDefs: [
                { type: 'date-br', targets: 1 },
                { type: 'diacritics-and-ligatures', targets: '_all' }
            ],
            searching: false,
            lengthChange: false,
            paging: false,
            scrollY: '400px',
            scrollCollapse: true,
            info: false,
            scrollX: true,
            fixedHeader: true
        });

        $('#selecaoTableRelated').DataTable({
            columnDefs: [
                { type: 'date-br', targets: 1 },
                { type: 'diacritics-and-ligatures', targets: '_all' }
            ],
            searching: false,
            lengthChange: false,
            paging: false,
            scrollY: '400px',
            scrollCollapse: true,
            info: false,
            scrollX: true,
            fixedHeader: true
        });
    });
</script>



<script>
    document.addEventListener('DOMContentLoaded', function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });

</script>

{% endblock %}