<div>
<div class="col-12">
        <h3>Reglamentos categoria {{$categoria->nombre}} <button class="btn btn-success" wire:click="crear()">Nuevo</button></h3><hr>
  	</div>
    @if($crear)
        <div class="col-12">
            @if($crear == 1)
                <h5>Crear</h4>
            @else
                <h5>Editar</h4>
            @endif
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="">Titulo</label>
                        <input wire:model="nombre" type="text" class="form-control" placeholder="Titulo" />
                        @error('nombre') <span class="error">{{ $message }}</span> @enderror<br>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Seleccione tipo de archivo</label>
                        <select class="form-control" id="exampleFormControlSelect1" wire:model="tipo">
                            <option value="">Seleccione una opción</option>
                            <option value="pdf">PDF</option>
                            <option value="imagen">Imagen</option>
                            <option value="video">Video</option>
                        </select>
                    </div>
                    @error('tipo') <span class="error">{{ $message }}</span> @enderror<br>
                </div>
                <div class="col-md-12">
                    <input wire:model="enlace" type="file" class="form-control" placeholder="Titulo categoria" />
                    @error('enlace') <span class="error">{{ $message }}</span> @enderror
                </div>
                <div class="col-md-12">
                    <center><br>
                        @if($crear == 1)
                            <button wire:click.prevent="store()" class="btn btn-success btn-sm">Guardar</button>
                        @else
                            <button wire:click.prevent="update()" class="btn btn-dark btn-sm">Actualizar</button>
                        @endif
                        <button wire:click.prevent="cancel()" class="btn btn-danger btn-sm">Cancelar</button>
                    </center>
                </div>
            </div>
            <hr>
        </div>
    @endif
    <div class="col-12">
  		<div class="form-group">
			<input wire:model="buscar" type="search" class="form-control" placeholder="Buscar" /><hr>
  		</div>
  	</div>
    <div class="col-12">
        <div class="row">
        	@foreach ($reglamentos as $element)
        		<div class="col-sm-3">
        			<div style="background-color: white;border-radius: 20px;" align="center">
	                	<a href="{{ asset('pdf/'.$element->enlace) }}">
                            @if($element->tipo == 'pdf')
                                <img src="{{ asset('imgsystem/pdf.png') }}" width="150px">
                            @elseif($element->tipo == 'imagen')
                                <img src="{{ asset('pdf/'.$element->enlace) }}" width="150px">
                            @elseif($element->tipo == 'video')
                                <video src="{{ asset('pdf/'.$element->enlace) }}" controls width="250px"></video>
                            @endif
	                	</a>
	                	<p style="padding: 10px;">{{ $element->nombre }}</p>
                        <div style="padding-bottom: 10px;">
                            <button class="btn btn-primary btn-sm" wire:click="edit({{$element->id}})"><i class="fas fa-edit"></i></button>
                            <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal{{ $element->id }}"><i class="fas fa-trash-alt"></i></button>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal{{ $element->id }}" 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">Eliminar Archivo</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 el archivo {{ $element->nombre }}?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                        <button type="button" wire:click="delete({{ $element->id }})" class="btn btn-danger" data-dismiss="modal">Eliminar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
	                </div>
              	</div>
        	@endforeach
        </div>
    </div>
    <div class="col-md-12">
    	{{ $reglamentos->links() }}
    </div>
</div>