templates/clients/editClient.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
    
    {% block title %}Editando Cliente{% endblock %}
    {% block breadcrumb %}Clients{% endblock %}
    
    {% block body %}
    <!--begin::Card-->
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-3">
                <!--begin::Card title-->
                <div class="card-title">
                    <!--begin::Search-->
                    <h3>Editando: {{prospect.desc_cliente}}</h3>
                </div>
                <!--begin::Card title-->
                <!--begin::Card toolbar-->
            
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-2">
                <!--begin::Input group-->
                    <div class="row g-9 mb-7">
                        <!--begin::Col-->
                        <div class="col-md-6 fv-row">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold mb-2 required">Descripcion Cliente</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input type="text" class="form-control form-control-solid" placeholder="" id="desc_cliente" value="{{prospect.desc_cliente}}"/>
                            <!--end::Input-->
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col-md-6 fv-row">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold mb-2">
                                <span class="required">Pais</span>
                                <span class="ms-1" data-bs-toggle="tooltip" title="Country of prospect">
                                    <i class="ki-outline ki-information fs-7"></i>
                                </span>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <select id="pais" aria-label="Select a Country" data-control="select2" data-placeholder="Select a Country..." class="form-select form-select-solid fw-bold">
                                <option value="">Select a Country...</option>
                                {% for pais in paises %}
                                    <option value="{{pais.id_pais_pk}}" {% if prospect.id_pais == pais.id_pais_pk %} selected {% endif %}>{{pais.nom_pais}}</option>
                                {% endfor %}
                            </select>
                            <!--end::Input-->
                        </div>
                        <!--end::Col-->
                    </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                    <div class="row g-9 mb-7">
                        <!--begin::Col-->
                        <div class="col-md-4 fv-row">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold mb-2 required">Rut cliente</label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <input class="form-control form-control-solid" placeholder="" id="rut_cliente" value="{{prospect.rut_cliente}}" />
                            <!--end::Input-->
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col-md-4 fv-row">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold mb-2">
                                <span>Tipo Documento</span>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <select id="tipo_documento" aria-label="Seleccione Documento.." data-control="select2" data-placeholder="Seleccione Documento....." class="form-select form-select-solid fw-bold">
                                <option value="">Seleccione Documento...</option>
                                {% for documento in documentos %}
                                    <option value="{{documento.id_tipo_documento_fiscal_pk}}" {% if prospect.id_tipo_documento_fiscal == documento.id_tipo_documento_fiscal_pk %} selected {% endif %}>{{documento.desc_tipo_documento}}</option>
                                {% endfor %}
                            </select>
                            <!--end::Input-->
                        </div>
                        <!--end::Col-->
                        <!--begin::Col-->
                        <div class="col-md-4 fv-row">
                            <!--begin::Label-->
                            <label class="fs-6 fw-semibold mb-2 required">
                                <span>Pais Documento</span>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input-->
                            <select id="pais_documento" aria-label="Seleccione Pais.." data-control="select2" data-placeholder="Seleccione Pais....." class="form-select form-select-solid fw-bold">
                                <option value="">Seleccione Pais...</option>
                                {% for pais in paises %}
                                    <option value="{{pais.id_pais_pk}}" {% if prospect.id_pais_documento_fiscal == pais.id_pais_pk %} selected {% endif %}>{{pais.nom_pais}}</option>
                                {% endfor %}
                            </select>
                            <!--end::Input-->
                        </div>
                        <!--end::Col-->
                    </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2 required">Razon social</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input class="form-control form-control-solid" placeholder="" id="razon_social" value="{{prospect.desc_razon_social}}" />
    
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2">Oportunidad Venta</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input type="text" class="form-control form-control-solid" placeholder="" id="oportunidad_venta" value="{{prospect.desc_oportunidad_venta}}" />
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2 required">Estado</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <select id="estado_cliente" aria-label="Seleccione estado.." data-control="select2" data-placeholder="Seleccione estado....." class="form-select form-select-solid fw-bold">
                            <option value="">Seleccione Estado...</option>
                            {% for estado in estadosCliente %}
                                <option value="{{estado.id_tipo_estado_cliente_pk}}" {% if prospect.id_estado_cliente == estado.id_tipo_estado_cliente_pk %} selected {% endif %}>{{estado.desc_estado_cliente}}</option>
                            {% endfor %}
                        </select>
    
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="row g-9 mb-7">
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="required fs-6 fw-semibold mb-2 required">Agente Owner</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <select id="agente_owner" aria-label="Seleccione agente.." data-control="select2" data-placeholder="Seleccione agente....." class="form-select form-select-solid fw-bold">
                            <option value="">Seleccione Agente...</option>
                            {% for agente in agentes %}
                                <option value="{{agente.id_agente_pk}}" {% if prospect.id_agente_owner == agente.id_agente_pk %} selected {% endif %}>{{agente.desc_agente}}</option>
                            {% endfor %}
                        </select>
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="required fs-6 fw-semibold mb-2 required">Usuario Owner</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <select id="comercial_owner" aria-label="Seleccione usuario.." data-control="select2" data-placeholder="Seleccione usuario....." class="form-select form-select-solid fw-bold">
                            <option value="">Seleccione Usuario...</option>
                            {% for usuario in usuarios %}
                                <option value="{{usuario.id_usuario_pk}}" {% if prospect.id_comercial_owner == usuario.id_usuario_pk %} selected {% endif %}>{{usuario.nickname}}</option>
                            {% endfor %}
                        </select>
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
    
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2">Usuarios Invitados</label>
                        <!--end::Label-->
                        <input type="hidden" id="usuariosInvitadosJson" value="{{prospect.json_invitados_acceso}}" />
                        <!--begin::Input-->
                        <select id="usuarios_invitados" aria-label="Seleccione usuario.." data-control="select2" data-placeholder="Seleccione usuario....." class="form-select form-select-solid fw-bold" multiple>
                            {% for usuario in usuarios %}
                                <option value="{{usuario.id_usuario_pk}}">{{usuario.nickname}}</option>
                            {% endfor %}
                        </select>
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Input group-->
    
    
                <script>
                    $('#usuarios_invitados option').each(function() {
                        if ($('#usuariosInvitadosJson').val().split(',').includes($(this).val())) {
                            $(this).attr('selected', 'selected');
                        }
                    });
                </script>
    
    
                <!--begin::Input group-->
                <div class="row g-9 mb-7">
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2 required">Direccion Fiscal (Max. 70 Char)</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <input class="form-control form-control-solid" placeholder="" id="direccion_fiscal" value="{{prospect.direccion_fiscal}}" />
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2 required">Ciudad Fiscal</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <input class="form-control form-control-solid" placeholder="" id="ciudad_fiscal" value="{{prospect.ciudad_fiscal}}" />
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2 required">Departamento Fiscal</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <input class="form-control form-control-solid" placeholder="" id="departamento_fiscal" value="{{prospect.departamento_fiscal}}" />
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Input group-->
    
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2">Telefono</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input class="form-control form-control-solid" placeholder="" id="telefono" value="{{prospect.telefono}}" />
    
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2">URL Web</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input class="form-control form-control-solid" placeholder="" id="url_web" value="{{prospect.url_pagina_web}}" />
    
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2 required">Correo de facturacion</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input class="form-control form-control-solid" placeholder="" id="correo_facturacion" value="{{prospect.dir_correo_facturacion}}" />
    
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2">Facturacion directa</label>
                    <!--end::Label-->
                    <div class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" value="" id="factura_directa" {% if prospect.flag_factura_directa %} checked="checked" {% endif %} />
    
                    </div>
                </div>
                <!--end::Input group-->
    
    
    
    
                <!--begin::Input group-->
                <div class="row g-9 mb-7">
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2 required">Medio de pago</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <select id="medio_pago" aria-label="Seleccione Industria.." data-control="select2" data-placeholder="Seleccione Medio....." class="form-select form-select-solid fw-bold">
                            <option value="">Seleccione Medio...</option>
                            {% for medio in medioPago %}
                                <option value="{{medio.id_tipo_medio_pago_pk}}" {% if prospect.id_medio_pago_servicio == medio.id_tipo_medio_pago_pk %} selected {% endif %}>{{medio.desc_tipo_medio_pago}}</option>
                            {% endfor %}
                        </select>
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-md-4 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2 required">Cuenta bancaria</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <select id="cuenta_bancaria_pago" aria-label="Seleccione Cuenta.." data-control="select2" data-placeholder="Seleccione Industria....." class="form-select form-select-solid fw-bold">
                            <option value="">Seleccione Cuenta...</option>
                            {% for cuenta in cuentaBancaria %}
                                <option value="{{cuenta.id_cuenta_bancaria_pago_pk}}" {% if prospect.id_cuenta_bancaria_pago == cuenta.id_cuenta_bancaria_pago_pk %} selected {% endif %}>{{cuenta.desc_cuenta}}</option>
                            {% endfor %}
                        </select>
                        <!--end::Input-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2">Descuento Cliente</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input class="form-control form-control-solid" placeholder="" id="descuento_cliente" value="{{prospect.porc_descuento_cliente}}" />
    
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2">Factura sin IVA</label>
                    <!--end::Label-->
                    <div class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" value="" id="factura_iva" {% if prospect.flag_factura_sin_iva %} checked="checked" {% endif %} />
    
                    </div>
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2 required">Tipo Proceso Facturacion</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <select id="proceso_facturacion" aria-label="Seleccione Industria.." data-control="select2" data-placeholder="Seleccione Industria....." class="form-select form-select-solid fw-bold">
                        <option value="">Seleccione Usuario...</option>
                        {% for proceso in procesos %}
                            <option value="{{proceso.id_tipo_proceso_facturacion_pk}}" {% if prospect.id_tipo_proceso_facturacion == proceso.id_tipo_proceso_facturacion_pk %} selected {% endif %}>{{proceso.desc_tipo_proceso_facturacion}}</option>
                        {% endfor %}
                    </select>
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
                <div class="row g-9 mb-7">
                    <div class="col-md-6 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2 required">Meses de espera para el pago de factura</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <select id="cant_meses_pago_factura" aria-label="Seleccione Meses de espera..." data-control="select2" data-placeholder="Seleccione Meses de espera..." class="form-select form-select-solid fw-bold">
                            <option value="0" {% if prospect.cant_meses_pago_factura == 0 or prospect.cant_meses_pago_factura is not defined %} selected {% endif %}>0</option>
                            <option value="1" {% if prospect.cant_meses_pago_factura == 1 %} selected {% endif %}>1</option>
                            <option value="2" {% if prospect.cant_meses_pago_factura == 2 %} selected {% endif %}>2</option>
                            <option value="3" {% if prospect.cant_meses_pago_factura == 3 %} selected {% endif %}>3</option>
                            <option value="4" {% if prospect.cant_meses_pago_factura == 4 %} selected {% endif %}>4</option>
                        </select>
                        <!--end::Input-->
                    </div>
                    <div class="col-md-6 fv-row">
                        <!--begin::Label-->
                        <label class="fs-6 fw-semibold mb-2">Calendario de pago</label>
                        <!--end::Label-->
                        <!--begin::Input-->
                        <input class="form-control form-control-solid" placeholder="" id="calendario_pago" value="{{ prospect.desc_calendario_pago_cliente }}"/>
                        <!--end::Input-->
                    </div>
                </div>
    
                <!--begin::Input group-->
                <div class="fv-row mb-7">
                    <!--begin::Label-->
                    <label class="fs-6 fw-semibold mb-2">Correo de notificacion</label>
                    <!--end::Label-->
                    <!--begin::Input-->
                    <input class="form-control form-control-solid" placeholder="" id="correo_notify" value="{{prospect.dir_correo_notificacion}}" />
    
                    <!--end::Input-->
                </div>
                <!--end::Input group-->
    
                <!--begin::Input group-->
                                <div class="row g-9 mb-7">
                                    <!--begin::Col-->
                                    <div class="col-md-6 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Retencion Importe Bruto</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input class="form-control form-control-solid" 
                                            placeholder="0.00" 
                                            id="porcentaje_retencion_bruto" 
                                            type="number" 
                                            step="0.01" 
                                            min="0.00" 
                                            max="999.99"
                                            value="{{prospect.porcentaje_retencion_bruto}}"
                                            oninput="this.value = this.value.slice(0, this.value.indexOf('.') + 3)" />
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Col-->
                                    <!--begin::Col-->
                                    <div class="col-md-6 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Retencion Sobre IVA</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input class="form-control form-control-solid" 
                                            placeholder="0.00" 
                                            id="porcentaje_retencion_iva" 
                                            type="number" 
                                            step="0.01" 
                                            min="0.00" 
                                            max="999.99"
                                            value="{{prospect.porcentaje_retencion_iva}}"
                                            oninput="this.value = this.value.slice(0, this.value.indexOf('.') + 3)" />
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Col-->
                                </div>
                                <!--end::Input group-->
    
                                <div class="row g-9 mb-7">
                                    <!--begin::Col-->
                                    <div class="col-md-6 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Porcentaje Grossing-Up</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input class="form-control form-control-solid" 
                                            placeholder="0.00" 
                                            id="porcentaje_gross_up" 
                                            type="number" 
                                            step="0.01" 
                                            min="0.00" 
                                            max="999.99"
                                            value="{{prospect.porcentaje_gross_up}}"
                                            oninput="this.value = this.value.slice(0, this.value.indexOf('.') + 3)" />
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Col-->
                                </div>
                                <!--end::Input group-->
    
    
    
    
    
                
            </div>
            <!--end::Card body-->
            <div class="card-footer d-flex justify-content-end py-6 px-9">
                <a type="button" class="btn btn-light btn-active-light-primary me-2" href="{{path('clients')}}">Discard</a>
                <button type="button" class="btn btn-primary" onclick="editClient({{prospect.id_cliente_pk}});">Save Changes</button>
            </div>
        </div>
    
    
        <br>
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                
                    <h3>Contactos</h3>
                </div>
                <!--begin::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Toolbar-->
                    <div class="d-flex justify-content-end" data-kt-contact-table-toolbar="base">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1 me-2">
                            <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                            <input type="text" data-kt-contact-table-filter="search" class="form-control form-control-solid w-250px ps-12" placeholder="Buscar Contacto" />
                        </div>
                        <!--end::Search-->
                        <!--begin::Add customer-->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_customer">Add Contacto</button>
                        <!--end::Add customer-->
                    </div>
                    <!--end::Toolbar-->
                    <!--begin::Group actions-->
                    <div class="d-flex justify-content-end align-items-center d-none" data-kt-contact-table-toolbar="selected">
                        <div class="fw-bold me-5">
                        <span class="me-2" data-kt-contact-table-select="selected_count"></span>Selected</div>
                        <button type="button" class="btn btn-danger" data-kt-contact-table-select="delete_selected">Delete Selected</button>
                    </div>
                    <!--end::Group actions-->
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_contact_table">
                    <thead>
                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            <th class="w-10px pe-2">
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                    <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_contact_table .form-check-input" value="1" />
                                </div>
                            </th>
                            <th >Nombre</th>
                            <th >Apellido</th>
                            <th >Cargo</th>
                            <th >Nickname</th>
                            <th >Correo</th>
                            <th >Telefono</th>
                            <th >Contacto Comercial</th>
                            <th >-</th>
                            <th class="text-end min-w-70px">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                         {% for contacto in contactos %}
                            <tr id="contact_id_{{contacto.id_contacto_pk}}">
                                <td>
                                    <div class="form-check form-check-sm form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" value="1" />
                                    </div>
                                </td>
                                <td data-bs-toggle="modal" data-bs-target="#editContacto-{{contacto.id_contacto_pk}}" style="cursor: pointer;">
                                    {{contacto.desc_nombre}}
                                </td>
                                <td>{{contacto.desc_apellido}}</td>
                                <td>{{contacto.desc_cargo}}</td>
                                <td>{{contacto.nickname}}</td>
                                <td>{{contacto.dir_correo}}</td>
                                <td>{{contacto.telefono}}</td>
                                <td>{% if contacto.flag_contacto_comercial %} Si {% else %} No {% endif %}</td>
                                {% if contacto.url_linkedin is defined and contacto.url_linkedin is not empty %}
                                    <td><a target="_blank" href="{{contacto.url_linkedin}}"><i class="bi bi-linkedin fs-2x"></i></a></td>
                                {% else %}
                                    <td></td>
                                {% endif %}
                
                                <td class="text-end">
                                    <a href="#" class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                    <i class="ki-outline ki-down fs-5 ms-1"></i></a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                    
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a data-bs-toggle="modal" data-bs-target="#editContacto-{{contacto.id_contacto_pk}}" class="menu-link px-3">Edit</a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a onclick="deleteContact({{contacto.id_contacto_pk}})" class="menu-link px-3" data-kt-customer-table-filter="delete_row">Delete</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
    
                                <!--begin::Modal - Customers - Add-->
                                <div class="modal fade" id="editContacto-{{contacto.id_contacto_pk}}" tabindex="-1" aria-hidden="true">
                                    <!--begin::Modal dialog-->
                                    <div class="modal-dialog modal-dialog-centered mw-650px">
                                        <!--begin::Modal content-->
                                        <div class="modal-content">
                                            <!--begin::Form-->
                                                <!--begin::Modal header-->
                                                <div class="modal-header" id="kt_modal_add_customer_header">
                                                    <!--begin::Modal title-->
                                                    <h2 class="fw-bold">Editando Contacto</h2>
                                                    <!--end::Modal title-->
                                                    <!--begin::Close-->
                                                    <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                                        <i class="ki-outline ki-cross fs-1"></i>
                                                    </div>
                                                    <!--end::Close-->
                                                </div>
                                                <!--end::Modal header-->
                                                <!--begin::Modal body-->
                                                <div class="modal-body py-10 px-lg-17">
                                                    <!--begin::Scroll-->
                                                    <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-6 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="required fs-6 fw-semibold mb-2">Nombre</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input class="form-control form-control-solid" placeholder="" id="nombre_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.desc_nombre}}" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '');"/>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-6 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="required fs-6 fw-semibold mb-2">Apellido</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input class="form-control form-control-solid" placeholder="" id="apellido_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.desc_apellido}}" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '');"/>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <div class="d-flex align-items-center mb-7">
                                                            <div class="flex-fill me-3">
                                                                <label class="fs-6 fw-semibold mb-2">Nickname</label>
                                                                <input type="text" class="form-control form-control-solid" placeholder="Enter nickname" id="nickname_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.nickname}}" oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9]/g, '');" onblur="if(this.value === '') { this.value = '{{contacto.nickname}}'; }"/>
                                                            </div>
                                                        </div>
    
                                                        <!--begin::Row-->
                                                        <div class="d-flex align-items-center mb-7">
                                                            <!--begin::Input group-->
                                                            <div class="me-3 flex-grow-1">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Cargo</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" 
                                                                    id="cargo_contacto_{{contacto.id_contacto_pk}}" 
                                                                    value="{{contacto.desc_cargo}}" />
                                                                <!--end::Input-->
                                                            </div>
                                                            <!--end::Input group-->
    
                                                            <!--begin::Checkbox group-->
                                                            <div class="form-check form-check-solid mt-9 ms-3">
                                                                <input class="form-check-input" type="checkbox" 
                                                                    id="checkbox_contacto_comercial_{{contacto.id_contacto_pk}}" {% if contacto.flag_contacto_comercial %} checked {% endif %}/>
                                                                <label class="form-check-label" 
                                                                    for="checkbox_contacto_comercial_{{contacto.id_contacto_pk}}">
                                                                    Contacto Comercial
                                                                </label>
                                                            </div>
                                                            <!--end::Checkbox group-->
                                                        </div>
                                                        <!--end::Row-->
    
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="required fs-6 fw-semibold mb-2">Documento de Identidad</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" placeholder="" id="documento_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.documento_identidad}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
    
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-6 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Correo Electronico</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input class="form-control form-control-solid" placeholder="" id="correo_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.dir_correo}}" />
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-6 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Telefono</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input class="form-control form-control-solid" placeholder="" id="telefono_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.telefono}}" />
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">URL Linkedin</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" placeholder="" id="url_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.url_linkedin}}" />
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Fecha de Nacimiento</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" placeholder="" id="fecha_contacto_{{contacto.id_contacto_pk}}" value="{{contacto.fecha_nacimiento}}" />
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class=" d-flex flex-column mb-7 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">
                                                                    <span class="required">Sexo</span>
                                                                    <span class="ms-1" data-bs-toggle="tooltip" title="Country of prospect">
                                                                        <i class="ki-outline ki-information fs-7"></i>
                                                                    </span>
                                                                </label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select id="sexo_contacto_{{contacto.id_contacto_pk}}" aria-label="Selecione Sexo.." data-control="select2" data-placeholder="Selecione Sexo.." data-dropdown-parent="#editContacto-{{contacto.id_contacto_pk}}" class="form-select form-select-solid fw-bold">
                                                                    <option value="">Selecione Sexo..</option>
                                                                    <option value="1" {% if contacto.sexo == 1 %} selected {% endif %}>Masculino</option>
                                                                    <option value="2" {% if contacto.sexo == 2 %} selected {% endif %}>Femenino</option>
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
                                                    </div>
                                                    <!--end::Scroll-->
                                                </div>
                                                <!--end::Modal body-->
                                                <!--begin::Modal footer-->
                                                <div class="modal-footer flex-center">
                                                    <!--begin::Button-->
                                                    <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                                                    <!--end::Button-->
                                                    <!--begin::Button-->
                                                    <button type="submit" class="btn btn-primary" onclick="editContact({{contacto.id_contacto_pk}});">
                                                        <span class="indicator-label">Submit</span>
                                                    </button>
                                                    <!--end::Button-->
                                                </div>
                                                <!--end::Modal footer-->
                                            <!--end::Form-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Modal - Customers - Add-->
    
    
                        {% endfor %} 
                    </tbody>
                </table>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    
        <br>
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                
                    <h3>Servicios</h3>
                </div>
                <!--begin::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Toolbar-->
                    <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1 me-2">
                            <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                            <input type="text" data-kt-service-table-filter="search" class="form-control form-control-solid w-250px ps-12" placeholder="Buscar Servicios" />
                        </div>
                        <!--end::Search-->
                        <!--begin::Add customer-->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_service"/>Add Servicio</button>
                        <!--end::Add customer-->
                    </div>
                    <!--end::Toolbar-->
                    <!--begin::Group actions-->
                    <div class="d-flex justify-content-end align-items-center d-none" data-kt-customer-table-toolbar="selected">
                        <div class="fw-bold me-5">
                        <span class="me-2" data-kt-customer-table-select="selected_count"></span>Selected</div>
                        <button type="button" class="btn btn-danger" data-kt-customer-table-select="delete_selected">Delete Selected</button>
                    </div>
                    <!--end::Group actions-->
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_service_table">
                    <thead>
                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            <th class="w-10px pe-2">
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                    <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_service_table .form-check-input" value="1" />
                                </div>
                            </th>
                            <th >Desc</th>
                            <th >Modo</th>
                            <th >Clase</th>
                            <th >Lineas Mensuales</th>
                            <th >Inicio</th>
                            <th >Moneda Facturación</th>
                            <th >Monto</th>
                            <th >Estado</th>
                            <th class="text-end min-w-70px">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                         {% for servicio in servicios %}
                             {% set partidas     = servicio.flag_plan_custom ? servicio.cant_partidas_custom : servicio.cant_transacciones_mes %}
                            {% set precio       = servicio.flag_plan_custom ? servicio.valor_plan_custom    : servicio.monto_plan_servicio %}
                            {% set monedaId     = servicio.flag_plan_custom ? servicio.id_moneda_custom      : servicio.id_moneda_plan_servicio %}
    
                            {# Buscar descripción de la moneda #}
                            {% set monedaDesc = '' %}
                            {% for moneda in monedas %}
                                {% if moneda.id_moneda_pk == monedaId %}
                                    {% set monedaDesc = moneda.desc_moneda %}
                                {% endif %}
                            {% endfor %}
    
                            <tr id="service_id_{{servicio.id_servicio_pk}}">
                                    <td>
                                        <div class="form-check form-check-sm form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" value="1" />
                                        </div>
                                    </td>
                                    <td data-bs-toggle="modal"
                                        data-bs-target="#kt_modal_add_service_{{ servicio.id_servicio_pk }}"
                                        style="cursor: pointer;">
                                        {{ servicio.desc_instalacion }}
                                    </td>
                                    <td>{{ servicio.desc_modo_servicio }}</td>
                                    <td>{{ servicio.desc_clase_servicio }}</td>
                                    <td>{{ partidas }}</td>
                                    <td>{{ servicio.fecha_inicio_servicio }}</td>
                                    <td>{{ monedaDesc }}</td>
                                    <td>{{ precio }}</td>
                                    <td>
                                        <a class="btn"
                                        style="background-color: {{ servicio.is_mapped == 1 ? 'green' : '#0a7ff5' }};
                                                color: #fff;">
                                            {{ servicio.is_mapped == 1 ? 'Instanciado' : 'No Instanciado' }}
                                        </a>
                                    </td>
                
                                <td class="text-end">
                                    <a href="#" class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                    <i class="ki-outline ki-down fs-5 ms-1"></i></a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                        {% if servicio.is_mapped == 0 %}
                                            <!--begin::Menu item-->
                                            <div class="menu-item px-3">
                                                <a class="menu-link px-3" href="/clients/createService/{{servicio.id_servicio_pk}}">Instanciar</a>
                                            </div>
                                            <!--end::Menu item-->
                                        {% endif %}
                                        <div class="menu-item px-3">
                                                <a data-bs-toggle="modal" data-bs-target="#kt_modal_instance_users_{{servicio.id_servicio_pk}}" class="menu-link px-3">+ Usuarios</a>
                                            </div>
    
                                            
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a data-bs-toggle="modal" data-bs-target="#kt_modal_add_service_{{servicio.id_servicio_pk}}"  class="menu-link px-3">Editar</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
                                <!--begin::Modal - Customers - Add-->
                                <div class="modal fade" id="kt_modal_add_service_{{servicio.id_servicio_pk}}" tabindex="-1" aria-hidden="true">
                                    <!--begin::Modal dialog-->
                                    <div class="modal-dialog modal-xl modal-dialog-centered " style="width:1250px;" >
                                        <!--begin::Modal content-->
                                        <div class="modal-content">
                                            <!--begin::Form-->
                                                <!--begin::Modal header-->
                                                <div class="modal-header" id="kt_modal_add_customer_header">
                                                    <!--begin::Modal title-->
                                                    <h2 class="fw-bold">Editar Servicio</h2>
                                                    <!--end::Modal title-->
                                                    <!--begin::Close-->
                                                    <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                                        <i class="ki-outline ki-cross fs-1"></i>
                                                    </div>
                                                    <!--end::Close-->
                                                </div>
                                                <!--end::Modal header-->
                                                <!--begin::Modal body-->
                                                <div class="modal-body py-10 px-lg-17">
                                                    <!--begin::Scroll-->
                                                    <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <label class="fs-6 fw-semibold mb-2">Nombre externo del Servicio</label>
                                                                <input type="text" class="form-control form-control-solid" id="servicio_name_externo_{{servicio.id_servicio_pk}}" value="{{servicio.nombre_externo_servicio}}"/>
                                                            </div>
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Descripcion interna de Instalacion</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" id="servicio_desc_{{servicio.id_servicio_pk}}" value="{{servicio.desc_instalacion}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
                                                        
                                                        
                                                        
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-6 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span class="required">Modo Servicio {% if servicio.is_mapped == 1 %} (No editable) {% endif %}</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <select {% if servicio.is_mapped == 1 %} disabled {% endif %} id="servicio_modo_{{servicio.id_servicio_pk}}" aria-label="Seleccione Modo..." data-control="select2" data-placeholder="Seleccione modo..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                        <option value="">Seleccione Modo...</option>
                                                                        {% for tipo in tipoServicio %}
                                                                            <option {% if servicio.id_modo_servicio == tipo.id_modo_servicio_pk %} selected {% endif %} value="{{tipo.id_modo_servicio_pk}}">{{tipo.desc_modo_servicio}}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                    <!--end::Input-->
                                                                    </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-6 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span class="required">Clase Servicio</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <select id="servicio_clase_{{servicio.id_servicio_pk}}" aria-label="Seleccione Clase..." data-control="select2" data-placeholder="Seleccione Clase..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                        <option value="">Seleccione Clase...</option>
                                                                        {% for clase in claseServicio %}
                                                                            {% if clase.flag_visible == 1 %}
                                                                                <option {% if servicio.id_clase_servicio == clase.id_clase_servicio_pk %} selected {% endif %}  value="{{clase.id_clase_servicio_pk}}">{{clase.desc_clase_servicio}}</option>
                                                                            {% endif %}
                                                                        {% endfor %}
                                                                    </select>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <script>
                                                        function toggleInputs2(serviceId) {
                                                            var checkbox = document.getElementById('servicio_plan_custom_' + serviceId);
                                                            var customInputs = document.getElementById('customInputs_' + serviceId);
                                                            var customInputs2 = document.getElementById('customInputs2_' + serviceId);
    
                                                            
                                                            if (!checkbox.checked) {
                                                                customInputs.style.display = 'none';
                                                                customInputs2.style.display = 'block';
                                                            } else {
                                                                customInputs.style.display = 'block';
                                                                customInputs2.style.display = 'none';
                                                            }
                                                        }
                                                        document.addEventListener('DOMContentLoaded', function() {
                                                            {% for servicio in servicios %}
                                                                toggleInputs2({{ servicio.id_servicio_pk }});
                                                            {% endfor %}
                                                        });
                                                        </script>
                                                        <!--begin::Input group-->
                                                        <div class="row g-9 mb-7">
                                                            <!--begin::Col-->
                                                            <div class="col-md-3 fv-row">
                                                                <label class="fs-6 fw-semibold mb-2">
                                                                    <span>Plan Customizado</span>
                                                                </label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <div class="form-check form-switch form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="" id="servicio_plan_custom_{{servicio.id_servicio_pk}}" onchange="toggleInputs2({{servicio.id_servicio_pk}})" {% if servicio.flag_plan_custom == 1 %} checked {% endif %}/>
                                                                </div>
                                                                <!--end::Input-->
                                                            </div>
                                                            <!--end::Col-->
                                                        </div>
    
                                                        <div id="customInputs_{{servicio.id_servicio_pk}}">
                                                            <!--begin::Col-->
                                                            <div class="row g-9 mb-7">
                                                                <div class="col-md-3 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span class="required">Moneda</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <select id="servicio_moneda_{{servicio.id_servicio_pk}}" aria-label="Seleccione Moneda..." data-control="select2" data-placeholder="Seleccione Moneda..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                        <option value="">Seleccione Moneda...</option>
                                                                        {% for moneda in monedas %}
                                                                        <option {% if servicio.id_moneda_custom == moneda.id_moneda_pk %} selected {% endif %} value="{{moneda.id_moneda_pk}}">{{moneda.desc_moneda}}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
    
                                                                <!--begin::Col-->
                                                                <div class="col-md-3 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="required fs-6 fw-semibold mb-2">Precio</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input type="text" class="form-control form-control-solid" id="servicio_precio_{{servicio.id_servicio_pk}}" value="{{servicio.valor_plan_custom}}"/>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-3 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="required fs-6 fw-semibold mb-2">Cant Partidas</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input type="text" class="form-control form-control-solid" id="servicio_cant_partidas_{{servicio.id_servicio_pk}}" value="{{servicio.cant_partidas_custom}}"/>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                        <div id="customInputs2_{{servicio.id_servicio_pk}}">
                                                        <div class="row g-9 mb-7">
                                                            <!--begin::Col-->
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">
                                                                    <span class="required">Grupo Plan</span>
                                                                </label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select id="servicio_grupo_plan_{{servicio.id_servicio_pk}}" aria-label="Seleccione Grupo..." data-control="select2" data-placeholder="Seleccione Grupo..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                    <option value="">Seleccione Grupo...</option>
                                                                    {% for grupo in planGrupo %}
                                                                        <option {% if servicio.id_servicio_plan_grupo == grupo.id_plan_grupo_pk %} selected {% endif %} value="{{grupo.id_plan_grupo_pk}}">{{grupo.label_grupo}}</option>
                                                                    {% endfor %}
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                            <!--end::Col-->
                                                            <!--begin::Col-->
                                                            <div class="col-md-6 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">
                                                                    <span class="required">Plan Servicio</span>
                                                                </label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select id="servicio_plan_{{servicio.id_servicio_pk}}" aria-label="Seleccione Servicio..." data-control="select2" data-placeholder="Seleccione Servicio..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                    <option value="">Seleccione Servicio...</option>
                                                                    {% for plan in planServicio %}
                                                                        <option {% if servicio.id_plan_servicio == plan.id_plan_servicio_pk %} selected {% endif %} value="{{plan.id_plan_servicio_pk}}">{{plan.desc_plan}}</option>
                                                                    {% endfor %}
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                            <!--end::Col-->
                                                        </div>
                                                        </div>
                                                        <!--end::Input group-->
    
    
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span>Pago por adelantado</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                                                        <input class="form-check-input" type="checkbox" value="" id="servicio_pago_por_adelantado_{{servicio.id_servicio_pk}}" {% if servicio.flag_pago_por_adelantado %} checked {% endif %}/>
                                                                    </div>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-8 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Periodo adelanto</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <select id="servicio_periodo_adelanto_{{servicio.id_servicio_pk}}" aria-label="Seleccione Periodo.." data-control="select2" data-placeholder="Seleccione Periodo....." class="form-select form-select-solid fw-bold">
                                                                        <option value="">Seleccione Periodo...</option>
                                                                        {% for modalidad in modalidades %}
                                                                            <option value="{{modalidad.id_modalidad_facturacion_pk}}" {% if servicio.id_periodicidad_facturacion == modalidad.id_modalidad_facturacion_pk %} selected {% endif %}>{{modalidad.desc_modalidad_facturacion}}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
    
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-10 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span class="required">Instancia {% if servicio.is_mapped == 1 %} (No editable) {% endif %}</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <select {% if servicio.is_mapped == 1 %} disabled {% endif %} id="servicio_instancia_{{servicio.id_servicio_pk}}" aria-label="Seleccione Instancia..." data-control="select2" data-placeholder="Seleccione Instancia..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                        <option value="">Seleccione Instancia...</option>
                                                                        {% for instance in instancias %}
                                                                            <option {% if servicio.id_instancia_server == instance.id_instancia_server_pk %} selected {% endif %} value="{{instance.id_instancia_server_pk}}">{{instance.desc_instancia}}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-2 fv-row">
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span>2FA Habilitado</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                                                        <input class="form-check-input" type="checkbox" value="" id="servicio_2fa_{{servicio.id_servicio_pk}}"  {% if servicio.flag_2fa_enable == 1 %} checked {% endif %}/>
                                                                    </div>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="required fs-6 fw-semibold mb-2">Dominio {% if servicio.is_mapped == 1 %} (No editable) {% endif %}</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input {% if servicio.is_mapped == 1 %} disabled {% endif %} type="text" class="form-control form-control-solid" id="servicio_dominio_{{servicio.id_servicio_pk}}" value="{{servicio.txt_dominio}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
    
    
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Fecha Inicio {% if servicio.flag_habilitado_modif_fechas == 0 %} (No editable) {% endif %}</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input {% if servicio.flag_habilitado_modif_fechas == 0 %} disabled {% endif %} class="form-control form-control-solid" id="servicio_fecha_inicio_{{servicio.id_servicio_pk}}" data-input value="{{servicio.fecha_inicio_servicio}}"/>
                                                                    <script>
                                                                        var fechaInicio = $("#servicio_fecha_inicio_{{servicio.id_servicio_pk}}").val();
                                                                        if (fechaInicio === "0000-00-00") {
                                                                            $("#servicio_fecha_inicio_{{servicio.id_servicio_pk}}").val("");
                                                                        }
                                                                        flatpickr("#servicio_fecha_inicio_{{servicio.id_servicio_pk}}", {
                                                                            dateFormat: "Y-m-d",
                                                                            static: true,
                                                                        });
                                                                    </script>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Fecha fin</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input class="form-control form-control-solid" id="servicio_fecha_fin_{{servicio.id_servicio_pk}}" value="{{servicio.fecha_finalizacion_servicio}}"/>
                                                                    <script>
                                                                        var fechaFin = $("#servicio_fecha_fin_{{servicio.id_servicio_pk}}").val();
                                                                        if (fechaFin === "0000-00-00") {
                                                                            $("#servicio_fecha_fin_{{servicio.id_servicio_pk}}").val("");
                                                                        }
                                                                        flatpickr("#servicio_fecha_fin_{{servicio.id_servicio_pk}}", {
                                                                            dateFormat: "Y-m-d",
                                                                            static: true,
                                                                        });
                                                                    </script>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Fecha Carga Datos {% if servicio.flag_habilitado_modif_fechas == 0 %} (No editable) {% endif %}</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input {% if servicio.flag_habilitado_modif_fechas == 0 %} disabled {% endif %} class="form-control form-control-solid" id="servicio_fecha_cargo_{{servicio.id_servicio_pk}}" value="{{servicio.fecha_inicio_carga_datos_cliente}}"/>
                                                                    <script>
                                                                        var fechaCarga = $("#servicio_fecha_cargo_{{servicio.id_servicio_pk}}").val();
                                                                        if (fechaCarga === "0000-00-00") {
                                                                            $("#servicio_fecha_cargo_{{servicio.id_servicio_pk}}").val("");
                                                                        }
                                                                        flatpickr("#servicio_fecha_cargo_{{servicio.id_servicio_pk}}", {
                                                                            dateFormat: "Y-m-d",
                                                                            static: true,
                                                                        });
                                                                    </script>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Descuento</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" id="servicio_descuento_{{servicio.id_servicio_pk}}" value="{{servicio.porc_descuento_servicio}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <label class="fs-6 fw-semibold mb-2">
                                                                        <span>Soporte</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                                                        <input class="form-check-input" type="checkbox" value="" id="servicio_soporte_{{servicio.id_servicio_pk}}" {% if servicio.flag_soporte_activo %} checked {% endif %}/>
                                                                    </div>
                                                                    <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-8 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Precio Soporte</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input class="form-control form-control-solid" id="servicio_precio_soporte_{{servicio.id_servicio_pk}}" value="{{servicio.precio_soporte}}" />
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span class="required">Moneda Facturacion</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <select id="servicio_moneda_soporte_{{servicio.id_servicio_pk}}" aria-label="Seleccione Moneda..." data-control="select2" data-placeholder="Seleccione Moneda..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                        <option value="">Seleccione Moneda...</option>
                                                                            {% for moneda in monedas %}
                                                                            <option {% if servicio.id_moneda_soporte == moneda.id_moneda_pk %} selected {% endif %} value="{{moneda.id_moneda_pk}}">{{moneda.desc_moneda}}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
    
    
    
    
                                                        <!--begin::Input group-->
                                                            <div class="row g-9 mb-7">
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span>Sobreprecio Partner</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                                                        <input class="form-check-input" type="checkbox" value="" id="servicio_sobreprecio_partner_{{servicio.id_servicio_pk}}" {% if servicio.flag_sobreprecio_partner %} checked {% endif %}/>
                                                                    </div>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">Precio Partner</label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <input class="form-control form-control-solid" id="servicio_precio_partner_{{servicio.id_servicio_pk}}" value="{{servicio.precio_servicio_partner}}"/>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                                <!--begin::Col-->
                                                                <div class="col-md-4 fv-row">
                                                                    <!--begin::Label-->
                                                                    <label class="fs-6 fw-semibold mb-2">
                                                                        <span class="required">Moneda Partner</span>
                                                                    </label>
                                                                    <!--end::Label-->
                                                                    <!--begin::Input-->
                                                                    <select id="servicio_moneda_partner_{{servicio.id_servicio_pk}}" aria-label="Seleccione Moneda..." data-control="select2" data-placeholder="Seleccione Moneda..." data-dropdown-parent="#kt_modal_add_service_{{servicio.id_servicio_pk}}" class="form-select form-select-solid fw-bold">
                                                                        <option value="">Seleccione Moneda...</option>
                                                                            {% for moneda in monedas %}
                                                                            <option {% if servicio.id_moneda_servicio_partner == moneda.id_moneda_pk %} selected {% endif %} value="{{moneda.id_moneda_pk}}">{{moneda.desc_moneda}}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--end::Col-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Orden Compra</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" id="servicio_orden_compra_{{servicio.id_servicio_pk}}" value="{{servicio.num_orden_compra_cliente}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
                                                    </div>
                                                    <!--end::Scroll-->
                                                </div>
                                                <!--end::Modal body-->
                                                <!--begin::Modal footer-->
                                                <div class="modal-footer flex-center">
                                                    <!--begin::Button-->
                                                    <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                                                    <!--end::Button-->
                                                    <!--begin::Button-->
                                                    <button type="submit" class="btn btn-primary" onclick="editServicio({{servicio.id_servicio_pk}}, {{prospect.id_cliente_pk}});">
                                                        <span class="indicator-label">Submit</span>
                                                    </button>
                                                    <!--end::Button-->
                                                </div>
                                                <!--end::Modal footer-->
                                            <!--end::Form-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Modal - Customers - Add-->
                        {% endfor %} 
                    </tbody>
                </table>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    
        <br>
    
        <!--begin::Card-->
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                    <h3>Conectores</h3>
                </div>
                <!--begin::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Toolbar-->
                    <div class="d-flex justify-content-end" data-kt-connector-table-toolbar="base">
                        <div class="d-flex align-items-center position-relative my-1 me-2">
                            <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                            <input type="text" data-kt-connector-table-filter="search" class="form-control form-control-solid w-250px ps-12" placeholder="Buscar Conectores"  />
                        </div>
                        <!--begin::Add customer-->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_connector">Add Conector</button>
                        <!--end::Add customer-->
                    </div>
                    <!--end::Toolbar-->
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_connectors_table">
                    <thead>
                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            <th>Servicio</th>
                            <th>Label</th>
                            <th>Activo</th>
                            <th>Fecha Inicio</th>
                            <th class="text-end min-w-70px">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                    {% for servicio in serviciosConectores %}
                        <tr>
                            <td>{{servicio.servicio_label}}</td>
                            <td>{{servicio.desc_label_conector}}</td>
                            <td>{% if servicio.flag_conector_activo == 1 %}Activo{% else %}Inactivo{% endif %}</td>
                            <td>{{servicio.fecha_inicio_servicio_conector}}</td>
                            <td class="text-end">
                                <a class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                <i class="ki-outline ki-down fs-5 ms-1"></i></a>
                                <!--begin::Menu-->
                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a class="menu-link px-3" onclick="editConnector({{servicio.id_servicio_conector_pk}})">Edit</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a class="menu-link px-3" onclick="deleteConnector({{servicio.id_servicio_conector_pk}})">Delete</a>
                                    </div>
                                    <!--end::Menu item-->
                                </div>
                                <!--end::Menu-->
                            </td>`
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    
        <script>
        function editConnector(id){
            $('#kt_modal_edit_connector_' + id).modal('show');
        }
        </script>
    
        <!--begin::Modal - Edit Connector-->
        {% for servicio in serviciosConectores %}
        <div class="modal fade" id="kt_modal_edit_connector_{{servicio.id_servicio_conector_pk}}" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold">Edit Connector</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                            <i class="ki-outline ki-cross fs-1"></i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Form-->
                        <div class="form">
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-12">
                                    <label class="required fs-6 fw-semibold mb-2">Servicios</label>
                                    <select class="form-select" id="connector_service_{{servicio.id_servicio_conector_pk}}">
                                        {% for serv in servicios %}
                                            <option value="{{serv.id_servicio_pk}}" {% if serv.id_servicio_pk == servicio.id_servicio_pk %}selected{% endif %}>{{serv.desc_instalacion}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Label</label>
                                    <input type="text" class="form-control" id="connector_label_{{servicio.id_servicio_conector_pk}}" value="{{servicio.desc_label_conector}}"/>
                                </div>
                                <div class="col-md-6">
                                    <label class="fs-6 fw-semibold mb-2">Descripción</label>
                                    <input type="text" class="form-control" id="connector_description_{{servicio.id_servicio_conector_pk}}" value="{{servicio.desc_detalle_conector}}"/>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="fs-6 fw-semibold mb-2">Estado</label>
                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" id="connector_status_{{servicio.id_servicio_conector_pk}}" {% if servicio.flag_conector_activo == 1 %}checked{% endif %}/>
                                        <label class="form-check-label">Deshabilitado/Habilitado</label>
                                    </div>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Fecha Inicio</label>
                                    <input type="text" class="form-control datepicker" id="connector_date_start_{{servicio.id_servicio_conector_pk}}" value="{% if servicio.fecha_inicio_servicio_conector != '0000-00-00' %}{{servicio.fecha_inicio_servicio_conector}}{% endif %}"/>
                                </div>
                                <div class="col-md-6">
                                    <label class="fs-6 fw-semibold mb-2">Fecha Fin</label>
                                    <input type="text" class="form-control datepicker" id="connector_date_finish_{{servicio.id_servicio_conector_pk}}" value="{% if servicio.fecha_fin_servicio_conector != '0000-00-00' %}{{servicio.fecha_fin_servicio_conector}}{% endif %}"/>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Moneda</label>
                                    <select class="form-select" id="connector_currency_{{servicio.id_servicio_conector_pk}}">
                                        {% for moneda in monedas %}
                                            <option value="{{ moneda.id_moneda_pk }}" {% if moneda.id_moneda_pk == servicio.id_moneda %}selected{% endif %}>{{ moneda.desc_moneda }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Precio</label>
                                    <input type="number" class="form-control" id="connector_price_{{servicio.id_servicio_conector_pk}}" step="0.01" value="{{servicio.precio_conector}}"/>
                                </div>
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
                        <!--end::Button-->
                        <!--begin::Button-->
                        <button type="submit" class="btn btn-primary" onclick="submitConnector({{servicio.id_servicio_conector_pk}});">
                            <span class="indicator-label">Submit</span>
                        </button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </div>
                <!--end::Modal content--> 
            </div>
            <!--end::Modal dialog-->
        </div>
        <script>
        $(document).ready(function() {
            $("#connector_date_start_{{servicio.id_servicio_conector_pk}}").flatpickr();
            $("#connector_date_finish_{{servicio.id_servicio_conector_pk}}").flatpickr();
        });
        </script>
        {% endfor %}
    
        <!--begin::Modal - Add Connector-->
        <div class="modal fade" id="kt_modal_add_connector" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold">Add Connector</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                            <i class="ki-outline ki-cross fs-1"></i>
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Form-->
                        <div class="form">
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-12">
                                    <label class="required fs-6 fw-semibold mb-2">Servicios</label>
                                    <select class="form-select" id="connector_service">
                                        {% for servicio in servicios %}
                                            <option value="{{servicio.id_servicio_pk}}">{{servicio.desc_instalacion}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Label</label>
                                    <input type="text" class="form-control" id="connector_label"/>
                                </div>
                                <div class="col-md-6">
                                    <label class="fs-6 fw-semibold mb-2">Descripción</label>
                                    <input type="text" class="form-control" id="connector_description"/>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="fs-6 fw-semibold mb-2">Estado</label>
                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" id="connector_status"/>
                                        <label class="form-check-label">Deshabilitado/Habilitado</label>
                                    </div>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Fecha Inicio</label>
                                    <input type="text" class="form-control" id="connector_date_start"/>
                                </div>
                                <div class="col-md-6">
                                    <label class="fs-6 fw-semibold mb-2">Fecha Fin</label>
                                    <input type="text" class="form-control" id="connector_date_finish"/>
                                </div>
                            </div>
                            <!--end::Input group-->
    
                            <!--begin::Input group-->
                            <div class="row mb-5">
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Moneda</label>
                                    <select class="form-select" id="connector_currency">
                                        {% for moneda in monedas %}
                                            <option value="{{ moneda.id_moneda_pk }}">{{ moneda.desc_moneda }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="required fs-6 fw-semibold mb-2">Precio</label>
                                    <input type="number" class="form-control" id="connector_price" step="0.01"/>
                                </div>
                            </div>
                            <!--end::Input group-->
                        </div>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                    <!--begin::Modal footer-->
                    <div class="modal-footer flex-center">
                        <!--begin::Button-->
                        <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
                        <!--end::Button-->
                        <!--begin::Button-->
                        <button type="submit" class="btn btn-primary" onclick="submitConnector(0);">
                            <span class="indicator-label">Submit</span>
                        </button>
                        <!--end::Button-->
                    </div>
                    <!--end::Modal footer-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
    
    
    
        {% for servicio in servicios %}
            <!--begin::Modal - Hito - Add-->
            <div class="modal fade" id="kt_modal_instance_users_{{servicio.id_servicio_pk}}" tabindex="-1" aria-hidden="true">
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Form-->
                            <!--begin::Modal header-->
                            <div class="modal-header" id="kt_modal_add_customer_header">
                                <!--begin::Modal title-->
                                <h2 class="fw-bold">Instanciar Usuarios</h2>
                                <!--end::Modal title-->
                                <!--begin::Close-->
                                <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                    <i class="ki-outline ki-cross fs-1"></i>
                                </div>
                                <!--end::Close-->
                            </div>
                            <!--end::Modal header-->
                            <!--begin::Modal body-->
                            <div class="modal-body py-10 px-lg-17">
                                <!--begin::Scroll-->
                                <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                    
                                    <!--begin::Card-->
                                    <div class="card">
                                        <!--begin::Card header-->
                                        <div class="card-header border-0 pt-6">
                                            <!--begin::Card title-->
                                            <div class="card-title">
                                                <h3>Usuarios Agente</h3>
                                            </div>
                                            <!--begin::Card title-->
                                        </div>
                                        <!--end::Card header-->
                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-dashed fs-6 gy-5">
                                                <thead>
                                                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                                        <th>#</th>
                                                        <th>Usuario</th>         
                                                        <th>Nombre</th>
                                                        <th>Apellido</th>
                                                        <th>Correo</th>
                                                        <th>Admin Segur.</th>
                                                        <th>Admin Serv.</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="fw-semibold text-gray-600" id="usersAgente_{{servicio.id_servicio_pk}}">
                                                    {% for user in servicio.users.agentUsers %}
                                                        <tr data-status="{{user.status}}" data-id="{{user.id}}">
                                                            <td>
                                                                {% if user.status == 0 %}
                                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" />
                                                                </div>
                                                                {% else %}
                                                                    <h5>Alredy Created</h5>
                                                                {% endif %}
                                                            </td>
                                                            <td>{{user.nickname}}</td>
                                                            <td>{{user.desc_nombre}}</td>
                                                            <td>{{user.desc_apellido}}</td>
                                                            <td>{{user.dir_correo}}</td>
                                                            <td><div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" {% if user.adminSeguridad == 1 %}checked{% endif %}  />
                                                                </div></td>
                                                            <td><div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" {% if user.adminServicio == 1 %}checked{% endif %} />
                                                                </div></td>
                                                            
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                            <!--end::Table-->
                                        </div>
                                        <!--end::Card body-->
                                    </div>
                                    <!--end::Card-->
    
                                    <br>
                                    <!--begin::Card-->
                                    <div class="card">
                                        <!--begin::Card header-->
                                        <div class="card-header border-0 pt-6">
                                            <!--begin::Card title-->
                                            <div class="card-title">
                                                <h3>Usuarios Cliente</h3>
                                            </div>
                                            <!--begin::Card title-->
                                        </div>
                                        <!--end::Card header-->
                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-dashed fs-6 gy-5">
                                                <thead>
                                                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                                        <th>#</th>
                                                        <th>Usuario</th>         
                                                        <th>Nombre</th>
                                                        <th>Apellido</th>
                                                        <th>Correo</th>
                                                        <th>Admin Segur.</th>
                                                        <th>Admin Serv.</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="fw-semibold text-gray-600" id="usersCliente_{{servicio.id_servicio_pk}}">
                                                    {% for user in servicio.users.contactUsers %}
                                                        <tr data-status="{{user.status}}" data-id="{{user.id}}">
                                                            <td>
                                                                {% if user.status == 0 %}
                                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" />
                                                                </div>
                                                                {% else %}
                                                                    <h5>Alredy Created</h5>
                                                                {% endif %}
                                                            </td>
                                                            <td>{{user.nickname}}</td>
                                                            <td>{{user.desc_nombre}}</td>
                                                            <td>{{user.desc_apellido}}</td>
                                                            <td>{{user.dir_correo}}</td>
                                                            <td><div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" {% if user.adminSeguridad == 1 %}checked{% endif %}  />
                                                                </div></td>
                                                            <td><div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" {% if user.adminServicio == 1 %}checked{% endif %} />
                                                                </div></td>
                                                            
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                            <!--end::Table-->
                                        </div>
                                        <!--end::Card body-->
                                    </div>
                                    <!--end::Card-->
    
    
    
                                </div>
                                <!--end::Scroll-->
                            </div>
                            <!--end::Modal body-->
                            <!--begin::Modal footer-->
                            <div class="modal-footer flex-center">
                                <!--begin::Button-->
                                <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                                <!--end::Button-->
                                <!--begin::Button-->
                                <script>console.log("Servicio ID: {{servicio.id_servicio_pk}}");</script>
                                <button type="submit" class="btn btn-primary" onclick="instanceUsers({{servicio.id_servicio_pk}});">
                                    <span class="indicator-label">Instanciar</span>
                                </button>
                                <!--end::Button-->
                            </div>
                            <!--end::Modal footer-->
                        <!--end::Form-->
                    </div>
                </div>
            </div>
            <!--end::Modal - Customers - Add-->
    
    
        {% endfor %}
    
        <script>
        $(document).ready(function() {
            $("#connector_date_start").flatpickr();
            $("#connector_date_finish").flatpickr();
        });
    
        function deleteConnector(id){
            Swal.fire({
                title: '¿Está seguro?', 
                text: "No podrá revertir esta acción",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    let formData = new FormData();
                    formData.append('id_conector', id);
                    $.ajax({
                        url: '{{path("deleteConnector")}}',
                        type: 'POST',
                        data: formData,
                        processData: false, 
                        contentType: false,
                        success: function(response) {
                            if(response.success) {
                                Swal.fire({
                                    text: "¡Conector eliminado exitosamente!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    confirmButtonText: "¡Entendido!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                }).then(function() {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    text: "Lo sentimos, parece que se detectaron algunos errores, por favor intente nuevamente.",
                                    icon: "error", 
                                    buttonsStyling: false,
                                    confirmButtonText: "¡Entendido!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                });
                            }
                        }
                    });
                }
            });
        }
    
        function submitConnector(idConector) {
            let formData = new FormData();
            
            const requiredFields = idConector === 0 ? {
                'connector_service': 'servicio',
                'connector_label': 'etiqueta', 
                'connector_date_start': 'fecha de inicio',
                'connector_currency': 'moneda',
                'connector_price': 'precio'
            } : {
                ['connector_service_' + idConector]: 'servicio',
                ['connector_label_' + idConector]: 'etiqueta',
                ['connector_date_start_' + idConector]: 'fecha de inicio', 
                ['connector_currency_' + idConector]: 'moneda',
                ['connector_price_' + idConector]: 'precio'
            };
    
            for (let field in requiredFields) {
                if (!$('#' + field).val()) {
                    Swal.fire({
                        title: 'Campo requerido',
                        text: 'Por favor ingrese ' + requiredFields[field],
                        icon: 'warning'
                    });
                    return;
                }
            }
    
            if(idConector == 0){
                formData.append('id_conector', idConector);
                formData.append('id_cliente', {{prospect.id_cliente_pk}});
                formData.append('servicio', $('#connector_service').val());
                formData.append('etiqueta', $('#connector_label').val());
                formData.append('descripcion', $('#connector_description').val());
                formData.append('estado', $('#connector_status').is(':checked') ? 1 : 0);
                formData.append('fecha_inicio', $('#connector_date_start').val());
                formData.append('fecha_fin', $('#connector_date_finish').val());
                formData.append('moneda', $('#connector_currency').val());
                formData.append('precio', $('#connector_price').val());
            } else {
                formData.append('id_conector', idConector);
                formData.append('servicio', $('#connector_service_' + idConector).val());
                formData.append('etiqueta', $('#connector_label_' + idConector).val());
                formData.append('descripcion', $('#connector_description_' + idConector).val());
                formData.append('estado', $('#connector_status_' + idConector).is(':checked') ? 1 : 0);
                formData.append('fecha_inicio', $('#connector_date_start_' + idConector).val());
                formData.append('fecha_fin', $('#connector_date_finish_' + idConector).val());
                formData.append('moneda', $('#connector_currency_' + idConector).val());
                formData.append('precio', $('#connector_price_' + idConector).val());
            }
            formData.append('id_cliente', {{prospect.id_cliente_pk}});
    
    
            $.ajax({
                url: '{{path("addConnector")}}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if(response.success) {
                        Swal.fire({
                            text: "¡Conector agregado exitosamente!",
                            icon: "success", 
                            buttonsStyling: false,
                            confirmButtonText: "¡Entendido!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        }).then(function() {
                            $('#kt_modal_add_connector').modal('hide');
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            text: response.error || "Lo sentimos, parece que se detectaron algunos errores, por favor intente nuevamente.",
                            icon: "error",
                            buttonsStyling: false, 
                            confirmButtonText: "¡Entendido!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                }
            });
        }
        </script>
        <!--end::Modal - Add Connector-->
    
        <br>
    
    
        <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header pt-8">
            <div class="card-title">
                <h3>Documentos</h3>
            </div>
            <!--begin::Card toolbar-->
            <div class="card-toolbar">
                <!--begin::Toolbar-->
                <div class="d-flex justify-content-end" data-kt-filemanager-table-toolbar="base">
                    <!--begin::Search-->
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="ki-outline ki-magnifier fs-1 position-absolute ms-6"></i>
                        <input type="text" data-kt-filemanager-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search Files & Folders" />
                    </div>
                    <!--end::Search-->
                    <!--begin::Add customer-->
                    <button type="button" class="btn btn-flex btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_upload">
                    <i class="ki-outline ki-folder-up fs-2"></i>Upload Files</button>
                    <!--end::Add customer-->
                </div>
                <!--end::Toolbar-->
                <!--begin::Group actions-->
                <div class="d-flex justify-content-end align-items-center d-none" data-kt-filemanager-table-toolbar="selected">
                    <div class="fw-bold me-5">
                    <span class="me-2" data-kt-filemanager-table-select="selected_count"></span>Selected</div>
                    <button type="button" class="btn btn-danger" data-kt-filemanager-table-select="delete_selected">Delete Selected</button>
                    
                </div>
                <!--end::Group actions-->
            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">
            <!--begin::Table header-->
            <div class="d-flex flex-stack">
                <!--begin::Folder path-->
                <div class="badge badge-lg badge-light-primary">
                    <div class="d-flex align-items-center flex-wrap">
                    <i class="ki-outline ki-abstract-32 fs-2 text-primary me-3"></i>
                    <a href="#">{{prospect.desc_cliente}}</a>
                    <i class="ki-outline ki-right fs-2 text-primary mx-1"></i>Documents</div>
                </div>
                <!--end::Folder path-->
                <!--begin::Folder Stats-->
                <div class="badge badge-lg badge-primary">
                    <span id="kt_file_manager_items_counter">{{files|length}} items</span>
                </div>
                <!--end::Folder Stats-->
            </div>
            <!--end::Table header-->
            <!--begin::Table-->
            <table id="kt_file_manager_list" data-kt-filemanager-table="folders" class="table align-middle table-row-dashed fs-6 gy-5">
                <thead>
                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                        <th class="w-10px pe-2">
                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_file_manager_list .form-check-input" value="1" />
                            </div>
                        </th>
                        <th class="min-w-250px">Name</th>
                        <th class="min-w-250px">Area</th>
                        <th class="min-w-250px">Descripcion</th>
                        <th class="min-w-250px">Tipo Documento</th>
                        <th class="min-w-10px">Size</th>
                        <th class="min-w-125px">Last Modified</th>
                        <th class="w-125px"></th>
                    </tr>
                </thead>
                <tbody class="fw-semibold text-gray-600">
                    {% for file in files %}
                    <tr id="documento_{{file.id_documento_entidad_pk}}">
                        <td>
                            <div class="form-check form-check-sm form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" value="1" />
                            </div>
                        </td>
                        <td data-order="landing.html">
                            <div class="d-flex align-items-center">
                                <span class="icon-wrapper">
                                    <i class="ki-outline ki-files fs-2x text-primary me-4"></i>
                                </span>
                                <a href="#" class="text-gray-800 text-hover-primary">{{file.filename}}</a>
                            </div>
                        </td>
                        <td><span class="badge badge-{{file.cod_color_area_bootstrap}}">{{file.nombre_area}}</span></td>
                        <td>{{file.desc_documento}}</td>
                        <td>{{file.desc_tipo_documento}}</td>
                        <td>{{file.size}}</td>
                        <td>{{file.cr_timestamp}}</td>
                        <td class="text-end" data-kt-filemanager-table="action_dropdown">
                            <div class="d-flex justify-content-end">
                                <!--begin::More-->
                                <div class="ms-2">
                                    <button type="button" class="btn btn-sm btn-icon btn-light btn-active-light-primary me-2" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                        <i class="ki-outline ki-dots-square fs-5 m-0"></i>
                                    </button>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-150px py-4" data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a href="/prospects/ajax/add/downloadDocument?id={{file.id_documento_entidad_pk}}" class="menu-link px-3">Download</a>
                                        </div>
                                        <!--end::Menu item-->
    
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a data-bs-toggle="modal" data-bs-target="#kt_modal_upload_{{file.id_documento_entidad_pk}}" class="menu-link px-3">Edit</a>
                                        </div>
                                        <!--end::Menu item-->
                                    
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a onclick="deleteDocumento({{file.id_documento_entidad_pk}});" class="menu-link text-danger px-3" data-kt-filemanager-table-filter="delete_row">Delete</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                    <!--end::More-->
                                </div>
                            </div>
                        </td>
                    </tr>
                    <!--begin::Modal - Customers - Add-->
                    <div class="modal fade" id="kt_modal_upload_{{file.id_documento_entidad_pk}}" tabindex="-1" aria-hidden="true">
                        <!--begin::Modal dialog-->
                        <div class="modal-dialog modal-dialog-centered mw-650px">
                            <!--begin::Modal content-->
                            <div class="modal-content">
                                <!--begin::Form-->
                                    <!--begin::Modal header-->
                                    <div class="modal-header" id="kt_modal_add_customer_header">
                                        <!--begin::Modal title-->
                                        <h2 class="fw-bold">Editar Documento</h2>
                                        <!--end::Modal title-->
                                        <!--begin::Close-->
                                        <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                            <i class="ki-outline ki-cross fs-1"></i>
                                        </div>
                                        <!--end::Close-->
                                    </div>
                                    <!--end::Modal header-->
                                    <!--begin::Modal body-->
                                    <div class="modal-body py-10 px-lg-17">
                                        <!--begin::Scroll-->
                                        <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                            <!--begin::Input group-->
                                                <div class="fv-row mb-7">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-semibold mb-2">
                                                        <span class="required">Area Empresa</span>
                                                    </label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <select id="areaEmpresa_{{file.id_documento_entidad_pk}}" aria-label="Seleccione area..." data-control="select2" data-placeholder="Seleccione area..." data-dropdown-parent="#kt_modal_upload_{{file.id_documento_entidad_pk}}" class="form-select form-select-solid fw-bold">
                                                        <option value="">Seleccione area...</option>
                                                        {% for area in areaEmpresa %}
                                                            <option {% if file.id_area_empresa == area.id_area_empresa_pk %} selected {% endif %} value="{{area.id_area_empresa_pk}}">{{area.nombre_area}}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <!--end::Input-->
                                                </div>
                                            <!--end::Input group-->
    
                                            <!--begin::Input group-->
                                                <div class="fv-row mb-7">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-semibold mb-2">Desc Documento</label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <input type="text" class="form-control form-control-solid" id="descDocumento_{{file.id_documento_entidad_pk}}" value="{{file.desc_documento}}"/>
                                                    <!--end::Input-->
                                                </div>
                                            <!--end::Input group-->
                                        
                                            
                                            <!--begin::Input group-->
                                                <div class="fv-row mb-7">
                                                    <!--begin::Label-->
                                                    <label class="fs-6 fw-semibold mb-2">
                                                        <span class="required">Tipo Documento</span>
                                                    </label>
                                                    <!--end::Label-->
                                                    <!--begin::Input-->
                                                    <select id="tipoDocumento_{{file.id_documento_entidad_pk}}" aria-label="Seleccione tipo..." data-control="select2" data-placeholder="Seleccione tipo..." data-dropdown-parent="#kt_modal_upload_{{file.id_documento_entidad_pk}}" class="form-select form-select-solid fw-bold">
                                                        <option value="">Seleccione tipo...</option>
                                                        {% for tipo in tipoFiles %}
                                                            <option {% if file.id_tipo_documento == tipo.id_tipo_documento_pk %} selected {% endif %} value="{{tipo.id_tipo_documento_pk}}">{{tipo.desc_tipo_documento}}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <!--end::Input-->
                                                </div>
                                            <!--end::Input group-->
    
                        
                                        </div>
                                        <!--end::Scroll-->
                                    </div>
                                    <!--end::Modal body-->
                                    <!--begin::Modal footer-->
                                    <div class="modal-footer flex-center">
                                        <!--begin::Button-->
                                        <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                                        <!--end::Button-->
                                        <!--begin::Button-->
                                        <button type="submit" class="btn btn-primary" onclick="editDocumento({{file.id_documento_entidad_pk}}, {{prospect.id_cliente_pk}});">
                                            <span class="indicator-label">Submit</span>
                                        </button>
                                        <!--end::Button-->
                                    </div>
                                    <!--end::Modal footer-->
                                <!--end::Form-->
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </tbody>
            </table>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
    
    
    
        <br>
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                
                    <h3>Tareas</h3>
                </div>
                <!--begin::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Toolbar-->
                    <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1 me-2">
                            <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                            <input type="text" data-kt-task-table-filter="search" class="form-control form-control-solid w-250px ps-12" placeholder="Buscar Tareas" />
                        </div>
                        <!--end::Search-->
                        <!--begin::Add customer-->
                        <button type="button" class="btn btn-primary" onclick="window.location.href='{{ path('addTask', { id: clientId }) }}'">
                            Add Tarea
                        </button>
                        <!--end::Add customer-->
                    </div>
                    <!--end::Toolbar-->
                    <!--begin::Group actions-->
                    <div class="d-flex justify-content-end align-items-center d-none" data-kt-customer-table-toolbar="selected">
                        <div class="fw-bold me-5">
                        <span class="me-2" data-kt-customer-table-select="selected_count"></span>Selected</div>
                        <button type="button" class="btn btn-danger" data-kt-customer-table-select="delete_selected">Delete Selected</button>
                    </div>
                    <!--end::Group actions-->
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_task_table">
                    <thead>
                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            <th class="w-10px pe-2">
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                    <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_task_table .form-check-input" value="1" />
                                </div>
                            </th>
                            <th>Instancia</th>
                            <th>Label</th>
                            <th>Moneda</th>
                            <th>Importe</th>
                            <th>Fecha Inicio</th>
                            <th>Estado</th>
                            <th>Facturada</th>
                            <th>Fecha Facturada</th>
                            <th>Usuario</th>
                            <th>Timestamp</th>
                            <th class="text-end min-w-70px">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                         {% for tarea in tareas %}
                            <tr id="task_id_{{tarea.id_tarea_pk}}">
                                <td>
                                    <div class="form-check form-check-sm form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" value="1" />
                                    </div>
                                </td>
                                <td><a href="/clients/editTask/{{tarea.id_tarea_pk}}">{{tarea.desc_instalacion}}</a></td>
                                <td>{{tarea.desc_label_tarea}}</td>
                                <td>{{tarea.desc_moneda}}</td>
                                <td>{{tarea.importe_factura}}</td>
                                <td>{{tarea.fecha_inicio}}</td>
                                <td>{{tarea.desc_estado_tarea}}</td>
                                <td>
                                    {% if tarea.flag_facturada == 1 %}
                                        <i class="ki-outline ki-check fs-5 text-success"></i>
                                    {% else %}
                                        <i class="ki-outline ki-cross fs-5 text-danger"></i>
                                    {% endif %}
                                </td>
                                <td>{{tarea.fecha_facturada}}</td>
                                <td>{{tarea.nickname_creador}}</td>
                                <td>{{tarea.cr_timestamp}}</td>
                
                                <td class="text-end">
                                    <a href="#" class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                    <i class="ki-outline ki-down fs-5 ms-1"></i></a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                        <div class="menu-item px-3">
                                            <a href="/clients/editTask/{{tarea.id_tarea_pk}}" class="menu-link px-3">Editar</a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a  onclick="copyTask({{tarea.id_tarea_pk}})"  class="menu-link px-3" data-kt-customer-table-filter="copy_row">Copiar</a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a  onclick="deleteTask({{tarea.id_tarea_pk}})"  class="menu-link px-3" data-kt-customer-table-filter="delete_row">Eliminar</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
                        {% endfor %} 
                    </tbody>
                </table>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
        <br>
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                    <h3>Hitos</h3>
                </div>
                <!--begin::Card title-->
                <!--begin::Card toolbar-->
                <div class="card-toolbar">
                    <!--begin::Toolbar-->
                    <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1 me-2">
                            <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                            <input type="text" data-kt-milestone-table-filter="search" class="form-control form-control-solid w-250px ps-12" placeholder="Buscar Hitos" />
                        </div>
                        <!--end::Search-->
                        <!--begin::Add customer-->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_hito" >Add Hito</button>
                        <!--end::Add customer-->
                    </div>
                    <!--end::Toolbar-->
                    <!--begin::Group actions-->
                    <div class="d-flex justify-content-end align-items-center d-none" data-kt-milestone-table-toolbar="selected">
                        <div class="fw-bold me-5">
                        <span class="me-2" data-kt-milestone-table-select="selected_count"></span>Selected</div>
                        <button type="button" class="btn btn-danger" data-kt-milestone-table-select="delete_selected">Delete Selected</button>
                    </div>
                    <!--end::Group actions-->
                </div>
                <!--end::Card toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_milestone_table">
                    <thead>
                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                            <th class="w-10px pe-2">
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                    <input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_milestone_table .form-check-input" value="1" />
                                </div>
                            </th>
                            <th>Instancia</th>
                            <th>Label</th>
                            <th>Estado</th>
                            <th>Fecha cumplido</th>
                            <th>Responsable</th>
                            <th class="text-end min-w-70px">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                         {% for hito in hitos %}
                            <tr id="hito_id_{{hito.id_hito_pk}}">
                                <td>
                                    <div class="form-check form-check-sm form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" value="1" />
                                    </div>
                                </td>
                                <td>{{hito.desc_instalacion}}</td>
                                <td>{{hito.desc_label_hito}}</td>
                                <td>{{hito.desc_estado_hito}}</td>
                                <td>{{hito.fecha_cumplido}}</td>
                                <td>{{hito.nickname_responsable}}</td>
                
                                <td class="text-end">
                                    <a href="#" class="btn btn-sm btn-light btn-flex btn-center btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                    <i class="ki-outline ki-down fs-5 ms-1"></i></a>
                                    <!--begin::Menu-->
                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a  data-bs-toggle="modal" data-bs-target="#kt_modal_edit_hito_{{hito.id_hito_pk}}"  class="menu-link px-3">Editar</a>
                                        </div>
                                        <!--end::Menu item-->
                                        <!--begin::Menu item-->
                                        <div class="menu-item px-3">
                                            <a onclick="deleteHito({{hito.id_hito_pk}})" class="menu-link px-3" data-kt-milestone-table-filter="delete_row">Eliminar</a>
                                        </div>
                                        <!--end::Menu item-->
                                    </div>
                                    <!--end::Menu-->
                                </td>
                            </tr>
    
                                <!--begin::Modal - Hito - edit-->
                                <div class="modal fade" id="kt_modal_edit_hito_{{hito.id_hito_pk}}" tabindex="-1" aria-hidden="true">
                                    <!--begin::Modal dialog-->
                                    <div class="modal-dialog modal-dialog-centered mw-650px">
                                        <!--begin::Modal content-->
                                        <div class="modal-content">
                                            <!--begin::Form-->
                                                <!--begin::Modal header-->
                                                <div class="modal-header" id="kt_modal_add_customer_header">
                                                    <!--begin::Modal title-->
                                                    <h2 class="fw-bold">Editar Hito</h2>
                                                    <!--end::Modal title-->
                                                    <!--begin::Close-->
                                                    <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                                        <i class="ki-outline ki-cross fs-1"></i>
                                                    </div>
                                                    <!--end::Close-->
                                                </div>
                                                <!--end::Modal header-->
                                                <!--begin::Modal body-->
                                                <div class="modal-body py-10 px-lg-17">
                                                    <!--begin::Scroll-->
                                                    <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                                        <!--begin::Input group-->
                                                        <div class=" d-flex flex-column mb-7 fv-row">
                                                            <!--begin::Label-->
                                                            <label class="fs-6 fw-semibold mb-2">
                                                                <span class="required">Servicio</span>
                                                            </label>
                                                            <!--end::Label-->
                                                            <!--begin::Input-->
                                                            <select id="hito_servicio_{{hito.id_hito_pk}}" aria-label="Seleccione Servicio..." data-control="select2" data-placeholder="Seleccione Servicio..." data-dropdown-parent="#kt_modal_edit_hito_{{hito.id_hito_pk}}" class="form-select form-select-solid fw-bold">
                                                                <option value="">Seleccione Servicio...</option>
                                                                {% for servicio in servicios %}
                                                                    <option {% if hito.id_servicio == servicio.id_servicio_pk %} selected {% endif %} value="{{servicio.id_servicio_pk}}">{{servicio.desc_instalacion}}</option>
                                                                {% endfor %}
                                                            </select>
                                                            <!--end::Input-->
                                                        </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Label Hito</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" id="hito_label_{{hito.id_hito_pk}}" value="{{hito.desc_label_hito}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Detalle Hito</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" id="hito_detalle_{{hito.id_hito_pk}}" value="{{hito.desc_detalle_hito}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class="fv-row mb-7">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">Fecha Inicio</label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <input type="text" class="form-control form-control-solid" id="hito_fecha_ini_{{hito.id_hito_pk}}" value="{{hito.fecha_cumplido}}"/>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
                                                        <script>    
                                                            $("#hito_fecha_ini_{{hito.id_hito_pk}}").flatpickr();
                                                        </script>    
    
                                                        <!--begin::Input group-->
                                                            <div class=" d-flex flex-column mb-7 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">
                                                                    <span class="required">Responsable Aprobacion</span>
                                                                </label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select id="hito_responsable_{{hito.id_hito_pk}}" aria-label="Seleccione usuario..." data-control="select2" data-placeholder="Seleccione usuario..." data-dropdown-parent="#kt_modal_edit_hito_{{hito.id_hito_pk}}" class="form-select form-select-solid fw-bold">
                                                                    <option value="">Seleccione usuario...</option>
                                                                    {% for usuario in usuarios %}
                                                                        <option {% if hito.id_responsable_aprobacion == usuario.id_usuario_pk %} selected {% endif %} value="{{usuario.id_usuario_pk}}">{{usuario.nickname}}</option>
                                                                    {% endfor %}
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                        <!--begin::Input group-->
                                                            <div class=" d-flex flex-column mb-7 fv-row">
                                                                <!--begin::Label-->
                                                                <label class="fs-6 fw-semibold mb-2">
                                                                    <span class="required">Estado Hito</span>
                                                                </label>
                                                                <!--end::Label-->
                                                                <!--begin::Input-->
                                                                <select id="hito_estado_{{hito.id_hito_pk}}" aria-label="Seleccione estado..." data-control="select2" data-placeholder="Seleccione estado..." data-dropdown-parent="#kt_modal_edit_hito_{{hito.id_hito_pk}}" class="form-select form-select-solid fw-bold">
                                                                    <option value="">Seleccione estado...</option>
                                                                    {% for estado in estadosHitos %}
                                                                        <option {% if hito.id_estado_hito == estado.id_tipo_estado_hito_pk %} selected {% endif %} value="{{estado.id_tipo_estado_hito_pk}}">{{estado.desc_estado_hito}}</option>
                                                                    {% endfor %}
                                                                </select>
                                                                <!--end::Input-->
                                                            </div>
                                                        <!--end::Input group-->
    
                                                    </div>
                                                    <!--end::Scroll-->
                                                </div>
                                                <!--end::Modal body-->
                                                <!--begin::Modal footer-->
                                                <div class="modal-footer flex-center">
                                                    <!--begin::Button-->
                                                    <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                                                    <!--end::Button-->
                                                    <!--begin::Button-->
                                                    <button type="submit" class="btn btn-primary" onclick="editHito({{hito.id_hito_pk}});">
                                                        <span class="indicator-label">Submit</span>
                                                    </button>
                                                    <!--end::Button-->
                                                </div>
                                                <!--end::Modal footer-->
                                            <!--end::Form-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Modal - Customers - Add-->
                        {% endfor %} 
                    </tbody>
                </table>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
        
    
        {# Comments Section #}
        <br>
        <div class="card">
            <!--begin::Card head-->
            <div class="card-header border-0 pt-6">
                <!--begin::Title-->
                <div class="card-title d-flex align-items-center">
                    <i class="ki-outline ki-message-text-2 fs-1 text-primary me-3 lh-0"></i>
                    <h3 class="fw-bold m-0 text-gray-800">Comentarios</h3>
                </div>
                <!--end::Title-->
                <!--begin::Toolbar-->
                <div class="card-toolbar">
                <!--begin::Toolbar-->
                    <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                        <!--begin::Add customer-->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_comment">Add Comentario</button>
                        <!--end::Add customer-->
                    </div>
                    <!--end::Toolbar-->
                </div>
                <!--end::Toolbar-->
            </div>
            <!--end::Card head-->
            <!--begin::Card body-->
            <div class="card-body">
                <!--begin::Timeline-->
                <div class="timeline">
                    {% for comentario in comentarios %}
                        <!--begin::Timeline item-->
                        <div class="timeline-item" id="comment_{{comentario.id_nota_pk}}">
                            <!--begin::Timeline line-->
                            <div class="timeline-line w-40px"></div>
                            <!--end::Timeline line-->
                            <!--begin::Timeline icon-->
                            <div class="timeline-icon symbol symbol-circle symbol-40px">
                                <div class="symbol-label bg-light">
                                    <i class="ki-outline ki-sms fs-2 text-gray-500"></i>
                                </div>
                            </div>
                            <!--end::Timeline icon-->
                            <!--begin::Timeline content-->
                            <div class="timeline-content mb-10 mt-n1">
                                <!--begin::Timeline heading-->
                                <div class="pe-3 mb-5">
                                    <!--begin::Title-->
                                    <div class="fs-5 fw-semibold mb-2">{{comentario.desc_nota}}</div>
                                    <!--end::Title-->
                                    <!--begin::Description-->
                                    <div class="overflow-auto pb-5">
                                        <!--begin::Wrapper-->
                                        <div class="d-flex align-items-center mt-1 fs-6">
                                            <!--begin::Info-->
                                            <div class="text-muted me-2 fs-7">Added at {{comentario.cr_timestamp}}</div>
                                            <!--end::Info-->
                                    
                                            {% for tag in comentario.json_tags|split(',') %}
                                                <span class="badge badge-light">{{tag}}</span>
                                            {% endfor %}
    
                                            {% if comentario.desc_usuario is not empty %}
                                                <div class="text-muted ms-2 fs-7"> {{comentario.desc_usuario}}</div>
                                            {% endif %}
    
                            
                                            <a class="ms-2 fs-7" style="cursor: pointer;" onclick="deleteComment({{comentario.id_nota_pk}})"> Eliminar</a>
            
    
                                        </div>
                                        <!--end::Wrapper-->
                                    </div>
                                    <!--end::Description-->
                                </div>
                                <!--end::Timeline heading-->
                            </div>
                            <!--end::Timeline content-->
                        </div>
                        <!--end::Timeline item-->
                    {% endfor %}
                </div>
                <!--end::Timeline-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Timeline-->
    
    
        <!--begin::Modal - Customers - Add-->
        <div class="modal fade" id="kt_modal_add_comment" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_add_customer_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Agregar Comentario</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                <i class="ki-outline ki-cross fs-1"></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body py-10 px-lg-17">
                            <!--begin::Scroll-->
                            <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Comentario</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="descNota" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                                
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Tags</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="tags" placeholder="Comma separated. tag1,tag2" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Scroll-->
                        </div>
                        <!--end::Modal body-->
                        <!--begin::Modal footer-->
                        <div class="modal-footer flex-center">
                            <!--begin::Button-->
                            <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="submit" class="btn btn-primary" onclick="addComment({{prospect.id_cliente_pk}});">
                                <span class="indicator-label">Submit</span>
                            </button>
                            <!--end::Button-->
                        </div>
                        <!--end::Modal footer-->
                    <!--end::Form-->
                </div>
            </div>
        </div>
    
    
        <!--begin::Modal - Customers - Add-->
        <div class="modal fade" id="kt_modal_upload" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_add_customer_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Subir Documento</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                <i class="ki-outline ki-cross fs-1"></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body py-10 px-lg-17">
                            <!--begin::Scroll-->
                            <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span class="required">Area Empresa</span>
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select id="areaEmpresa" aria-label="Seleccione area..." data-control="select2" data-placeholder="Seleccione area..." data-dropdown-parent="#kt_modal_upload" class="form-select form-select-solid fw-bold">
                                            <option value="">Seleccione area...</option>
                                            {% for area in areaEmpresa %}
                                                <option value="{{area.id_area_empresa_pk}}">{{area.nombre_area}}</option>
                                            {% endfor %}
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Desc Documento</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="descDocumento" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                                
    
                                
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span class="required">Tipo Documento</span>
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select id="tipoDocumento" aria-label="Seleccione tipo..." data-control="select2" data-placeholder="Seleccione tipo..." data-dropdown-parent="#kt_modal_upload" class="form-select form-select-solid fw-bold">
                                            <option value="">Seleccione tipo...</option>
                                            {% for tipo in tipoFiles %}
                                                <option value="{{tipo.id_tipo_documento_pk}}">{{tipo.desc_tipo_documento}}</option>
                                            {% endfor %}
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Documento</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="file" class="form-control form-control-solid" id="fileDocumento" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Scroll-->
                        </div>
                        <!--end::Modal body-->
                        <!--begin::Modal footer-->
                        <div class="modal-footer flex-center">
                            <!--begin::Button-->
                            <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="submit" class="btn btn-primary" onclick="addDocumento({{prospect.id_cliente_pk}});">
                                <span class="indicator-label">Submit</span>
                            </button>
                            <!--end::Button-->
                        </div>
                        <!--end::Modal footer-->
                    <!--end::Form-->
                </div>
            </div>
        </div>
    
        <script>
            function addComment(id){
                descNota = $('#descNota').val();
                tags = $('#tags').val();
    
                let formData = new FormData();
                formData.append("id", id);
                formData.append("tags", tags);
                formData.append("nota", descNota);
    
                $.ajax({
                    url:   '{{path("addComment")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:  function (response) {
                        location.reload();
                    }
                });
    
            }
    
    
            function deleteComment(id){
                Swal.fire({
                title: 'Estas seguro?',
                text: "No podremos recuperarlo!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, borralo!',
                cancelButtonText: 'Cancelar'
                }).then((result) => {
                if (result.isConfirmed) {
                    let formData = new FormData();
                    formData.append("id", id);
    
                    $.ajax({
                        url:   '{{path("deleteComment")}}',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success:  function (response) {
                            Swal.fire(
                            'Borrado!',
                            'Este documento fue borrado.',
                            'success'
                            )
                            var row = document.getElementById('comment_'+id);
                            row.parentNode.removeChild(row);
                        }
                    });                
                }
                })
            }
    
    
            function addDocumento(id){
                areaEmpresa = $('#areaEmpresa').val();
                descDocumento = $('#descDocumento').val();
                tipoDocumento = $('#tipoDocumento').val();
    
                let formData = new FormData();
                formData.append("id", id);
                formData.append("areaEmpresa", areaEmpresa);
                formData.append("descDocumento", descDocumento);
                formData.append("tipoDocumento", tipoDocumento);
                formData.append("fileDocumento", fileDocumento.files[0]);
    
                $.ajax({
                    url:   '{{path("addDocument")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:  function (response) {
                        location.reload();
                    }
                });
    
            }
    
            function editDocumento(id, idClient){
                areaEmpresa = $('#areaEmpresa_'+id).val();
                descDocumento = $('#descDocumento_'+id).val();
                tipoDocumento = $('#tipoDocumento_'+id).val();
    
                let formData = new FormData();
                formData.append("id", id);
                formData.append("idClient", idClient);
                formData.append("areaEmpresa", areaEmpresa);
                formData.append("descDocumento", descDocumento);
                formData.append("tipoDocumento", tipoDocumento);
    
                $.ajax({
                    url:   '{{path("editDocument")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:  function (response) {
                        location.reload();
                    }
                });
    
            }
    
            function deleteDocumento(id){
                Swal.fire({
                title: 'Estas seguro?',
                text: "No podremos recuperarlo!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, borralo!',
                cancelButtonText: 'Cancelar'
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                    url:   '/prospects/ajax/delete/document?id='+id,
                    type:  'post',
                    success:  function (response) {
                        Swal.fire(
                        'Borrado!',
                        'Este documento fue borrado.',
                        'success'
                        )
                        var row = document.getElementById('documento_'+id);
                        row.parentNode.removeChild(row);
                    }
                    });
                    
                    
                }
                })
            }
        </script>
        <!--end::Modal - Customers - Add-->
    
    
    
    
        {# End comments Section #}
    
    
    
        
    
    
        <!--begin::Modal - Customers - Add-->
        <div class="modal fade" id="kt_modal_add_customer" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_add_customer_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Agregar Contacto</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                <i class="ki-outline ki-cross fs-1"></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body py-10 px-lg-17">
                            <!--begin::Scroll-->
                            <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="required fs-6 fw-semibold mb-2" >Nombre</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="nombre_contacto" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '');"/>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="required fs-6 fw-semibold mb-2" >Apellido</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="apellido_contacto" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '');"/>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Nickname</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input class="form-control form-control-solid" id="nickname_contacto" oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '');"/>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Row-->
                                <div class="d-flex align-items-center mb-7">
                                    <!--begin::Input group-->
                                    <div class="me-3 flex-grow-1">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Cargo</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" 
                                            id="cargo_contacto" />
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Input group-->
    
                                    <!--begin::Checkbox group-->
                                    <div class="form-check form-check-solid mt-9 ms-3">
                                        <input class="form-check-input" type="checkbox" 
                                            id="checkbox_contacto_comercial"/>
                                        <label class="form-check-label" 
                                            for="checkbox_contacto_comercial">
                                            Contacto Comercial
                                        </label>
                                    </div>
                                    <!--end::Checkbox group-->
                                </div>
                                <!--end::Row-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Documento de Identidad</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="documento_contacto" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
    
                                <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Correo Electronico</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="correo_contacto" />
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Telefono</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="telefono_contacto" />
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">URL Linkedin</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="url_contacto" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Fecha de Nacimiento</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="fecha_contacto" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class=" d-flex flex-column mb-7 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span class="required">Sexo</span>
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select id="sexo_contacto" aria-label="Seleccione Sexo..." data-control="select2" data-placeholder="Seleccione Sexo..." data-dropdown-parent="#kt_modal_add_customer" class="form-select form-select-solid fw-bold">
                                            <option value="">Seleccione Sexo...</option>
                                            <option value="1">Masculino</option>
                                            <option value="2">Femenino</option>
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Scroll-->
                        </div>
                        <!--end::Modal body-->
                        <!--begin::Modal footer-->
                        <div class="modal-footer flex-center">
                            <!--begin::Button-->
                            <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="submit" class="btn btn-primary" onclick="addContacto();">
                                <span class="indicator-label">Submit</span>
                            </button>
                            <!--end::Button-->
                        </div>
                        <!--end::Modal footer-->
                    <!--end::Form-->
                </div>
            </div>
        </div>
        <!--end::Modal - Customers - Add-->
    
    
    
        <!--begin::Modal - Customers - Add-->
        <div class="modal fade" id="kt_modal_add_service" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-xl modal-dialog-centered " style="width:1250px;" >
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_add_customer_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Agregar Servicio</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                <i class="ki-outline ki-cross fs-1"></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body py-10 px-lg-17">
                            <!--begin::Scroll-->
                            <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Descripcion Instalacion</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="servicio_desc"/>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                                
                                
                                
                                <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Modo Servicio</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_modo" aria-label="Seleccione Modo..." data-control="select2" data-placeholder="Seleccione modo..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Modo...</option>
                                                {% for tipo in tipoServicio %}
                                                    <option value="{{tipo.id_modo_servicio_pk}}">{{tipo.desc_modo_servicio}}</option>
                                                {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                            </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Clase Servicio</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_clase" aria-label="Seleccione Clase..." data-control="select2" data-placeholder="Seleccione Clase..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Clase...</option>
                                                {% for clase in claseServicio %}
                                                    {% if clase.flag_visible == 1 %}
                                                        <option value="{{clase.id_clase_servicio_pk}}">{{clase.desc_clase_servicio}}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                <!--end::Input group-->
    
    
                                <!--begin::Input group-->
                                <script>
                                function toggleInputs() {
                                    var checkbox = document.getElementById('servicio_plan_custom');
                                    var customInputs = document.getElementById('customInputs');
                                    var customInputs2 = document.getElementById('customInputs2');
                                    
                                    if (!checkbox.checked) {
                                        customInputs.style.display = 'none';
                                        customInputs2.style.display = 'block';
                                    } else {
                                        customInputs.style.display = 'block';
                                        customInputs2.style.display = 'none';
                                    }
                                }
    
                                document.addEventListener('DOMContentLoaded', function() {
                                    toggleInputs();
                                });
                                </script>
                                <div class="row g-9 mb-7">
                                    <!--begin::Col-->
                                    <div class="col-md-3 fv-row">
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span>Plan Customizado</span>
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <div class="form-check form-switch form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" value="" id="servicio_plan_custom" onchange="toggleInputs()"/>
                                        </div>
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Col-->
                                </div>
    
                                <div id="customInputs">
                                    <!--begin::Col-->
                                    <div class="row g-9 mb-7">
                                        <div class="col-md-3 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Moneda</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_moneda" aria-label="Seleccione Moneda..." data-control="select2" data-placeholder="Seleccione Moneda..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Moneda...</option>
                                                {% for moneda in monedas %}
                                                    <option value="{{ moneda.id_moneda_pk }}">{{ moneda.desc_moneda }}</option>
                                                {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
    
                                        <!--begin::Col-->
                                        <div class="col-md-3 fv-row">
                                            <!--begin::Label-->
                                            <label class="required fs-6 fw-semibold mb-2">Precio</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" class="form-control form-control-solid" id="servicio_precio"/>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-3 fv-row">
                                            <!--begin::Label-->
                                            <label class="required fs-6 fw-semibold mb-2">Cant Partidas</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input type="text" class="form-control form-control-solid" id="servicio_cant_partidas"/>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                <div id="customInputs2" style="display:none;">
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Grupo Plan</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_grupo_plan" aria-label="Seleccione Grupo..." data-control="select2" data-placeholder="Seleccione Grupo..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Grupo...</option>
                                                {% for grupo in planGrupo %}
                                                    <option value="{{grupo.id_plan_grupo_pk}}">{{grupo.label_grupo}}</option>
                                                {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                            </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-6 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Plan Servicio</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_plan" aria-label="Seleccione Servicio..." data-control="select2" data-placeholder="Seleccione Servicio..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Servicio...</option>
                                                {% for plan in planServicio %}
                                                    <option value="{{plan.id_plan_servicio_pk}}">{{plan.desc_plan}}</option>
                                                {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                <div class="row g-9 mb-7">
                                    <!--begin::Col-->
                                    <div class="col-md-4 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span>Pago por adelantado</span>
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <div class="form-check form-switch form-check-custom form-check-solid">
                                            <input class="form-check-input" type="checkbox" value="" id="servicio_pago_por_adelantado"/>
                                        </div>
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Col-->
                                    <!--begin::Col-->
                                    <div class="col-md-8 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Periodo adelanto</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select id="servicio_periodo_adelanto" aria-label="Seleccione Periodo.." data-control="select2" data-placeholder="Seleccione Periodo....." class="form-select form-select-solid fw-bold">
                                            <option value="">Seleccione Periodo...</option>
                                            {% for modalidad in modalidades %}
                                                <option value="{{modalidad.id_modalidad_facturacion_pk}}">{{modalidad.desc_modalidad_facturacion}}</option>
                                            {% endfor %}
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                    <!--end::Col-->
                                </div>
                            <!--end::Input group-->
    
    
                                <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-10 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Instancia</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_instancia" aria-label="Seleccione Instancia..." data-control="select2" data-placeholder="Seleccione Instancia..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Instancia...</option>
                                                {% for instance in instancias %}
                                                    <option value="{{instance.id_instancia_server_pk}}">{{instance.desc_instancia}}</option>
                                                {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-2 fv-row">
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span>2FA Habilitado</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div class="form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="servicio_2fa"/>
                                            </div>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                <!--end::Input group-->
    
                                
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="required fs-6 fw-semibold mb-2">Dominio</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="servicio_dominio"/>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
    
    
                                <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-4 fv-row">
                                            <!--begin::Label-->
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Fecha Inicio</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="servicio_fecha_inicio" />
                                            <script>
                                                // Initialize flatpickr
                                                flatpickr("#servicio_fecha_inicio", {
                                                    dateFormat: "Y-m-d",
                                                    static: true,
                                                });
                                            </script>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-4 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Fecha fin</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="servicio_fecha_fin" />
                                            <script>
                                                // Initialize flatpickr
                                                flatpickr("#servicio_fecha_fin", {
                                                    dateFormat: "Y-m-d",
                                                    static: true,
                                                });
                                            </script>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-4 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Fecha Carga Datos</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="servicio_fecha_cargo"/>
                                            <script>
                                                // Initialize flatpickr
                                                flatpickr("#servicio_fecha_cargo", {
                                                    dateFormat: "Y-m-d",
                                                    static: true,
                                                });
                                            </script>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Descuento</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="servicio_descuento" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-semibold mb-2">
                                                <span>Soporte</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div class="form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="servicio_soporte" />
                                            </div>
                                            <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-8 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Precio Soporte</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="servicio_precio_soporte" />
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-4 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Moneda Facturacion</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_moneda_soporte" aria-label="Seleccione Moneda..." data-control="select2" data-placeholder="Seleccione Moneda..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Moneda...</option>
                                                    {% for moneda in monedas %}
                                                        <option value="{{moneda.id_moneda_pk}}">{{moneda.desc_moneda}}</option>
                                                    {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="row g-9 mb-7">
                                        <!--begin::Col-->
                                        <div class="col-md-4 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span>Sobreprecio Partner</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <div class="form-check form-switch form-check-custom form-check-solid">
                                                <input class="form-check-input" type="checkbox" value="" id="servicio_sobreprecio_partner" />
                                            </div>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-4 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Precio Partner</label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid" id="servicio_precio_partner" />
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                        <!--begin::Col-->
                                        <div class="col-md-4 fv-row">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">
                                                <span class="required">Moneda Partner</span>
                                            </label>
                                            <!--end::Label-->
                                            <!--begin::Input-->
                                            <select id="servicio_moneda_partner" aria-label="Seleccione Moneda..." data-control="select2" data-placeholder="Seleccione Moneda..." data-dropdown-parent="#kt_modal_add_service" class="form-select form-select-solid fw-bold">
                                                <option value="">Seleccione Moneda...</option>
                                                    {% for moneda in monedas %}
                                                    <option value="{{moneda.id_moneda_pk}}">{{moneda.desc_moneda}}</option>
                                                {% endfor %}
                                            </select>
                                            <!--end::Input-->
                                        </div>
                                        <!--end::Col-->
                                    </div>
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Orden Compra</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="servicio_orden_compra"/>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Scroll-->
                        </div>
                        <!--end::Modal body-->
                        <!--begin::Modal footer-->
                        <div class="modal-footer flex-center">
                            <!--begin::Button-->
                            <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="submit" class="btn btn-primary" onclick="addServicio({{prospect.id_cliente_pk}});">
                                <span class="indicator-label">Submit</span>
                            </button>
                            <!--end::Button-->
                        </div>
                        <!--end::Modal footer-->
                    <!--end::Form-->
                </div>
            </div>
        </div>
        <!--end::Modal - Customers - Add-->
    
        <!--begin::Modal - Hito - Add-->
        <div class="modal fade" id="kt_modal_add_hito" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_add_customer_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bold">Agregar Hito</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                <i class="ki-outline ki-cross fs-1"></i>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body py-10 px-lg-17">
                            <!--begin::Scroll-->
                            <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                
                                <!--begin::Input group-->
                                <div class=" d-flex flex-column mb-7 fv-row">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">
                                        <span class="required">Servicio</span>
                                    </label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <select id="servicio_hito" aria-label="Seleccione Servicio..." data-control="select2" data-placeholder="Seleccione Servicio..." data-dropdown-parent="#kt_modal_add_hito" class="form-select form-select-solid fw-bold">
                                        <option value="">Seleccione Servicio...</option>
                                        {% for servicio in servicios %}
                                            <option value="{{servicio.id_servicio_pk}}">{{servicio.desc_instalacion}}</option>
                                        {% endfor %}
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Label Hito</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="label_hito" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Detalle Hito</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="detalle_hito" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class="fv-row mb-7">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">Fecha Inicio</label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <input type="text" class="form-control form-control-solid" id="fecha_inicio_hito" />
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
                                <script>    
                                    $("#fecha_inicio_hito").flatpickr();
                                </script>    
    
                                <!--begin::Input group-->
                                    <div class=" d-flex flex-column mb-7 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span class="required">Responsable Aprobacion</span>
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select id="responsable_hito" aria-label="Seleccione usuario..." data-control="select2" data-placeholder="Seleccione usuario..." data-dropdown-parent="#kt_modal_add_hito" class="form-select form-select-solid fw-bold">
                                            <option value="">Seleccione usuario...</option>
                                            {% for usuario in usuarios %}
                                                <option value="{{usuario.id_usuario_pk}}" {% if prospect.id_comercial_owner == usuario.id_usuario_pk %} selected {% endif %}>{{usuario.nickname}}</option>
                                            {% endfor %}
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                                <!--begin::Input group-->
                                    <div class=" d-flex flex-column mb-7 fv-row">
                                        <!--begin::Label-->
                                        <label class="fs-6 fw-semibold mb-2">
                                            <span class="required">Estado Hito</span>
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Input-->
                                        <select id="estado_hito" aria-label="Seleccione estado..." data-control="select2" data-placeholder="Seleccione estado..." data-dropdown-parent="#kt_modal_add_hito" class="form-select form-select-solid fw-bold">
                                            <option value="">Seleccione estado...</option>
                                            {% for estado in estadosHitos %}
                                                <option value="{{estado.id_tipo_estado_hito_pk}}">{{estado.desc_estado_hito}}</option>
                                            {% endfor %}
                                        </select>
                                        <!--end::Input-->
                                    </div>
                                <!--end::Input group-->
    
                            </div>
                            <!--end::Scroll-->
                        </div>
                        <!--end::Modal body-->
                        <!--begin::Modal footer-->
                        <div class="modal-footer flex-center">
                            <!--begin::Button-->
                            <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Discard</button>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="submit" class="btn btn-primary" onclick="addHito();">
                                <span class="indicator-label">Submit</span>
                            </button>
                            <!--end::Button-->
                        </div>
                        <!--end::Modal footer-->
                    <!--end::Form-->
                </div>
            </div>
        </div>
        <!--end::Modal - Customers - Add-->
    
    
    
        <!--begin::Modal - Hito - Add-->
            <div class="modal fade" id="kt_modal_result_instance_users" tabindex="-1" aria-hidden="true">
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Form-->
                            <!--begin::Modal header-->
                            <div class="modal-header" id="kt_modal_add_customer_header">
                                <!--begin::Modal title-->
                                <h2 class="fw-bold">Usuarios instanciados</h2>
                                <!--end::Modal title-->
                                <!--begin::Close-->
                                <div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
                                    <i class="ki-outline ki-cross fs-1"></i>
                                </div>
                                <!--end::Close-->
                            </div>
                            <!--end::Modal header-->
                            <!--begin::Modal body-->
                            <div class="modal-body py-10 px-lg-17">
                                <!--begin::Scroll-->
                                <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
                                    
                                    <!--begin::Card-->
                                    <div class="card">
                                        <!--begin::Card header-->
                                        <div class="card-header border-0 pt-6">
                                            <!--begin::Card title-->
                                            <div class="card-title">
                                                <h3>Usuarios Agente</h3>
                                            </div>
                                            <!--begin::Card title-->
                                        </div>
                                        <!--end::Card header-->
                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-dashed fs-6 gy-5">
                                                <thead>
                                                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                                        <th>Usuario</th>         
                                                        <th>Codigo</th>
                                                        <th>Resultado</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="fw-semibold text-gray-600" id="usersAgenteResult">
                                                </tobdy>
                                            </table>
                                            <!--end::Table-->
                                        </div>
                                        <!--end::Card body-->
                                    </div>
                                    <!--end::Card-->
    
                                    <br>
                                    <!--begin::Card-->
                                    <div class="card">
                                        <!--begin::Card header-->
                                        <div class="card-header border-0 pt-6">
                                            <!--begin::Card title-->
                                            <div class="card-title">
                                                <h3>Usuarios Cliente</h3>
                                            </div>
                                            <!--begin::Card title-->
                                        </div>
                                        <!--end::Card header-->
                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-dashed fs-6 gy-5">
                                                <thead>
                                                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                                        <th>Usuario</th>         
                                                        <th>Codigo</th>
                                                        <th>Resultado</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="fw-semibold text-gray-600" id="usersClienteResultado">
                                                
                                                </tbody>
                                            </table>
                                            <!--end::Table-->
                                        </div>
                                        <!--end::Card body-->
                                    </div>
                                    <!--end::Card-->
    
    
    
                                </div>
                                <!--end::Scroll-->
                            </div>
                            <!--end::Modal body-->
                            <!--begin::Modal footer-->
                            <div class="modal-footer flex-center">
                                <!--begin::Button-->
                                <button type="reset" id="kt_modal_add_customer_cancel" class="btn btn-light me-3">Cerrar</button>
                                <!--end::Button-->
                            </div>
                            <!--end::Modal footer-->
                        <!--end::Form-->
                    </div>
                </div>
            </div>
            <!--end::Modal - Customers - Add-->
    
    
    
    
    
        <!--end::Card-->
        <input type="hidden" id="id_cliente" value="{{prospect.id_cliente_pk}}"/>
    
        <script>
            function initTableSearch(tableSelector, inputSelector) {
                var $table = $(tableSelector);
                var $input = $(inputSelector).first();
    
                var datatable = $.fn.dataTable.isDataTable($table[0])
                    ? $table.DataTable()
                    : $table.DataTable({
                        info: false,
                        order: []
                    });
    
                $input.off('keyup.clientSearch').on('keyup.clientSearch', function () {
                    datatable.search(this.value).draw();
                });
            }
    
            $(document).ready(function () {
                initTableSearch('#kt_contact_table', '[data-kt-contact-table-filter="search"]');
                initTableSearch('#kt_service_table', '[data-kt-service-table-filter="search"]');
                initTableSearch('#kt_task_table', '[data-kt-task-table-filter="search"]');
                initTableSearch('#kt_milestone_table', '[data-kt-milestone-table-filter="search"]');
            });
    
            
            function editClient(id){
                function sendAlertMissingInput(missingInputName) {
                Swal.fire({
                    title: 'Campo Requerido',
                    text: 'Por favor, complete el campo ' + missingInputName + '.',
                    icon: 'warning',
                    confirmButtonText: 'Aceptar'
                });
                }
    
                function validateInput(selector, fieldName) {
                var value = $(selector).val();
                if (!value || value.length === 0) {
                    sendAlertMissingInput(fieldName);
                    return null;
                }
                return value;
                }
                function validateEmail(email) {
                var emailPattern = /^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})(\s*;\s*[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})*$/;
                if (!emailPattern.test(email)) {
                    Swal.fire({
                    title: 'Correo Electrónico Inválido',
                    text: 'El correo electrónico ingresado no tiene un formato válido. Por favor, verifique e intente nuevamente.',
                    icon: 'warning',
                    confirmButtonText: 'Aceptar'
                });
                    return false;
                }
                return true;
                }
    
                var desc_cliente = validateInput('#desc_cliente', 'Descripcion Cliente');
            if (!desc_cliente) return;
    
            var pais = validateInput('#pais', 'Pais');
            if (!pais) return;
    
            var rut_cliente = validateInput('#rut_cliente', 'RUT Cliente');
            if (!rut_cliente) return;
    
            var tipo_documento = validateInput('#tipo_documento', 'Tipo Documento');
            if (!tipo_documento) return;
    
            var pais_documento = validateInput('#pais_documento', 'Pais Documento');
            if (!pais_documento) return;
    
            var razon_social = validateInput('#razon_social', 'Razon Social');
            if (!razon_social) return;
    
            var agente_owner = validateInput('#agente_owner', 'Agente Owner');
            if (!agente_owner) return;
    
            var comercial_owner = validateInput('#comercial_owner', 'Usuario Owner');
            if (!comercial_owner) return;
    
            var direccion_fiscal = validateInput('#direccion_fiscal', 'Direccion Fiscal');
            //If length is > 70 char alert
            if (!direccion_fiscal) return;
            if(direccion_fiscal.length >= 70){
                Swal.fire({
                    title: 'Direccion Fiscal',
                    text: 'La direccion fiscal no puede tener mas de 70 caracteres.',
                    icon: 'warning',
                    confirmButtonText: 'Aceptar'
                });
                return;
            }
    
            var ciudad_fiscal = validateInput('#ciudad_fiscal', 'Ciudad Fiscal');
            if (!ciudad_fiscal) return;
    
            var departamento_fiscal = validateInput('#departamento_fiscal', 'Departamento Fiscal');
            if (!departamento_fiscal) return;
    
            var correo_facturacion = validateInput('#correo_facturacion', 'Correo de Facturacion');
            if (!correo_facturacion) return;
            if(!validateEmail(correo_facturacion)) return;
    
            var proceso_facturacion = validateInput('#proceso_facturacion', 'Proceso Facturacion');
            if (!proceso_facturacion) return;
    
            var estado_cliente = validateInput('#estado_cliente', 'Estado Cliente');
            if (!estado_cliente) return;
    
            var medio_pago = validateInput('#medio_pago', 'Medio Pago');
            if (!medio_pago) return;
    
            var cuenta_bancaria_pago = validateInput('#cuenta_bancaria_pago', 'Cuenta Bancaria Pago');
            if (!cuenta_bancaria_pago) return;
            
                var formData = new FormData();
                formData.append('id_cliente', id);
                formData.append('desc_cliente', desc_cliente);
                formData.append('pais', pais);
                formData.append('rut_cliente', rut_cliente);
                formData.append('tipo_documento', tipo_documento);
                formData.append('pais_documento', pais_documento);
                formData.append('razon_social', razon_social);
                formData.append('oportunidad_venta', $('#oportunidad_venta').val());
                formData.append('agente_owner', agente_owner);
                formData.append('comercial_owner', comercial_owner);
                formData.append('direccion_fiscal', direccion_fiscal);
                formData.append('ciudad_fiscal', ciudad_fiscal);
                formData.append('departamento_fiscal', departamento_fiscal);
                formData.append('telefono', $('#telefono').val());
                formData.append('url_web', $('#url_web').val());
                formData.append('correo_facturacion', correo_facturacion);
                formData.append('calendario_pago', $('#calendario_pago').val());
                formData.append('estado_cliente', estado_cliente);
                formData.append('usuarios_invitados', $('#usuarios_invitados').val());
                
                formData.append('porcentaje_retencion_bruto', $('#porcentaje_retencion_bruto').val());
                formData.append('porcentaje_retencion_iva', $('#porcentaje_retencion_iva').val());
    
                var checkBox2 = document.getElementById("factura_directa");
                if (checkBox2.checked == true){
                    factura_directa = 1;
                } else {
                    factura_directa = 0;
                }
                formData.append('factura_directa', factura_directa);  //CHECKBOX
    
                formData.append('medio_pago', medio_pago);
                formData.append('cuenta_bancaria_pago', cuenta_bancaria_pago);
                formData.append('cant_meses_pago_factura',$('#cant_meses_pago_factura').val());
                formData.append('descuento_cliente', $('#descuento_cliente').val());
    
    
                var checkBox = document.getElementById("factura_iva");
                if (checkBox.checked == true){
                    factura_iva = 1;
                } else {
                    factura_iva = 0;
                }
                formData.append('factura_iva', factura_iva); //CHECKBOX
    
                formData.append('proceso_facturacion', $('#proceso_facturacion').val());
                formData.append('correo_notify', $('#correo_notify').val());
    
                formData.append('porcentaje_gross_up', $('#porcentaje_gross_up').val());
    
                $.ajax({
                    url:  '{{path("editClientAction")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        console.log(response);
                        if (response.status === 0) {  // 0 is OK
                            location.reload();
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message,
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'An unexpected error occurred.',
                        });
                    }
                });
            }
    
    
    
    
    
            // INICIO LLAMADAS DE CONTACTO
    
            function addContacto(){
                var formData = new FormData();
                formData.append('id_cliente', $('#id_cliente').val());
                formData.append('nombre', $('#nombre_contacto').val());
                formData.append('apellido', $('#apellido_contacto').val());
                formData.append('nickname', $('#nickname_contacto').val());
                formData.append('cargo', $('#cargo_contacto').val());
                formData.append('p_flag_contacto_comercial', document.getElementById('checkbox_contacto_comercial').checked ? 1 : 0);
                formData.append('documento', $('#documento_contacto').val());
                formData.append('correo', $('#correo_contacto').val());
                formData.append('telefono', $('#telefono_contacto').val());
                formData.append('url', $('#url_contacto').val());
                formData.append('fecha', $('#fecha_contacto').val());
                formData.append('sexo', $('#sexo_contacto').val());
                $.ajax({
                    url:  '{{path("addContact")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:  function (response) {
                        if (response.status === 0) {  // 0 is OK
                            location.reload();
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message,
                            });
                        }
                    },
                });
                
            }
    
    
    
            function editContact(id){
                var formData = new FormData();
                formData.append('id', id);
                formData.append('id_cliente', $('#id_cliente').val());
                formData.append('nombre', $('#nombre_contacto_'+id).val());
                formData.append('apellido', $('#apellido_contacto_'+id).val());
                formData.append('nickname', $('#nickname_contacto_'+id).val());
                formData.append('cargo', $('#cargo_contacto_'+id).val());
                formData.append('p_flag_contacto_comercial', document.getElementById('checkbox_contacto_comercial_'+id).checked ? 1 : 0);
                formData.append('documento', $('#documento_contacto_'+id).val());
                formData.append('correo', $('#correo_contacto_'+id).val());
                formData.append('telefono', $('#telefono_contacto_'+id).val());
                formData.append('url', $('#url_contacto_'+id).val());
                formData.append('fecha', $('#fecha_contacto_'+id).val());
                formData.append('sexo', $('#sexo_contacto_'+id).val());
    
                $.ajax({
                    url:  '{{path("editContact")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:  function (response) {
                        if (response.status === 0) {  // 0 is OK
                            location.reload();
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message,
                            });
                        }
                    }
                });
                
            }
            
    
    
            function deleteContact(id_contact){
                Swal.fire({
                title: 'Estas seguro?',
                text: "No podremos recuperarlo!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, borralo!',
                cancelButtonText: 'Cancelar'
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                    url:   '/prospects/ajax/delete/contact?id='+id_contact,
                    type:  'post',
                    success:  function (response) {
                        Swal.fire(
                        'Borrado!',
                        'Este contacto fue borrado.',
                        'success'
                        )
                        var row = document.getElementById("contact_id_"+id_contact);
                        row.parentNode.removeChild(row);
                    }
                    });
                    
                    
                }
                })
            }
    
            //FIN LLAMADOS DE CONTACTO
    
            function deleteTask(id_task){
                Swal.fire({
                title: 'Estas seguro?',
                text: "No podremos recuperarlo!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, borralo!',
                cancelButtonText: 'Cancelar'
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                    url:   '/clients/ajax/delete/task?id='+id_task,
                    type:  'post',
                    success:  function (response) {
                        Swal.fire(
                        'Borrado!',
                        'Esta tarea fue borrada.',
                        'success'
                        )
                        var row = document.getElementById("task_id_"+id_task);
                        row.parentNode.removeChild(row);
                    }
                    });
                    
                }
                })
            }
    
            function copyTask(id_task){
                Swal.fire({
                title: 'Estas seguro?',
                text: "Esto generara una nueva tarea",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, copiar!',
                cancelButtonText: 'Cancelar'
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                    url:   '/clients/ajax/copy/task?id='+id_task,
                    type:  'post',
                    success:  function (response) {
                        Swal.fire(
                        'Copiado!',
                        'Esta tarea fue copiada.',
                        'success'
                        )
                        location.reload();
                    }
                    });
                    
                }
                })
            }
    
            function deleteHito(id_task){
                Swal.fire({
                title: 'Estas seguro?',
                text: "No podremos recuperarlo!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, borralo!',
                cancelButtonText: 'Cancelar'
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                    url:   '/clients/ajax/delete/hito?id='+id_task,
                    type:  'post',
                    success:  function (response) {
                        Swal.fire(
                        'Borrado!',
                        'Este hito fue borrado.',
                        'success'
                        )
                        var row = document.getElementById("hito_id_"+id_task);
                        row.parentNode.removeChild(row);
                    }
                    });
                    
                }
                })
            }
    
    
    
            function editServicio(id, id_cliente){
                var formData = new FormData();
                formData.append('id', id);
                formData.append('id_cliente', id_cliente);
                formData.append('servicio_name_externo', $('#servicio_name_externo_'+id).val());
                formData.append('servicio_desc', $('#servicio_desc_'+id).val());
                formData.append('servicio_modo', $('#servicio_modo_'+id).val());
                formData.append('servicio_clase', $('#servicio_clase_'+id).val());
                formData.append('servicio_moneda', $('#servicio_moneda_'+id).val());
                formData.append('servicio_precio', $('#servicio_precio_'+id).val());
                formData.append('servicio_cant_partidas', $('#servicio_cant_partidas_'+id).val());
                formData.append('servicio_grupo_plan', $('#servicio_grupo_plan_'+id).val());
                formData.append('servicio_plan', $('#servicio_plan_'+id).val());
                formData.append('servicio_periodo_adelanto', $('#servicio_periodo_adelanto_'+id).val());
                formData.append('servicio_instancia', $('#servicio_instancia_'+id).val());
                formData.append('servicio_dominio', $('#servicio_dominio_'+id).val());
    
                var fechaInicio = $('#servicio_fecha_inicio_' + id).val();
                var fechaFin = $('#servicio_fecha_fin_' + id).val();
                var fechaCargo = $('#servicio_fecha_cargo_' + id).val();
    
                if (!fechaInicio || fechaInicio === '0000-00-00' || !fechaCargo || fechaCargo === '0000-00-00') {
                swal.fire("Error", "Los campos de fechas deben tener un valor válido", "error");
                return;
                }
    
                formData.append('servicio_fecha_inicio', fechaInicio);
                formData.append('servicio_fecha_fin', fechaFin);
                formData.append('servicio_fecha_cargo', fechaCargo);
                formData.append('servicio_descuento', $('#servicio_descuento_'+id).val());
                formData.append('servicio_precio_soporte', $('#servicio_precio_soporte_'+id).val());
                formData.append('servicio_moneda_soporte', $('#servicio_moneda_soporte_'+id).val());
                formData.append('servicio_precio_partner', $('#servicio_precio_partner_'+id).val());
                formData.append('servicio_moneda_partner', $('#servicio_moneda_partner_'+id).val());
                formData.append('servicio_orden_compra', $('#servicio_orden_compra_'+id).val());
    
                
        
    
                servicio_plan_custom = 0;
                var checkBox2 = document.getElementById("servicio_plan_custom_"+id);
                if (checkBox2.checked == true){
                    servicio_plan_custom = 1;
                }
                formData.append('servicio_plan_custom', servicio_plan_custom);  
    
                servicio_pago_por_adelantado = 0;
                var checkBox2 = document.getElementById("servicio_pago_por_adelantado_"+id);
                if (checkBox2.checked == true){
                    servicio_pago_por_adelantado = 1;
                }
                formData.append('servicio_pago_por_adelantado', servicio_pago_por_adelantado);
    
                servicio_2fa = 0;
                var checkBox2 = document.getElementById("servicio_2fa_"+id);
                if (checkBox2.checked == true){
                    servicio_2fa = 1;
                }
                formData.append('servicio_2fa', servicio_2fa);  
    
                servicio_soporte = 0;
                var checkBox2 = document.getElementById("servicio_soporte_"+id);
                if (checkBox2.checked == true){
                    servicio_soporte = 1;
                }
                formData.append('servicio_soporte', servicio_soporte);  
    
                servicio_sobreprecio_partner = 0;
                var checkBox2 = document.getElementById("servicio_sobreprecio_partner_"+id);
                if (checkBox2.checked == true){
                    servicio_sobreprecio_partner = 1;
                }
                formData.append('servicio_sobreprecio_partner', servicio_sobreprecio_partner);  
    
                $.ajax({
                    url:  '{{path("editServiceAction")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:  function (response) {
                        location.reload();
                    }
                });
            }
    
    
    
            function addServicio(id_cliente){
                var formData = new FormData();
                formData.append('id_cliente', id_cliente);
                formData.append('servicio_desc', $('#servicio_desc').val());
                formData.append('servicio_modo', $('#servicio_modo').val());
                formData.append('servicio_clase', $('#servicio_clase').val());
                formData.append('servicio_moneda', $('#servicio_moneda').val());
                formData.append('servicio_precio', $('#servicio_precio').val());
                formData.append('servicio_cant_partidas', $('#servicio_cant_partidas').val());
                formData.append('servicio_grupo_plan', $('#servicio_grupo_plan').val());
                formData.append('servicio_plan', $('#servicio_plan').val());
                formData.append('servicio_periodo_adelanto', $('#servicio_periodo_adelanto').val());
                formData.append('servicio_instancia', $('#servicio_instancia').val());
                formData.append('servicio_dominio', $('#servicio_dominio').val());
                formData.append('servicio_fecha_inicio', $('#servicio_fecha_inicio').val());
                formData.append('servicio_fecha_fin', $('#servicio_fecha_fin').val());
                formData.append('servicio_fecha_cargo', $('#servicio_fecha_cargo').val());
                formData.append('servicio_descuento', $('#servicio_descuento').val());
                formData.append('servicio_precio_soporte', $('#servicio_precio_soporte').val());
                formData.append('servicio_moneda_soporte', $('#servicio_moneda_soporte').val());
                formData.append('servicio_precio_partner', $('#servicio_precio_partner').val());
                formData.append('servicio_moneda_partner', $('#servicio_moneda_partner').val());
                formData.append('servicio_orden_compra', $('#servicio_orden_compra').val());
        
    
                servicio_plan_custom = 0;
                var checkBox2 = document.getElementById("servicio_plan_custom");
                if (checkBox2.checked == true){
                    servicio_plan_custom = 1;
                }
                formData.append('servicio_plan_custom', servicio_plan_custom);  
    
                servicio_pago_por_adelantado = 0;
                var checkBox2 = document.getElementById("servicio_pago_por_adelantado");
                if (checkBox2.checked == true){
                    servicio_pago_por_adelantado = 1;
                }
                formData.append('servicio_pago_por_adelantado', servicio_pago_por_adelantado);
    
                servicio_2fa = 0;
                var checkBox2 = document.getElementById("servicio_2fa");
                if (checkBox2.checked == true){
                    servicio_2fa = 1;
                }
                formData.append('servicio_2fa', servicio_2fa);  
    
                servicio_soporte = 0;
                var checkBox2 = document.getElementById("servicio_soporte");
                if (checkBox2.checked == true){
                    servicio_soporte = 1;
                }
                formData.append('servicio_soporte', servicio_soporte);  
    
                servicio_sobreprecio_partner = 0;
                var checkBox2 = document.getElementById("servicio_sobreprecio_partner");
                if (checkBox2.checked == true){
                    servicio_sobreprecio_partner = 1;
                }
                formData.append('servicio_sobreprecio_partner', servicio_sobreprecio_partner);  
    
                $.ajax({
                    url: '{{ path("addServiceAction") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        location.reload();
                    },
                    error: function (jqXHR) {
                        let errorMsg = 'Algo ha fallado, por favor intente más tarde.';
                        if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
                            errorMsg = jqXHR.responseJSON.error;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMsg
                        });
                    }
                });
            }
    
            function instanceUsers(servicio){
                $('#kt_modal_instance_users_'+servicio).modal('hide');
                Swal.fire({
                    title: 'Instanciando Usuarios',
                    html: 'Por favor, espere un momento.',
                    timerProgressBar: true,
                    didOpen: () => {
                        Swal.showLoading()
                    },
                });
                var usersCliente = [];
                var usersAgente = [];
                var id_cliente = $('#id_cliente').val();
            
                $('#usersCliente_'+servicio+' tr').each(function () {
                    var status = $(this).data('status');
                    if(status == 0){
                        if($(this).find('td:eq(0) input').prop('checked')){
                            usersCliente.push({
                                id_usuario: $(this).data('id'),
                                adminSeguridad: $(this).find('td:eq(5) input').prop('checked') ? 1 : 0,
                                adminServicio: $(this).find('td:eq(6) input').prop('checked') ? 1 : 0
                            });
                        }
                    }
                });
                $('#usersAgente_'+servicio+' tr').each(function () {
                    var status = $(this).data('status');
                    if(status == 0){
                        if($(this).find('td:eq(0) input').prop('checked')){
                            usersAgente.push({
                                id_usuario: $(this).data('id'),
                                adminSeguridad: $(this).find('td:eq(5) input').prop('checked') ? 1 : 0,
                                adminServicio: $(this).find('td:eq(6) input').prop('checked') ? 1 : 0
                            });
                        }
                    }
                });
    
                var formData = new FormData();
                formData.append('id_cliente', id_cliente);
                formData.append('id_servicio', servicio);
                formData.append('usuariosContacto', JSON.stringify(usersCliente));
                formData.append('usuariosAgente', JSON.stringify(usersAgente));
    
    
                $.ajax({
                    url:  '{{path("createUsersAction2")}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:  function (response) {
                        /*console.log(response);
    
    
                        Object.keys(response.usersAgente).forEach(key => {
                            let agente = response.usersAgente[key];
                            $('#usersAgenteResult').append('<tr><td>'+agente.usuario.nickname+'</td><td>'+agente.resultado.cod_status+'</td><td>'+agente.resultado.out_msg+'</td></tr>');
                        });
    
                        Object.keys(response.usersContacto).forEach(key => {
                            let agente = response.usersContacto[key];
                            $('#usersClienteResultado').append('<tr><td>'+key+'</td><td>'+agente.resultado.cod_status+'</td><td>'+agente.resultado.out_msg+'</td></tr>');
                        });*/
    
                        Swal.fire(
                        'Finalizado',
                        'Usuarios creados correctamente.',
                        'success'
                        )
                        //$('#kt_modal_result_instance_users').modal('show');
                    },
                    error: function (response) {
                        Swal.fire(
                        'Error!',
                        'Uno de los correos que estas intentando instanciar ya se encuentra creado.',
                        'error'
                        )
                    }
                });
                
    
    
                
            }
    
    
    
        </script>
    {% endblock %}