@extends('layouts.layoutsup')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="csssup/modal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <script src="jssup/buscar_cep.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" defer></script>
    <script src="jssup/jquery-3.6.4.min.js"></script>
    <script src="jssup/script_reparo.js" defer></script>
    <link rel="stylesheet" href="./csssup/suporte.css">
    <!-- Chamando select -->
    <link href="csssup/select2.css" rel="stylesheet" />
    <script src="jssup/select2.js"></script>
    <div class="container">
        <h1>Referências</h1>


        <div class="container-header" id="selecione_opcao">
            <div class="card centralizar">
                <button id="ajudaBtn" class="ajuda-btn" title="Mostrar lista de referencias">
                    <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">Nao 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>
                        <!-- Inicio nome do cliente -->
                        <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>
                        <!-- Termino nome do cliente -->

                        <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>
                        <!-- Mudança de endereço -->
                        <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="Endereco 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">Sinal:</label>
                                <input type="text" id="telefone_contato" placeholder="Telefone contato onu">
                            </div>
                            <br>
                            <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                        </div>
                        <!-- caixa fora -->
                        <div id="caixafora" style="display: none;">
                            <div class="label_onu">
                                <label for="end_antigo">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>
                            <br>
                            <div class="label_onu">
                                <label for="contatoRetorno">Tel:</label>
                                <input type="text" id="contatoRetorno" placeholder="Tel retorno">
                            </div>

                            <br>
                            <button class="gerar_modal" onclick="gerarModal()">Gerar Modal</button>
                        </div>
                    </div>
                    <br>
                    <div class="saudacao">
                        Bem vindo                    </div>
                </div>

            </div>
            <div id="referenciasModal" class="modal">
                <div class="modal-content-ajuda">
                    <span class="close">&times;</span>
                    <h3>Referências Disponíveis Reparo</h3>
                    <!-- Lista de referências -->
                    <ul>


                        <!-- Imprime a lista utilizando parágrafos HTML -->

                    </ul>
                </div>
            </div>
            <script>
                // Função para abrir o modal de referências
                function abrirReferenciasModal() {
                    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>
            <!-- Modal -->
            <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">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">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>
        </div>
    </div>

    </div>


    <script>
        function formatar_mascara(campo) {
            let cep = campo.value.replace(/\D/g, ''); // Remove tudo que não é dígito
            cep = cep.substring(0, 8); // Limita ao tamanho máximo do CEP sem formatação

            if (cep.length > 5) {
                cep = cep.substring(0, 5) + '-' + cep.substring(5); // Insere o traço no CEP
            }

            campo.value = cep; // Atualiza o valor do campo
        }
        // In your Javascript (external .js resource or <script> tag)
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
        });
        /*   document.addEventListener('contextmenu', function(e) {
               e.preventDefault();
           });*/
        document.getElementById('opcoes').addEventListener('click', function() {
            // Foca no campo de pesquisa do Select2
            $('.select2-search__field').focus();
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
@endsection