{% extends 'shared/base.html' %}
{% load static %}
{% block content %}
<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 %} mb-2">
        {{ message|linebreaksbr }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
</div>

<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">Cadastro de Protocolo</h5>
                </div>
            </div>
        </div>
    </div>
    <style>
#messages .alert {
    position: absolute;
}
#messages {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050; /* Garante que os alertas flutuem acima de outros elementos */
}


        .numero-botao {
            font-size: 1.5rem;
            /* ou qualquer tamanho que desejar */
            font-weight: bold;
        }

        .colorbg {
            background-color: #dfe0e4;
        }
    </style>
    <script>
        window.addEventListener('load', function () {
    const messages = document.querySelectorAll('#messages .alert');
    let offset = 0;

    messages.forEach(function (message) {
        message.style.top = `${offset}px`; // Define a posição vertical do alerta
        offset += message.offsetHeight + 10; // Aumenta o deslocamento para o próximo alerta, incluindo um espaçamento de 10px
    });
});

    </script>
    <form method="post">
        {% csrf_token %}
        <div class="card">
            <div class="content">
                <div class="canvas-wrapper">
                    <div class="row g-3 mb-4">
                        <div class="row my-5">
                            <div class="container-fluid p-2 d-flex justify-content-center">
                                <div class="d-flex justify-content-around w-75">
                                    <div class="text-center">
                                        <a class="btn bg-success text-white btn-sm rounded-pill d-flex justify-content-center align-items-center"
                                            style="width: 4rem; height: 4rem">
                                            <span class="numero-botao">1</span>
                                        </a>
                                        <p class="mt-2">Selecione o Cliente</p>
                                    </div>
                                    <span class="bg-success w-100 rounded d-flex justify-content-center align-items-center mx-2 mt-4"
                                        style="height: 0.5rem">
                                    </span>
                                    <div class="text-center">
                                        <a class="btn bg-success text-white btn-sm rounded-pill d-flex justify-content-center align-items-center"
                                            style="width: 4rem; height: 4rem">
                                            <span class="numero-botao">2</span>
                                        </a>
                                        <p class="mt-2">Informações Adicionais</p>
                                    </div>
                                    <span class="bg-success w-100 rounded d-flex justify-content-center align-items-center mx-2 mt-4"
                                        style="height: 0.5rem">
                                    </span>
                                    <div class="text-center">
                                        <a class="btn bg-success text-white btn-sm rounded-pill d-flex justify-content-center align-items-center"
                                            style="width: 4rem; height: 4rem">
                                            <span class="numero-botao">3</span>
                                        </a>
                                        <p class="mt-2">Selecione as Mudas</p>
                                    </div>
                                    <span class="bg-success w-100 rounded d-flex justify-content-center align-items-center mx-2 mt-4"
                                        style="height: 0.5rem">
                                    </span>
                                    <div class="text-center">
                                        <a class="btn bg-success text-white btn-sm rounded-pill d-flex justify-content-center align-items-center"
                                            style="width: 4rem; height: 4rem">
                                            <span class="numero-botao">4</span>
                                        </a>
                                        <p class="mt-2">Defina os Valores</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="card full-card ">
                                <h5 class="container-form-title fw-400">Informações adicionais dos Itens</h5>
                                <div class="card-body">
                                    <div class="row table-responsive">
                                        <table id="semeaduraValoresSaidas" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
                                            <thead class="bg-success bg-gradient text-white">
                                                <tr>
                                                    <th scope="col">N º</th>
                                                    <th scope="col">Número de Muda</th>
                                                    <th scope="col">Espécie (Nome vulgar + Nome científico)</th>
                                                    <th scope="col">Categoria</th>
                                                    <th scope="col">Quantidade de Mudas</th>
                                                    <th scope="col">Selecionar Quantidade</th>
                                                    <th scope="col">Valor Unitário</th>
                                                    <th scope="col">Valor Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for semeadura in semeaduras %}
                                                <tr data-semeadura-id="{{ semeadura.id }}">
                                                    <td>{{ forloop.counter }}</td> <!-- Aqui o número sequencial -->
                                                    <td>{{ semeadura.numero_muda }}</td>
                                                    <td>{{ semeadura.lote.especie.nome_popular }} + {{ semeadura.lote.especie.especies }}</td>
                                                    <td>
                                                        <select name="categoria_{{ semeadura.id }}" class="form-select">
                                                            <option value="" disabled selected>Selecione uma categoria</option>
                                                            <option value="Identificada">Identificada</option>
                                                            <option value="Selecionada">Selecionada</option>
                                                            <option value="Qualificada">Qualificada</option>
                                                            <option value="Testada">Testada</option>
                                                        </select>
                                                    </td>
                                                    <td>{{ semeadura.diferenca_qtd }}</td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="number" name="qtd_especie_{{ semeadura.id }}" class="form-control" />
                                                            <span class="input-group-text">Unidades</span>
                                                        </div>
                                                    </td>
                                                    
                                                    <td>
                                                        <div class="input-group">
                                                            <span class="input-group-text">R$</span>
                                                            <input type="number" step="0.01" name="valor_unit_{{ semeadura.id }}" class="form-control" />
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="input-group">
                                                            <span class="input-group-text">R$</span>
                                                            <input type="text" step="0.01" name="valor_total_{{ semeadura.id }}" class="form-control" readonly data-value="0.00" />
                                                        </div>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="4" class="text-end fw-bold">Total de Quantidades de Espécie</td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="text" id="total_qtd_especie" class="form-control" readonly />
                                                            <span class="input-group-text">Unidades</span>
                                                        </div>
                                                    </td>
                                                    <td class="text-end fw-bold">Total</td>
                                                    <td>
                                                        <div class="input-group">
                                                            <span class="input-group-text">R$</span>
                                                            <input type="text" id="total_sum" class="form-control" readonly />
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                            
                                        </table>
                                        <!-- Campo de Observação -->
