@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Horizontal Layout -->
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h2>
                        <strong>
@if (isset($usuario))
                        Editar
@else
                        Nuevo
@endif
                         Usuario</strong>
                    </h2>
                </div>
                <div class="body">
                    <form class="form-horizontal" id="form-editar-usuario" method="post" action="{{ url('/') }}/usuario/guardar" enctype="multipart/form-data">
                        <input type="hidden" name="id"
@if (isset($usuario))
                         value="{{ $usuario->usuarioId }}"
@endif
                        >
                        <div class="row clearfix">
                            <div class="col-md-12">
                                <h2 class="card-inside-title">Datos Personales</h2>
                            </div>
                        </div>
                        <div class="row clearfix">
                            
                            <div class="col-md-2">
                                <label for="formalidad"><span class="font-bold col-red">*</span> Formalidad</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <select class="form-control show-tick" name="formalidad" id="formalidad">
                                        <option value="">-----</option>
@foreach ($formalidades as $formalidad)
                                        <option value="{{ $formalidad->formalidadId }}"
    @if (isset($usuario))
        @if ($usuario->formalidadId == $formalidad->formalidadId)
                                         selected="selected"
        @endif
    @endif
                                        >{{ $formalidad->abreviaturaFormalidad }}</option>
@endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label for="nombre"><span class="font-bold col-red">*</span> Nombre</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Nombre" maxlength="100" autocomplete="off"
@if (isset($usuario))
                                     value="{{ $usuario->nombreUsuario }}"
@endif
                                     required autofocus>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-2">
                                <label for="paterno"><span class="font-bold col-red">*</span> Apellido Paterno</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <input type="text" name="paterno" id="paterno" class="form-control" placeholder="Apellido Paterno" maxlength="60" autocomplete="off"
@if (isset($usuario))
                                     value="{{ $usuario->apellidoPaterno }}"
@endif
                                     required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label for="materno">Apellido Materno</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <input type="text" name="materno" id="materno" class="form-control" placeholder="Apellido Materno" maxlength="60" autocomplete="off"
@if (isset($usuario))
                                     value="{{ $usuario->apellidoMaterno }}"
@endif
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-2">
                                <label for="email"><span class="font-bold col-red">*</span> Email</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <input type="email" name="email" id="email" class="form-control" placeholder="Email" maxlength="60" autocomplete="off"
@if (isset($usuario))
                                     value="{{ $usuario->email }}"
@endif
                                     required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label for="celular">Celular</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <input type="text" name="celular" id="celular" class="form-control" placeholder="Celular" maxlength="9" autocomplete="off"
@if (isset($usuario))
                                     value="{{ $usuario->celular }}"
@endif
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div 
@if (isset($usuario))
                            class="col-md-9"
@else
                            class="col-md-12"
@endif
                            >
                                <h2 class="card-inside-title">Datos Acceso</h2>
                            </div>
@if (isset($usuario))
                            <div class="col-md-3">
                                <a id="cambiar-password-user" class="btn btn-block bg-orange waves-effect"> <i class="material-icons">cached</i> <span>Cambiar contrase&ntilde;a</span> </a>
                                <a id="cancelar-cambiar-password-user" class="btn btn-block bg-orange waves-effect" style="display: none;"> <i class="material-icons">undo</i> <span>Cancelar cambio</span> </a>
                            </div>
@endif
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-2">
                                <label for="usuario"><span class="font-bold col-red">*</span> Usuario</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <input type="text" name="usuario" id="usuario" class="form-control" placeholder="Usuario" maxlength="50" autocomplete="off"
@if (isset($usuario))
                                     value="{{ $usuario->usuario }}"
@endif
                                     required
@if (isset($usuario))
                                     disabled="disabled"
@endif
                                    >
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label for="rol"><span class="font-bold col-red">*</span> Rol</label>
                            </div>
                            <div class="col-md-4">
                                <div class="form-line">
                                    <select class="form-control show-tick" name="rol" id="rol" required>
                                        <option value="">-----</option>
@foreach ($roles as $rol)
                                        <option value="{{ $rol->rolId }}"
    @if (isset($usuario))
        @if ($usuario->rolId == $rol->rolId)
                                         selected="selected"
        @endif
    @endif
                                        >{{ $rol->nombreRol }}</option>
@endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div id="elemento-password"
@if (isset($usuario))
                         style="display: none;"
@endif
                        >
                            <div class="row clearfix">
                                <div class="col-md-2">
                                    <label for="password"><span class="font-bold col-red">*</span> Contrase&ntilde;a</label>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-line">
                                        <input type="password" name="password" id="password" class="form-control" placeholder="Contraseña" maxlength="100" autocomplete="off" required
@if (isset($usuario))
                                         disabled="disabled"
@endif
                                        >
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label for="confirm"><span class="font-bold col-red">*</span> Conf. contrase&ntilde;a</label>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-line">
                                        <input type="password" name="confirm" id="confirm" class="form-control" placeholder="Confirmar contraseña" maxlength="100" autocomplete="off" required
@if (isset($usuario))
                                         disabled="disabled"
@endif
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-2">
                                <label for="foto">Foto</label>
                            </div>
                            <div id="elemento-foto"
@if (!(isset($usuario) && !empty($usuario->foto)))
                             style="display:none;"
@endif
                            >
                                <div class="col-md-3">
                                    <img 
@if(!empty($usuario->foto))
                                    src="data:image/jpeg;base64,{{ base64_encode(Storage::get($usuario->foto)) }}" 
@endif
                                    style="width: 100%;">
                                </div>
                                <div class="col-md-2">
                                    <a id="cambiar-foto" class="btn btn-block bg-orange waves-effect"> <i class="material-icons">cached</i> <span>Cambiar foto</span> </a>
                                </div>
                            </div>


                            <div id="elemento-cambiar"
@if (isset($usuario) && !empty($usuario->foto))
                             style="display:none;"
@endif
                            >
                                <div class="col-md-6">
                                    <div class="form-line">
                                        <input type="file" name="foto" id="foto" class="form-control" placeholder="Logo" 
@if (isset($usuario) && !empty($usuario->foto))
                                        disabled="disabled"
@endif
                                        >
                                    </div>
                                </div>
@if (isset($usuario) && !empty($usuario->foto))
                                <div class="col-md-2">
                                    <a id="cancelar-cambiar-foto" class="btn btn-block bg-orange waves-effect"> <i class="material-icons">undo</i> <span>Regresar</span> </a>
                                </div>
@endif
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-block btn-lg bg-blue waves-effect"> <i class="material-icons">save</i> <strong>Guardar</strong> </button>
                            </div>
                            <div class="col-md-6">
                                <a class="btn btn-block btn-lg bg-fia waves-effect" href="{{ url('/') }}/usuario"> <i class="material-icons">clear</i> <strong>Cancelar</strong> </a>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-md-12" style="margin-bottom: 0px;">
                                <p class="font-bold col-red">(*) Campos obligatorios.</p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- #END# Horizontal Layout -->
</div>
@endsection