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

<style>
  /* Estilos para a tabela */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
  }

  /* Estilos para os botões de remoção */
  .remove-button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 2px;
    cursor: pointer;
  }

  .remove-button:hover {
    background-color: #d32f2f;
  }

  /* Estilos para os totais no rodapé da tabela */
  .totals-row {
    font-weight: bold;
  }

  /* Estilos para o botão de envio */
  #submit-button {
    display: none;
    background-color: #4caf50;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
  }

  #submit-button:hover {
    background-color: #45a049;
  }
</style>
<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">Ficha de Protocolo</h5>
        </div>
      </div>
    </div>
  </div>


  <form class="needs-validation" novalidate action="{% url 'protocolo' %}" method="POST"
  enctype="multipart/form-data">
  {% csrf_token %}
  <div class="card">
    <div class="content">
      <div class="canvas-wrapper">
        <div class="row g-3 mb-4">

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

            }

            .colorbg {
              background-color: #dfe0e4;
            }
          </style>

          <div class="row my-3">
            <div class="container-fluid p-2 align-items-center w-50">
              <div class="d-flex justify-content-around">
                <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>

                </div>

                <span
                  class="colorbg w-100 rounded d-flex justify-content-center align-items-center mx-auto my-auto me-2 ms-2"
                  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>
                </div>
              </div>
            </div>
          </div>
      
            <div class="col-md col-lg order-xl-last">
              <div class="card full-card">
                <h5 class="container-form-title fw-400">Informações adicionais</h5>
                <div class="card-body">
                  <div class="row">
                    <!--Dados Pessoais Empresa-->
                    <div id="empresa-container-1" class="select-container" style="display: none;">
                      <div class="row">
                        <div class="col-lg-6 mt-1">
                          <label for="" class="form-label">TIPO PAGT: </label>
                          <input type="text" id="tipo_pagamento_empresa" name="tipo_pagamento" class="form-control">
                        </div>

                        <div class="col-lg-6 mt-1">
                          <label for="" class="form-label">DESTINO MUDAS: </label>
                          <input type="text" id="destino_mudas_empresa" name="destino_mudas" class="form-control">
                        </div>

                        <div class="col-lg-6 mt-1">
                          <label for="" class="form-label">PEDIDO COMPRA N°: </label>
                          <input type="text" id="pedido_compra_empresa" name="numero_pedido" class="form-control">
                        </div>

                        <div class="col-lg-6 mt-1">
                          <label for="" class="form-label">PLACA: </label>
                          <input type="text" id="placa_empresa" name="placa" class="form-control">
                        </div>

                        <div class="col-lg-12 mt-1">
                          <label for="" class="form-label">RESPONSÁVEL RECEBIMENTO: </label>
                          <input type="text" id="responsavel_recebimento_empresa" name="responsavel_recebimento"
                            class="form-control">
                        </div>

                        <div class="col-lg-6 mt-2">
                          <label for="produtor" class="form-label">PRODUTOR: </label>
                          <input type="text" id="produtor_empresa" name="produtor" class="form-control">
                        </div>

                        <div class="col-lg-6 mt-2">
                          <label for="renasem_produtor" class="form-label">RENASEM N° PRODUTOR: </label>
                          <input type="text" id="renasem_produtor_empresa" name="renasem_produtor" class="form-control">
                        </div>

                        <div class="col-lg-6 mt-2">
                          <label for="responsavel_tecnico" class="form-label">RESPONSÁVEL TÉCNICO: </label>
                          <input type="text" id="responsavel_tecnico_empresa" name="responsavel_tecnico"
                            class="form-control">
                        </div>

                        <div class="col-lg-6 mt-2">
                          <label for="renasem_tecnico" class="form-label">RENASEM N° TÉCNICO: </label>
                          <input type="text" id="renasem_tecnico_empresa" name="renasem_tecnico" class="form-control">
                        </div>
                      </div>
                    </div>
                    <!--END Dados pessoais Empresa-->

                  </div>
                </div>
                </br>
              </div>
            </div>

            <div class="col-xl-6">
              <div class="card full-card">
              <h5 class="container-form-title fw-400">Dados do Cliente</h5>
              <div class="card-body">

                <div class="row">
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="escolha_tipo" class="form-label">Escolha o tipo:</label>
                      <select name="tipo_escolhido" id="escolha_tipo" class="form-select">
                        <option value="">Selecione uma opção</option>
                        <option value="cliente">Cliente</option>
                        <option value="empresa">Empresa</option>
                      </select>
                    </div>
                  </div>

                  <div id="cliente-container-2" class="col-lg-6 select-container" style="display: none;">
                    <div class="form-group">
                      <label for="cliente" class="form-label">Escolha o cliente:</label>
                      <select name="cliente" id="cliente" class="form-select">
                        <option value="">Selecione um cliente</option>
                        {% for cliente in clientes %}
                        <option value="{{ cliente.cliente_id }}">{{ cliente.nome }} {{ cliente.sobrenome }}
                        </option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div id="empresa-container-2" class="col-lg-6 select-container" style="display: none;">

                    <div class="form-group">
                      <label for="empresa" class="form-label">Escolha a empresa:</label>
                      <select name="empresa" id="empresa" class="form-select">
                        <option value="">Selecione uma empresa</option>
                        {% for empresa in empresas %}
                        <option value="{{ empresa.empresa_id }}">{{ empresa.razao_social }}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                </div>

                <div id="cliente-container-3" class="select-container" style="display: none;">

                  <div class="row">
                    <div class="col-lg-6 mt-1">
                      <label for="cpf_cliente" class="form-label">CPF:</label>
                      <span id="cpf_cliente" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="email_cliente" class="form-label">Email:</label>
                      <span id="email_cliente" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="cidade_uf_cliente" class="form-label">Cidade:</label>
                      <span id="cidade_uf_cliente" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="endereco_cliente" class="form-label">Endereço:</label>
                      <span id="endereco_cliente" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="cep_cliente" class="form-label">CEP:</label>
                      <span id="cep_cliente" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="telefone_celular_cliente" class="form-label">Tel:</label>
                      <span id="telefone_celular_cliente" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                  </div>


                </div>


                <div id="empresa-container-3" class="select-container" style="display: none;">
                  <div class="row">
                    <div class="col-lg-6 mt-1">
                      <label for="cnpj_empresa" class="form-label">CNPJ:</label>
                      <span id="cnpj_empresa" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="inscricao_estadual_empresa" class="form-label">Inscrição Estadual:</label>
                      <span id="inscricao_estadual_empresa" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="email_empresa" class="form-label">Email:</label>
                      <span id="email_empresa" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="cidade_uf_empresa" class="form-label">Cidade:</label>
                      <span id="cidade_uf_empresa" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="endereco_empresa" class="form-label">Endereço:</label>
                      <span id="endereco_empresa" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="cep_empresa" class="form-label">CEP:</label>
                      <span id="cep_empresa" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                    <div class="col-lg-6 mt-1">
                      <label for="telefone_celular_empresa" class="form-label">Tel:</label>
                      <span id="telefone_celular_empresa" class="form-control"
                        style="min-height: 33px; background-color: #e9ecef;"></span>
                    </div>
                  </div>

                </div>

              </div>


            </div>
            </div>
        </div>
        <div class="col-sm-4 offset-lg-8 pb-3 pe-3">
          <button class="w-100 btn btn-sm btn-success btn-lg" type="submit">
            <i data-feather="check-circle" class="data-feather mr-1"></i>
            Enviar dados
          </button>
        </div>

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