<div class="col">
    <div class="mb-3">
        <label for="observacao" class="form-label">Observação</label>
        <textarea class="form-control" id="observacao" name="observacao" rows="4"></textarea>
    </div>
</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-secondary mt-3 w-25" id="prev-step4" onclick="history.back()">Anterior</button>
                            <button type="submit" class="btn btn-success mt-3 mx-3 w-25" id="submitButtonForm">
                                <span id="submitButtonTextForm">Salvar</span>
                                <div id="loadingSpinnerForm" class="spinner-border spinner-border-sm d-none" role="status">
                                    <span class="visually-hidden">Enviando...</span>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    document.querySelector('form').addEventListener('submit', function(event) {
        var submitButton = document.getElementById('submitButtonForm');
        var submitButtonText = document.getElementById('submitButtonTextForm');
        var loadingSpinner = document.getElementById('loadingSpinnerForm');

        // Desativar o botão de submit
        submitButton.disabled = true;

        // Substituir o texto pelo spinner
        submitButtonText.classList.add('d-none');
        loadingSpinner.classList.remove('d-none');
    });
</script>
<script>
    document.getElementById('prev-step4').addEventListener('click', function() {
        window.location.href = "{% url 'cadastro_protocolo' %}";
    });
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const rows = document.querySelectorAll('tr[data-semeadura-id]');
    const totalSumInput = document.getElementById('total_sum');
    const totalQtdEspecieInput = document.getElementById('total_qtd_especie');

    function formatCurrency(value) {
        return value.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function updateTotalSum() {
        let totalSum = 0;
        rows.forEach(row => {
            const valorTotalInput = row.querySelector('input[name^="valor_total_"]');
            const valorTotal = parseFloat(valorTotalInput.dataset.value) || 0;
            totalSum += valorTotal;
        });
        totalSumInput.value = formatCurrency(totalSum);
    }

    function updateTotalQtdEspecie() {
        let totalQtdEspecie = 0;
        rows.forEach(row => {
            const qtdInput = row.querySelector('input[name^="qtd_especie_"]');
            const qtd = parseFloat(qtdInput.value) || 0;
            totalQtdEspecie += qtd;
        });
        totalQtdEspecieInput.value = totalQtdEspecie.toLocaleString('pt-BR');
    }

    rows.forEach(row => {
        const qtdInput = row.querySelector('input[name^="qtd_especie_"]');
        const valorUnitInput = row.querySelector('input[name^="valor_unit_"]');
        const valorTotalInput = row.querySelector('input[name^="valor_total_"]');

        function updateValorTotal() {
            const qtd = parseFloat(qtdInput.value) || 0;
            const valorUnit = parseFloat(valorUnitInput.value) || 0;
            const valorTotal = qtd * valorUnit;
            valorTotalInput.dataset.value = valorTotal;
            valorTotalInput.value = formatCurrency(valorTotal);
            updateTotalSum();
            updateTotalQtdEspecie();
        }

        qtdInput.addEventListener('input', updateValorTotal);
        valorUnitInput.addEventListener('input', updateValorTotal);

        // Initialize with current values if present
        updateValorTotal();
    });

    updateTotalSum(); // Initial calculation
    updateTotalQtdEspecie(); // Initial calculation
});

</script>
<script>
    $(document).ready(function () {
        var table = $('#semeaduraValoresSaidas').DataTable({
            "scrollX": $(window).width() < 768,
            "paging": false,
            "searching": true, // Habilita filtro global
            "info": false,
            "language": {
                "emptyTable": "No data available in table"
            },
            "columnDefs": [
                {
                    "targets": 0, // Índice da coluna "Nº"
                    "orderable": false, // Desativa ordenação
                    "searchable": false, // Desativa busca/filtro
                },
            ],
            "drawCallback": function (settings) {
                var api = this.api();

                // Atualiza a numeração apenas para as linhas visíveis
                api.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1; // Recalcula numeração
                });
            }
        });
    });
</script>

{% endblock %}