@extends('academia.dashboard')

@section('content')

<div class="row mt-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4">

            
            <div class="card-header bg-white border-0 d-flex flex-wrap justify-content-between align-items-center gap-2 py-3 px-4">
                <div>
                    <h4 class="mb-1 fw-bold">
                        <i class="bi bi-mortarboard-fill text-primary me-2"></i>
                        Listado de Cursos
                    </h4>
                    <p class="text-muted small mb-0">Administre los cursos disponibles en la plataforma</p>
                </div>

                @if(Auth::user()->rol_id == 0)
                <div>
                    <a class="btn btn-primary fw-semibold px-3" data-bs-toggle="modal" data-bs-target="#agregar">
                        <i class="bi bi-plus-circle me-1"></i> Agregar Curso
                    </a>
                </div>
                @endif
            </div>

            
            <div class="card-body px-4 pb-4">
                <div class="table-responsive">
                    <table class="table table-hover align-middle zero-configuration mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center" style="width: 60px;">#</th>
                                <th>Título</th>
                                <th>Categoría</th>
                                <th class="text-center">Lecciones</th>
                                <th class="text-end">Precio</th>
                                <th class="text-center">Tipo</th>
                                <th class="text-center">Estado</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($cursos as $curs)
                            <tr>
                                
                                <td class="text-center text-muted fw-semibold">{{$curs->id}}</td>

                                
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="bg-primary bg-opacity-10 text-primary rounded d-flex align-items-center justify-content-center me-2 flex-shrink-0" style="width: 38px; height: 38px;">
                                            <i class="bi bi-book-fill"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-semibold">{{$curs->title}}</h6>
                                        </div>
                                    </div>
                                </td>

                               
                                <td>
                                    <span class="badge bg-light text-dark border fw-normal">
                                        {{$curs->category->title}}
                                    </span>
                                </td>

                                
                                <td class="text-center">
                                    <span class="badge rounded-pill bg-secondary bg-opacity-10 text-secondary fw-semibold">
                                        <i class="bi bi-collection-play me-1"></i>{{$curs->lessons->count()}}
                                    </span>
                                </td>

                                
                                <td class="text-end fw-semibold">
                                    @if ($moneda->mostrar_a_d)
                                        {{$moneda->simbolo}} {{number_format($curs->price, 2 , "." , ",")}}
                                    @else
                                        {{number_format($curs->price, 2 , "." , ",")}} {{$moneda->simbolo}}
                                    @endif
                                </td>

                               
                                <td class="text-center">
                                    @if($curs->tipocurso == 0)
                                        <span class="badge bg-success-subtle text-success border border-success-subtle">
                                            <i class="bi bi-gift me-1"></i>Gratis
                                        </span>
                                    @elseif($curs->tipocurso == 1)
                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                                            <i class="bi bi-credit-card me-1"></i>Pago
                                        </span>
                                    @elseif($curs->tipocurso == 2)
                                        <span class="badge bg-info-subtle text-info border border-info-subtle">
                                            <i class="bi bi-box-seam me-1"></i>Por Producto
                                        </span>
                                    @endif
                                </td>

                               
                                <td class="text-center">
                                    @if($curs->status == 1)
                                        <span class="badge bg-success-subtle text-success border border-success-subtle">
                                            <span class="d-inline-block bg-success rounded-circle me-1" style="width: 6px; height: 6px;"></span>
                                            Habilitado
                                        </span>
                                    @else
                                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle">
                                            <span class="d-inline-block bg-danger rounded-circle me-1" style="width: 6px; height: 6px;"></span>
                                            Deshabilitado
                                        </span>
                                    @endif
                                </td>

                                
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm" role="group">

                                        @if(Auth::user()->rol_id == 0)
                                            <button type="button" class="btn btn-outline-primary"
                                                data-bs-toggle="modal" data-bs-target="#editarcurso"
                                                onclick="editarcurso('{{$curs->id}}','{{$curs->title}}','{{$curs->mentor_id}}','{{$curs->category_id}}','{{$curs->price}}','{{$curs->tipocurso}}','{{$curs->tiempo}}','{{$curs->idproducto_sinergia}}','{{$curs->url_introduccion}}')"
                                                title="Editar curso">
                                                <i class="bi bi-pencil-square"></i>
                                            </button>

                                            @if($curs->status == 1)
                                                <a class="btn btn-outline-danger" href="{{ route('cursos-bloqueo', $curs->id) }}" title="Deshabilitar">
                                                    <i class="bi bi-slash-circle"></i>
                                                </a>
                                            @else
                                                <a class="btn btn-outline-success" href="{{ route('cursos-bloqueo', $curs->id) }}" title="Habilitar">
                                                    <i class="bi bi-check-circle"></i>
                                                </a>
                                            @endif
                                        @endif

                                        <a class="btn btn-outline-warning" href="{{ route('cursos-vista', $curs->id) }}" title="Recursos adicionales">
                                            <i class="bi bi-folder2-open"></i>
                                        </a>

                                        <a class="btn btn-outline-warning" href="{{ route('lecciones-index', $curs->id) }}" title="Lecciones">
                                            <i class="bi bi-list-ul"></i>
                                        </a>

                                        <a class="btn btn-outline-primary" href="{{ route('academia-evaluacion-index', $curs->id) }}" title="Evaluaciones">
                                            <i class="bi bi-clipboard-check"></i>
                                        </a>

                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>