<script>
  $(document).ready(function () {
    $('#escolha_tipo').change(function () {
      var escolha = $(this).val();

      // Esconde todos os selects
      $('.select-container').hide();

      // Mostra o select apropriado com base na escolha do usuário
      if (escolha === 'cliente') {
        $('#empresa-container-1').show();
        $('#cliente-container-2').show();
        $('#cliente-container-3').show();
      } else if (escolha === 'empresa') {
        $('#empresa-container-1').show();
        $('#empresa-container-2').show();
        $('#empresa-container-3').show();
      }
    });
  });
</script>

<script>
  $(document).ready(function () {
    $('#cliente').change(function () {
      var cliente_id = $(this).val();
      if (cliente_id) {
        $.ajax({
          url: '/get_lista_clientes/',  // URL para obter os dados do cliente
          type: 'GET',
          data: { cliente_id: cliente_id },
          success: function (data) {
            // Verifica se a lista de clientes não está vazia
            if (data.clientes.length > 0) {
              // Encontra o cliente correto na lista de clientes
              var clienteSelecionado = data.clientes.find(function (cliente) {
                return cliente.cliente_id == cliente_id;
              });
              // Atualiza os campos do formulário com os dados do cliente selecionado
              atualizarCamposCliente(clienteSelecionado);
            } else {
              // Limpa os campos do formulário se nenhum cliente for encontrado
              limparCamposCliente();
            }
          },
          error: function (xhr, status, error) {
            console.error('Erro na solicitação AJAX:', error);
          }
        });
      } else {
        // Limpa os campos do formulário se nenhum cliente for selecionado
        limparCamposCliente();
      }
    });

    // Função para atualizar os campos do formulário com os dados do cliente
    function atualizarCamposCliente(cliente) {
      $('#nome_cliente').text(cliente.nome);
      $('#cpf_cliente').text(cliente.cpf);
      $('#email_cliente').text(cliente.email);
      $('#cidade_uf_cliente').text(cliente.cidade + ' - ' + cliente.uf);
      $('#endereco_cliente').text(cliente.endereco);
      $('#cep_cliente').text(cliente.cep);
      $('#telefone_celular_cliente').text(cliente.telefone_celular);
      // Atualizar o campo tipo_pagamento com os dados do cliente
      $('#tipo_pagamento_cliente').val(cliente.tipo_pagamento);
      $('#pedido_compra_cliente').val(cliente.numero_pedido);
      $('#destino_mudas_cliente').val(cliente.destino_mudas);
      $('#placa_cliente').val(cliente.placa);
      $('#produtor_cliente').val(cliente.produtor);
      $('#renasem_produtor_cliente').val(cliente.renasem_produtor);
      $('#responsavel_tecnico_cliente').val(cliente.responsavel_tecnico);
      $('#renasem_tecnico_cliente').val(cliente.renasem_tecnico);
    }

    // Função para limpar os campos do formulário
    // Função para limpar os campos do formulário
    function limparCamposCliente() {
      $('#nome_cliente, #cpf_cliente, #email_cliente, #cidade_uf_cliente, #endereco_cliente, #cep_cliente, #telefone_celular_cliente').text('');
      // Limpar o campo tipo_pagamento
      $('#tipo_pagamento_cliente').val('');
      $('#pedido_compra_cliente').val('');
      $('#destino_mudas_cliente').val('');
      $('#placa_cliente').val('');
      $('#responsavel_recebimento_cliente').val('');
      $('#produtor_cliente').val('');
      $('#renasem_produtor_cliente').val('');
      $('#responsavel_tecnico_cliente').val('');
      $('#renasem_tecnico_cliente').val('');
    }
  });
