@extends('layouts.mainlayout')
@section('content')
<div class="pl-4 col-md-8 col-12">
    <h4>Crea tu cuenta</h4>
    @if(session()->has('error'))

    <div class="alerta-mensaje box-info-destacada naranja">
        <div class="close-mensaje" style="color:white"></div>
        <span class="icon-i-campana medium-icon"></span>
        {{ session()->get('error') }}
    </div>
    @endif
    <form action="{{url('cuenta')}}" method="POST">
        {{ csrf_field() }}

        <div class="form-group">
            <label for="nombre">Nombre(s):</label>
            <input type="text" class="form-control form-control-sm" id="nombre" name="nombre" required="required"
                placeholder="Juan Daniel" value="{{old('nombre')}}">
            <small class="form-text" style="color:red">{{ $errors->first('nombre') }}</small>
        </div>

        <div class="form-group">
            <label for="apellidos">Apellidos:</label>
            <input type="text" class="form-control form-control-sm" id="apellidos" name="apellidos" required="required"
                placeholder="Castro Montalvo" value="{{old('apellidos')}}">
            <small class="form-text" style="color:red">{{ $errors->first('apellidos') }}</small>
        </div>
        <div class="form-group">
            <label for="correo">Correo electrónico:
            </label>
            <input type="email" class="form-control form-control-sm" id="correo" name="correo" required="required"
                placeholder="ejemplo@ejemplo.com" value="{{old('correo')}}">
            <small class="form-text" style="color:red">{{ $errors->first('correo') }}</small>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control form-control-sm" id="password" name="password"
                required="required" placeholder="Introduzca su contraseña">
            <small class="form-text" style="color:red">{{ $errors->first('password') }}</small>

        </div>
        <div class="form-group">
            <label for="correo">Teléfono:
            </label>
            <input type="tel" class="form-control form-control-sm" id="telefono" name="telefono" required="required"
                placeholder="000 000 0000" value="{{old('telefono')}}">
            <small class="form-text" style="color:red">{{ $errors->first('telefono') }}</small>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input " id="terminos" name="terminos">
            <label class="form-check-label" for="terminos">Confirmo que he leido y acepto los términos del
                <b>Aviso de Privacidad y Políticas de seguridad de datos personales</b>
            </label>
            <small class="form-text" style="color:red">{{ $errors->first('terminos') }}</small>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Crear mi cuenta</button>
    </form>
</div>


@endsection
@push('scripts')
<script>
    const div = document.createElement('div');
    
    div.className = 'row';
    
    div.innerHTML = `
    <div class="box-botonera-dashsboard">
        <h6>Beneficios de crear tu cuenta</h6>
        <p>
            <span class="icon-i-ok txt-azul medium-icon"></span> Vincular tus recibos de agua, para pagarlos de manera fácil
            y sencilla desde nuestra página.
        </p>
        <p><span class="icon-i-ok txt-azul medium-icon"></span> Consultar el historial de consumos
        </p>
        <p> <span class="icon-i-ok txt-azul medium-icon"></span> Consultar tus estados de cuenta</p>
        <p> <span class="icon-i-ok txt-azul medium-icon"></span> Descargar tus recibos de pago y facturas</p>
        
        <p style="padding-top:15px;"><b>Importante</b></p>
        <p>
            En caso de que su cuenta de correo sea un webmail de Microsoft (Hotmail, msn, live, outlook, prodigy, etc...), favor
            de
            seguir este
            <a href="https://www.aguakan.com/public/images/home/webmail/correo_seguro.htm" target="_blank">
                instructivo
            </a> antes de registrar su correo para que no tenga problemas para recibir el correo de confirmación.
        </p>
    </div>
    `;
    
    document.getElementById('barra-lateral').appendChild(div);
</script>
@endpush