@extends('layouts.admin')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/css2.css') }}">
@stop

@section('menu')

@stop

@section('content')

<div class="container-fluid espacio10">
    <form action="{{ route('user.store') }}" method="POST">
        @csrf
        <div class="row">
            <div class="col-lg-12 col-12">
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div class="row">
                            <div class="col-lg-1"></div>
                            <div class="col-lg-10 col-12 espacio30">
                                <img alt="Logo" src="{{ asset('img\LogoHappyBeeSimple.png') }}" class="img-fluid"/>
                            </div>
                            <div class="col-md-1"></div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <div class="row">
                            <div class="col-lg-12 col-12">
                                <h3 class="text-center">Registro de Usuario</h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-12">
                                <div class="row">
                                    <div class="col-md-3">
                                    </div>
                                    <div class="col-lg-6 col-12">
                                        <div class="row">
                                            <div class="col-lg-6 col-6 d-grid gap-2">
                                                <button type="button" id="cliente" value="cliente" onclick="tipo_user(this)" class="btn btn-primary btn-sm">Cliente</button>
                                            </div>
                                            <div class="col-lg-6 col-6 d-grid gap-2">
                                                <button type="button" id="colegio" value="colegio" onclick="tipo_user(this)" class="btn btn-outline-secondary btn-sm">Colegio/Jardín</button>
                                            </div>
                                        </div>
                                        <div class="row espacio5">
                                            <div class="col-lg-6 col-6 d-grid gap-2">
                                                <button type="button" id="odontologo" value="odontologo" onclick="tipo_user(this)" class="btn btn-outline-secondary btn-sm">Odontólogo</button>
                                            </div>
                                            <div class="col-lg-6 col-6 d-grid gap-2">
                                                <button type="button" id="clinica" value="clinica" onclick="tipo_user(this)" class="btn btn-outline-secondary btn-sm">Clínica/Empresas</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="hidden" id="tipo_usuario" name="tipo_usuario" value="cliente">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div id="mensaje" class="mensaje_color"></div>
                            <div class="col-lg-4 col-6 espacio7">
                                <label class="col-form-label">Rut</label>
                                <input id="rut" name="rut" placeholder="99999999-9" onblur="valida_rut(this)" type="text" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="1">
                                <input id="ind_rut" type="hidden" value="user">
                            </div>

                            <div class="col-lg-4 col-6 espacio7">
                                <label class="col-form-label">Pasaporte</label>
                                <input id="pasaporte" name="pasaporte" type="text" placeholder="obligatorio sin rut" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="2">
                            </div>

                            <div class="col-md-4"></div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-12 espacio7">
                                <label class="form-label">Nombres</label>
                                <input id="nombres" name="nombres" required type="text" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="3">
                            </div>
                            <div class="col-lg-4 col-6 espacio7">
                                <label class="form-label">Apellido Paterno</label>
                                <input id="apellido_paterno" name="apellido_paterno" required type="text" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="4">
                            </div>
                            <div class="col-lg-4 col-6 espacio7">
                                <label class="form-label">Apellido Materno</label>
                                <input id="apellido_materno" name="apellido_materno" type="text" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="5">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-4 espacio7">
                                <label class="form-label">Usuario</label>
                                <input id="username" name="username" onblur="valida_username(this)" placeholder="max 20 caracteres" type="text" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" type="text" tabindex="6">
                            </div>
                            <div class="col-lg-4 col-4 espacio7">
                                <label class="form-label">Password</label>
                                <input id="password" name="password" type="password" required class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="7">
                            </div>
                            <div class="col-lg-4 col-4 espacio7">
                                <label class="form-label">Re-Password</label>
                                <input id="re_password" name="re_password" onblur="valida_pass()" required placeholder="repetir password" type="password" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="8">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-6 espacio7">
                                <label class="col-form-label">Fecha de Nacimiento</label>
                                <input id="fecha_nacimiento" name="fecha_nacimiento" required type="date" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="9">
                            </div>
                            <div class="col-lg-4 col-6 espacio13">
                                <label class="form-label">Nacionalidad</label>
                                <select id="nacionalidad" name="nacionalidad" required class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="10">
                                    <option value="">Seleccionar</option>
                                    @foreach ($nacionalidades as $dato)
                                        <option value="{{$dato->id}}">{{$dato->nombre}}</option>
                                    <@endforeach
                                </select>
                            </div>
                            <div class="col-lg-4 col-6 espacio13">
                                <label class="form-label">Sexo</label>
                                <select id="sexo" name="sexo" required class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="11">
                                    <option value="">Seleccionar</option>
                                    @foreach ($sexos as $dato)
                                        <option value="{{$dato->id}}">{{$dato->nombre}}</option>
                                    <@endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-8 col-8 espacio7">
                                <label class="form-label">Dirección</label>
                                <input id="direccion" name="direccion" type="text" required class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="12">
                            </div>
                            <div class="col-lg-4 col-4 espacio7">
                                <label class="form-label">Teléfono</label>
                                <input id="telefono" name="telefono" type="text" required class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="13">
                                <input name="estado" type="hidden" value='A' />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-12 espacio7">
                                <label class="form-label">E-mail</label>
                                <input id="email" name="email" type="email" required placeholder="correo@tusitio.cl" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="14">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-4 espacio7">
                                <label class="form-label">Región</label>
                                <select id="region" onchange="region_select()" required name="region" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="15">
                                    <option value="">Seleccionar</option>
                                    @foreach ($regiones as $dato)
                                        <option value="{{$dato->codigo}}">{{$dato->nombre}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4 col-4 espacio7">
                                <label class="form-label">Provincia</label>
                                <select id="provincia" onchange="provincia_select()" required name="provincia" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="16">
                                    <option value="">Seleccionar</option>
                                </select>
                            </div>
                            <div class="col-lg-4 col-4 espacio7">
                                <label class="form-label">Comuna</label>
                                <select id="comuna" required name="comuna_id" required class="form-control form-control-sm espaciomenos7 bg-fondo-ip" tabindex="17">
                                    <option value="">Seleccionar</option>
                                </select>
                            </div>
                        </div>

                        <div class="row espacio20">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-1 col-3">
                                        <button type="submit" class="btn btn-block btn-sm btn-primary" tabindex="18">Registrarse</button>
                                    </div>
                                    <div class="col-md-6 col-9 espacio5">
                                        <span class="costado_mediano">&nbsp;&nbsp;Si tienes una cuenta, </span>
                                        <a href="/" class="btn-sm btn-primary" type="button">Iniciar sesión</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="espacio10"></div>
                        
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@stop

@section('scripts')
    <script src="{{ asset('js/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/scripts.js') }}" defer></script>
@endsection