@extends('layouts.dashboardnew')

@section('content')

<style>

.mb-7 {
    margin-bottom: 5rem !important;
}

.min-vh-25 {
    min-height: 25vh !important;
}

.position-relative {
    position: relative !important;
}

.bg-holder {
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    background-repeat: no-repeat;
    z-index: 0;
}

.avatar-profile {
    transform: translateY(50%);
}

.avatar-5xl {
    height: 10.5rem;
    width: 10.5rem;
}

.avatar img, .avatar .avatar-name {
    width: 100%;
    height: 100%;
}

.shadow-sm {
    box-shadow: var(--falcon-box-shadow-sm) !important;
}

.img-thumbnail {
    padding: 0.25rem;
    background-color: var(--falcon-thumbnail-bg-global);
    border: 3px solid var(--falcon-thumbnail-bg-global);
    border-radius: var(--falcon-border-radius);
    box-shadow: var(--falcon-box-shadow-sm);
    max-width: 100%;
    height: auto;
}
</style>


<div class="container-fluid">
    <div class="row">
        
        <div class="col-md-9">
            <div class="mb-3 card">
                <div class="position-relative min-vh-25 mb-5 card-header">
                    <div class="bg-holder rounded-3 rounded-bottom-0" style="background-image: url({{asset('fondo/'.$data['principal']->fondo)}});"></div>
                    <div class="avatar avatar-5xl avatar-profile">
                        <img class="rounded-circle img-thumbnail shadow-sm" src="{{ asset('fondo/'.$data['principal']->avatar) }}" alt="">
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        
                        <div class="col-md-8">
                            <div class="row">
                                
                                <div class="col-md-4">
                                     <h4 class="mb-1 text-center">ID: {{ $data['principal']->ID }} </h4>
                                </div>
                                
                                <div class="col-md-4">
                                     <h4 class="mb-1 text-center"> {{ $data['principal']->display_name }} </h4>
                                </div>
                                
                                <div class="col-md-4">
                                     <h4 class="mb-1 text-center">{{ $data['principal']->user_email }} </h4>
                                </div>
                        
                                <div class="col-md-4">
                                    <h4 class="mb-1 text-info text-center"> {{ $data['rol'] }} </h4>
                                </div>
                        
                                <div class="col-md-4">
                                    <h4 class="mb-1 text-center"> <i class="fa-solid fa-sitemap"></i> Directos: {{ $data['directos'] }} </h4>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="row">
                                @if($data['segundo']->facebook != null)
                                <div class="col-md-2 col-2 text-center">
                                    <a href="{{ $data['segundo']->facebook }}" target="_black">
                                        <i class="fa-brands fa-facebook" style="color: #367fa9; font-size: 25px;"></i>
                                    </a>
                                </div>
                                @endif
                                
                                @if($data['segundo']->twitter != null)
                                <div class="col-md-2 col-2 text-center">
                                    <a href="{{ $data['segundo']->twitter }}" target="_black">
                                        <i class="fa-brands fa-x-twitter" style="font-size: 25px;"></i>
                                    </a>
                                </div>
                                @endif
                                
                                @if($data['segundo']->instagram != null)
                                <div class="col-md-2 col-2 text-center">
                                    <a href="{{ $data['segundo']->instagram }}" target="_black">
                                        <i class="fa fa-instagram" style="color: #833AB4; font-size: 25px;"></i>
                                    </a>
                                </div>
                                @endif
                                
                                @if($data['segundo']->youtube != null)
                                <div class="col-md-2 col-2 text-center">
                                    <a href="{{ $data['segundo']->youtube }}" target="_black">
                                        <i class="fa fa-youtube" style="color: red; font-size: 25px;"></i>
                                    </a>
                                </div>
                                @endif
                                
                                @if($data['segundo']->linkedin != null)
                                <div class="col-md-2 col-2 text-center">
                                    <a href="{{ $data['segundo']->linkedin }}" target="_black">
                                        <i class="fa fa-linkedin" style="color: blue; font-size: 25px;"></i>
                                    </a>
                                </div>
                                @endif
                            </div>    
                        </div>
                        
                    </div>
                </div>
            </div>
            
            
            <div class="card">
                <div class="card-body">
                    
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                          <a class="nav-link active" id="personal-tab" data-toggle="tab" href="#personal" role="tab" aria-controls="personal" aria-selected="true">Información Personal</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" id="contacto-tab" data-toggle="tab" href="#contacto" role="tab" aria-controls="contacto" aria-selected="false">Información de Contacto</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" id="social-tab" data-toggle="tab" href="#social" role="tab" aria-controls="social" aria-selected="false">Perfil Social</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" id="banco-tab" data-toggle="tab" href="#banco" role="tab" aria-controls="banco" aria-selected="false">Información Bancaria</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" id="pagos-tab" data-toggle="tab" href="#pagos" role="tab" aria-controls="pagos" aria-selected="false">Pagos</a>
                        </li>
                        
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
                             @include('usuario.formulario.personal', ['controler' => $data['controler']])
                        </div>
                        <div class="tab-pane fade" id="contacto" role="tabpanel" aria-labelledby="contacto-tab">
                             @include('usuario.formulario.contacto', ['controler' => $data['controler']]) 
                        </div>
                        <div class="tab-pane fade" id="social" role="tabpanel" aria-labelledby="social-tab">
                             @include('usuario.formulario.social', ['controler' => $data['controler']])  
                        </div>
                        <div class="tab-pane fade" id="banco" role="tabpanel" aria-labelledby="banco-tab">
                             @include('usuario.formulario.bancario', ['controler' => $data['controler']]) 
                        </div>
                        <div class="tab-pane fade" id="pagos" role="tabpanel" aria-labelledby="pagos-tab">
                             @include('usuario.formulario.pago', ['controler' => $data['controler']]) 
                        </div>
                        
                    </div>
                    
                </div>
            </div>
        </div>   
        
        
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    
                    <h4 class="text-center"> Progreso del Perfil </h4>
                    
                    <div id="chart"></div>
                    
                    <div class="row mt-3">
                        <div class="col-md-9 col-9">
                            <p> 
                            
                            @if($data['personal'] == 6)
                              <i class="fa-solid fa-circle-check text-success"></i>
                            @else
                              <i class="fa-solid fa-ban text-danger"></i>
                            @endif
                            
                               Información Personal
                            </p>
                        </div>
                            
                        <div class="col-md-3 col-3">
                            <p class="text-success"> {{ $data['personal'] }} / 6</p>
                        </div>
                        
                        <div class="col-md-9 col-9">
                            <p> 
                            
                            @if($data['contacto'] == 8)
                              <i class="fa-solid fa-circle-check text-success"></i>
                            @else
                              <i class="fa-solid fa-ban text-danger"></i>
                            @endif
                            
                            Información Contacto
                            
                            </p>
                        </div>
                            
                        <div class="col-md-3 col-3">
                            <p class="text-success"> {{ $data['contacto'] }} / 8</p>
                        </div>
                        
                        <div class="col-md-9 col-9">
                            <p>
                                
                            @if($data['perfil'] == 1)
                              <i class="fa-solid fa-circle-check text-success"></i>
                            @else
                              <i class="fa-solid fa-ban text-danger"></i>
                            @endif
                            
                             Foto de Perfil
                             
                            </p>
                        </div>
                            
                        <div class="col-md-3 col-3">
                            <p class="text-success"> {{ $data['perfil'] }} / 1</p>
                        </div>
                        
                        <div class="col-md-9 col-9">
                            <p> 
                             
                            @if($data['portada'] == 1)
                              <i class="fa-solid fa-circle-check text-success"></i>
                            @else
                              <i class="fa-solid fa-ban text-danger"></i>
                            @endif
                            
                            Foto de portada 
                            
                            </p>
                        </div>
                            
                        <div class="col-md-3 col-3">
                            <p class="text-success"> {{ $data['portada'] }} / 1</p>
                        </div>
                    </div>
                    
                    
                    @if(Auth::user()->ID == $data['principal']->ID || Auth::user()->rol_id == 0)    
                        <a href="#" class="btn btn-info btn-block text-white" data-toggle="modal" data-target="#myModal"> 
                            Editar imagen 
                        </a>
                    @endif
                            
                    @if($seguridad == null)
                        @if(Auth::user()->ID == $data['principal']->ID)
                            
                            @if($data['principal']->autenticacion == 0 || $data['principal']->autenticacion == 1)

                                <a class="btn btn-info btn-block mt-2" href="{{route('admin-factor-auth', ['id' => 2, 'iduser' => $data['principal']->ID])}}">Activar 2FA</a>

                            @elseif($data['principal']->autenticacion == 2)

                                <a class="btn btn-info btn-block mt-2" href="{{route('admin-factor-auth', ['id' => 0, 'iduser' => $data['principal']->ID])}}">Inactivar 2FA</a>
                           
                            @endif
                        
                        @endif
                    @endif
                    
                </div>
            </div>
            
            
            <div class="card">
                <div class="card-body">
                    
                    <h4 class="text-center mb-3"> Ultimos Directos </h4>
                    
                    
                        @foreach($data['ultimosdirect'] as $direct)
                        <div class="col-md-12 mt-1">
                            <div class="row">
                                
                                <div class="media">
                                    <img class="rounded-circle" src="{{ asset('fondo/'.$direct->avatar) }}" alt="{{ $direct->display_name }}" style="width: 50px; height: 50px;">
                                    <div class="media-body">
                                        <h5 class="mt-0 ml-2">{{ $direct->display_name }}</h5>
                                        <p class="ml-2">{{ date('d-m-Y', strtotime($direct->created_at)) }}</p>
                                    </div>    
                                </div>
                                
                            </div>
                        </div>
                        @endforeach
                    
                    
                </div>
            </div>
            
            
        </div> 

    </div>
