@php
 
 $titulo = "TI - SW";
 

@endphp
@include('components.head')
<div class="container">
    

    <form action="{{route('ti.usuarios.criarpost')}}" method="POST">
        @csrf
        <div class="col-md-12 order-md-1">
            <div class="row">
                <h4><strong>Dados de usuário</strong></h4>
                
                <div class="col-6">
                    {{-- <label>E-mail:</label>
                    <select class="custom-select" id="usu_email" name="usu_email">
                        <option selected>SELECIONE O E-MAIL</option>
                        @if (count($contratos) == 0)
                        <option>Sem contratos cadastrados.</option>
                        @else
                        @foreach ($contratos as $contrato) 
                        <option value="{{ $contrato['col_emailcorp'] }}" id="{{ $contrato['col_id'] }}">{{ $contrato['col_emailcorp'] }}</option>
                        @endforeach
                        @endif
                    </select> --}}

               
                    <label>Colaborador:</label>
                    
                    <select class="select2" id="col_id" name="col_id" style="width: 100%" required>
                       
                    </select>
                    {{-- @if ($errors->has('usu_email'))
                    <span class="text-danger">{{ $errors->first('usu_email') }}</span>
                    @endif --}}
              
                
                <!-- Importar o Select2 via CDN -->
                <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
                {{-- <link rel="stylesheet" href="{{asset('css/select2.min.css')}}"> --}}
                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
                {{-- <script src="{{asset('js/select2.min.js')}}"></script> --}}
<script>
  
       
    $(document).ready(function() {
        $('#col_id').select2({
            placeholder: 'Pesquise e selecione um colaborador',
            // minimumInputLength: 1,
            allowClear: true,
            language: {
                inputTooShort: function () {
                    return "Digite pelo menos 1 caracteres.";
                },
                noResults: function () {
                    return "Nenhum resultado encontrado.";
                },
                searching: function () {
                    return "Buscando...";
                }
            },
            ajax: {
                url: '{{ route("ti.usuarios.buscar-colaborador") }}', // Rota para buscar os colaboradores
                dataType: 'json',
                delay: 250, // Atraso entre digitação e envio da requisição
                data: function(params) {
                    return {
                        q: params.term // Termo digitado pelo usuário
                    };
                },
                 processResults: function(data) {
    console.log(data); // Debug para ver o que o AJAX está recebendo
    return {
        results: data.map(function(colaborador) {
            return {
                id: colaborador.col_id, // Valor retornado (ID do colaborador)
                text: colaborador.pes_nome_completo // Nome exibido no select
            };
        })
    };
},
                cache: true
            },
            // minimumInputLength: 1 // Mínimo de caracteres para ativar a busca
        });
    });
   

</script>

  
               
                </div>
                 
                
                {{-- <script>
                    document.getElementById('col_id').addEventListener('change', function() {
                        var selectedOption = this.options[this.selectedIndex];
                        var selectedId = selectedOption.id; // Obtendo o id do <option> selecionado
                            document.getElementById('col_id').value = selectedId; // Colocando o id no campo oculto
                        });
                </script> --}}


