@extends('layouts.dashboardnew')

@section('content')

<!-- Estilo del perfil -->
<link href="{{ asset('assets/css/perfil.css') }}" rel="stylesheet" type="text/css" id="app-style" />

<div class="row">
    <div class="col-md-9 col-12">
        <div class="card mb-3">
            <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['principal']->rol->name }} </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['principal']->usercampo->facebook != null)
                            <div class="col-md-2 col-2 text-center">
                                <a href="{{ $data['principal']->usercampo->facebook }}" target="_black">
                                    <i class="fa-brands fa-facebook" style="color: #367fa9; font-size: 25px;"></i>
                                </a>
                            </div>
                            @endif
                                
                            @if($data['principal']->usercampo->twitter != null)
                            <div class="col-md-2 col-2 text-center">
                                <a href="{{ $data['principal']->usercampo->twitter }}" target="_black">
                                    <i class="fa-brands fa-x-twitter" style="font-size: 25px;"></i>
                                </a>
                            </div>
                            @endif
                                
                            @if($data['principal']->usercampo->instagram != null)
                            <div class="col-md-2 col-2 text-center">
                                <a href="{{ $data['principal']->usercampo->instagram }}" target="_black">
                                    <i class="fa fa-instagram" style="color: #833AB4; font-size: 25px;"></i>
                                </a>
                            </div>
                            @endif
                                
                            @if($data['principal']->usercampo->youtube != null)
                            <div class="col-md-2 col-2 text-center">
                                <a href="{{ $data['principal']->usercampo->youtube }}" target="_black">
                                    <i class="fa fa-youtube" style="color: red; font-size: 25px;"></i>
                                </a>
                            </div>
                            @endif
                                
                            @if($data['principal']->usercampo->linkedin != null)
                            <div class="col-md-2 col-2 text-center">
                                <a href="{{ $data['principal']->usercampo->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 nav-bordered mb-3" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#personal-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" aria-selected="false" tabindex="-1" role="tab">
                            Información Personal
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#contacto-b2" data-bs-toggle="tab" aria-expanded="true" class="nav-link" aria-selected="true" role="tab">
                            Información de Contacto
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#social-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" tabindex="-1" role="tab">
                            Perfil Social
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#banco-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" tabindex="-1" role="tab">
                            Información Bancaria
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#pagos-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" tabindex="-1" role="tab">
                            Pagos
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane show active" id="personal-b2" role="tabpanel">
                        @include('usuario.formulario.personal', ['controler' => $data['controler']])
                    </div>
                    <div class="tab-pane" id="contacto-b2" role="tabpanel">
                        @include('usuario.formulario.contacto', ['controler' => $data['controler']])
                    </div>
                    <div class="tab-pane" id="social-b2" role="tabpanel">
                        @include('usuario.formulario.social', ['controler' => $data['controler']])
                    </div>
                    <div class="tab-pane" id="banco-b2" role="tabpanel">
                        @include('usuario.formulario.bancario', ['controler' => $data['controler']])
                    </div>
                    <div class="tab-pane" id="pagos-b2" role="tabpanel">
                        @include('usuario.formulario.pago', ['controler' => $data['controler']])
                    </div>
                </div>
                    
            </div>
        </div>

    </div>  

    

    <div class="col-md-3 col-12">
        <div class="card">
            <div class="card-body">

                @include('dashboard.componentes.progreso_perfil')
                    
                    
                @if(Auth::user()->ID == $data['principal']->ID || Auth::user()->rol_id == 0) 
                <div class="col-md-12 col-6">
                    <div class="form-group mb-2">
                        <a href="#" class="btn btn-info w-100" data-bs-toggle="modal" data-bs-target="#myModal"> 
                            Editar imagen 
                        </a>
                    </div>
                </div>   
                @endif
                            
                @if($seguridad == null)
                    @if(Auth::user()->ID == $data['principal']->ID)
                            
                        @if($data['principal']->autenticacion == 0 || $data['principal']->autenticacion == 1)

                        <div class="col-md-12 col-6">
                            <div class="form-group mb-2">
                                <a class="btn btn-info w-100" href="{{route('admin-factor-auth', ['id' => 2, 'iduser' => $data['principal']->ID])}}">Activar 2FA</a>
                            </div>
                        </div> 

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

                        <div class="col-md-12 col-6">
                            <div class="form-group mb-2">
                                <a class="btn btn-info w-100" href="{{route('admin-factor-auth', ['id' => 0, 'iduser' => $data['principal']->ID])}}">Inactivar 2FA</a>
                            </div>
                        </div>

                        @endif
                        
                    @endif
                @endif

                    </div>
                </div>
            
                <div class="card">
                    <div class="card-body">
                    
                        <h4 class="fs-4 fw-bold color-black"> Ultimos Directos </h4>
                    
                    
                        @foreach($data['ultimosdirect'] as $direct)
                        <div class="col-md-12 mt-1">
                            <div class="row">
                                <div class="d-flex align-items-start">
                                    <img src="{{ asset('fondo/'.$direct->avatar) }}" alt="{{ $direct->display_name }}" class="me-3 avatar-sm rounded-circle">
                                    <div class="w-100 overflow-hidden">
                                        <h5 class="mb-1 mt-0">{{ $direct->display_name }}</h5>
                                        <p> {{ 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 type="text/javascript">

    @foreach($paises as $pais)
        if('{{ $data['principal']->usercampo->idpais }}' == '{{ $pais->id }}'){
            $('.telefono').inputmask('999-999-9999'); 
            $('.dato-adicional').text('+ ({{$pais->idface}}) ')
        }
    @endforeach


    function modificarcodigopais(valor){
        
        @foreach($paises as $pais)
           if(valor == '{{ $pais->id }}'){
               $('.telefono').inputmask('999-999-9999'); 
               $('.dato-adicional').text('+ ({{$pais->idface}}) ')
           }
        @endforeach
    }

</script>
@endpush