@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/perfil') }}">Mi perfil</a></li>
        <li class="breadcrumb-item active" aria-current="page">Agregar asistente técnico</li>
    </ol>
</div>
@endsection

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

<script>
    let paises = {!! \Helpers::json($paises ?? []) !!};
    let usuario = {};
    window.DELEGADOS_POST_URL = {!! \Helpers::json($postUrl ?? url('admin/perfil/delegados')) !!};
    window.DELEGADOS_CANCEL_URL = {!! \Helpers::json($cancelUrl ?? url('admin/perfil')) !!};
    let persona = {
        pasaporte: '',
        pais: { id: '' },
        id: '',
        nombres: null,
        apellidos: null,
        email: null,
        telefono: null,
        password: null
    };

    let block = {
        nombres: false,
        apellidos: false,
        email: false,
        telefono: false,
        password: false
    };
    let auditor = null;
    let natural = null;
    @if(isset($persona))
        persona = {!! \Helpers::json($persona) !!}
    @endif
    @if(isset($usuario))
        usuario = {!! \Helpers::json($usuario) !!}
    @endif
    @if(isset($auditor))
        auditor = {!! \Helpers::json($auditor) !!}
    @endif
    @if(isset($natural))
        natural = {!! \Helpers::json($natural) !!}
    @endif
    @if(isset($block))
        block = {!! \Helpers::json($block) !!}
    @endif
    let last = null;
    let lastCountry = null;
    // Renderizar los países con optgroup
    function renderPaises() {
        let select = document.querySelector('select[name="persona[pais]"]');

        select.innerHTML = '<option value="">Seleccione país</option>';

        const grupos = {};

        paises.forEach(p => {
            if (!grupos[p.tipo]) {
            grupos[p.tipo] = [];
            }
            grupos[p.tipo].push(p);
        });

        for (const tipo in grupos) {
            const optgroup = document.createElement('optgroup');
            optgroup.label = tipo;

            grupos[tipo].forEach(p => {
            const option = document.createElement('option');
            option.value = p.id;
            option.textContent = p.nombre;
            optgroup.appendChild(option);
            });

            select.appendChild(optgroup);
        }
    }

    // Habilitar o deshabilitar el select
    function updateSelectState() {
        const shouldDisable = paises.length === 1 || auditor || natural;
        let select = document.querySelector('select[name="persona[pais]"]');
        select.disabled = shouldDisable;
    }

    function renderPasaporte(){
        if(auditor || natural){
            document.querySelector('select[name="persona[pais]"]').attr('disabled', true);
        }
    }

    function init(){
        renderPaises();
        renderPasaporte();
        updateSelectState();
    }
</script>

<style>
    #DelegadosForm .pasaporte-input {
        display: none;
    }
</style>

<form id="DelegadosForm" class="form-horizontal" name="delegados_form">
    <h2 class="destacado mb-1">Asistente Técnico</h2>
    <div ng-init='init({!! \Helpers::json($paises) !!})'></div>

    <fieldset>
    <h2 class="line mb-4">1. Información Personal</h2>
    <!-- si hay un error agregar clase has-error -->
    <div class="row">
        <div class="col-12 py-2">
            <label class="form-label">Identificación</label>
            <div class="row">
                <div class="col-6">
                    <select name="persona[pais]" class="form-select" onchange="checkPassport()" required style="margin-bottom: 0px;">
                        <option value="">Seleccione pais</option>
                    </select>
                </div>
                <div class="col-6">
                    <span class="pasaporte">
                        <input name="persona[pasaporte]" class="form-control" onchange="checkPassport(), validRut()" placeholder="Rut/Pasaporte ej. 12345678-9" required>
                        <i ng-show="searching>0" class="fa fa-spinner fa-pulse pasaporte-input"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-12 py-2">
            <label class="form-label">Nombres</label>
            <input name="persona[nombres]" class="form-control capitalize" placeholder="ej. Juan" required>
        </div>
    </div>

    <div class="row">
        <div class="col-12 py-2">
            <label class="form-label">Apellidos</label>
            <input name="persona[apellidos]" class="form-control capitalize" placeholder="ej. Pérez" required>
        </div>
    </div>

    <div class="row">
        <div class="col-12 py-2">
            <label class="form-label">E-Mail</label>
            <input type="email" name="persona[email]" class="form-control" placeholder="ej. usuario@servicio.gob.cl" required>
        </div>
    </div>

    <div class="row" has-error="submitted && delegados_form['persona[telefono]'].$invalid">
        <div class="col-12 py-2">
            <label class="form-label">Teléfono</label>
            <input name="persona[telefono]" class="form-control" placeholder="ej. 21234567">
        </div>
    </div>

    <div class="row" has-error="submitted && delegados_form['persona[telefono]'].$invalid">
        <div class="col-12 py-2">
            <label for="password" class="form-label">Contraseña</label>
            <input name="persona[password]" class="form-control" id="password" placeholder="La contraseña con que su asistente técnico ingresará al sistema." type="password" required>
        </div>
    </div>

    <div class="row">
        <div class="col-12 mt-2 text-right">
            <a href="{{ $cancelUrl ?? url('admin/perfil') }}" class="btn btn-outline-primary me-2">Cancelar</a>
            <button type="submit" class="btn btn-primary">Guardar</button>
        </div>
    </div>
    </fieldset>
</form>
<script>
    init();
</script>

</div>
@endsection