<!--LABEL PARA INSERIR OS DADOS DO NOME DO pessoa-->
                <div class="col-3 mb-2">
                    <label> Primeiro nome: </label>
                    <input class="form-control" name="usu_nome" id="usu_nome" type="text" placeholder="" required>
                </div>
                
                <!--LABEL PARA INSERIR OS DADOS DO NOME DO pessoa-->
                <div class="col-3 mb-2">
                    <label> Último nome: </label>
                    <input class="form-control" name="usu_sobrenome" id="usu_sobrenome" type="text" required>
                </div>
                <script>
                    window.onload = function() {
            // Random placeholder for first name
                        const firstNamePlaceholders = ["Maria", "Gabriel", "João", "Ana", "Lucas", "Isabella", "Miguel", "Laura"];
                        const firstNameField = document.getElementById("usu_nome");
                        const randomFirstNameIndex = Math.floor(Math.random() * firstNamePlaceholders.length);
                        firstNameField.placeholder = firstNamePlaceholders[randomFirstNameIndex];

                        // Random placeholder for last name
                        const lastNamePlaceholders = ["da Silva", "de Carvalho", "de Santos"];
                        const lastNameField = document.getElementById("usu_sobrenome");
                        const randomLastNameIndex = Math.floor(Math.random() * lastNamePlaceholders.length);
                        lastNameField.placeholder = lastNamePlaceholders[randomLastNameIndex];
                    };
                </script>
                <div class="col-6 mb-2">
                    <label> Email de acesso: </label>
                    <input class="form-control" name="usu_email" id="usu_email" type="email" placeholder="usuario@dominio.com" required>
                     @if ($errors->has('usu_email'))
                <span class="text-danger">{{ $errors->first('usu_email') }}</span>
                @endif
                </div>
                
                <div class="col-6 mb-2">
                    <label>Confirmar Email: </label>
                    <input class="form-control" name="usu_emailconfirma" id="usu_emailconfirma" type="email" placeholder="usuario@dominio.com" required>
                    <small id="emailError" class="text-danger" style="display: none;">Os emails não coincidem.</small>
                </div>
                <script>
                    document.getElementById('usu_emailconfirma').addEventListener('input', function () {
                        const email = document.getElementById('usu_email').value;
                        const confirmEmail = this.value;
                        const error = document.getElementById('emailError');
                        
                        if (email !== confirmEmail) {
                            error.style.display = 'block'; // Mostra o erro
                        } else {
                            error.style.display = 'none'; // Esconde o erro
                        }
                    });
                </script>
                <div class="col-6">
                    <label>Ramal: (opcional)</label>
                    
                    <input class="form-control" name="col_ramal" type="number">
                </div>
                
                <div class="col-6">
                    <label>Telefone corporativo: (Opcional)</label>
                    
                    <input class="form-control" placeholder="(XX) XXXXX-XXXX" name="col_telefone" id='col_telefone' type="text" maxlength="15">
                </div>
                

                <script>
                    document.getElementById('col_telefone').addEventListener('input', function () {
                        let telefone = this.value.replace(/\D/g, ''); // Remove caracteres não numéricos
                        
                        if (telefone.length > 10) {
                            telefone = telefone.replace(/^(\d{2})(\d{5})(\d{4})$/, '($1) $2-$3'); // Formato com 11 dígitos
                        } else if (telefone.length > 6) {
                            telefone = telefone.replace(/^(\d{2})(\d{4})(\d{0,4})$/, '($1) $2-$3'); // Formato com 10 dígitos
                        } else if (telefone.length > 2) {
                            telefone = telefone.replace(/^(\d{2})(\d{0,4})$/, '($1) $2'); // Formato parcial
                        }
                        
                        this.value = telefone; // Atualiza o campo com o formato
                    });
                </script>
                <h4 class="mt-3 mb-3"> Acesso aos módulos </h4>
                <!--LABEL PARA INSERIR OS DADOS
                    <div class="col-12 mb-2">
                    <h5> Módulo de equipamento </h5>
                    <div class="row">
                        <div class="form-check form-switch col-3 text-center">
                            <input class="form-check-input" type="hidden" name="mod_equipamento" value="0">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="mod_equipamento" value="1">
                        </div>
                        <div class="col-9">
                            <p>Este módulo dá acesso ao controle de equipamentos da safety.</p>
                        </div>
                    </div>
                </div>
                <hr>-->
                
                <!--LABEL PARA INSERIR OS DADOS-->
                <div class="col-12 mb-2">
                    <h5> Módulo de TI </h5>
                    <div class="row">
                        <div class="form-check form-switch col-3 text-center">
                            <input class="form-check-input" type="hidden" name="mod_ti" value="0">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="mod_ti" value="1">
                        </div>
                        <div class="col-9">
                            <p>Este módulo dá acesso as informações de TI, podendo assim cadastrar ou alterar dados de usuários, itens de tecnologia, termos de uso.</p>
                        </div>
                    </div>
                </div>
                <hr>
                
                <!--LABEL PARA INSERIR OS DADOS-->
                <div class="col-12 mb-2">
                    <h5> Módulo de RH </h5>
                    <div class="row">
                        <div class="form-check form-switch col-3 text-center">
                            <input class="form-check-input" type="hidden" name="mod_rh" value="0">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="mod_rh" value="1">
                        </div>
                        <div class="col-9">
                            <p>Este módulo dá acesso as informações de RH, podendo assim cadastrar ou alterar dados de colaboradores, contratos e EPIs.</p>
                        </div>
                    </div>
                </div>
                <hr>
                
                <!--LABEL PARA INSERIR OS DADOS-->
                <div class="col-12 mb-2">
                    <h5> Módulo Finaceiro </h5>
                    <div class="row">
                        <div class="form-check form-switch col-3 text-center">
                            <input class="form-check-input" type="hidden" name="mod_viagem" value="0">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="mod_viagem" value="1">
                        </div>
                        <div class="col-9">
                            <p>Este módulo dá acesso as informações financeiras, podendo assim cadastrar viagens e verificar despesas lançadas.</p>
                        </div>
                    </div>
                </div>
                <hr>
                
                <!--LABEL PARA INSERIR OS DADOS-->
                <div class="col-12 mb-2">
                    <h5> Módulo de Carros </h5>
                    <div class="row">
                        <div class="form-check form-switch col-3 text-center">
                            <input class="form-check-input" type="hidden" name="mod_carro" value="0">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="mod_carro" value="1">
                        </div>
                        <div class="col-9">
                            <p>Este módulo dá acesso as informações da frota de carros, podendo assim cadastrar ou alterar dados dos carros.</p>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="col-12 mb-2">
                    <h5> Módulo de Aprovações </h5>
                    <div class="row">
                        <div class="form-check form-switch col-3 text-center">
                            <input class="form-check-input" type="hidden" name="mod_aprovador" value="0">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="mod_aprovador" value="1">
                        </div>
                        <div class="col-9">
                            <p>Este módulo dá acesso as informações de aprovações de pedidos, podendo assim confirmar o recebimento de pedidos.</p>
                        </div>
                    </div>
                </div>
                <hr>
                
            </div>
        </div>

        <!--BOTÕES-->
        <div class="col-12 text-center">
            <a href='{{route('ti.usuarios.index')}}' class="btn btn-danger col-2 mr-5">Cancelar</a>
            <button type="submit" class="btn btn-success col-2 ml-5">Incluir Usuário</button>
        </div>
        
    </form>
</div>
{{-- <script>
    function formatCPF(input) {
        // Remove qualquer caractere que não seja um dígito
        const value = input.value.replace(/\D/g, '');
        
        // Adiciona a máscara de CNPJ
        input.value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
    }
</script> --}}
@include('components.footer')
<!-- I begin to speak only when I am certain what I will say is not better left unsaid. - Cato the Younger -->