</script>

<script>
  $(document).ready(function () {
    $('#empresa').change(function () {
      var empresa_id = $(this).val();
      if (empresa_id) {
        $.ajax({
          url: '/get_lista_empresas/',  // URL para obter os dados da empresa
          type: 'GET',
          data: { empresa_id: empresa_id },
          success: function (data) {
            // Verifica se a lista de empresas não está vazia
            if (data.empresas.length > 0) {
              // Encontra a empresa correta na lista de empresas
              var empresaSelecionada = data.empresas.find(function (empresa) {
                return empresa.empresa_id == empresa_id;
              });
              // Atualiza os campos do formulário com os dados da empresa selecionada
              atualizarCamposEmpresa(empresaSelecionada);
            } else {
              // Limpa os campos do formulário se nenhuma empresa for encontrada
              limparCamposEmpresa();
            }
          },
          error: function (xhr, status, error) {
            console.error('Erro na solicitação AJAX:', error);
          }
        });
      } else {
        // Limpa os campos do formulário se nenhuma empresa for selecionada
        limparCamposEmpresa();
      }
    });
  });

  // Função para limpar os campos do formulário de empresa
  function limparCamposEmpresa() {
    $('#razao_social_empresa, #cnpj_empresa, #inscricao_estadual_empresa, #nome_fantasia_empresa, #email_empresa, #uf_empresa, #cidade_empresa, #endereco_empresa, #bairro_empresa, #complemento_empresa, #cep_empresa, #telefone_celular_empresa, #telefone_residencial_empresa, #nome_responsavel_empresa, #contato_responsavel_empresa').text('');
    // Adicione outros campos conforme necessário
    $('#tipo_pagamento_empresa').val('');
    $('#pedido_compra_empresa').val('');
    $('#destino_mudas_empresa').val('');
    $('#placa_empresa').val('');
    $('#responsavel_recebimento_empresa').val('');
    $('#produtor_empresa').val('');
    $('#renasem_produtor_empresa').val('');
    $('#responsavel_tecnico_empresa').val('');
    $('#renasem_tecnico_empresa').val('');

  }


  // Função para atualizar os campos do formulário com os dados da empresa
  function atualizarCamposEmpresa(empresa) {
    var cidadeUF = empresa.cidade + ' - ' + empresa.uf; // Concatena cidade e UF

    $('#razao_social_empresa').text(empresa.razao_social);
    $('#cnpj_empresa').text(empresa.cnpj);
    $('#inscricao_estadual_empresa').text(empresa.inscricao_estadual);
    $('#nome_fantasia_empresa').text(empresa.nome_fantasia);
    $('#email_empresa').text(empresa.email);
    $('#cidade_uf_empresa').text(cidadeUF); // Adiciona a concatenação ao elemento com ID "cidade_uf"
    $('#endereco_empresa').text(empresa.endereco);
    $('#bairro_empresa').text(empresa.bairro);
    $('#complemento_empresa').text(empresa.complemento);
    $('#cep_empresa').text(empresa.cep);
    $('#telefone_celular_empresa').text(empresa.telefone_celular);
    $('#telefone_residencial_empresa').text(empresa.telefone_residencial);
    $('#nome_responsavel_empresa').text(empresa.nome_responsavel);
    $('#contato_responsavel_empresa').text(empresa.contato_responsavel);
    // Dentro da função atualizarCamposEmpresa(empresa)
    $('#tipo_pagamento_empresa').val(empresa.tipo_pagamento);
    $('#pedido_compra_empresa').val(empresa.numero_pedido);
    $('#destino_mudas_empresa').val(empresa.destino_mudas);
    $('#placa_empresa').val(empresa.placa);
    $('#responsavel_recebimento_empresa').val(empresa.responsavel_recebimento);
    $('#produtor_empresa').val(empresa.produtor);
    $('#renasem_produtor_empresa').val(empresa.renasem_produtor);
    $('#responsavel_tecnico_empresa').val(empresa.responsavel_tecnico);
    $('#renasem_tecnico_empresa').val(empresa.renasem_tecnico);
    // Adicione outros campos conforme necessário
  }
</script>
{% endblock %}