@extends('academia.layouts.dashboard')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <a class="btn btn-info btn-block text-white" data-toggle="modal" data-target="#crearcurso">Agregar Nueva Recurso</a>
                        </div>
                    </div>
                    
                    <table class="table table-striped table-bordered zero-configuration">
                        <thead>
                            <th class="text-center">#</th>
                            <th class="text-center">Título</th>
                            <th class="text-center">Tipo</th>
                            <th class="text-center">Acciones</th>
                        </thead>
                        <tbody>
                            @foreach ($soporte as $suport)
                            <tr>
                                <td class="text-center">{{ $suport->id }}</td>
                                <td class="text-center">{{ $suport->title }}</td>
                                <td class="text-center">{{ $suport->type }}</td>
                                <td class="text-center">
                                     <a class="btn btn-warning text-white" href="{{ route('cursos-recursos-vistaprevia', $suport->id) }}" target="_black"> <i class="fa fa-search"></i></a>
                            
                                     <a class="btn btn-info text-white" data-toggle="modal" data-target="#editarcurso" onclick="editarmateriales('{{$suport->id}}','{{$suport->course_id}}','{{$suport->title}}','{{$suport->type}}','{{$suport->material}}')"> <i class="fa fa-edit"></i></a>
                            
                                     <a class="btn btn-danger text-white" href="{{ route('cursos-recursos-delete', $suport->id) }}"> <i class="fa fa-ban"></i></a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                        
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="crearcurso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crear Recursos</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('cursos-save-recursos')}}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }}
            
            <input type="hidden" name="id" value="{{ $curso->id }}">
            
            <div class="col-md-12">
                <div class="form-group">
                    <label>Título</label>
                    <input type="text" class="form-control" name="titulo" required>
                </div>
            </div>
            
            
            <div class="col-md-12">
                <div class="form-group">
                    <label>Tipo</label>
                    <select class="form-control" name="type" required onchange="cambioinformacion(this.value)">
         
                      <option value="Archivo">Archivo</option>
                      <option value="Enlace">Enlace</option>
         
                    </select>
                </div>
            </div>
            
            
            <div class="col-sm-12 mb-3 archivo">
                <div class="input-group mt-4">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="archivo">
                        <label class="custom-file-label">Seleccione un Archivo</label>
                    </div>
                </div>
            </div>
            
            
            <div class="col-md-12 url" style="display:none;">
                <div class="form-group">
                    <label>URL</label>
                    <input class="form-control" type="url" name="url">
                </div>    
            </div>
            
            <div class="col-sm-12 mb-3">
                <div class="input-group mt-4">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="imagen">
                        <label class="custom-file-label">Seleccione una Imagen del Recurso</label>
                    </div>
                </div>
            </div>
           
            <div class="col-md-12">
                <div class="form-group">    
                 <button type="submit" class="btn btn-info btn-block">Aceptar</button>
                </div>
            </div>
            
        </form>
      </div>
      <div class="modal-footer">
       
      </div>
    </div>
  </div>
</div> 



<div class="modal fade" id="editarcurso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Editar Recursos</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{{route('cursos-edit-recursos')}}" method="post" enctype="multipart/form-data">
          {{ csrf_field() }}
            
            <input type="hidden" name="id" class="idrecurso">
            
            <div class="col-md-12">
                <div class="form-group">
                    <label>Título</label>
                    <input type="text" class="form-control title" name="titulo" required>
                </div>
            </div>
            
            
            <div class="col-md-12">
                <div class="form-group">
                    <label>Tipo</label>
                    <select class="form-control tipo" name="type" required onchange="cambioinformacion(this.value)">
         
                      <option value="Archivo">Archivo</option>
                      <option value="Enlace">Enlace</option>
         
                    </select>
                </div>
            </div>
            
            
            <div class="col-sm-12 mb-3 archivoeditar">
                <div class="input-group mt-4">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="archivo">
                        <label class="custom-file-label">Seleccione un Archivo</label>
                    </div>
                </div>
            </div>
            
            <div class="col-md-12 urleditar">
               <div class="form-group">
                <label>URL</label>
                <input class="form-control urlcampo" type="url" name="url">
               </div>    
            </div>
            
            
            <div class="col-sm-12 mb-3">
                <div class="input-group mt-4">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" name="imagen">
                        <label class="custom-file-label">Seleccione una Imagen del Recurso</label>
                    </div>
                </div>
            </div>
           
            <div class="col-md-12">
                <div class="form-group">    
                 <button type="submit" class="btn btn-info btn-block">Aceptar</button>
                </div>
            </div>
            
        </form>
      </div>
      <div class="modal-footer">
       
      </div>
    </div>
  </div>
</div> 



@endsection
@include('usuario.componentes.scripBotones')

@push('script')
<script>
    function cambioinformacion(valor){
       
        if(valor == 'Archivo'){
           $('.archivo').show()
           $('.archivoeditar').show()
           $('.url').hide()
           $('.urleditar').hide()
        }else if(valor == 'Enlace'){
           $('.url').show()
           $('.urleditar').show()
           $('.archivo').hide()
           $('.archivoeditar').hide()
        }
    }
   
   
    function editarmateriales(idsuport, idcourses, title, tipo, material){
       
        $('.idrecurso').val(idsuport);
        $('.title').val(title);
        $('.tipo').val(tipo);
       
        if(tipo == 'Archivo'){
           $('.archivoeditar').show()
           $('.urleditar').hide()
        }else{
           $('.urlcampo').val(material);
           $('.urleditar').show()
           $('.archivoeditar').hide()
        }
    }
</script>
@endpush