{% extends 'shared/base.html' %}
{% load custom_filters %}
{% 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 %}">
        {{ message }}
    </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>
        .numero-botao {
            font-size: 1.5rem;
            /* ou qualquer tamanho que desejar */
            font-weight: bold;

        }

        .colorbg {
            background-color: #dfe0e4;
        }
    </style>
    <style>
        .highlighted-row {
            background-color: #4e9bee !important; /* Fundo azul */
            color: white !important; /* Texto branco */
        }

        .highlighted-row td, .highlighted-row th {
            color: white !important; /* Garante que as células da linha tenham o texto branco */
        }
    </style>

    <form method="post" id="protocolo-form">
        {% csrf_token %}
        <div class="card">
            <div class="content">
                <div class="canvas-wrapper">
                    <div class="row g-3 mb-4">
                        <div id="step1" class="form-step">

                            <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="colorbg 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 colorbg text-dark 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="colorbg 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 colorbg text-dark 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="colorbg 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 colorbg text-dark 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 do Cliente</h5>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-4">
                                                <label class="form-label">{{ form.tipo_cliente.label_tag }}</label>
                                                {{ form.tipo_cliente }}
                                            </div>
                                            <div id="cliente-fisico-container" class="col-4" style="display: none;">
                                                <label class="form-label">{{ form.cliente_fisico.label_tag }}</label>
                                                {{ form.cliente_fisico }}
                                            </div>
                                            <div id="cliente-empresa-container" class="col-4" style="display: none;">
                                                <label class="form-label">{{ form.cliente_empresa.label_tag }}</label>
                                                {{ form.cliente_empresa }}
                                            </div>
                                        </div>
                                        <div id="cliente-info" class="col-12 mt-2"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-success mt-3 w-25" id="next-step1">Próximo</button>
                            </div>
                        </div>


                        <div class="row">
                            <div id="step2" class="form-step col" style="display:none;">

                                <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="colorbg 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 colorbg text-dark 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="colorbg 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 colorbg text-dark 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 do Adicionais</h5>
                                        <div class="card-body">
                                            <div class="row">
                                                <!-- Tipo De pagamento -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.tipo_pagamento.label_tag }}</label>
                                                    {{ form.tipo_pagamento }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Destino Mudas -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.destino_muda.label_tag }}</label>
                                                    {{ form.destino_muda }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Data Saida -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.data_saida_protocolo.label_tag }}</label>
                                                    {{ form.data_saida_protocolo }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Numero Pedido -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.num_pedido.label_tag }}</label>
                                                    {{ form.num_pedido }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Placa -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.placa_veiculo.label_tag }}</label>
                                                    {{ form.placa_veiculo }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Responsavel Recebimento -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.resp_recebimento.label_tag }}</label>
                                                    {{ form.resp_recebimento }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Produtor -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.produtor.label_tag }}</label>
                                                    {{ form.produtor }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Renasem produtor -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.renasem_produtor.label_tag }}</label>
                                                    {{ form.renasem_produtor }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Responsavel Tecnico -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.resp_tecnico.label_tag }}</label>
                                                    {{ form.resp_tecnico }}
                                                </div>
                                                <!-- ********** -->

                                                <!-- Renasem tecnico -->
                                                <div class="col-4">
                                                    <label class="form-label">{{ form.renasem_tecnico.label_tag }}</label>
                                                    {{ form.renasem_tecnico }}
                                                </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-step2">Anterior</button>
                                    <button type="button" class="btn btn-success mt-3 mx-3 w-25"
                                        id="next-step2">Próximo</button>
                                </div>
                            </div>


                            <div id="step3" class="form-step col" style="display:none;">

                                 <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="colorbg 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 colorbg text-dark 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">Seleção de Mudas</h5>
                                        <div class="card-body">
                                            <div class="row">
                                                <table id="semeadurasSaidas"
                                                    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">Selecionar</th>
                                                            <th scope="col">Espécie (Nome vulgar + Nome científico)</th>
                                                            <th scope="col">Número do Lote</th>
                                                            <th scope="col">Quantidade de Mudas</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for semeadura in semeadura_choices %}
                                                        <tr>
                                                            <td>
                                                                <input type="checkbox" name="semeaduras"
                                                                    value="{{ semeadura.id }}"
                                                                    id="semeadura_{{ semeadura.id }}">
                                                            </td>
                                                            <td>{{ semeadura.lote.especie.nome_popular }} + {{ semeadura.lote.especie.especies }}</td>
                                                            <td>{{ semeadura.numero_muda }}</td>
                                                            <td>{{ semeadura.diferenca_qtd }}</td> <!-- Exibindo a diferença de quantidade -->
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="d-flex justify-content-end">
                                    <button type="button" class="btn btn-secondary mt-3 w-25"
                                        id="prev-step3">Anterior</button>
                                    <button type="submit" class="btn btn-success mt-3 mx-3 w-25"
                                        id="next-step3">Próximo</button>
                                </div>

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