<div id="agregar" 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">Crear Curso</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('cursos-crear')}}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
             

            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Título del curso</label>
                    <input type="text" class="form-control" name="titulo" required>
                </div>
            </div>
            
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Precio</label>
                    <input type="number" step="any" class="form-control" name="price" required>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Duración del vídeo</label>
                    <input type="text" class="form-control" name="tiempo" required>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Código del vídeo Introductorio (Opcional) <a href="{{ env('GUIA_VIDEO') }}" target="blank">Guia de Uso</a> </label>
                    <input type="url" class="form-control" name="url_introduccion">
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Tipo de Curso</label>
                    <select class="form-control" name="tipocurso" required onchange="cambiocursos(this.value)">
                     <option value="" selected disabled>Seleccione una Opción</option>
                    
                       <option value="0">Gratuito</option>
                       <option value="1">Pago</option>
                       <option value="2">Acivación por Producto</option>
                     
                    </select>
                </div>
            </div>
            
            <div class="col-md-12 sinergia" style="display:none;">
                <div class="form-group mb-3">
                    <label>Productos</label>
                    <select class="form-control" name="sinergia">
                     <option value="" selected disabled>Seleccione una Opción</option>
                    
                       @foreach($productos as $pro)
                       <option value="{{ $pro->id }}">{{ $pro->title }}</option>
                       @endforeach
                       
                    </select>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Categorías</label>
                    <select class="form-control" name="categoria" required>
                     <option value="" selected disabled>Seleccione una Opción</option>
                     @foreach($categorias as $cat)
                       <option value="{{$cat->id}}">{{$cat->title}}</option>
                     @endforeach
                    </select>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Mentores</label>
                    <select class="form-control" name="mentor" required>
                     <option value="" selected disabled>Seleccione una Opción</option>
                       
                       @foreach($mentores as $mentor)
                       <option value="{{$mentor->ID}}">{{$mentor->display_name}}</option>
                       @endforeach
                     
                    </select>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Texto Corto</label>
                    <textarea name="text_corto" class="summernote_texto"></textarea>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Descripción</label>
                    <textarea name="descripcion" class="summernote"></textarea>
                </div>
            </div>
            
                
                <div class="col-md-12">
                    <div class="form-group mb-3">
                        <div class="alert alert-info" role="alert">
                            <h6>Dimension de 490 x 300 pixeles, formato PNG,JPG,JPEG.</h6>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-12">
                    <div class="form-group mb-3">
                       <label>Imagen de Cover</label>
                       <input class="form-control" type="file" name="imagen" required>
                    </div>    
                </div>
            
              
                    <div class="col-md-12">
                        <div class="form-group mb-3"> 
                           <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>




