@extends('layouts.main')

@section('content')
    <link rel="stylesheet" href="css/modal.css">
    <script src="js/script_reparo.js" defer></script>
    <link rel="stylesheet" href="css/suporte.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <div class="container-header" id="selecione_opcao">
        <div class="card centralizar">
            <button id="ajudaBtn" class="ajuda-btn" title="Mostrar lista de referências">
                <i class="bi bi-question-circle"></i>
            </button>
            <div class="selecione_opcao">
                <p>Selecione uma opção</p>
                <select class="select js-example-basic-single" id="opcoes" style="width: 100%">
                    <option value="">Selecione uma opção</option>
                    @foreach ($referencias as $referencia)
                        <option value="{{ $referencia['referencia'] }}">{{ $referencia['referencia'] }}</option>
                    @endforeach
                </select>
                <div class="fontes">
                    <button id="aumentarFonte">Aumentar Fonte</button>
                    <button id="diminuirFonte">Diminuir Fonte</button>
                </div>
                <div class="opcoes_sistema" id="opcoes_sistema" style="display: none;">
                    <div id="reparoFTTBInput" style="display: none;">
                        <div class="label_fttb">
                            <label for="numero">Numero:</label>
                            <input type="text" id="numero" placeholder="Numero">
                        </div>
                        <div class="label_fttb">
                            <label for="cep_cliente">CEP:<span>*</span></label>
                            <input type="text" id="cep_cliente" name="cep_cliente" onblur="pesquisarCEP()"
                                placeholder="36200-000" onkeypress="formatar_mascara(this,'#####-###')" required>
                        </div>
                        <div class="label_fttb">
                            <label for="endereco">Endereço:</label>
                            <input type="text" id="endereco" placeholder="Insira o endereço">
                        </div>
                        <p id="endcpt"></p>
                        <div class="label_fttb">
                            <label for="fup">FUP:</label>
                            <input type="text" id="fup" placeholder="Insira o FUP">
                        </div>
                        <br>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="fupAberto" style="display: none;">
                        <div class="label_fttb">
                            <label for="nome_cliente">Cliente:</label>
                            <input type="text" id="nome_cliente" placeholder="Cliente">
                        </div>
                        <br>
                        <div class="label_fttb">
                            <label for="fup">FUP:</label>
                            <input type="text" id="fupcli" placeholder="Insira o FUP">
                        </div>
                        <br>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="configuradoOnuInput" style="display: none;">
                        <div class="label_onu">
                            <label for="mac">Mac:</label>
                            <input type="text" id="mac" placeholder="MAC onu">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="vlan">Vlan:</label>
                            <input type="text" id="vlan" placeholder="Vlan OLT">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="sinal">Sinal:</label>
                            <input type="text" id="sinal" placeholder="Sinal ONU">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="tipo">Tipo:</label>
                            <select id="tipo_instalacao">
                                <option value="FTTH">FTTH</option>
                                <option value="FTTB">FTTB</option>
                                <option value="FTTA">FTTA</option>
                            </select>
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="caixa">Acesso Remoto:</label>
                            <select name="acessoRemoto" id="acessoRemoto">
                                <option value="configurado">Verificado</option>
                                <option value="desconfigurado">Não Verificado</option>
                            </select>
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="username">Username:</label>
                            <input type="text" id="username" placeholder="Username">
                        </div>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="manualTravado" style="display: none;">
                        <p>Selecione a OLT</p>
                        <select class="select js-example-basic-single" id="olts">
                            <option value="">Selecione uma opção</option>
                            <!-- Opções serão carregadas dinamicamente -->
                        </select>
                        <div class="label_onu">
                            <label for="mac">Mac:</label>
                            <input type="text" id="macolt" placeholder="MAC onu">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="fup">Fup:</label>
                            <input type="text" id="fupolt" placeholder="FUP">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="caixa">Caixa:</label>
                            <input type="text" id="caixaolt" placeholder="Caixa">
                        </div>
                        <br>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="nomeDoCliente" style="display: none;">
                        <div class="label_onu">
                            <label for="nome_cliente5">Cliente:</label>
                            <input type="text" id="nome_cliente5" placeholder="Nome do cliente">
                        </div>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="configuradoOnuTel" style="display: none;">
                        <div class="label_onu">
                            <label for="mactel">Mac:</label>
                            <input type="text" id="mactel" placeholder="MAC onu">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="vlantel">Vlan:</label>
                            <input type="text" id="vlantel" placeholder="Vlan OLT">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="sinaltel">Sinal:</label>
                            <input type="text" id="sinaltel" placeholder="Sinal ONU">
                        </div>
                        <p>Dados Telefone</p>
                        <br>
                        <div class="label_onu">
                            <label for="tel">Telefone:</label>
                            <input type="text" id="tel" placeholder="Telefone Cliente">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="senha">Senha:</label>
                            <input type="text" id="senha" placeholder="Senha Telefone">
                        </div>
                        <br>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="mudancaEndereco" style="display: none;">
                        <div class="label_onu">
                            <label for="end_antigo">Endereço Antigo:</label>
                            <input type="text" id="end_antigo" placeholder="Endereço antigo">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="end_novo">Endereço Novo:</label>
                            <input type="text" id="end_novo" placeholder="Novo endereço">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="telefone_contato">Telefone:</label>
                            <input type="text" id="telefone_contato" placeholder="Telefone contato ONU">
                        </div>
                        <br>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="caixafora" style="display: none;">
                        <div class="label_onu">
                            <label for="caixasFora">CA:</label>
                            <select name="caixasFora" id="caixasFora">
                                <option value="CA-0083-05">CA-0083-05</option>
                                <option value="CA-0083-06">CA-0083-06</option>
                                <option value="CA-0083-07">CA-0083-07</option>
                                <option value="CA-0336-05">CA-0336-05</option>
                                <option value="CA-0336-06">CA-0336-06</option>
                            </select>
                        </div>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="nolevel" style="display: none;">
                        <div class="label_onu">
                            <label for="no">No:</label>
                            <input type="text" id="no" placeholder="No">
                        </div>
                        <br>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>

                    <div id="trocaDeSenhas" style="display: none;">
                        <div class="label_onu">
                            <label for="senhatel">Nova Senha:</label>
                            <input type="text" id="senhatel" placeholder="Nova Senha">
                        </div>
                        <br>
                        <div class="label_onu">
                            <label for="telefone2">Telefone:</label>
                            <input type="text" id="telefone2" placeholder="Telefone Cliente">
                        </div>
                        <br>
                        <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <h3>Especificação:</h3>
            <textarea id="modalEspecificacao" rows="5" cols="50" readonly></textarea>
            <br>
            <div id="usurio_sis" style="display: none;">
                <input type="text" id="User_name">
                <button class="copiar_textoUser" onclick="copiarUser()">Copiar Texto</button>
            </div>
            <div id="info-fechamento">
                <input type="text" id="inf-fechar">
                <button id="bt-cp-inf" class="copiar_textoFechar" onclick="copiarInfo()">Copiar Texto</button>
            </div>
            <div class="protocolo_mkt">

                <label for="mktProtocolo" class="mktProtocolo" id="mkt">MKT:</label>
                <br>
                <div class="label_mkt">
                    <input type="radio" class="radio-s" name="mktProtocolo" id="mktSim" value="mkt"
                        onclick="mostrarProtocoloMKT()">
                    <span> Sim </span>
                </div>
                <br>
                <div class="label_mkt">
                    <input type="radio" name="mktProtocolo" id="mktNao" value="nao" class="borda_roxa"
                        onclick="ocultarProtocoloMKT()" checked> <span> Não </span>
                </div>
                <br>
                <hr>
                <div id="protocoloMKT" style="display: none;">
                    <div class="label_onu">
                        <label for="protocolo" id="txt-protocolo">Protocolo:</label>
                        <input type="text" id="protocolo">
                    </div>
                </div>
            </div>
            <br>
            <button class="copiar_textoModal" onclick="copiarTexto()">Copiar Texto</button>
            <button class="fechar_modal" onclick="fecharModal()">Fechar Modal</button>
            <p id="mensagem_retorno"></p>
        </div>
    </div>
    <style>.hidden {
        display: none;
      }

      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
      }

      .modal.show {
        display: flex;
      }

      .modal-content {
        display: none;
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
      </style>
    <script>
        // Função para abrir o modal de referências
        $(document).ready(function () {
    $("#opcoes").change(function () {
        const opcaoSelecionada = $(this).val();
console.log('selecionou')
        // Verifica se uma opção válida foi selecionada
        if (opcaoSelecionada !== "") {
            $("#meuModal").fadeIn(); // Abre o modal
        }
        console.log(opcaoSelecionada)
        switch (opcaoSelecionada) {
            case "Reparo FTTB":
              exibirCampos([reparoFTTBInput, opcoesSistema]);
              break;

            case "Configurada ONU":
              exibirCampos([configurarOnu, opcoesSistema]);
              break;

            case "Configurada ONU Tel":
              exibirCampos([configurarOnuTel, opcoesSistema]);
              break;

            case "Manual Travado":
              exibirCampos([oltTravada, opcoesSistema]);
              carregarSelectOlt(); // Função específica para carregar dados adicionais
              break;

            case "Desbloqueio 5 dias":
              exibirCampos([incluirCliente, opcoesSistema]);
              break;

            case "Conecta Cliente Migraçao":
              exibirCampos([incluirClienteC, opcoesSistema]);
              break;

            case "Mudança Endereço":
              exibirCampos([incluirCliente, mudarEndereco]);
              break;

            case "FUP Aberto":
              exibirCampos([fupAberto, opcoesSistema]);
              $("#fupcli").val("");
              $("#nome_cliente").val("");
              $("#inf-fechar").val(
                "Cliente entrou em contato e gostaria de saber a respeito da sua solicitação"
              );
              break;

            case "Caixa Fora":
              exibirCampos([CAFora, opcoesSistema]);
              break;

            case "Transferencia Conecta":
              exibirCampos([
                transferirBarroso,
                userbarroso,
                numbarroso,
                solbarroso,
                descbarroso,
                cpfbarroso,
                opcoesSistema,
                cidmigration,
              ]);
              $("#mkt").text("Ligação Transferida");
              $("#txt-protocolo").text("Ramal");
              break;

            default:
              esconderTodosCampos();
              mostrarModal(data);
          }
    });

    // Fecha o modal quando o botão de fechar for clicado
    $("#fecharModal").click(function () {
        $("#meuModal").fadeOut(); // Fecha o modal
    });

    // Fecha o modal clicando fora da área do modal
    $(window).click(function (event) {
        if ($(event.target).is("#meuModal")) {
            $("#meuModal").fadeOut();
        }
    });
});
function esconderTodosCampos() {
      reparoFTTBInput.hide();
      fupAberto.hide();
      configurarOnu.hide();
      configurarOnuTel.hide();
      incluirCliente.hide();
      incluirClienteC.hide();
      opcoesSistema.hide();
      oltTravada.hide();
      mudarEndereco.hide();
      CAFora.hide();
      transferirBarroso.hide();
      userbarroso.hide();
      numbarroso.hide();
      solbarroso.hide();
      descbarroso.hide();
      cpfbarroso.hide();
      cidmigration.hide();
    }

        function abrirReferenciasModal() {
            console.log('chamou abrir modal')
            var modal = document.getElementById("referenciasModal");
            modal.style.display = "block";
        }

        // Função para fechar o modal de referências
        function fecharReferenciasModal() {
            var modal = document.getElementById("referenciasModal");
            modal.style.display = "none";
        }

        // Evento de clique no botão de ajuda
        $(document).ready(function() {
            $("#ajudaBtn").on("click", function() {
                abrirReferenciasModal();
            });

            // Evento de clique no botão de fechar do modal
            $(".close").on("click", function() {
                fecharReferenciasModal();
            });
        });

        // Fechar o modal se clicar fora dele
        window.onclick = function(event) {
            var modal = document.getElementById("referenciasModal");
            if (event.target === modal) {
                fecharReferenciasModal();
            }
        };
        </script>
@endsection