</div>
               	


@include('usuario.formulario.perfil')


@endsection


@push('script')
<script src ="{{ asset('plugins/apexcharts/apexcharts.js') }}"></script>

<script type="text/javascript">
    
    $('.telefono').inputmask('999-999-9999');
    
    $(document).ready(function(){
       $(".chosen").chosen({width: "100%"});
    });

    function mostrarPassword(){
        var cambio = document.getElementById("txtPassword");
		if(cambio.type == "password"){
			cambio.type = "text";
			$('.icon').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
		}else{
			cambio.type = "password";
			$('.icon').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
		}
    }
    
    
    function mostrarPassword2(){
        var cambio = document.getElementById("txtPassword2");
		if(cambio.type == "password"){
			cambio.type = "text";
			$('.icon2').removeClass('fa fa-eye-slash').addClass('fa fa-eye');
		}else{
			cambio.type = "password";
			$('.icon2').removeClass('fa fa-eye').addClass('fa fa-eye-slash');
		}
    }
    
    
    var porcentaje = (16 / 100);
    var total = (parseFloat('{{$data['personal']}}') + parseFloat('{{$data['contacto']}}') + parseFloat('{{$data['perfil']}}') + parseFloat('{{$data['portada']}}'))
    
    porcentaje = (total / porcentaje);
    
        var options = {
          series: [porcentaje],
          chart: {
          height: 250,
          type: 'radialBar',
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          radialBar: {
            startAngle: -135,
            endAngle: 225,
             hollow: {
              margin: 0,
              size: '70%',
              background: '#fff',
              image: undefined,
              imageOffsetX: 0,
              imageOffsetY: 0,
              position: 'front',
              dropShadow: {
                enabled: true,
                top: 3,
                left: 0,
                blur: 4,
                opacity: 0.24
              }
            },
            track: {
              background: '#fff',
              strokeWidth: '67%',
              margin: 0, // margin is in pixels
              dropShadow: {
                enabled: true,
                top: -3,
                left: 0,
                blur: 4,
                opacity: 0.35
              }
            },
        
            dataLabels: {
              show: true,
              name: {
                offsetY: -10,
                show: true,
                color: '#888',
                fontSize: '17px'
              },
              value: {
                formatter: function(val) {
                  return parseInt(val) + '%';
                },
                color: '#111',
                fontSize: '36px',
                show: true,
              }
            }
          }
        },
        fill: {
          type: 'gradient',
          gradient: {
            shade: 'dark',
            type: 'horizontal',
            shadeIntensity: 0.5,
            gradientToColors: ['#ABE5A1'],
            inverseColors: true,
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0, 100]
          }
        },
        stroke: {
          lineCap: 'round'
        },
        labels: ['Porcentaje'],
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
     
     
     

