@extends('layout.qr')
@section('header')
@section('content')
<style>
    .centered {
    display: flex;
    align-items: center;
    justify-content: center;
    }
</style>
<div class="content text-center" style="margin-left:50px; margin-right:50px;">
    <div class="card border-dark ">
        <div class="card-header" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" ><b>Buscar Usuario </b> <i class="fa-solid fa-magnifying-glass"></i></div>
        <div class="card-body text-dark mt-3">
            <div class="collapse" id="collapseExample">
                <div class="row">
                    <div class="form-group centered">
                        <div class="col-sm-7">
                            <div class="input-group mb-3">
                                <input type="text"  class="form-control text-center rut" placeholder="Ingrese un RUT" id="rut" onkeypress="clsAlphaNoOnly(event)" oninput="checkRut(this)">
                                <div class="input-group-append">
                                    <button type="button" onclick="buscar();"  id="btn_buscar" class="btn btn-outline-dark"><i class="fa-solid fa-magnifying-glass"></i> Buscar</button>
                                </div>                      
                            </div>
                            <br>
                            <div id="alerta_rut">
    
                            </div>
                            <div id="spinner" style="display: none;">
                                <h3>Buscando Registros</h3>
                                <div class="fa-5x"  >
                                    <i class="fas fa-sync fa-spin"></i>
                                </div>
                            </div>
                            <div id="contenedor_qr">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <br>
      <div class="card border-dark ">
        <div class="card-header" data-bs-toggle="collapse" href="#cuerpo" role="button" aria-expanded="false" aria-controls="cuerpo" >
            <b>Asociar Programa </b> 
            <i class="fa-solid fa-boxes-packing"></i>
        </div>
        <div class="card-body text-dark ">
            <div class="collapse" id="cuerpo">
                <div class="row">
                    <div class="form-group centered">
                        <div class="col-sm-7">
                            <form id="form_masivo" >
                                <div class="input-group mb-3">
                                    <input type="text"  class="form-control text-center rut" placeholder="Ingrese un RUT" id="rut_masivo" onkeypress="clsAlphaNoOnly(event)" oninput="checkRut(this)">
                                    <div class="input-group-append">
                                        <button type="button" onclick="buscar_masivo('');"  id="btn_buscar_masivo" class="btn btn-outline-dark"><i class="fa-solid fa-magnifying-glass"></i> Agregar Usuario</button>
                                    </div>                      
                                </div>
                                <br>
                                <label for="paquete">Programas Disponibles: </label>
                                <select name="paquete_masivo[]"  class="slc_masivo" id="paquete_masivo" multiple="multiple">
                                    @foreach($programa as $p)
                                        <option value="{{$p->id}}">{{$p->nombre_paquete}}</option>
                                    @endforeach
                                </select>
                                <br><br>
                                <div id="alerta_rut_masivo">
        
                                </div>
                                <div id="spinner_masivo" style="display: none;">
                                    <h3>Buscando Registros</h3>
                                    <div class="fa-5x"  >
                                        <i class="fas fa-sync fa-spin"></i>
                                    </div>
                                </div>
                                <div id="contenedor_qr_masivo" >
                                </div>
                                <br><br>    
                                <div class="d-grid gap-2 col-6 mx-auto">
                                    <button class="btn btn-success" onclick="asociarProgramaMasivo();" type="button">Asociar Programa</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <br><br>
</div>
@include('modal.modal_act_usuario')
@include('modal.modal_ins_usuario')
@section('script')

@if (\Session::has('success'))
<script>
    Swal.fire({
    position: 'center',
    icon: 'success', 
    title: 'Perfil creado correctamente',
    showConfirmButton: false,
    timer: 1500
    })
