@extends('layouts.admin')

@section('breadcrumb')
<div class="container">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url('admin') }}">Inicio</a></li>
        <li class="breadcrumb-item"><a href="{{ url('admin/usuarios') }}">Usuarios</a></li>
        @if($usuario->id)
            <li class="breadcrumb-item"><a href="#">{{ $usuario->nombres }} {{ $usuario->apellidos }}</a></li>
            <li class="breadcrumb-item"><a href="{{ url('admin/usuarios/' . $usuario->id . '/roles') }}">Roles</a></li>
            <li class="breadcrumb-item active" aria-current="page">Agregar</li>
        @else
            <li class="breadcrumb-item active" aria-current="page">Asignar Rol</li>
        @endif
    </ol>
</div>
@endsection

@section('content')
<div class="container">

<script>
    let usuario = {
        pasaporte: "",
        pais_id: "CHL"
    };
    let errors = [];
    let rol = "";
    let fecha_inicio = "";
    let validateRut = false;
    let institucion;
    @if($usuario !== null)
        usuario = {!! \Helpers::json($usuario) !!};
        if(usuario.length == 0){
            usuario = {
                pasaporte: "",
                pais_id: "CHL"
            };
        }
    @endif

    function init(){
        if(usuario.pasaporte != ""){
            if(usuario.pais_id == "CHL"){
                document.getElementById('usuarioPasaporteCHLDiv').classList.remove('d-none');
                document.getElementById('usuarioPasaporteOtroDiv').classList.add('d-none');
                document.getElementById('usuarioPasaporteCHL').value = usuario.pasaporte;

            }else{
                document.getElementById('usuarioPasaporteOtroDiv').classList.remove('d-none');
                document.getElementById('usuarioPasaporteCHLDiv').classList.add('d-none');
                document.getElementById('usuarioPasaporteOtro').value = usuario.pasaporte;
            }
        } else{
            document.getElementById('usuarioPasaporteCHLDiv').classList.remove('d-none');
            document.getElementById('usuarioPasaporteOtroDiv').classList.add('d-none');
        }

    }
</script>

<form id="usuarioRoleCreate" novalidate class="form-horizontal">

    <div id="divErrors" class="validacion d-none">
    </div>

    <h2 class="destacado mb-1">Rol de Usuario</h2>
    <fieldset>
        <h2 class="line mb-4">1. Usuario</h2>
        <div class="row">
            <div class="col-12 py-2">
                <label for="pasaporte" class="form-label">Identificación</label>
                <div id="divPasaporte"  class="row">
                    <div class="col-6">
                        <select id="usuarioPais_id" name="usuario[pais_id]" class="form-select" style="margin-bottom: 0px;">
                            <optgroup label="RUT">
                                <option value="CHL">Chile</option>
                            </optgroup>
                            <optgroup label="Pasaporte">
                                @foreach($paises as $pais)
                                    @if($pais->id !== 'CHL')
                                        <option value="{{ $pais->id }}">{{ $pais->nombre }}</option>
                                    @endif
                                @endforeach
                            </optgroup>
                        </select>
                    </div>
                    <div class="col-6">
                        <span id="usuarioPasaporteCHLDiv" class="pasaporte d-none">
                            <input  id="usuarioPasaporteCHL" name="usuario[pasaporte]"
                                    class="form-control"
                                    placeholder="Rut ej. 11111111-1"
                                    onchange="checkPassport()"
                                    oninput='checkRut(this)'
                                    required>
                        </span>
                        <span id="usuarioPasaporteOtroDiv" class="pasaporte d-none">
                            <input  id="usuarioPasaporteOtro"
                                    name="usuario[pasaporte]"
                                    onchange="checkPassport()"
                                    class="form-control"
                                    placeholder="Ingrese N° Pasaporte"
                                    required>
                        </span>
                    </div>
                </div>
            </div>

        </div>
    </fieldset>
    <fieldset>
        <h2 class="line mb-4">2. Agregar Rol</h2>
        <div class="row">
            <div class="col-12 py-2">
                <label for="institucion" class="form-label">Institución</label>
                <select id="institucion" name="institucion" class="form-control">
                    {!! \Helpers::selectGroup($instituciones, 'padre') !!}
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col-12 py-2">
                <label for="rol" class="form-label">Rol</label>
                <select id="rol" name="rol" class="form-select" required style="margin-bottom: 0px;">
                    <option>admin</option>
                    <option>digitador</option>
                    <option>auditor</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col-12 py-2">
                <label for="fecha_inicio" class="form-label">Fecha inicio</label>
                <input id="fecha_inicio" class="form-control datepicker" name="fecha_inicio" />
            </div>
        </div>
    </fieldset>

    <div class="row">
        <div class="col-12 mt-2 text-right">
            <a href="{{ $usuario->id ? url('admin/usuarios/' . $usuario->id . '/roles') : url('admin/usuarios/') }}" class="btn btn-outline-primary me-2">Cancelar</a>
            <button type="button" class="btn btn-primary" onclick="submitButton()">Guardar</button>
        </div>
    </div>
</form>
<script>
    init()
</script>

</div>
@endsection