@extends('academia.dashboard')

@section('content')


<!-- Slider banner -->
@include('academia.home.slider.index')

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                
                <div class="row">
                    
                    <div class="col-md-2">
                        <div class="form-group text-center">
                            <img src="{{ asset('fondo/'.Auth::user()->avatar) }}" class="rounded-circle" style="max-width: 150px; height: 150px;">
                            <a href="#" class="text-dark" data-bs-toggle="modal" data-bs-target="#editar">
                                <p class="text-center mt-3">
                                    Editar <i class="fa-solid fa-pen-to-square"></i>
                                </p>
                            </a>
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group mt-3">
                            <h4 class="fw-bold fs-3">Profesor</h3>
                            <h3 class="text-primary">{{ Auth::user()->usercampo->firstname }} {{ Auth::user()->usercampo->lastname }} {{ Auth::user()->usercampo->nombre2 }} {{ Auth::user()->usercampo->apellido2 }}</h4>
                            <h5>ID: {{ Auth::user()->ID }}</h5>
                        </div>
                    </div>
                    
                    <div class="col-md-7">
                        <div class="form-group mt-2">
                            <div class="d-flex justify-content-center">
                            <div class="d-flex flex-row bd-highlight">
                                <div class="p-2 bd-highlight">
                                    <h1 class="text-primary-academia size-number text-center">{{ $cursos->count() }}</h1>
                                    <h4 class="text-secondary text-center">Cursos Dictados</h4>
                                </div>
                                <div class="p-2 bd-highlight ms-md-4">
                                    <h1 class="text-primary-academia size-number text-center">{{ $estudiantes }}</h1>
                                    <h4 class="text-secondary text-center">Estudiantes</h4>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
</div>



<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                
                <div class="row">
                    <div class="col-sm-3 mb-2 mb-sm-0">
                        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active show" id="v-pills-perfil-tab" data-bs-toggle="pill" href="#v-pills-perfil" role="tab" aria-controls="v-pills-perfil" aria-selected="true">
                                Perfil
                            </a>
                            <a class="nav-link" id="v-pills-biografia-tab" data-bs-toggle="pill" href="#v-pills-biografia" role="tab" aria-controls="v-pills-biografia" aria-selected="false" tabindex="-1">
                                Biografia
                            </a>
                        </div>
                    </div>

                    <div class="col-sm-9">
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade active show" id="v-pills-perfil" role="tabpanel" aria-labelledby="v-pills-perfil-tab">
                               
                                <form method="POST" action="{{ route('academia-mentor-perfil-save') }}">
                                    {{ csrf_field() }}
                                   
                                    <div class="col-md-12">
                                        <div class="row">
                                           
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                     <label for="primer_nombre">Primer Nombre</label>
                                                     <input type="text" name="primer_nombre" class="form-control" id="primer_nombre" value="{{ Auth::user()->usercampo->firstname }}">
                                                </div>
                                            </div>
                                
                                           <div class="col-md-6">
                                               <div class="form-group mb-3">
                                                    <label for="segundo_nombre">Segundo Nombre</label>
                                                    <input type="text" name="segundo_nombre" class="form-control" id="segundo_nombre" required value="{{ Auth::user()->usercampo->lastname }}">
                                               </div>
                                           </div>
                                
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                     <label for="primer_apellido">Primer Apellido</label>
                                                     <input type="text" name="primer_apellido" class="form-control" id="primer_apellido" required value="{{ Auth::user()->usercampo->nombre2 }}">
                                                </div>
                                            </div>
                                
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                     <label for="segundo_apellido">Segundo Apellido</label>
                                                     <input type="text" name="segundo_apellido" class="form-control" id="segundo_apellido" required value="{{ Auth::user()->usercampo->apellido2 }}">
                                                </div>
                                            </div>
                                            
                                            
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                     <label for="correo">Correo Eléctronico</label>
                                                     <input type="email" name="user_email" class="form-control" id="correo" required value="{{ Auth::user()->user_email }}">
                                                </div>
                                            </div>
                                
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                    <label for="password">Contraseña</label>
                                                    <div class="input-group input-group-merge">
                                                        <input type="password" id="password" name="password" class="form-control password">
                                                        <div class="input-group-text" data-password="false">
                                                            <span class="password-eye"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                
                                            <div class="col-md-6">
                                                <div class="form-group mb-3">
                                                    <label for="passwordconfir">Confirmar Contraseña</label>
                                                    <div class="input-group input-group-merge">
                                                        <input type="password" id="passwordconfir" name="password_confirmation" class="form-control password">
                                                        <div class="input-group-text" data-password="false">
                                                            <span class="password-eye"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            
                                            <div class="col-md-12">
                                                <div class="d-flex justify-content-center">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                             <button class="btn btn-info w-100" type="submit">Aceptar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                
                                        </div>
                                    </div>
                                    
                                </form>
                               
                            </div>
                            
                            <div class="tab-pane fade" id="v-pills-biografia" role="tabpanel" aria-labelledby="v-pills-biografia-tab">
                                
                                <form method="POST" action="{{ route('academia-mentor-biografia-save') }}">
                                    {{ csrf_field() }}
                                   
                                    <div class="col-md-12">
                                        <div class="row">
                                            
                                            <div class="col-md-12">
                                                <div class="form-group mb-3">
                                                     <label for="biografia">Biografia</label>
                                                     <textarea class="form-control" name="biografia" id="biografia" rows="5">{{ Auth::user()->usercampo->biografia }}</textarea>
                                                </div>
                                            </div>
                                            
                                            
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                     <label for="descripcion">Descripción</label>
                                                     <textarea class="form-control" name="descripcion" id="descripcion" rows="5">{{ Auth::user()->usercampo->descripcion }}</textarea>
                                                </div>
                                            </div>
                                            
                                            
                                            <div class="col-md-12">
                                                <div class="d-flex justify-content-center">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                             <button class="btn btn-info w-100" type="submit">Aceptar</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        </div>
                                    </div>
                                    
                                </form>
                                
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>



