@extends('admin.template_LFv2')

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

        @if (session('status'))
            <div class="col-12 alert alert-success mb-5">{{ session('status') }}</div>
        @endif

<script>
    let state = {
        usuario: {
            institucion: null,
            pais: null,
            pasaporte: '',
            cargos: [],
            usuario: {}
        },
        principal: null,
        consolidados: [],
        errores: [],
        showPreview: false
    };

    let instituciones = {!! \Helpers::json($instituciones) !!};
    let paises = {!! \Helpers::json($paises) !!};

    function cargarInstituciones() {
        const select1 = document.getElementById('institucion1');
        select1.innerHTML = '';

        let html = '<option value="">Seleccione una institución</option>';

        const grupos = new Map();
        instituciones.forEach(inst => {
            if (!grupos.has(inst.padre)) {
                grupos.set(inst.padre, []);
            }
            grupos.get(inst.padre).push(inst);
        });

        grupos.forEach((lista, padre) => {
            html += `<optgroup label="${padre}">`;
            lista.forEach(inst => {
                html += `<option value="${inst.id}">${inst.nombre}</option>`;
            });
            html += '</optgroup>';
        });

        select1.innerHTML = html;
    }
    function cargarPaises() {
        const select1 = document.getElementById('usuariopais1');
        select1.innerHTML = '';

        let html = '<option value="">Pais</option>';

        const paisesTipos = new Map();
        paises.forEach(pais => {
            if (!paisesTipos.has(pais.tipo)) {
                paisesTipos.set(pais.tipo, []);
            }
            paisesTipos.get(pais.tipo).push(pais);
        });

        paisesTipos.forEach((grupo, tipo) => {
            html += `<optgroup label="${tipo}">`;
            grupo.forEach(pais => {
                html += `<option value="${pais.id}">${pais.nombre}</option>`;
            });
            html += '</optgroup>';
        });

        select1.innerHTML = html;
    }
    function initSolicitud() {
        cargarInstituciones();
        cargarPaises();
    }
</script>


<h2 class="destacado mb-3">Consolidación de Sujetos Pasivos</h2>

<form name="form" class="form-horizontal" novalidate method="post" id="ConsolidacionForm">
    <div class="row">
        <h3 class="line">Usuario</h3>
    </div>
    <fieldset>

        <div class="row">
            <div class="col-12 col-lg-6">
                <label for="institucion1" class="form-label">Institución</label>
                <select id="institucion1" name="institucion1" class="form-select">
                    <option value="">Seleccione una institución</option>
                </select>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <label for="pasaporte" class="form-label">Identificación</label>
                <div class="row">
                    <div class="col-4 col-lg-4">
                        <select id="usuariopais1" name="usuario[pais]" class="form-select" id="pais1">
                            <option value="">Pais</option>
                        </select>
                    </div>
                    <div class="col-6 col-lg-4">
                        <span class="pasaporte" id="pasaporteChile" style="display: none;">
                            <input name="usuario1[pasaporte]"
                                class="form-control"
                                id="pasaporteChile1"
                                placeholder="Rut ej. 12345678-9"
                                oninput="checkRut(this)"
                                required>
                        </span>
                        <span class="pasaporte" id="pasaporteOtroPais" style="display: none;">
                            <input name="usuario1[pasaporte]"
                                class="form-control"
                                id="pasaporteOtroPais1"
                                placeholder="N° Pasaporte"
                                required>
                        </span>
                        <span class="pasaporte" id="pasaporteSeleccionPais">
                            <input class="form-control"
                                placeholder="Seleccione un país"
                                readonly>
                        </span>
                    </div>
                    <div class="col-2">
                        <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top"
                            title="Buscar cargos asociados"
                            onclick="getCargos(false)">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </fieldset>
    <fieldset id="divPrincipal" style="display: none;">
        <div class="row">
            <h3 class="line">Cargos a consolidar</h3>
        </div>

        <div id="divPrincipalContent" class="col-6 animate-show">
        </div>
    </fieldset>

    <fieldset id="cargos1"></fieldset>

    <fieldset id="previewDiv" style="display: none;">
        <div class="row">
            <h3 class="line">Vista Previa</h3>
        </div>

        <div class="col-12" id="previewDivContent">

        </div>
        <br>
        <div class="col-12">
            <div class="alert alert-warning" role="alert">
                <p>Los cargos consolidados seran eliminados, quedando todas las solicitudes de audiencia, audiencias, viajes y donativos, asociados al cargo principal seleccionado</p>
            </div>
        </div>

    </fieldset>
    <div class="row" id="divError" style="display: none;">
        <div class="col-12">
            <div class="alert alert-danger" role="alert" id="errorContent"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 mt-2 text-right">
            <button id="submitButton" type="submit" class="btn btn-primary btn-lg" style="display: none;">Guardar</button>
            <a href="{{ url('admin/tools') }}" class="btn btn-primary btn-lg">Volver</a>
        </div>
    </div>

</form>
<script>
    initSolicitud();
</script>

    </div>
</div>
@endsection