@extends('header_nuevo_generico')
@section('main')
<input type="hidden" id="token" value="{{csrf_token()}}">
<div class="container pt-5 mt-5">
    <!-- <div class="row mt-4 mb-3">
        <div class="col col-6">COMPONENTES DEL INFORME</div>
        <div class="col col-6 text-end"><button class="btn btn-fidelitas" id="agregarComp">Agregar Componente</button></div>
    </div> -->
    <!-- -->
    <div class="row justify-content-center my-2">
        <div class="col-xl-12 col-lg-12 col-md-12">
            <h3 class="text-center text-fidelitas">@traducir('Edición de Componentes Existentes','Edición de Componentes Existentes')</h3>
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-start my-3">
        <div class="col-xl-3 col-lg-6 col-md-12 text-center">
            <a class="btn btn-outline-fidelitas-secondary" href="/configuracion-componentes-informes/nuevo-componente"><i class="bi bi-diagram-3"></i> @traducir('nuevo_componente','Nuevo Componente')</a>
        </div>
    </div>
    <!-- -->
    <!-- FILTRO TODOS, ACTIVO E INACTIVOS -->
    <div class="row justify-content-end my-3">
        <div class="col-lg-4 col-md-6 text-end ps-0">
            <div class="btn-group col-md-8" role="group" aria-label="Basic checkbox toggle button group">
                <input type="radio" name="filtro-componentes" class="btn-check" id="filtro-todo" value="T" autocomplete="off" checked>
                <label class="btn btn-outline-fidelitas btn-sm" for="filtro-todo"><i class="bi bi-people-fill"></i> @traducir('Todo','Todo')</label>
                <!-- -->
                <input type="radio" name="filtro-componentes" class="btn-check" id="filtro-activo" value="A" autocomplete="off">
                <label class="btn btn-outline-fidelitas btn-sm" for="filtro-activo"><i class="bi bi-check-lg"></i> @traducir('Activos','Activos')</label>
                <!-- -->
                <input type="radio" name="filtro-componentes" class="btn-check" id="filtro-inactivo" value="I" autocomplete="off">
                <label class="btn btn-outline-fidelitas btn-sm" for="filtro-inactivo"><i class="bi bi-x-lg"></i> @traducir('Inactivos','Inactivos')</label>
            </div>
        </div>
    </div>
    <!-- -->
    <table class="table table-condensed table-striped tablaContrapartes mb-5" id="tablaComponentes">
        <thead class="table-header-fidelitas">
            <tr>
                <th class="d-none"></th>
                <th>@traducir('Nombre','Nombre')</th>
                <th>@traducir('Título','Título')</th>
                <th>@traducir('Tipo','Tipo')</th>
                <th class="d-none"></th>
                <th class="d-none"></th>
                <th>@traducir('Cliente','Cliente')</th>
                <th>@traducir('Descripción','Descripción')</th>
                <th>@traducir('Ruta','Ruta')</th>
                <th class="d-none"></th>
                <th>@traducir('Documento','Documento')</th>
                <th class="d-none"></th>
                <th>@traducir('Tareas','Tareas')</th>
                <th class="d-none"></th>
                <th>@traducir('Activo','Activo')</th>
                <th class="col col-1">@traducir('Acciones','Acciones')</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($componentes as $ind_componentes => $comp)
                <tr  @if( $comp->activo == 0 ) class="fila-inactivo" @else class="fila-activo" @endif>
                    <td class="d-none"><input class="listaComp" type="hidden" name="componentes[]" value="{{ $comp->idComponente }}"></td>
                    <td id="nombre_componente_{{$comp->idComponente}}">{{$comp->nombre_componente}}</td>
                    <td id="titulo_componente_{{$comp->idComponente}}">{{$comp->titulo_componente}}</td>
                    <!--  -->
                    <td>
                        @if( $comp->tipo_componente == 'F' )
                            @traducir('Componente Facon','Componente Facon')
                        @elseif( $comp->tipo_componente == 'R' )
                            @traducir('Componente Redacción','Componente Redacción')
                        @elseif( $comp->tipo_componente == 'M' )
                            @traducir('Componente Mixto','Componente Mixto')
                        @elseif( $comp->tipo_componente == 'I' )
                            @traducir('Componente Informe Comercial','Componente Informe Comercial')
                        @endif
                    </td>
                    <!--  -->
                    <td id="cliente_componente_{{$comp->idComponente}}" class="d-none">{{$comp->cliente}}</td>
                    <td id="tipo_componente_{{$comp->idComponente}}" class="d-none">{{ $comp->tipo_componente }}</td>
                    <td id="cliente_nombre_componente_{{$comp->idComponente}}">
                        @if(!empty($comp->cliente))
                            @foreach($clientes as $cli)
                                @if($cli->cliente == $comp->cliente)
                                    {{$cli->nombre_cliente}}
                                    @break
                                @endif
                            @endforeach
                        @else
                        GENÉRICO
                        @endif
                    </td>
                    <td id="descripcion_componente_{{$comp->idComponente}}">{{$comp->descripcion}}</td>
                    <td id="ruta_componente_{{$comp->idComponente}}">{{$comp->ruta}}</td>
                    <td id="doc_dep_componente_{{$comp->idComponente}}" class="d-none">{{$comp->idTipoDoc_dependiente}}</td>
                    <td id="nombre_doc_dep_componente_{{$comp->idComponente}}">{{$comp->nombre_tipo_doc}}</td>
                    <td id="tarea_dep_compomnente_{{$comp->idComponente}}" class="d-none">{{$comp->idTarea_dependiente}}</td>
                    <td id="nombre_tarea_dep_compomnente_{{$comp->idComponente}}">{{$comp->nombre_tarea}}</td>
                    <!-- NUEVA EDICION IC -->
                    <td id="seccion_ic_componente_{{$comp->idComponente}}" class="d-none">{{ $comp->secciones_ic }}</td>
                    <!-- -->
                    @if( $comp->activo == 1 )
                        <td class="text-center text-success bg-success bg-opacity-10" id="activo_componente_{{$comp->idComponente}}" data-estado="{{ $comp->activo }}"><i class="bi bi-check-circle fs-4"></i></td>
                    @else
                        <td class="text-center text-danger bg-danger bg-opacity-10" id="activo_componente_{{$comp->idComponente}}" data-estado="{{ $comp->activo }}"><i class="bi bi-x-circle fs-4"></i></td> 
                    @endif
                    <!--  -->
                    {{--<td class="text-center @if($comp->activo == 1) text-success bg-success bg-opacity-10 @else text-danger bg-danger bg-opacity-10 @endif" id="activo_componente_{{$comp->idComponente}}">{{$comp->activo}}</td>--}}
                    <td class="text-end">  
                        <button type="button" class="btn btn-fidelitas-secondary editbtn" data-bs-toggle="tooltip" title="@traducir('Editar','Editar')" data-idcomponente="{{$comp->idComponente}}"><i class="bi bi-pencil-square"></i></button>
                        <button type="button" class="btn @if( $comp->activo == 1 ) btn-danger @else btn-success @endif deletecompbtn" data-bs-toggle="tooltip" title="@traducir('Desactivar','Desactivar')" data-idcomp="{{$comp->idComponente}}">@if( $comp->activo == 1 ) <i class="bi bi-dash-circle"></i> @else <i class="bi bi-plus-circle"></i> @endif</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="modal fade" id="modalEditarComponente" tabindex="-1" aria-labelledby="modal-add-componente" 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-add-componente">@traducir('Editar Componente','Editar Componente')</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="seccion-form-editar-componente">
                <form id="frmEditarComponente">
                    <input type="hidden" name='idComp' id="idComp">
                    {{ 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-1 my-3">
                            <div class="form-floating">
                                <input type="text" name="nombre_cliente_componente" id="nombre_cliente_componente" class="form-control datos-componente" placeholder="Cliente" readonly>
                                <label for="nombre_componente" class="form-label">@traducir('Cliente','Cliente') <strong class="text-danger">*</strong></label>
                                <small class="text-muted">@traducir('El nombre del cliente','El nombre del cliente')</small>
                                <input type="hidden" name="cliente" id="cliente">
                            </div>
                        </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 class="tipo_comp_op" value="F">@traducir('Componente Facon','Componente Facon')</option>
                                    <option class="tipo_comp_op" value="R">@traducir('Componente Redacción','Componente Redacción')</option>
                                    <option class="tipo_comp_op" value="M">@traducir('Componente Mixto','Componente Mixto')</option>
                                    <option class="tipo_comp_op" 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-start my-3">
                        <div class="col-lg-6 col-md-9 my-lg-auto my-3" 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 class="tipo_doc_op" 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" 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 class="tarea_comp_op" 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" 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-danger" title="Cambiar los datos ingresados" id="cancelar-datos-componente" data-bs-dismiss="modal"><i class="bi bi-x"></i> @traducir('Cancelar','Cancelar')</button>
                            <button type="submit" class="btn btn-success" title="Dar de alta el nuevo componente" id="editar-componente"><i class="bi bi-check-circle"></i> @traducir('Guardar','Guardar')</button>
                        </div>
                    </div>
                </form>
            </div>
            
            <div id="seccion-espera-componente" class="d-none">
                <span class="spinner-border spinner-border-sm"> @traducir('Esperando Informacion','Esperando Informacion') ...</span>
            </div>            
        </div>
    </div>
</div>

<form id="frmDesactivarComp">
    {{csrf_field()}}
    <input type="hidden" name="idComp">
    <input type="hidden" name="nombre_componente">
    <input type="hidden" name="titulo_componente">
    <input type="hidden" name="descripcion_componente">
    <input type="hidden" name="ruta_componente">
    <input type="hidden" name="tipo_componente">
    <input type="hidden" name="tipo_doc_componente">
    <input type="hidden" name="tarea_componente">
    <input type="hidden" name="cliente">
    <input type="hidden" name="estado_componente">
    <input type="hidden" name="ic_componente">
</form>
@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(){
            eventosEditarComponentes();
        });
    </script>
@endsection