<script>
    $(document).ready(function () {
        var table = $('#semeadurasSaidas').DataTable({
            responsive: true,
            "scrollX": $(window).width() < 768,
            "paging": false,
            "searching": false,
            "info": false,
            "language": {
                "emptyTable": "No data available in table"
            }
        })
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tipoClienteSelect = document.getElementById('tipo_cliente');
        const clienteFisicoSelect = document.getElementById('cliente_fisico');
        const clienteEmpresaSelect = document.getElementById('cliente_empresa');
        const clienteInfoDiv = document.getElementById('cliente-info');
        const step1 = document.getElementById('step1');
        const step2 = document.getElementById('step2');
        const step3 = document.getElementById('step3');
        const nextStep1Button = document.getElementById('next-step1');
        const nextStep2Button = document.getElementById('next-step2');
        const nextStep3Button = document.getElementById('next-step3');
        const prevStep2Button = document.getElementById('prev-step2');
        const prevStep3Button = document.getElementById('prev-step3');

        function toggleClienteSelects() {
            const clienteFisicoContainer = document.getElementById('cliente-fisico-container');
            const clienteEmpresaContainer = document.getElementById('cliente-empresa-container');

            if (tipoClienteSelect.value === 'F') {
                clienteFisicoContainer.style.display = 'block';
                clienteEmpresaContainer.style.display = 'none';
                clienteInfoDiv.innerHTML = '';
            } else if (tipoClienteSelect.value === 'E') {
                clienteFisicoContainer.style.display = 'none';
                clienteEmpresaContainer.style.display = 'block';
                clienteInfoDiv.innerHTML = '';
            } else {
                clienteFisicoContainer.style.display = 'none';
                clienteEmpresaContainer.style.display = 'none';
                clienteInfoDiv.innerHTML = '';
            }
        }

        function updateClienteInfo(clienteId, tipo) {
            fetch(`/api/cliente-info/${tipo}/${clienteId}/`)
                .then(response => response.json())
                .then(data => {
                    const clienteInfoDiv = document.getElementById('cliente-info');
                    clienteInfoDiv.innerHTML = `
                <div class="row">
                    ${createInput('Nome', data.nome)}
                    ${data.cpf ? createInput('CPF', data.cpf) : ''}
                    ${data.cnpj ? createInput('CNPJ', data.cnpj) : ''}
                    ${createInput('Email', data.email)}
                    ${createInput('UF', data.uf)}
                    ${createInput('Status', data.status)}
                    ${createInput('Cidade', data.cidade)}
                    ${createInput('Endereço', data.endereco)}
                    ${createInput('Número da Casa', data.numero_casa)}
                    ${createInput('Bairro', data.bairro)}
                    ${createInput('Complemento', data.complemento)}
                    ${createInput('CEP', data.cep)}
                    ${createInput('Telefone Celular', data.telefone_celular)}
                    ${createInput('Telefone Residencial', data.telefone_residencial)}
                    ${data.inscricao_estadual ? createInput('Inscrição Estadual', data.inscricao_estadual) : ''}
                    ${data.razao_social ? createInput('Razão Social', data.razao_social) : ''}
                    ${data.nome_responsavel ? createInput('Nome do Responsável', data.nome_responsavel) : ''}
                    ${data.contato_responsavel ? createInput('Contato do Responsável', data.contato_responsavel) : ''}
                </div>
            `;
                });
        }

        function createInput(label, value) {
            return `
        <div class="col-4">
            <label class="form-label">${label}:</label>
            <input type="text" class="form-control mb-2" value="${value}" disabled>
        </div>
    `;
        }

        function validateStep1() {
            if (tipoClienteSelect.value === 'F' && clienteFisicoSelect.value === "") {
                alert("Selecione um cliente físico.");
                return false;
            }
            if (tipoClienteSelect.value === 'E' && clienteEmpresaSelect.value === "") {
                alert("Selecione uma empresa.");
                return false;
            }
            if (tipoClienteSelect.value === "") {
                alert("Selecione o tipo de cliente.");
                return false;
            }
            return true;
        }

        function validateStep3() {
            const checkboxes = document.querySelectorAll('input[name="semeaduras"]:checked');
            if (checkboxes.length === 0) {
                alert("Selecione pelo menos uma semeadura.");
                return false;
            }
            return true;
        }


        tipoClienteSelect.addEventListener('change', toggleClienteSelects);
        clienteFisicoSelect.addEventListener('change', function () {
            updateClienteInfo(this.value, 'fisico');
        });
        clienteEmpresaSelect.addEventListener('change', function () {
            updateClienteInfo(this.value, 'empresa');
        });
        nextStep1Button.addEventListener('click', function () {
            if (validateStep1()) {
                step1.style.display = 'none';
                step2.style.display = 'block';
            }
        });
        nextStep2Button.addEventListener('click', function () {
            step2.style.display = 'none';
            step3.style.display = 'block';
        });
        prevStep2Button.addEventListener('click', function () {
            step2.style.display = 'none';
            step1.style.display = 'block';
        });
        nextStep3Button.addEventListener('click', function () {
            if (validateStep3()) {
                step3.style.display = 'none';
                step4.style.display = 'block';
            }
        });
        prevStep3Button.addEventListener('click', function () {
            step3.style.display = 'none';
            step2.style.display = 'block';
        });
        prevStep4Button.addEventListener('click', function () {
            step4.style.display = 'none';
            step3.style.display = 'block';
        });
        toggleClienteSelects();
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Seleciona todos os checkboxes
        const checkboxes = document.querySelectorAll('input[type="checkbox"][name="semeaduras"]');

        // Adiciona um listener de evento para cada checkbox
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function () {
                // Encontra a linha correspondente ao checkbox
                const row = checkbox.closest('tr');

                // Verifica se o checkbox está marcado
                if (checkbox.checked) {
                    row.classList.add('highlighted-row'); // Adiciona a classe para fundo azul
                } else {
                    row.classList.remove('highlighted-row'); // Remove a classe
                }
            });
        });
    });
</script>

{% endblock %}