@extends('header_nuevo_generico')

@section('main')
    <div class="row justify-content-center my-5 py-5">
        <div class="col-xl-9 col-lg-10 col-md-11">
            <h2 class="text-fidelitas text-center">@traducir('Nuevo Componente','Nuevo Componente')</h2>
        </div>
    </div>
    <!-- -->
    <input type="hidden" id="clientes_led" value="{{ $clientes }}">
    <input type="hidden" id="tipo_doc_disponibles" value="">
    <!-- -->
    <div class="row justify-content-center">
        <div class="col-xl-9 col-lg-10 col-md-11">
            <div class="card shadow-lg">
                <div class="card-body" id="seccion-formulario-alta-componente">
                    <form id="frmNuevoComponente">
                        {{ csrf_field() }}
                        <div class="row justify-content-center my-3">
                            <!-- Nombre -->
                            <div class="col-lg-4 col-md-8 col-sm-10 my-lg-1 my-3">
                                <div class="form-floating">
                                    <input type="text" name="nombre_componente" id="nombre_componente" class="form-control datos-componente" placeholder="Nombre">
                                    <label for="nombre_componente" class="form-label">@traducir('Nombre','Nombre') <strong class="text-danger">*</strong></label>
                                    <small class="text-muted">@traducir('Introduzca el nombre del componente','Introduzca el nombre del componente')</small>
                                </div>
                            </div>
                            <!-- Titulo -->
                            <div class="col-lg-4 col-md-8 col-sm-10 my-lg-1 my-3">
                                <div class="form-floating">
                                    <input type="text" name="titulo_componente" id="titulo_componente" class="form-control datos-componente" placeholder="Título">
                                    <label for="titulo_componente" class="form-label">@traducir('Título','Título') <strong class="text-danger">*</strong></label>
                                    <small class="text-muted">@traducir('Introduzca el título del componente','Introduzca el título del componente')</small>
                                </div>
                            </div>
                            <!-- Cliente -->
                            <div class="col-lg-4 col-md-8 col-sm-10 my-lg-auto my-3">
                                <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 datos-componente' 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 datos-componente" name="componente_generico" id="componente_generico" title="Componente Generico" value="1">
                                    <label class="btn btn-secondary py-3" id="label-cliente-componente" for="componente_generico"><i class="bi bi-person-fill"></i> @traducir('Cliente','Cliente')</label>
                                    <label class="btn btn-fidelitas py-3 d-none" id="label-generico-componente" for="componente_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 componente, en caso de querer generar un componente genérico, por favor aprete el boton','Elija el cliente a cual se le correspondera el componente, en caso de querer generar un componente genérico, por favor aprete el boton') <b>'@traducir('Cliente','Cliente')'</b></small>
                            </div>
                        </div>
                        <!-- -->
                        <div class="row justify-content-center my-3">
                            <!-- Descripcion -->
                            <div class="col-lg-12 col-md-9 my-lg-auto my-3">
                                <div class="form-floating">
                                    <textarea name="descripcion_componente" id="descripcion_componente" rows="4" style="height:2%;" class="form-control datos-componente" placeholder="Descripción"></textarea>
                                    <label for="descripcion_componente" class="form-label">@traducir('Descripción','Descripción') <strong class="text-danger">*</strong></label>
                                    <small class="text-muted">@traducir('Introduzca la descripción del componente','Introduzca la descripción del componente')</small>
                                </div>
                            </div>
                        </div>
                        <!-- -->
                        <div class="row justify-content-center my-3">
                            <!-- Tipo de componente -->
                            <div class="col-lg-6 col-md-9 my-lg-auto my-3">
                                <div class="form-floating">
                                    <select name="tipo_componente" id="tipo_componente" class="form-select datos-componente">
                                        <option value="">--</option>
                                        <option value="F">@traducir('Componente Facon','Componente Facon')</option>
                                        <option value="R">@traducir('Componente Redacción','Componente Redacción')</option>
                                        <option value="M">@traducir('Componente Mixto','Componente Mixto')</option>
                                        <option value="I">@traducir('Componente Informe Comercial','Componente Informe Comercial')</option>
                                    </select>
                                    <label for="tipo_componente" class="form-label">@traducir('Tipo','Tipo')</label>
                                    <small class="text-muted">@traducir('Elija el tipo del componente','Elija el tipo del componente') <strong class="text-danger">*</strong></small>
                                </div>
                            </div>
                            <!-- -->
                            <div class="col-lg-6 col-md-9 my-lg-auto my-3">
                                <div class="form-floating">
                                    <input type="text" name="ruta_componente" id="ruta_componente" class="form-control datos-componente" placeholder="Ruta">
                                    <label for="ruta_componente" class="form-label">@traducir('Ruta','Ruta') <strong class="text-danger">*</strong></label>
                                    <span class="invalid-feedback">@traducir('La ruta es un campo obligatorio que debe comenzar con un /','La ruta es un campo obligatorio que debe comenzar con un /')</span>
                                    <small class="text-muted">@traducir('Introduzca la ruta del componente .La ruta debe ser de verbo','Introduzca la ruta del componente .La ruta debe ser de verbo') <b>POST</b></small>
                                </div>
                            </div>
                        </div>
                        <!-- PARTES DEL COMPONENTE -->
                        <div class="row justify-content-center my-3">
                            <div class="col-lg-6 col-md-9 my-lg-auto my-3 d-none" id="seccion-tipo-doc-componente">
                                <div class="form-floating">
                                    <select name="tipo_doc_componente" id='tipo_doc_componente' class="form-select datos-componente">
                                        <option value="">---</option>
                                        @foreach( $documentos_disponibles as $doc )
                                        <option value="{{ $doc->tipo_doc }}">{{ $doc->nombre_tipo_doc }}</option>
                                        @endforeach
                                    </select>
                                    <label for="tipo_doc_componente" class="form-label">@traducir('Tipo doc del componente','Tipo doc del componente')</label>
                                </div>
                                <small class="text-muted">@traducir('Introduza el tipo de documento relacionado','Introduza el tipo de documento relacionado')</small>
                            </div>
                            <!-- -->
                            <div class="col-lg-6 col-md-9 my-lg-auto my-3 d-none" id="seccion-tarea-componente">
                                <div class="form-floating">
                                    <select name="tarea_componente" id='tarea_componente' class="form-select datos-componente">
                                        <option value="">---</option>
                                        @foreach( $tareas as $tarea )
                                        @if( $tarea->activo == '1' )
                                        <option value="{{ $tarea->idTarea }}">{{ $tarea->nombre_tarea }}</option>
                                        @endif
                                        @endforeach
                                    </select>
                                    <label for="tarea_componente" class="form-label">@traducir('Tarea del componente','Tarea del componente')</label>
                                </div>
                                <small class="text-muted">@traducir('Introduza la tarea relacionada','Introduza la tarea relacionada')</small>
                            </div>
                            <!-- -->
                            <div class="col-lg-6 col-md-9 my-lg-auto my-3 d-none" id="seccion-ic-componente">
                                <div class="form-floating">
                                    <select name="ic_componente" id='ic_componente' class="form-select datos-componente">
                                        <option value="">---</option>
                                        <option value="B">@traducir('Brief','Brief')</option>
                                        <option value="F">@traducir('Formales','Formales')</option>
                                        <option value="C">@traducir('Comerciales','Comerciales')</option>
                                        <option value="I">@traducir('Fiscales','Fiscales')</option>
                                        <option value="T">@traducir('Contables','Contables')</option>
                                        <option value="R">@traducir('Relaciones','Relaciones')</option>
                                        <option value="L">@traducir('Legales','Legales')</option>
                                        <option value="N">@traducir('Bancos','Bancos')</option>
                                        <option value="X">@traducir('Comex','Comex')</option>
                                    </select>
                                    <label for="ic_componente" class="form-label">@traducir('Seccion_ic','Seccion del informes comercial')</label>
                                </div>
                                <small class="text-muted">@traducir('descrip_campo_ic','Introduza la seccion del informe comercial que integra este componente')</small>
                            </div>
                        </div>
                        <!-- -->
                        <div class="row justify-content-end my-3">
                            <div class="text-end col-lg-4 col-md-6 col-sm-8">
                                <button type="button" class="btn btn-info" title="Previsualizar los datos ingresados" id="previsualizar-datos-componente"><i class="bi bi-file-break-fill"></i> @traducir('Previsualizar','Previsualizar')</button>
                                <button type="button" class="btn btn-danger d-none" title="Cambiar los datos ingresados" id="cancelar-datos-componente"><i class="bi bi-x"></i> @traducir('Cambiar','Cambiar')</button>
                                <button type="submit" class="btn btn-success d-none" title="Dar de alta el nuevo componente" id="alta-nuevo-componente"><i class="bi bi-node-plus-fill"></i> @traducir('Crear','Crear')</button>
                            </div>
                        </div>
                    </form>
                    <!-- -->
                </div>
                <!-- SECCION DE ESPERA DE ALTA COMPONENTE -->
                <div class="card-body text-center d-none" id="seccion-cargando-alta-componente">
                    <h3 class="text-fidelitas">
                        @traducir('Cargando','Cargando') ....<div class="spinner-border text-fidelitas" style="width: 3rem; height: 3rem;" role="status"></div>
                    </h3>
                </div>
                <!-- SECCION DE ALTA DE COMPONENTE -->
                <div class="card-body text-center d-none" id="seccion-exito-alta-componente">
                    <h2 class="text-success">
                        @traducir('El componente fue generado con exito','El componente fue generado con exito') <i class="bi bi-check-lg"></i>
                    </h2>
                </div>
                <!-- SECCION DE ERROR DE ALTA -->
                <div class="card-body text-center d-none" id="seccion-error-alta-componente">
                    <h2 class="text-danger">
                        @traducir('Occurio un error','Occurio un error') <i class="bi bi-x-lg"></i>
                    </h2>
                </div>
            </div>
        </div>
    </div>
@endsection

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