<div id="editarcurso" 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 Curso</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{route('cursos-editar')}}" method="post" enctype="multipart/form-data">
                    {{ csrf_field() }}
             

            <input type="hidden" class="id" name="id">
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Título del curso</label>
                    <input type="text" class="form-control title" name="titulo" required>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Precio</label>
                    <input type="number" step="any" class="form-control precio" name="price" required>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Duración del vídeo</label>
                    <input type="text" class="form-control tiempo" name="tiempo" required>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Código del vídeo Introductorio (Opcional) <a href="{{ env('GUIA_VIDEO') }}" target="blank">Guia de Uso</a> </label>
                    <input type="url" class="form-control url_introduccion" name="url_introduccion">
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Tipo de Curso</label>
                    <select class="form-control tipocurso" name="tipocurso" required onchange="cambiocursos(this.value)">
                     <option value="" selected disabled>Seleccione una Opción</option>
                    
                       <option value="0">Gratuito</option>
                       <option value="1">Pago</option>
                       <option value="2">Acivación por Producto</option>
                     
                    </select>
                </div>
            </div>
            
            <div class="col-md-12 sinergia" style="display:none;">
                <div class="form-group mb-3">
                    <label>Productos</label>
                    <select class="form-control sinerg" name="sinergia">
                     <option value="" selected disabled>Seleccione una Opción</option>
                    
                       @foreach($productos as $pro)
                       <option value="{{ $pro->id }}">{{ $pro->title }}</option>
                       @endforeach
                       
                    </select>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Categorías</label>
                    <select class="form-control categoria" name="categoria" required>
                     <option value="" selected disabled>Seleccione una Opción</option>
                     @foreach($categorias as $cat)
                       <option value="{{$cat->id}}">{{$cat->title}}</option>
                     @endforeach
                    </select>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Mentores</label>
                    <select class="form-control mentor" name="mentor" required>
                     <option value="" selected disabled>Seleccione una Opción</option>
                     
                       @foreach($mentores as $mentor)
                       <option value="{{$mentor->ID}}">{{$mentor->display_name}}</option>
                       @endforeach
                     
                    </select>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Texto Corto</label>
                    <textarea name="text_corto" class="summernoteeditar_texto"></textarea>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="form-group mb-3">
                    <label>Descripción</label>
                    <textarea name="descripcion" class="summernoteeditar"></textarea>
                </div>
            </div>
            
            
                <div class="col-md-12">
                    <div class="form-group mb-3">
                        <div class="alert alert-info" role="alert">
                            <h6>Dimension de 490 x 300 pixeles, formato PNG,JPG,JPEG.</h6>
                        </div>
                    </div>
                </div>
            
            <div class="col-md-12">
               <div class="form-group mb-3">
                <label>Imagen de Cover</label>
                <input class="form-control" type="file" name="imagen">
               </div>    
            </div>

           
            <div class="col-md-12">
                <div class="form-group mb-3">    
                 <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    
@include('usuario.componentes.scripBotones')


@push('script')
<script type="text/javascript">
   
    $(document).ready(function () {
        $('.summernote').summernote({
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['view', ['fullscreen', 'codeview']]
          ]
        });
        
        $('.summernote_texto').summernote({
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['view', ['fullscreen', 'codeview']]
          ]
        });
    })
    
    
    function editarcurso(id, title, mentor, categoria, precio, tipocurso, tiempo, sinergia, url_introduccion){
      
        $('.id').val(id);
        $('.title').val(title);
        $('.categoria').val(categoria);
        $('.mentor').val(mentor);
        $('.precio').val(precio);
        $('.tiempo').val(tiempo);
        $('.tipocurso').val(tipocurso);
        $('.sinerg').val(sinergia);
        $('.url_introduccion').val(url_introduccion);
        
        if(sinergia > 0){
            $('.sinergia').show('slow')
        }else{
            $('.sinergia').hide('slow')
        }
        
        $.get('{{request()->root()}}/academia/infocurso/'+id, function (response) {
             cursos = JSON.parse(response)
             
            cursos.forEach(item => {
               $('.summernoteeditar').summernote('code', item.description);
               $('.summernoteeditar_texto').summernote('code', item.text_corto);
            });
        });
    }
    
    
    function cambiocursos(valor){
        
        if(valor == 2){
            $('.sinergia').show('slow')
        }else{
            $('.sinergia').hide('slow')
        }
    }
  
</script>
@endpush