@extends('admin.layout.master')

@section('content')
    <main>
        <!-- Breadcrumb Area -->
        <div class="breadcrumb-area">
            <h1>Dashboard</h1>
            <ol class="breadcrumb">
                <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt'
                            style="font-size: 18px;color: #F31519;"></i></a></li>
                <li class=""><a href="{{ url('/admin') }}">Principal </a></li>
                <li class="">&nbsp;&nbsp;/ Admin Web</li>
                <li class="">&nbsp;&nbsp;/ <a href="{{ url('/admin/web/listacomentario') }}">Videos de entrenamiento</a></li>
            </ol>
        </div>
        <!-- End Breadcrumb Area -->

        <div class="card mb-30">
            {{-- <div class="card-body">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>Mensaje!</strong> Se registró satisfactoriamente.
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div> --}}
        
            <div class="card-body">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3>Historial de videos de entrenamiento</h3>
                    <div class="btn-group" role="group" align="right">
                        <a href="" class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalEdit"><i class='bx bxs-pencil'></i> Nuevo Registro</a>
                    </div>
                </div>
            </div>
        
            <div class="card-body">
                <div class="table table-responsive">
                    <table id="tblUser" class="table" cellspacing="0" cellpadding="0" width="100%">
                        <thead>
                            <tr>
                                <th>N.</th>
                                <th>Categoría</th>
                                <th>Título</th>
                                <th>Video</th>
                                <th>Archivo</th>
                                <th>Editar</th>
                                <th>Eliminar</th>
                            </tr>
                        </thead>
                        <tbody id="">
                            <!-- Ejemplo 1 -->
                            <tr>
                                <td>1</td>
                                <td>Entrenamiento Básico</td>
                                <td>Cómo usar el sistema</td>
                                <td>https://vimeo.com/81760478</td>
                                <td>Manual_de_usuario.pdf</td>
                                <td><button type='button' class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModalEdit'><span class='bx bx-pencil'></span></button></td>
                                <td><button type='button' class='btn btn-danger btn-xs'><span class='bx bx-trash'></span></button></td>
                            </tr>
                            <!-- Ejemplo 2 -->
                            <tr>
                                <td>2</td>
                                <td>Video Tips</td>
                                <td>Mejores prácticas</td>
                                <td>https://www.youtube.com/watch?v=OGntm1HTc_A</td>
                                <td>Guia_de_practicas.pdf</td>
                                <td><button type='button' class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModalEdit2'><span class='bx bx-pencil'></span></button></td>
                                <td><button type='button' class='btn btn-danger btn-xs'><span class='bx bx-trash'></span></button></td>
                            </tr>
                            <!-- Ejemplo 3 -->
                            <tr>
                                <td>3</td>
                                <td>Tutoriales</td>
                                <td>Configuración avanzada</td>
                                <td>Archivo de video local</td>
                                <td>Configuracion_avanzada.pdf</td>
                                <td><button type='button' class='btn btn-primary btn-xs' data-toggle='modal' data-target='#myModalEdit3'><span class='bx bx-pencil'></span></button></td>
                                <td><button type='button' class='btn btn-danger btn-xs'><span class='bx bx-trash'></span></button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        
            <!-- Modal para nuevo registro -->
            <div class="modal fade" id="myModalEdit" role="dialog">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title">Crear nuevo registro - Entrenamiento</h4>
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
              
                      <form class="form-horizontal" method="post" action="#" enctype='multipart/form-data'>
                        <div class="row">
                          <div class="col-lg-12">
                            <div class="form-group">
                              <div class="col-lg-12">
                                <label class="control-label" for="email">Categoría:</label>
                                <select name="catego" id="catego" class="form-control">
                                  <option value="1">Entrenamiento Básico</option>
                                  <option value="2">Video Tips</option>
                                  <option value="3">Tutoriales</option>
                                </select>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-12"><br>
                                <label class="control-label" for="email">Título:</label>
                                <input type="text" class="form-control" maxlength="255" id="titulo" name="titulo" placeholder="Ingrese título" value="Ejemplo de Título">
                              </div>
                            </div>
                          </div>
                        </div>
              
                        <div class="form-row">
                          <div class="form-group col-md-12">
                            <div class="form-group">
                              <label class="control-label" for="email">Adjunte Video: <small>(Formato permitido *.mp4)</small></label>
                              <input type="file" class="form-control" name="adjvideo" placeholder="Adjunte video">
                            </div>
                          </div>
              
                          <div class="form-group col-md-12">
                            <div class="form-group">
                              <label class="control-label" for="email">Link Youtube: <small>(Enlace externo)</small></label>
                              <input type="text" class="form-control" name="linkvidioyou" placeholder="Ingrese link" value="https://www.youtube.com/watch?v=OGntm1HTc_A">
                            </div>
                          </div>
                          <div class="form-group col-md-12">
                            <div class="form-group">
                              <label class="control-label" for="email">Link Vimeo: <small>(Enlace externo)</small></label>
                              <input type="text" class="form-control" name="linkvidiovim" placeholder="Ingrese link" value="https://vimeo.com/81760478">
                            </div>
                          </div>
                        </div>
              
                        <div class="row">
                          <div class="col-lg-12">
                            <div class="form-group">
                              <div class="col-lg-12"><br>
                                <label class="control-label" for="pwd">Archivo Descargable: <small>(Formatos Permitidos:*PDF)</small></label>
                                <input id="namepdf" name="namepdf" type="file" class="form-control" />
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-12">
                                <label class="control-label" for="email">Detalle: <small>Recomendable que el detalle sea lo más corto posible</small></label>
                                <textarea class="form-control" name="detalle" rows="5">Ejemplo de detalle</textarea>
                              </div>
                            </div>
                          </div>
                        </div>
              
                        <div class="form-group">
                          <div class="col-sm-offset-5 col-sm-12"><br><br>
                            <button type="submit" class="btn btn-success" name="actualiza">Actualizar</button>
                          </div>
                        </div>
                      </form>
              
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                  </div>
                </div>
              </div>
              
            <!-- Fin Modal -->
        
        </div>
        




    </main>
@endsection