<div class="row mt-4">
    <div class="col-12">
        <div class="card-body">
            <div class="row">
                
                
                <div class="col-md-12">
                    <div class="form-group">
                        <h3 class="text-dark">Cursos</h3>
                    </div>
                </div>
                
                
                @foreach($cursos as $curso)
                <div class="col-md-3">
                    <div class="card">
                        <img src="{{ asset('cursos/'.$curso->cover) }}" class="card-img-top">
                        
                        <div class="card-body">
                            <h4 class="text-dark text-truncate fw-bold"> {{$curso->title}} </h4>
                            <h5 class="text-secondary text-truncate">{{$curso->category->title}}</h5>
                                            
                            <h6 class="text-secondary mt-2 mb-2">{!! $curso->text_corto !!}</h6>
                            
                            <div class="d-flex flex-row bd-highlight mb-2 mt-2">
                                <div class="p-2 bd-highlight">
                                    <i class="fa-regular fa-circle-user"></i> {{ $curso->eventos->count() }}
                                </div>
                                <div class="p-2 bd-highlight">
                                    <i class="fa-regular fa-thumbs-up"></i> {{ $curso->likes }}
                                </div>
                            </div>
                        </div>
                    </div>    
                </div>
                @endforeach
                
            </div>
        </div>
    </div>
</div>        


<div id="editar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="recuperarLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="recuperarLabel">Editar Perfil</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('academia-mentor-data-save') }}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
             
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <div class="alert alert-info" role="alert">
                                <h5 class="mt-1">Dimension de 300 x 300 pixeles, formato PNG,JPG,JPEG.</h5>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group mb-3">
                            <label class="custom-file-label">Imagen del Usuario</label>
                            <input type="file" class="form-control" name="avatar">   
                        </div> 
                    </div>
            
              
                    <div class="col-md-12 mb-3">
                        <div class="form-group"> 
                           <button type="submit" class="btn btn-info w-100">Aceptar</button>
                        </div>
                    </div>
                
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>


@endsection