Sindbad~EG File Manager

@extends('layouts.frontend')
@section('contenido')
	<style>
        body { 
			background: url(/frontend/ranking.png) no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
		.btn-send {
		background-color: #b78b2a;
		border-color: #b78b2a;
		border-radius: 25px;
		color: white;
		font-weight: bold;
		padding: 4px 35px;
		}

		.btn-send:hover {
		background-color: white;
		border-color: white;
		color: #b78b2a;
		}
    </style>
	<livewire:navbar></livewire:navbar>
		
	<div class="container">
	  	<div class="row justify-content-center align-items-center minh-100">
	    	<div class="col-lg-12" align="center">
				<h1 style="font-size: 4vw;"><b>Mi Perfil</b></h1>
			</div>
			<div class="col-lg-12" align="center" style="background-color: rgba(255, 255, 255, 0.36); border-radius: 15px; color: white; font-weight: bold;">
				{!! Form::model(Auth::user(),['method'=>'PATCH','route'=>['perfilupdate',Auth::id()],'files'=>'true']) !!}
	            	{{Form::token()}}
                    <div class="form-group" align="center"><br>
                        <label><b>Foto Perfil:</b></label><br>
                        <small><strong>(Se solicita una imagen cuadrada)</strong></small><br>
                        <output id="list">
                            @if (Auth::user()->foto)
                                <img src="{{asset('images/perfil/'.Auth::user()->foto)}}" class="img-responsive" alt="" style="width: 200px;border-radius: 50%" />
                            @else
                            @endif
                        </output><br>
						<div class="btn btn-basic" onclick="getFile()">
							<img src="{{asset('imgsystem/flechita.png')}}" alt="" style="width: 20px; height: 20px;"> <span style="font-size: 14px; color: white;"><strong>Cambiar Imagen&hellip;</strong></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 class="card-footer" align="right">
		                <button type="submit" class="btn btn-send"> Guardar Cambios</button>
		            </div>
	            {!!Form::close()!!}
			</div>
			<div class="col-md-12">
				<br>
			</div>
			<div class="col-lg-12" align="center" style="background-color: rgba(255, 255, 255, 0.36); border-radius: 15px; color: white; font-weight: bold;">
				<livewire:cambiarpass></livewire:cambiarpass>
			</div>
			<div class="col-md-12">
				<br><br><br>
			</div>
	  	</div>
	</div>

	<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