@extends('header_nuevo_generico')
@section('main')

<div class="row">
    <!-- -->
    <input type="hidden" id="clientes_led" value="{{$clientes}}">
    <!-- FORMULARIO PARA EL USUARIO -->
    <form id="frmAltaNuevoInforme" class="row col-md-3">
        {{ csrf_field() }}
        <!-- <div class="col-md-3 fixed-left ps-0 overflow-auto" style="margin-top:8%; padding-top:1px;"> -->
        <div class="col-md-3 mt-4 pt-5 fixed-left ps-0 overflow-auto">
            <div class="accordion" id="accordionAltaInforme">
                <!-- Clientes -->
                <div class="accordion-item" id="accordion-cliente-informe">
                    <h2 class="accordion-header" id="header-cliente-informe">
                        <!-- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#body-cliente-informe" aria-expanded="false" aria-controls="body-cliente-informe"> -->
                        <button class="accordion-button collapsed" type="button" aria-expanded="false" aria-controls="body-cliente-informe">
                            <h5 class="text-start text-fidelitas"><i class="bi bi-person"></i> @traducir('Cliente','Cliente')</h5>
                        </button>
                    </h2>
                    <div id="body-cliente-informe" class="accordion-collapse collapse show" aria-labelledby="header-cliente-informe">
                        <div class="accordion-body d-flex flex-column">
                            <div class="input-group">
                                <input type="hidden" id="cliente" name="cliente" value=''>
                                <input type="text" id='cliente_buscador' name='clienteOk' value='' class='form-control form-control-sm text-center' list='lista_clientes' placeholder='@traducir("Buscar Cliente","Buscar Cliente")...' autocomplete='off'>
                                <span id="seccion-espera-buscador-cliente" class="d-none input-group-text"><div class="spinner spinner-border text-fidelitas"></div></span>
                                <button type="button" id="btn-cambiar-cliente" class="d-none btn btn-outline-danger" title="Cancelar cliente"><i class="bi bi-x-lg"></i></button>
                                <!-- -->
                                <input type="checkbox" role="button" class="btn-check campos-alta-set" name="informe_generico" id="informe_generico" title="Informe Generico" value="1" autocomplete="off">
                                <label class="btn btn-secondary py-3" id="label-cliente-informe" for="informe_generico"><i class="bi bi-person-fill"></i> @traducir('Cliente','Cliente')</label>
                                <label class="btn btn-fidelitas py-3 d-none" id="label-generico-informe" for="informe_generico"><i class="bi bi-people-fill"></i> @traducir('Genérico','Genérico')</label>
                            </div>
                            <div id='notificacion' class='mt-2'></div>
                            <div id='lista_clientes' class='py-2 list-group d-none'></div>
                            <!-- -->
                            <small class="text-muted">@traducir('Elija el cliente a cual se le correspondera el informe, en caso de querer generar un informe genérico, por favor aprete el boton','Elija el cliente a cual se le correspondera el informe, en caso de querer generar un informe genérico, por favor aprete el boton') <b>'@traducir('Cliente','Cliente')'</b></small>
                        </div>
                    </div>
                </div>
                <!-- Componentes -->
                <div class="accordion-item d-none" id="accordion-componentes-informe">
                    <h2 class="accordion-header" id="header-componentes-informe">
                        <!-- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#body-componentes-informe" aria-expanded="false" aria-controls="body-componentes-informe"> -->
                        <button id="control-accordion-componentes" class="accordion-button collapsed" type="button" aria-expanded="false" aria-controls="body-componentes-informe">
                            <h5 class="text-start text-fidelitas"><i class="bi bi-diagram-3"></i> @traducir('Componentes del Informe','Componentes del Informe')</h5>
                            <div class="form-check form-switch mx-5" title="Informe con Componentes">
                                <input class="form-check-input" type="checkbox" role="switch" id="informeSinComponentes" autocomplete="off" checked>
                            </div>
                        </button>
                    </h2>
                    <div id="body-componentes-informe" class="accordion-collapse collapse show" aria-labelledby="header-componentes-informe">
                        <div class="accordion-body d-flex flex-column" id="lista-componentes-informe">
                        </div>
                    </div>
                </div>
                <!-- Tareas --->
                <div class="accordion-item d-none" id="accordion-tareas-informe">
                    <h2 class="accordion-header" id="header-tareas-informe">
                        <!-- <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#body-tareas-informe" aria-expanded="false" aria-controls="body-tareas-informe"> -->
                        <button class="accordion-button collapsed" type="button" aria-expanded="false" aria-controls="body-tareas-informe">
                            <h5 class="text-start text-fidelitas"><i class="bi bi-list-task"></i> @traducir('Tareas del Informe','Tareas del Informe')</h5>
                        </button>
                    </h2>
                    <div id="body-tareas-informe" class="accordion-collapse collapse show" aria-labelledby="header-tareas-informe">
                        <div class="accordion-body d-flex flex-column" id="lista-tareas-informe">
                        </div>
                    </div>
                </div>
            </div>
            <!-- BOTONES GENERAR PDF - FINALIZAR -->
            <div class="d-grid d-md-block text-end my-4">
                <button class="btn btn-outline-primary" id="btnElegirComponentes" type="button"><i class="bi bi-diagram-3"></i> @traducir('Elegir Componentes','Elegir Componentes')</button>
                <button class="btn btn-outline-primary d-none" id="btnElegirTareas" type="button"><i class="bi bi-list-task"></i> @traducir('Elegir Tareas','Elegir Tareas')</button>
                <button class="btn btn-outline-success d-none" id="btnFinalizarEleccionInforme"><i class="bi bi-files"></i> @traducir('Crear Informe','Crear Informe')</button>
                <!-- -->
                <button class="btn btn-outline-danger d-none" id="btnCancelarComponentes" type="button"><i class="bi bi-x-lg"></i> @traducir('Cancelar','Cancelar')</button>
                <button class="btn btn-outline-danger d-none" id="btnCancelarTareas" type="button"><i class="bi bi-x-lg"></i> @traducir('Cancelar','Cancelar')</button>
                <!--  -->
                <button class="btn btn-outline-fidelitas" id="genPDF" type="button"><i class="bi bi-file-earmark-pdf-fill"></i> @traducir('Generar pdf','Generar pdf')</button>
            </div>
            <!-- -->
            <div class="d-grid">
                <div id="alert-crear-informe-cliente" class="alert alert-danger d-none">
                    <i class="bi bi-exclamation-triangle"></i> @traducir('No ha completado la configuracion del cliente para crear el informe','No ha completado la configuracion del cliente para crear el informe')
                </div>
                <!-- -->
                <div id="alert-crear-informe-componentes" class="alert alert-danger d-none">
                    <i class="bi bi-exclamation-triangle"></i> @traducir('No ha elegido ningun componente para crear el informe','No ha elegido ningun componente para crear el informe')
                </div>
                <!-- -->
                <div id="alert-crear-informe-tareas" class="alert alert-danger d-none">
                    <i class="bi bi-exclamation-triangle"></i> @traducir('No ha elegido ningun tarea para crear el informe','No ha elegido ningun tarea para crear el informe')
                </div>
            </div>
            <!--  -->
        </div>
    </form>
    <!--  -->
    <div class="col-md-9">
        <div class="mt-5 p-4" id="estructura-componentes-informe">
        </div>
   </div>
</div>
<!-- Modal Finalizar-->
<div class="modal fade" id="modalAltaInforme" tabindex="-1" aria-labelledby="modal-alta-informe" data-bs-backdrop="static" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="header-modal-alta-informe">@traducir('Nuevo Informe','Nuevo Informe')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" id="altaNewInforme"></div>
                <div class="modal-footer justify-content-center d-none text-success" id="okAlta">Informe creado con éxito. Redirigiendo a lista de informes... <div class="spinner-border spinner-border-sm"></div></div>
                <div class="modal-footer text-center d-none text-danger" id="errorAlta">Hubo un error creando el informe, revise la configuración y reintente nuevamente</div>
            </div>
        </div>
    </div>

@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones.js') }}?v=1"></script>
<script src="{{ asset('/Libreria_CA/Js/formulario_inteligente.js') }}?v=1"></script>
<script src="{{ asset('/Libreria_CA/Js/funciones_config_infomes.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function(){
        eventosComponentesTareasInforme();
    });
</script>
@endsection