@extends('adminlte::page')

@section('content_header')
<h1><b>configuraciones/ registro de una nueva configuracion</b></h1>
<hr>
@stop

@section('content')
  <div class="row">
    <div class="col-md-12">
        <div class="card card-outline card-primary">
          <div class="card-header">
            <h3 class="card-title">LLeno los datos del formulario</h3>
            <div class="card-tools">
            </div>
            <!-- /.card-tools -->
          </div>
          <div class="card-body">
            <form action="{{url('admin/configuraciones/create')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-9">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="">Nombre</label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text"><i class="fas fa-home"></i></span>
                                        </div>
                                        <input type="text" name="nombre" class="form-control" placeholder="Escriba aqui.." required>
                                      </div>
                                      @error('nombre')
                                        <small style="color: red">{{$message}}</small>
                                        @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">Descripcion del departamento</label><b>(*)</b>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text"><i class="fas fa-university"></i></span>
                                        </div>
                                        <input type="text" name="descripcion" class="form-control" placeholder="Escriba aqui.." required>
                                      </div>
                                      @error('descripcion')
                                        <small style="color: red">{{$message}}</small>
                                        @enderror
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <label for="">Direccion</label><b>(*)</b>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text"><i class="fas fa-map-marked"></i></span>
                                        </div>
                                        <input type="text" name="direccion" class="form-control" placeholder="Escriba aqui.." required>
                                      </div>
                                      @error('direccion')
                                        <small style="color: red">{{$message}}</small>
                                        @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="">Telefono</label><b>(*)</b>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text"><i class="fas fa-home"></i></span>
                                        </div>
                                        <input type="text" name="telefono" class="form-control" placeholder="Escriba aqui.." required>
                                      </div>
                                      @error('telefono')
                                        <small style="color: red">{{$message}}</small>
                                        @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="">Email</label><b>(*)</b>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                          <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                        </div>
                                        <input type="email" name="email" class="form-control" placeholder="Escriba aqui..">
                                      </div>
                                      @error('email')
                                        <small style="color: red">{{$message}}</small>
                                        @enderror
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="logo">logo</label>
                        <input type="file" id="file" name="logo" accept=".jpg, .jpeg, .png" class="form-control" required>
                        @error('logo')
                        <small style="...">{{$message}}</small>
                        @enderror
                        <br>
                        <center><output id="list"></center>
                            <script>
                                function archivo(evt) {
                                    var files = evt.target.files;
                                    for (var i = 0, f; f = files[i]; i++) { // Cambié i=1 a i=0 para que empiece desde el primer archivo
                                        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 thumbnail" src="', e.target.result, '" width="70" title="', escape(theFile.name), '"/>'].join('');
                                            };
                                        })(f);
                                        reader.readAsDataURL(f);
                                    }
                                }
                                document.getElementById('file').addEventListener('change', archivo, false);
                            </script>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <a href="{{url('/admin/configuraciones')}}" class="btn btn-secondary">Cancelar</a>
                            <button type="submit" class="btn btn-primary">Registrar</button>
                        </div>
                    </div>
                </div>
            </form>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
  </div>
@stop

@section('css')

@stop

@section('js')


@stop