<div>
    <h1>Noticias</h1><hr>
    <form enctype="multipart/form-data">
        <div class="row">
            <div class="col-md-12" align="center">
                <div class="form-group">
                    <label>Titulo Noticia:</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" wire:model="titulo" placeholder="Titulo del curso">
                    @error('titulo') <span class="text-danger">{{ $message }}</span>@enderror <br>
                    <div class="form-group">
                        <label>Video Noticia:</label><br>
                        @if($tipo == 'editar')
                            <video id="video" src="/videos/noticia/{{ $video }}" width="350" height="250" controls></video><br>
                        @else
                            <video id="video" width="350" height="250" controls></video><br>
                        @endif
                        <input type="file" wire:model='video' name="video" id="file-input" accept="video/mp4,video/x-m4v,video/*"> <br>
                        <div wire:loading wire:target="video" class="text-sm italic text-gray-500">Cargando...</div>
                        @error('video') <span class="text-danger">{{ $message }}</span>@enderror
                    </div>
                </div>
                @if($tipo == 'editar')
                    <button wire:click.prevent="update()" class="btn btn-success">Actualizar</button>
                @else
                    <button wire:click.prevent="store()" class="btn btn-success">Guardar</button>
                @endif
                <button wire:click.prevent="cancel()" class="btn btn-danger">Cancelar</button>
            </div>
        </div><hr>
    </form>
    <div class="row">
        <div class="col-md-12">
            <input wire:model="search" class="form-control" type="search" placeholder="Buscar noticia"><br>
        </div>
    </div>
    <div class="card">
        <div class="card-body" align="center">
            <div class="row">
                @foreach($noticias as $not)
                    <div class="col-md-3">
                        <b>{{ $not->titulo }}</b><br>
                        <video src="/videos/noticia/{{ $not->video }}" width="100%" controls></video><br>
                        <button wire:click.prevent="edit({{ $not->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="#noticiaModal{{ $not->id }}"><i class="far fa-trash-alt"></i></button><br><br>
                        <!-- Modal -->
                        <div class="modal fade" id="noticiaModal{{$not->id}}" tabindex="-1" role="dialog" aria-labelledby="noticiaModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="noticiaModalLabel">Eliminar noticia</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 noticia: {{ $not->titulo }}?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                        <button type="button" wire:click="delete({{ $not->id }})" class="btn btn-danger" data-dismiss="modal">Eliminar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="card-footer">
                <div class="col-md-12">
                    {{ $noticias->links() }}
                </div>
            </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>
</div>