@extends('layouts.index')

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

@section('menu')
    @include('menu.index')
@stop

@section('content')

<div class="row">
    <div class="col-md-4">
        <h3 class="text-left text-muted">Edicion Datos Usuario</h3>
    </div>
</div>

<form method="POST" action="{{ 'odontologos.edit/'.$odontologo->id }}" >
    @csrf
    <div class="row espacio15">
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4 espacio7">
                            <label class="form-label">Rut</label>
                            <input id="rut" name="rut" required placeholder="99999999-9" readonly value="{{ $odontologo->rut }}" type="text" class="form-control form-control-sm espaciomenos7" tabindex="1">
                        </div>

                        <div class="col-md-5 espacio7">
                            <label class="form-label">Fecha de Nacimiento</label>
                            <input id="fecha_nacimiento" name="fecha_nacimiento" value="{{ $odontologo->fecha_nacimiento }}" required type="date" class="form-control form-control-sm espaciomenos7" tabindex="3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 espacio7">
                            <label class="form-label">Nombres</label>
                            <input id="nombres" name="nombres" required type="text" value="{{ odontologo->nombres }}" class="form-control form-control-sm espaciomenos7" tabindex="4">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 espacio7">
                            <label class="form-label">Apellido Paterno</label>
                            <input id="apellido_paterno" name="apellido_paterno" required value="{{ $usuario->apellido_paterno }}" type="text" class="form-control form-control-sm espaciomenos7" tabindex="5">
                        </div>
                        <div class="col-md-6 espacio7">
                            <label class="form-label">Apellido Materno</label>
                            <input id="apellido_materno" name="apellido_materno" type="text" value="{{ $usuario->apellido_materno }}" 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-6 espacio7">
                            <label class="form-label">Direccion</label>
                            <input id="direccion" name="direccion" type="text" value="{{ $usuario->direccion }}" 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" value="{{ $usuario->email }}" 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" value="{{ $usuario->telefono }}" class="form-control form-control-sm espaciomenos7" tabindex="15">
                            <input name="estado" type="hidden" value='A' />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row espacio30">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-block btn-sm btn-primary" tabindex="16">Actualizar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@stop

@section('scripts')
<script src="{{ asset('js/jquery-3.5.1.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>
@stop