function validarPassword(password2){
    
    var leg = false;
    var mayuscula = false;
	var minuscula = false;
  	var numero = false;
  	var simbolo = false;
    
   
    for(var i = 0; i<password2.length; i++){
	    if(password2.charCodeAt(i) >= 65 && password2.charCodeAt(i) <= 90){
		   mayuscula = true;
        }else if(password2.charCodeAt(i) >= 97 && password2.charCodeAt(i) <= 122){
		   minuscula = true;
        }else if(password2.charCodeAt(i) >= 48 && password2.charCodeAt(i) <= 57){
		   numero = true;
        }else{
	       simbolo = true;
		}
    }
  
  
    if(password2.length >= 6){
        $('.legth').addClass('text-success');
        leg = true;
    }else{
        $('.legth').removeClass('text-success');
        leg = false;
    }
  
    if(mayuscula == true){
        $('.mayuscula').addClass('text-success');
    }else{
        $('.mayuscula').removeClass('text-success');
        mayuscula = false;
    }
  
    if(minuscula == true){
        $('.minuscula').addClass('text-success');
    }else{
        $('.minuscula').removeClass('text-success');
        minuscula = false;
    }
  
    if(numero == true){
        $('.especial').addClass('text-success');
    }else{
        $('.especial').removeClass('text-success');
        numero = false;
    }
        
    if(simbolo == true){
         $('.simbolo').addClass('text-success');
    }else{
        $('.simbolo').removeClass('text-success');
        numero = false;
    }
      
} 