</script>
@endif
<script>
    $('.slc_masivo').select2({width: '100%'});

    $(".rut").on({
    keydown: function(e) {
        if (e.which === 32)
        return false;
    },
    change: function() {
        this.value = this.value.replace(/\s/g, "");
    }
    });
    function clsAlphaNoOnly (e) {  // Accept only alpha numerics, no special characters 
        var regex = new RegExp("^[ 0-9Kk ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }

        e.preventDefault();
        return false;
    }

    function checkRut(rut) {
        
        // Despejar Puntos
        var valor = rut.value.replace('.','');
        // Despejar Guión
        valor = valor.replace('-','');
        
        // Aislar Cuerpo y Dígito Verificador
        cuerpo = valor.slice(0,-1);
        dv = valor.slice(-1).toUpperCase();
        
        // Formatear RUN
        rut.value = cuerpo + '-'+ dv
        
        // Si no cumple con el mínimo ej. (n.nnn.nnn)
        if(cuerpo.length < 7) { rut.setCustomValidity("RUT Incompleto"); return false;}
        
        // Si todo sale bien, eliminar errores (decretar que es válido)
        rut.setCustomValidity('');
    }

    function buscar(){
        
        var Fn = {
            // Valida el rut con su cadena completa "XXXXXXXX-X"
            validaRut : function (rutCompleto) {
                rutCompleto = rutCompleto.replace("‐","-");
                if (!/^[0-9]+[-|‐]{1}[0-9kK]{1}$/.test( rutCompleto ))
                    return false;
                var tmp 	= rutCompleto.split('-');
                var digv	= tmp[1]; 
                var rut 	= tmp[0];
                if ( digv == 'K' ) digv = 'k' ;
                
                return (Fn.dv(rut) == digv );
            },
            dv : function(T){
                var M=0,S=1;
                for(;T;T=Math.floor(T/10))
                    S=(S+T%10*(9-M++%6))%11;
                return S?S-1:'k';
            }
        }

            if (Fn.validaRut( $("#rut").val() )){

                $("#alerta_rut").html("");
                $.ajax({                        
                    url: "buscar_usuario",
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        'rut':$("#rut").val(),
                    },
                    dataType:"html",
                    beforeSend:function(){
                        $("#btn_buscar").prop('disabled', true);
                        $("#spinner").css('display','block');
                        $("#contenedor_qr").html("");
                    },
                    success: function(data)
                    {
                        $("#btn_buscar").prop('disabled', false);
                        $("#spinner").css('display','none');
                        $("#contenedor_qr").html(data);
                        $('.slc').select2({
                            width: '100%'
                        });
                        $('.slc_programa').select2({
                            width: '100%'
                        });
                        
                    },
                    error:function(data){
                        console.log(data);
                    }
                });
            } 
            else {
                $("#contenedor_qr").html("");
                $("#alerta_rut").html('<div class="alert alert-danger" role="alert"> <i class="fa-solid fa-circle-exclamation"></i> RUT Invalido, recuerde que el formato debe ser 12345678-9</div>');
            }
    }

    function buscar_masivo(rut){

        if(rut == ''){
            var Fn = {
            // Valida el rut con su cadena completa "XXXXXXXX-X"
            validaRut : function (rutCompleto) {
                rutCompleto = rutCompleto.replace("‐","-");
                if (!/^[0-9]+[-|‐]{1}[0-9kK]{1}$/.test( rutCompleto ))
                    return false;
                var tmp 	= rutCompleto.split('-');
                var digv	= tmp[1]; 
                var rut 	= tmp[0];
                if ( digv == 'K' ) digv = 'k' ;
                
                return (Fn.dv(rut) == digv );
            },
            dv : function(T){
                var M=0,S=1;
                for(;T;T=Math.floor(T/10))
                    S=(S+T%10*(9-M++%6))%11;
                return S?S-1:'k';
            }
        }

            if (Fn.validaRut( $("#rut_masivo").val() )){

                $("#alerta_rut_masivo").html("");
                $.ajax({                        
                    url: "buscar_usuario_masivo",
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        'rut':$("#rut_masivo").val(),
                    },
                    dataType:"html",
                    beforeSend:function(){
                        $("#btn_buscar_masivo").prop('disabled', true);
                        $("#spinner_masivo").css('display','block');
                    },
                    success: function(data)
                    {
                        $("#btn_buscar_masivo").prop('disabled', false);
                        $("#spinner_masivo").css('display','none');
                        $("#contenedor_qr_masivo").append(data);
                        $('.slc').select2({
                            width: '100%'
                        });
                        $('.slc_programa').select2({
                            width: '100%'
                        });
                        
                    },
                    error:function(data){
                        console.log(data);
                    }
                });
            }
            else {
                $("#alerta_rut_masivo").html('<div class="alert alert-danger" role="alert"> <i class="fa-solid fa-circle-exclamation"></i> RUT Invalido, recuerde que el formato debe ser 12345678-9</div>');
            }
        }
        else{
            $.ajax({                        
                    url: "buscar_usuario_masivo",
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        'rut':rut,
                    },
                    dataType:"html",
                    beforeSend:function(){
                        $("#btn_buscar_masivo").prop('disabled', true);
                        $("#spinner_masivo").css('display','block');
                    },
                    success: function(data)
                    {
                        $("#btn_buscar_masivo").prop('disabled', false);
                        $("#spinner_masivo").css('display','none');
                        $("#contenedor_qr_masivo").append(data);
                        $('.slc').select2({
                            width: '100%'
                        });
                        $('.slc_programa').select2({
                            width: '100%'
                        });
                        
                    },
                    error:function(data){
                        console.log(data);
                    }
                });
        }

        
    }

    function asignar_perfil(usuario){
        $.ajax({                        
            url: "agregarPerfilUnico",
            type: "post",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'paquete':$(".slc_programa").val(),
                'id':usuario
            },
            dataType:"html",
            beforeSend:function(){
            },
            success: function(data)
            {
                Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Perfil Actualizado',
                showConfirmButton: false,
                timer: 1500
                }).then( (result) => {
                    window.location.reload();
                }
                );
            },
            error:function(data){
                console.log(data);
            }
        });
    }

    function eliminar_programa(id){

        Swal.fire({
        title: '¿Eliminar Programa?',
        text: "Se eliminara el programa asociado a este perfil",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Eliminar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({                        
                    url: "eliminarProgramaAsociado",
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        'id':id
                    },
                    beforeSend:function(){
                    },
                    success: function(data)
                    {
                        Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'Perfil Actualizado',
                        showConfirmButton: false,
                        timer: 1500
                        }).then( (result) => {
                            window.location.reload();
                        }
                        );
                    },
                    error:function(data){
                        console.log(data);
                    }
                });
            }
        });
    }

    function modalUsuario(id){

        $.ajax({                        
            url: "buscarUsuarioAct",
            type: "post",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'id':id
            },
            dataType:'json',
            beforeSend:function(){
                $("#id_mod").val("");
                $("#rut_mod").val("");
                $("#nombre_mod").val("")
                $("#correo_mod").val("");
                $("#tipo_mod").val("");
                $("#empresa_mod").val("");
                $("#division_mod").val("");
            },
            success: function(data)
            {   
                $("#id_mod").val(data["id"]);
                $("#rut_mod").val(data['rut']);
                $("#nombre_mod").val(data['nombre']);
                $("#sap_mod").val(data['sap']);
                $("#correo_mod").val(data['correo']);
                $("#tipo_mod").val(data['tipo']);
                $("#empresa_mod").val(data['empresa']);
                $("#division_mod").val(data['division']);

                $("#modal_act_usuario").modal("show");
            },
            error:function(data){
                console.log(data);
            }
        });
    }

    function actualizarUsuarios(){
        
        $.ajax({                        
            url: "actualizarUsuario",
            type: "post",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                id:$("#id_mod").val(),
                rut:$("#rut_mod").val(),
                sap:$("#sap_mod").val(),
                nombre:$("#nombre_mod").val(),
                correo:$("#correo_mod").val(),
                tipo:$("#tipo_mod").val(),
                empresa:$("#empresa_mod").val(),
                division:$("#division_mod").val(),
            },
            beforeSend:function(){

            },
            success: function(data)
            {   
                $("#row_"+$("#id_mod").val()).remove();
                $("#modal_act_usuario").modal("hide");
                buscar_masivo($("#rut_mod").val());
            },
            error:function(data){
                console.log(data);
            }
        });
        
    }


    function openModalIns(rut){

        $('#modal_ins_usuario').on('hidden.bs.modal', function (e) {
        $(this)
            .find("input,textarea,select")
            .val('')
            .end()
            .find("input[type=checkbox], input[type=radio]")
            .prop("checked", "")
            .end();
        })

        $("#rut_ins").val(rut);
        $("#modal_ins_usuario").modal("show");
    }

    function insertarUsuario(){
        $.ajax({                        
            url: "insertarUsuarioNuevo",
            type: "post",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                id:$("#id_ins").val(),
                rut:$("#rut_ins").val(),
                sap:$("#sap_ins").val(),
                nombre:$("#nombre_ins").val(),
                correo:$("#correo_ins").val(),
                tipo:$("#tipo_ins").val(),
                empresa:$("#empresa_ins").val(),
                division:$("#division_ins").val(),
            },
            beforeSend:function(){

            },
            success: function(data)
            {   
                $("#row_mod_"+$("#rut_ins").val()).remove();
                $("#modal_ins_usuario").modal("hide");
                buscar_masivo($("#rut_ins").val());
            },
            error:function(data){
                console.log(data);
            }
        });
    }

    function asociarProgramaMasivo(){
        if ($(".modificar")[0]){
            Swal.fire({
            icon: 'info',
            title: 'Usuarios no ingresados/actualizados',
            html: 'Actualize/Ingrese la informacion de los usuarios marcados con los signos  <i class="fa-solid fa-user-xmark"></i>  y  <i class="fa-solid fa-person-circle-question"></i>',
            })
        } 
        else {
            if($("#paquete_masivo").val()==''){
                Swal.fire({
                        position: 'center',
                        icon: 'warning',
                        title: 'Seleccione un Programa',
                        showConfirmButton: false,
                        timer: 1500
                        })
            }
            else{
            
                let myform = document.getElementById("form_masivo");
                let fd = new FormData(myform );

                $.ajax({                        
                    url: "asociarProgramaMasivo",
                    type: "post",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: fd,
                    cache: false,
                    processData: false,
                    contentType: false,
                    beforeSend:function(){

                    },
                    success: function(data)
                    {   
                        Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'Usuarios Asociados Correctamente',
                        showConfirmButton: false,
                        timer: 1500
                        }).then( (result) => {
                        window.location.reload();
                        });
                    },
                    error:function(data){
                        console.log(data);
                    }
                });
            }

        }
    }
    
</script>
@endsection
@endsection