File: /var/www/html/xfacil.desafio.com.py/resources/views/admin/equipos/create.blade.php
@extends('adminlte::page')
@section('title', 'Crear Equipo')
@section('content_header')
<h1>Crear Equipo</h1>
@stop
@section('content')
<style>
/*----- Css de botones para subir imagenes -----*/
.thumb {
width: 200px;
border: 0px solid #000;
margin: 10px 5px 0 0;
}
.yourBtn {
width: 200px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
cursor: pointer;
margin: 0 auto;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="card card-info">
{!! Form::open(array('url'=>'admin/equipos','method'=>'POST','autocomplete'=>'off','files'=>'true')) !!}
{{Form::token()}}
<div class="card-body">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group" align="center">
<label>Insignia de equipo:</label><br>
<small>Se solicita una imagen cuadrada</small><br>
<output id="list">
<img src="{{asset('imgsystem/noticia.png')}}" class="img-responsive" alt="" style="width: 200px;" />
</output><br>
<div class="btn btn-basic" onclick="getFile()">
<img src="{{asset('imgsystem/flechita.svg')}}" alt=""> <span>Subir Imagen…</span>
</div>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input id="files" type="file" value="upload" name="foto" onchange="sub(this)" accept="image/jpeg, image/png, image/bmp" />
</div>
@error('foto')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Nombre del equipo:</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-heading"></i></span>
</div>
<input type="text" class="form-control @error('nombre') is-invalid @enderror" value="{{ old('nombre') }}" name="nombre" placeholder="Nombre del equipo" required>
@error('nombre')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="col-md-6">
<label>Categoria:</label>
<select class="form-control" id="exampleFormControlSelect1" name="nivel" required>
<option value="">Seleccione una opción</option>
<option value="Administrativo">Administrativo</option>
<option value="Sucursal">Sucursal</option>
<option value="Otros">Otros</option>
</select>
</div>
</div>
</div>
<div class="card-footer" align="center">
<button type="submit" class="btn btn-info"><i class="fas fa-save"></i> Crear equipo</button>
</div>
{!!Form::close()!!}
</div>
</div>
@stop
@section('adminlte_js')
<script> console.log('Hola, qué buscamos?, monitoreamos la consola {{ Auth::user()->name }}!'); </script>
<script>
function archivo(evt) {
var files = evt.target.files; // FileList object
// Obtenemos la imagen del campo "file".
for (var i = 0, f; f = files[i]; i++) {
//Solo admitimos imágenes.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// Insertamos la imagen
document.getElementById("list").innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', archivo, false);
function getFile() {
document.getElementById("files").click();
}
function sub(obj) {
var file = obj.value;
var fileName = file.split("\\");
//document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
event.preventDefault();
}
</script>
@stop