function validarPassword2(password2){
    
    var leg2 = false;
    var mayuscula2 = false;
	var minuscula2 = false;
  	var numero2 = false;
  	var simbolo2 = false;
    
   
    for(var i = 0; i<password2.length; i++){
	    if(password2.charCodeAt(i) >= 65 && password2.charCodeAt(i) <= 90){
		   mayuscula2 = true;
        }else if(password2.charCodeAt(i) >= 97 && password2.charCodeAt(i) <= 122){
		   minuscula2 = true;
        }else if(password2.charCodeAt(i) >= 48 && password2.charCodeAt(i) <= 57){
		   numero2 = true;
        }else{
	       simbolo2 = true;
		}
    }
  
  
    if(password2.length >= 6){
        $('.legth2').addClass('text-success');
        leg2 = true;
    }else{
        $('.legth2').removeClass('text-success');
        leg2 = false;
    }
  
    if(mayuscula2 == true){
        $('.mayuscula2').addClass('text-success');
    }else{
        $('.mayuscula2').removeClass('text-success');
        mayuscula2 = false;
    }
  
    if(minuscula2 == true){
        $('.minuscula2').addClass('text-success');
    }else{
        $('.minuscula2').removeClass('text-success');
        minuscula2 = false;
    }
  
    if(numero2 == true){
        $('.especial2').addClass('text-success');
    }else{
        $('.especial2').removeClass('text-success');
        numero2 = false;
    }
        
    if(simbolo2 == true){
         $('.simbolo2').addClass('text-success');
    }else{
        $('.simbolo2').removeClass('text-success');
        numero2 = false;
    }
}    


    function check(e) {
         tecla = (document.all) ? e.keyCode : e.which;

         //Tecla de retroceso para borrar, siempre la permite
         if (tecla == 8 || tecla == 32) {
             return true;
         }

         // Patrón de entrada, en este caso solo acepta numeros y letras
         patron = /[A-Za-z0-9]/;
         tecla_final = String.fromCharCode(tecla);
         return patron.test(tecla_final);
    }

</script>
@endpush