@extends('layouts.admin')

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

@section('nav')
    @include('nav.inicio')
@stop

@section('content')

<div class="container-fluid">
    <div class="row espacio15">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <h3 class="text-center text-primary">Ingrese datos para Registro</h3>
        </div>
    </div>
    <form action="\user" method="POST">
    @csrf
    <div class="row espacio20">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div id="mensaje" class="mensaje_color"></div>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4 espacio7">
                            <label class="col-form-label">Rut</label>
                            <input id="rut" name="rut" required 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-md-4 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" tabindex="3">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Nombres</label>
                            <input id="nombres" name="nombres" required type="text" class="form-control form-control-sm espaciomenos7" tabindex="4">
                        </div>
                        <div class="col-md-4 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" tabindex="5">
                        </div>
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Apellido Materno</label>
                            <input id="apellido_materno" name="apellido_materno" type="text" class="form-control form-control-sm espaciomenos7" tabindex="6">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row espacio15">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Nombre Usuario</label>
                            <input id="username" name="username" placeholder="max 20 caracteres" type="text" class="form-control form-control-sm espaciomenos7" type="text" tabindex="7">
                        </div>
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Password</label>
                            <input id="password" name="password" type="password" class="form-control form-control-sm espaciomenos7" tabindex="8">
                        </div>
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Re-Password</label>
                            <input id="password_confirmation" name="password_confirmation" type="password" class="form-control form-control-sm espaciomenos7" tabindex="9">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row espacio15">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6 espacio7">
                            <label class="form-label">Direccion</label>
                            <input id="direccion" name="direccion" type="text" class="form-control form-control-sm espaciomenos7" tabindex="10">
                        </div>
                        <div class="col-md-6 espacio7">
                            <label class="form-label">E-mail</label>
                            <input id="email" name="email" type="email" placeholder="correo@tusitio.cl" class="form-control form-control-sm espaciomenos7" tabindex="11">
                        </div>
                    </div>
                    <div class="row espacio15">
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Region</label>
                            <select id="_region" name="region" class="form-control form-control-sm espaciomenos7" tabindex="12">
                                <option value="">{{'Seleccionar'}}</option>
                                @foreach ($regiones as $region)
                                    <option value="{{$region->codigo}}">{{$region->nombre}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Provincia</label>
                            <select id="_provincia" name="provincia" class="form-control form-control-sm espaciomenos7" tabindex="13">
                                <option value="">{{'Seleccionar'}}</option>
                            </select>
                        </div>
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Comuna</label>
                            <select id="_comuna" required name="comuna_id" class="form-control form-control-sm espaciomenos7" tabindex="14">
                                <option value="">{{'Seleccionar'}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Telefono</label>
                            <input id="telefono" name="telefono" type="text" class="form-control form-control-sm espaciomenos7" tabindex="15">
                            <input name="estado" type="hidden" value='A' />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row espacio15">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-1">
                            <button type="submit" class="btn btn-block btn-sm btn-primary" tabindex="16">Registrarse</button>
                        </div>
                    </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>
<script>
    const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
    document.getElementById('_region').addEventListener('change',(e)=>{
        fetch('provincias',{
            method : 'POST',
            body: JSON.stringify({texto : e.target.value}),
            headers:{
                'Content-Type': 'application/json',
                "X-CSRF-Token": csrfToken
            }
        }).then(response =>{
            return response.json()
        }).then( data =>{
            var opciones ="<option value=''>Seleccionar</option>";
            for (let i in data.lista) {
                opciones+= '<option value="'+data.lista[i].codigo+'">'+data.lista[i].nombre+'</option>';
            }
            document.getElementById("_provincia").innerHTML = opciones;
        }).catch(error =>console.error(error));
    })

    document.getElementById('_provincia').addEventListener('change',(e)=>{
        fetch('comunas',{
            method : 'POST',
            body: JSON.stringify({texto : e.target.value}),
            headers:{
                'Content-Type': 'application/json',
                "X-CSRF-Token": csrfToken
            }
        }).then(response =>{
            return response.json()
        }).then( data =>{
            var opciones ="<option value=''>Seleccionar</option>";
            for (let i in data.lista) {
                opciones+= '<option value="'+data.lista[i].codigo+'">'+data.lista[i].nombre+'</option>';
            }
            document.getElementById("_comuna").innerHTML = opciones;
        }).catch(error =>console.error(error));
    })

</script>
@endsection