Sindbad~EG File Manager

<!-- Importancia -->
<form {{ ( $opcion == "importancia") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Importancia:</label>
                <div wire:ignore>
                    <textarea class="form-control" id="summernoteimportancia" wire:model="importancia" rows="3"></textarea>
                </div>
                @error('importancia') <span class="text-danger">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>
    @if($tipo == 'editar')
        <button wire:click.prevent="editimportancia()" class="btn btn-success">Actualizar</button>
    @else
        <button wire:click.prevent="storeimportancia()" class="btn btn-success">Guardar</button>
    @endif
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
</form>
<!-- Alcance -->
<form {{ ( $opcion == "alcance") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Alcance:</label>
                <div wire:ignore>
                    <textarea class="form-control" id="summernotealcance" wire:model="alcance" rows="3"></textarea>
                </div>
                @error('alcance') <span class="text-danger">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>
    @if($tipo == 'editar')
        <button wire:click.prevent="editalcance()" class="btn btn-success">Actualizar</button>
    @else
        <button wire:click.prevent="storealcance()" class="btn btn-success">Guardar</button>
    @endif
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
</form>
<!-- Objetivo -->
<form {{ ( $opcion == "objetivo") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Objetivo:</label>
                <div wire:ignore>
                    <textarea class="form-control" id="summernoteobjetivo" wire:model="objetivo" rows="3"></textarea>
                </div>
                @error('objetivo') <span class="text-danger">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>
    @if($tipo == 'editar')
        <button wire:click.prevent="editobjetivo()" class="btn btn-success">Actualizar</button>
    @else
        <button wire:click.prevent="storeobjetivo()" class="btn btn-success">Guardar</button>
    @endif
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
</form>
<!-- Tutor -->
<form {{ ( $opcion == "tutor") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Tutor:</label>
                <div wire:ignore>
                    <textarea class="form-control" id="summernotetutor" wire:model="tutor" rows="3"></textarea>
                </div>
                @error('tutor') <span class="text-danger">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>
    @if($tipo == 'editar')
        <button wire:click.prevent="edittutor()" class="btn btn-success">Actualizar</button>
    @else
        <button wire:click.prevent="storetutor()" class="btn btn-success">Guardar</button>
    @endif
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
</form>
<!-- Recurso -->
<form {{ ( $opcion == "recurso") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Recurso adicional:</label>
                <div wire:ignore>
                    <textarea class="form-control" id="summernoterecurso" wire:model="recurso" rows="3"></textarea>
                </div>
                @error('recurso') <span class="text-danger">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>
    @if($tipo == 'editar')
        <button wire:click.prevent="editrecurso()" class="btn btn-success">Actualizar</button>
    @else
        <button wire:click.prevent="storerecurso()" class="btn btn-success">Guardar</button>
    @endif
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
</form>
<!-- Certificado -->
<form {{ ( $opcion == "certificado") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Certificado: <small><em>(Agregue  %nombre%  para adherir el nombre del usuario)</em></small></label>
                <div wire:ignore>
                    <textarea class="form-control" id="summernotecertificado" wire:model="certificado" rows="3"></textarea>
                </div>
                @error('certificado') <span class="text-danger">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>
    @if($tipo == 'editar')
        <button wire:click.prevent="editcertificado()" class="btn btn-success">Actualizar</button>
    @else
        <button wire:click.prevent="storecertificado()" class="btn btn-success">Guardar</button>
    @endif
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
</form>
<!-- Podcast -->
<form {{ ( $opcion == "podcast") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Podcast:</label>
                <div wire:ignore>
                    <textarea class="form-control" id="summernotepodcast" wire:model="podcast" rows="3"></textarea>
                </div>
                @error('podcast') <span class="text-danger">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>
    @if($tipo == 'editar')
        <button wire:click.prevent="editpodcast()" class="btn btn-success">Actualizar</button>
    @else
        <button wire:click.prevent="storepodcast()" class="btn btn-success">Guardar</button>
    @endif
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
</form>
<!-- capsula -->
<form {{ ( $opcion == "capsula") ? 'style=display:inline;' : 'style=display:none;' }}>
    <div class="row">
        <div class="col-md-5" align="center">
            <div class="form-group">
                <label>Titulo Cápsula:</label>
                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" wire:model="capsula_titulo" placeholder="Titulo del curso">
                @error('capsula_titulo') <span class="text-danger">{{ $message }}</span>@enderror <br>
                <div class="form-group">
                    <label>Video Cápsula:</label><br>
                    @if($tipo == 'editar')
                        <video id="video" src="/videos/capsula/{{ $capsula }}" width="250" height="250" controls></video><br>
                    @else
                        <video id="video" width="250" height="250" controls></video><br>
                    @endif
                    <input type="file" wire:model='capsula' name="capsula" id="file-input" accept="video/mp4,video/x-m4v,video/*"> <br>
                    <div wire:loading wire:target="capsula" class="text-sm italic text-gray-500">Cargando...</div>
                    @error('capsula') <span class="text-danger">{{ $message }}</span>@enderror
                </div>
            </div>
            @if($tipo == 'editar')
                <button wire:click.prevent="updatecapsula()" class="btn btn-success">Actualizar</button>
            @else
                <button wire:click.prevent="storecapsula()" class="btn btn-success">Guardar</button>
            @endif
            <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
        </div>
        <div class="col-md-7" align="center">
            <div class="row">
                @foreach($capsulas as $cap)
                    <div class="col-md-3">
                        <b>{{ $cap->titulo }}</b><br>
                        <video src="/videos/capsula/{{ $cap->capsula }}" width="150" height="150" controls></video><br>
                        <button wire:click.prevent="editcapsula({{ $cap->id }})" class="btn btn-sm btn-info"><i class="fas fa-edit"></i></button>
                        <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#capsulaModal{{ $cap->id }}"><i class="far fa-trash-alt"></i></button>
                        <!-- Modal -->
                        <div class="modal fade" id="capsulaModal{{$cap->id}}" tabindex="-1" role="dialog" aria-labelledby="capsulaModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="capsulaModalLabel">Eliminar capsula</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>¿Realmente quiere eliminar la capsula: {{ $cap->titulo }}?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                        <button type="button" wire:click="deletecapsula({{ $cap->id }})" class="btn btn-danger" data-dismiss="modal">Eliminar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <script>
        const input = document.getElementById('file-input');
        const video = document.getElementById('video');
        const videoSource = document.createElement('source');

        input.addEventListener('change', function() {
        const files = this.files || [];

        if (!files.length) return;
        
        const reader = new FileReader();

        reader.onload = function (e) {
            videoSource.setAttribute('src', e.target.result);
            video.appendChild(videoSource);
            video.load();
            video.play();
        };
        
        reader.onprogress = function (e) {
            console.log('progress: ', Math.round((e.loaded * 100) / e.total));
        };
        
        reader.readAsDataURL(files[0]);
        });
    </script>
</form>
<hr>