<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
  rel="stylesheet"
/>


<style type="text/css">

    .list-group{
        max-height: 150px;
        margin-bottom: 10px;
        overflow:scroll;
        -webkit-overflow-scrolling: touch;
    }    

    .swal2-container {
         z-index: 9999;
      }

.wrapper {
  overflow: hidden;  
}

ul.breadcrumbs {
  margin: 0;
  padding: 0;
  display: flex; /* Cambiar a flex para un mejor ajuste en pantallas pequeñas */
  flex-wrap: wrap; /* Permitir que los elementos se ajusten en múltiples líneas si es necesario */
  justify-content:center;
}

ul.breadcrumbs li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  border-left: 1px solid #ccc;
  transition: 0.3s ease;
}

ul.breadcrumbs li:hover:before {
  /* border-left: 10px solid #5e6e82; */
}

ul.breadcrumbs li:hover a {
  /* color: white;
  background: #5e6e82; */
 
}

ul.breadcrumbs li:before {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%; /* Centrar el triángulo verticalmente */
  transform: translateY(-50%); /* Ajustar la posición */
  z-index: 20;
  border-left: 10px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  transition: 0.3s ease;
}

ul.breadcrumbs li:after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%; /* Centrar el triángulo verticalmente */
  transform: translateY(-50%); /* Ajustar la posición */
  z-index: 10;
  border-left: 10px solid #ccc;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

ul.breadcrumbs li.active {
  background: #5e6e82; /* Fondo para el activo */
}

ul.breadcrumbs li.active a {
  color: white !important; /* Color del texto activo */
  padding: 0 15px 0 25px; /* Ajustar el padding */
  background: #5e6e82;
}

ul.breadcrumbs li.first {
  border-left: none;
}

ul.breadcrumbs li.first a {
  font-size: 18px;
  padding-left: 20px;
  border-radius: 5px 0px 0px 5px;
}

ul.breadcrumbs li.last:before {
  display: none;
}

ul.breadcrumbs li.last:after {
  display: none;
}

ul.breadcrumbs li.last a {
  padding-right: 20px;
  border-radius: 0px 40px 40px 0px;
}

ul.breadcrumbs li a {
  display: block;
  font-size: 12px;
  line-height: 40px;
  color: #757575;
  padding: 0px 15px 0px 25px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #ddd;
  white-space: nowrap; /* Evitar que el texto se envuelva */
  overflow: hidden;
  transition: 0.3s ease;
}

ul.breadcrumbs li.active:before {
  display: block; /* Mostrar el triángulo en el activo */
}

ul.breadcrumbs li.active:after {
  display: block; /* Mostrar el triángulo secundario en el activo */
}

@media (max-width: 768px) {
  ul.breadcrumbs {
    flex-direction: column; /* Cambiar a una columna en pantallas más pequeñas */
  }

  ul.breadcrumbs li {
    border-left: none; /* Eliminar el borde izquierdo en pantallas pequeñas */
    margin-bottom: 5px; /* Espaciado entre elementos */
    margin-right: 10px;
  }
}
ul.breadcrumbs li.active:before {
  border-left: 10px solid #5e6e82; /* Cambia el color del triángulo al hacer hover sobre el activo */
}

.cursor_manito {
  cursor: pointer;
}

table.estilosTabla > :not(caption) > * > * {
        /*
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        */
    }

    .quitar_borde_puntos_suspencivos{
        border: none;
        background: transparent;
    }

    .quitar_borde_puntos_suspencivos.dropdown-toggle::after {
        display: none;
    }

    table.estilosTabla > :not(caption) > tr {
        border-bottom: 1px solid #dee2e6; /* Bootstrap's default border color */
    }

    table.estilosTabla > :not(caption) > * > * {
        border-bottom: 1px solid #dee2e6; /* Bootstrap's default border color */
   }

   .btn-edit-referencia-personal {
         margin-bottom: 4px; 
         background-color: #001b3b; 
         color: white; 
         border: 1px solid rgb(211, 202, 192) !important; 
         box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; 
         float: inline-end;
    }

   .btn-eliminar-referencia-personal {
      margin-bottom: 4px;
      background-color: red;
      color: white;
      border: 1px solid rgb(211, 202, 192) !important;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      float: inline-end;
    }

   .btn-edit-referencia-personal:hover i,
   .btn-eliminar-referencia-personal:hover i {
      color: white; /* Mantén el color blanco del icono en hover */
   }

   .tamano-icono{
      font-size:small;
   }
    
   .centrar-botones{
      text-align: center;
      justify-content: center;
      display: flex;
      padding: 0px;
   }

   .btn-descargar {
         margin-bottom: 4px; 
         background-color: #001b3b; 
         color: white; 
         border: 1px solid rgb(211, 202, 192) !important; 
         box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; 
         float: inline-end;
    }

   .btn-eliminar {
      margin-bottom: 4px;
      background-color: red;
      color: white;
      border: 1px solid rgb(211, 202, 192) !important;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
      float: inline-end;
    }

   .btn-descargar:hover i,
   .btn-eliminar:hover i {
      color: white; /* Mantén el color blanco del icono en hover */
   }

 
</style>

<textarea disabled hidden class="tener_companies_documents" value="{$my_companies_documents}">
    {$my_companies_documents}
</textarea>

<div>
    <div class="card shadow-none mb-0">
        <div class="card-header">
            <h2>
                {if $f_type eq 'edit'}
                    {$_L['Edit']}
                {else}
                    {$_L['New Company']}
                {/if}
            </h2>
        </div>
        <div class="panel-container">
            <div class="panel-content">
                <div class="card-body">

                    <form class="form-horizontal" id="ib_modal_form">


                        <div class="row">
                            <div class="col-md-6">

                                <div class="mb-3">
                                    <label for="company_name">{$_L['Company Name']}<small class="red">*</small></label>

                                    <div><input type="text" id="company_name" name="company_name" class="form-control" value="{$val['company_name']}">

                                    </div>

                                </div>


                                <div class="mb-3">
                                    <label for="code">{$_L['Code']}<small class="red">*</small></label>

                                    <div><input type="text" id="code" name="code" class="form-control" value="{$val['code']}">

                                    </div>


                                </div>

                                {if $config['show_business_number'] eq '1'}


                                    <div class="mb-3">
                                        <label for="business_number">{$config['label_business_number']}</label>

                                        <div><input type="text" id="business_number" name="business_number" class="form-control" value="{$val['business_number']}">

                                        </div>


                                    </div>


                                {/if}


                                <div class="mb-3"><label for="url">{$_L['URL']}</label>

                                    <div><input type="text" id="url" name="url" class="form-control" value="{$val['url']}">

                                    </div>


                                </div>


                                <div class="mb-3"><label for="email">{$_L['Email']}</label>
                                    <div>
                                        <input type="text" id="email" name="email" class="form-control" value="{$val['email']}">
                                    </div>






                                </div>


                                <div class="mb-3"><label for="phone">{$_L['Phone']}</label>

                                    <div><input type="text" id="phone" name="phone" class="form-control" value="{$val['phone']}">

                                    </div>


                                </div>


                                {if $config['fax_field'] eq '1'}


                                    <div class="mb-3"><label for="fax">{$_L['Fax']}</label>

                                        <div><input type="text" id="fax" name="fax" class="form-control" value="{$val['fax']}">

                                        </div>


                                    </div>



                                {/if}









                            </div>

                            <div class="col-md-6">

                                <div class="mb-3"><label for="logo_url">{$_L['Logo URL']}</label>

                                    <div><input type="text" id="logo_url" name="logo_url" class="form-control" value="{$val['logo_url']}">

                                    </div>


                                </div>

                                <div class="mb-3"><label for="c_address1">{$_L['Address']}</label>

                                    <input type="text" id="c_address1" name="address1" class="form-control" value="{$val['address1']}">


                                </div>

                                <div class="mb-3"><label for="c_city">{$_L['City']}</label>

                                    <div><input type="text" id="c_city" name="city" class="form-control" value="{$val['city']}">

                                    </div>


                                </div>

                                <div class="mb-3"><label for="c_state">{$_L['State Region']}</label>


                                    <div><input type="text" id="c_state" name="state" class="form-control" value="{$val['state']}"></div>


                                </div>

                                <div class="mb-3"><label for="c_zip">{$_L['ZIP Postal Code']}</label>

                                    <input type="text" id="c_zip" name="zip" class="form-control" value="{$val['zip']}">


                                </div>

                                <div class="mb-3"><label for="c_country">{$_L['Country']}</label>

                                    <select name="country" id="c_country" class="form-control country">
                                        <option value="">{$_L['Select Country']}</option>
                                        {$countries}
                                    </select>


                                </div>



                            </div>
                            
                            {**}
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="file"><span class="h6">File</span><span class="text-danger"></span></label>
                                    <input type="file" id="file" name="file" class="form-control file">
                                </div>
                            </div>
                            {**}

                            <div class="row card_container">



                            </div>

                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="mb-3">
                                    <button type="button" class="btn btn-primary modal_submit mt-3">{$_L['Save']}</button>
                                </div>
                            </div>
                        </div>


                        <input type="hidden" name="f_type" id="f_type" value="{$f_type}">
                        <input type="hidden" name="cid" id="cid" value="{$val['cid']}">

                    </form>

                     

                </div>

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ventana_confirmacion" tabindex="-1" aria-labelledby="exampleModalLabel__ventanaconfirmacion" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false" >
   <div class="modal-dialog modal-dialog-centered"  >
      <div class="modal-content" style="background-color:white">
         <div class="modal-header">
         <h3 class="titulo_modal_confirmar" style="color:black">Estas seguro de eliminar</h3>
            <button type="button" class="btn-close "  id="btn_close_ventana_confirmacion" ></button>
         </div>
         <div class="modal-body" style="background-color:white;border-radius:10px">
          
            <div class="row">
               <div class="col-md-12">
                  <div class="panel-container show" id="ibox_form">
                           <div class="panel-content">
                              <div class="px-2">
                                    <div class="alert alert-danger" id="emsg" style="display: none;">
                                       <span id="emsgbody"></span>
                                    </div>
                                    <input class="tipo_modal_confirmar" hidden disabled/> 
                                    <input class="data_id" hidden disabled/> 
                                    <div class="row">
                                          <div class="col-md-12 col-sm-12">

                                                <h4 class="mensaje_modal_confirmar" style="text-align:center; color:black">Estas seguro de eliminar</h4>
                                                 
                                                 <p class="mensaje_espera_moda_confirmacion mt-3" style="text-align:center; color:red; font-weight:600">Espere mientras termina el proceso</p>
                                          </div>
                                     
                                       </div>

                                       <div class="row mt-2">
                                          <div class="col-md-12">
                                                <div style=" float: inline-end; ">
                                                   <button class="btn me-2" type="button" id="btn_cerrar_ventana_confirmacion" style=" background: #001b3b; ">close</button>
                                                   <button class="btn " type="button" id="btn_aplicar_ventana_confirmacion" style=" background: red; ">Remove</button>
                                                </div>
                                          </div>
                                       </div>
                              </div>
                           </div>
                        </div>
               </div>
            </div>
          
         </div>
         
      </div>
   </div>
</div>

{literal}
<script>

var COLOR_FONDO_VENTANA_CERRAR = "#001b3b";
var COLOR_TEXT_VENTANA_CERRAR = "white";

var COLOR_FONDO_VENTANA_CONFIRMACION = "red";
var COLOR_TEXT_VENTANA_CONFIRMACION = "white";

var arregloArchivos = [];
var arregloArchivosEliminados = [];

var tener_companies_documents = $('.tener_companies_documents').text();
//console.log(tomarContactos);
try {
    
    if(!isEmpty(tener_companies_documents))
    {
        let parsearContacto = JSON.parse(tener_companies_documents);
        if (Array.isArray(parsearContacto)) {

          arregloArchivos = parsearContacto || [];
          //console.log("arregloArchivos");
          //console.log(arregloArchivos);

          let html = "";

          arregloArchivos.forEach((data) => {
            html += generateCardHtmlURL(data);
          });

          $(".card_container").append(html);
          eventoEliminarDocumento();

        }
    }

} catch (error) {
    console.error('Error al parsear datos:', error);
}


function isEmpty(value) {
    // Verificar si es null o undefined
    if (value == null) return true;
    // Verificar si es una cadena vacía
    if (typeof value === "string" && value.trim() === "") return true;
    // Verificar si es un array vacío
    if (Array.isArray(value) && value.length === 0) return true;
    // Verificar si es un objeto vacío
    if (typeof value === "object" && Object.keys(value).length === 0) return true;
    return false;
}

function generateCardHtml(data) {
    
    let {
        base64,
        base64_original,
        nombre_original,
        extension,
        UUID,
        UUID_ENC,
    } = data;

    // Sanitize inputs to prevent XSS
    const sanitize = (str) => {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    };

    const sanitizedId            = sanitize(UUID_ENC);
    const sanitizedTipoArchivo   = sanitize(extension);
    const sanitizedNameArchivo   = sanitize(nombre_original);

    // El base64_original ya trae el dataURL (ej: data:application/pdf;base64,....)
    const sanitizedDownloadUrl   = base64_original;
    const sanitizedFileName      = sanitizedNameArchivo || `document.${sanitizedTipoArchivo.toLowerCase()}`;

    return `
        <div class="col-12 col-sm-4 pt-4 card_eliminar_${sanitizedId}">
            <div class="card" style="width: 100%; max-width: 300px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;">
                <div class="card-body">
                    <h5 class="card-title">File type: <span class="card_tipo_archivo">${sanitizedTipoArchivo}</span></h5>
                    <h5 class="card-title">File name: <span class="card_nombre_archivo">${sanitizedNameArchivo}</span></h5>
                    <div class="row">
                        <div class="col-12">
                            <button type="button" class="btn btn-sm btn-eliminar waves-effect waves-themed" data-id="${sanitizedId}">
                                <i class="fas fa-trash tamano-icono" aria-hidden="true"></i>
                            </button>
                            <a class="btn btn-sm btn-descargar waves-effect waves-themed" 
                               data-id="${sanitizedId}" 
                               href="${sanitizedDownloadUrl}" 
                               download="${sanitizedFileName}">
                                <i class="fas fa-download tamano-icono" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
}

function generateCardHtmlURL(data) {
    let {
        nombre_original,
        extension,
        UUID,
        UUID_ENC,
        url,
        nombre_img_sistema
    } = data;

    // Sanitize inputs to prevent XSS
    const sanitize = (str) => {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    };

    const sanitizedId = sanitize(UUID_ENC);
    const sanitizedTipoArchivo = sanitize(extension);
    const sanitizedNameArchivo = sanitize(nombre_original);
    // Construimos la URL completa del documento
    const sanitizedDownloadUrl = sanitize(url + nombre_img_sistema);
    const sanitizedFileName = sanitizedNameArchivo || `document.${sanitizedTipoArchivo.toLowerCase()}`;

    return `
        <div class="col-12 col-sm-4 pt-4 card_eliminar_${sanitizedId}">
            <div class="card" style="width: 100%; max-width: 300px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;">
                <div class="card-body">
                    <h5 class="card-title">File type: <span class="card_tipo_archivo">${sanitizedTipoArchivo}</span></h5>
                    <h5 class="card-title">File name: <span class="card_nombre_archivo">${sanitizedNameArchivo}</span></h5>
                    <div class="row">
                        <div class="col-12">
                            <button type="button" class="btn btn-sm btn-eliminar waves-effect waves-themed" data-id="${sanitizedId}">
                                <i class="fas fa-trash tamano-icono" aria-hidden="true"></i>
                            </button>
                            <a class="btn btn-sm btn-descargar waves-effect waves-themed" 
                               data-id="${sanitizedId}" 
                               href="${sanitizedDownloadUrl}" 
                               download="${sanitizedFileName}">
                                <i class="fas fa-download tamano-icono" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
}


function generateUUIDv4() {
   // Generar un prefijo único basado en microsegundos (similar a uniqid en PHP)
   const time_low = Date.now().toString(16).padStart(8, '0') + Math.random().toString(16).slice(2, 6);
   // Generar 8 bytes aleatorios para completar el UUID (similar a random_bytes en PHP)
   const array = new Uint8Array(8);
   crypto.getRandomValues(array);
   const extra_bytes = Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
   // Unir las partes y crear el UUID v4
   const uuid = [
      // 32 bits para "time_low"
      time_low.slice(0, 8),
      // 16 bits para "time_mid"
      time_low.slice(8, 12),
      // 16 bits para "time_hi_and_version" (empieza con 4 para UUID v4)
      '4' + extra_bytes.slice(0, 3),
      // 16 bits para "clk_seq_hi_res" (empieza con 8, 9, A o B para UUID v4)
      ((parseInt(extra_bytes.slice(3, 7), 16) & 0x3fff) | 0x8000).toString(16),
      // 48 bits para "node"
      extra_bytes.slice(7, 12) + Math.random().toString(16).slice(2, 7)
   ].join('-');
   return uuid;
}

function uuidToBase64UrlRFC7515(uuid) {
   // Eliminar los guiones del UUID
   const cleanUuid = uuid.replace(/-/g, '');
   // Convertir el UUID de hexadecimal a binario
   const binaryUuid = new Uint8Array(cleanUuid.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
   // Convertir el binario a Base64
   const base64 = btoa(String.fromCharCode(...binaryUuid));
   // Convertir Base64 a formato URL-safe (RFC 7515)
   const base64Url = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
   return base64Url;
}


$("#btn_aplicar_ventana_confirmacion").off("click")
.on("click", function () {
   console.log("se dio click");
   $('#btn_aplicar_ventana_confirmacion').prop('disabled', true);
   $('#btn_close_ventana_confirmacion').prop('disabled', true);
   $('#btn_cerrar_ventana_confirmacion').prop('disabled', true);

   let opcion_predefinida = $(".tipo_modal_confirmar").val();
   let data_id = $(".data_id").val();
   
   if(opcion_predefinida == "eliminar_card_documento")
   {
      $(".mensaje_espera_moda_confirmacion").text("");

      $(".card_eliminar_" + data_id).remove();

      let archivoEncontrado = arregloArchivos.find((data) => data.UUID_ENC == data_id );
      
      if(archivoEncontrado)
      {
        arregloArchivos = arregloArchivos.filter((data) => data.UUID_ENC != data_id );

        if( !isEmpty(archivoEncontrado.id) )
        {
          arregloArchivosEliminados.push(archivoEncontrado);
        }
        
      }

      $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
      $('#btn_close_ventana_confirmacion').prop('disabled', false);
      $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
      
      $("#ventana_confirmacion").modal("hide");

   }

   if(opcion_predefinida == "navegar_pantalla_siguiente")
   {
      window.location = URL_BASE + "credit/pre-approval-prospecting/"+data_id;
   }
   
 
});

$("#btn_cerrar_ventana_confirmacion").off("click")
.on("click", function () {
   
   $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
   $('#btn_close_ventana_confirmacion').prop('disabled', false);
   $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
   $("#ventana_confirmacion").modal("hide");
 
});

$("#btn_close_ventana_confirmacion").off("click")
.on("click", function () {
   $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
   $('#btn_close_ventana_confirmacion').prop('disabled', false);
   $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);
   
   $("#ventana_confirmacion").modal("hide");
 
});

$('.btn_cerrar_confirmacion_modal').click(function() {
   $("#modalMensaje").modal("hide");
});

$('.abrir_modal_contacto').click(function() {
   $("#modal_asignar_clientes_contactos").modal("show");
});



$('.modal_submit').click(function() {

    var _url = $("#_url").val();

    //company_name
    //code
    //business_number
    //url
    //email
    //phone
    //fax  
    //logo_url
    //address1
    //city
    //state
    //zip
    //country
    //f_type 
    //cid

    const informacion_filtrada = {
        company_name:         $("[name='company_name']").val(),
        code:                 $("[name='code']").val(),
        business_number:      $("[name='business_number']").val(),
        url:                  $("[name='url']").val(),
        email:                $("[name='email']").val(),
        phone:                $("[name='phone']").val(),
        fax:                  $("[name='fax']").val(),
        logo_url:             $("[name='logo_url']").val(),
        address1:             $("[name='address1']").val(),
        city:                 $("[name='city']").val(),
        state:                $("[name='state']").val(),
        zip:                  $("[name='zip']").val(),
        country:              $("[name='country']").val(),
        f_type:               $("[name='f_type']").val(),
        cid:                  $("[name='cid']").val(),
        
        arregloArchivos:           arregloArchivos,
        arregloArchivosEliminados: arregloArchivosEliminados
    };

    console.log(JSON.stringify(informacion_filtrada));
    //console.log(_url + "contacts/add_company_post_v1/");
    //return;

    $.ajax({
       type: "POST",
       url: _url + "contacts/add_company_post_v1/",
       data: JSON.stringify(informacion_filtrada), 
       contentType: "application/json", 
       success: function (response) {

        console.log(response);

          try {

            let info = JSON.parse(response);

            if(info.type == "success")
            {
                toastr.success(info.message);

                location.reload();
                
            }else{
                toastr.error(info.message);
            }

            console.log(info); 

          } catch (error) {

            console.log(
               "Error al parsear la respuesta  : " +
                  error.message,
            );

            Swal.fire({
               icon: "error",
               title: "Oops...",
               text: "Error loading information " + error.message + "!",
            });
             
          }
       },

       error: function (xhr, status, error) {
          console.log(
             "Error en la solicitud  : " +
                status +
                " - " +
                error,
          );

          Swal.fire({
             icon: "error",
             title: "Oops...",
             text: "Error loading your details: " + error + "!",
          });
          
       },
    });

    //console.log("asaas");

});

$('.file').on('change', function() {
 
    getFileBase64AndExtension('#file', function(result) {
      if (result.error) {
            toastr.error(result.error);
            return;
      }

      base64_original  = result.base64;
      const base64Data = result.base64.split(',')[1]; // Extract only the Base64 part
 
      base64          = base64Data;
      extension       = result.extension;
      nombre_original = result.name;

      let UUID     = generateUUIDv4();
      let UUID_ENC = uuidToBase64UrlRFC7515(UUID);

      let informacionFront = {
        base64: base64,
        base64_original: base64_original,
        nombre_original: nombre_original,
        extension: extension,
        UUID: UUID,
        UUID_ENC: UUID_ENC,
      };

      arregloArchivos.push(informacionFront);

      console.log(JSON.stringify(informacionFront));
       
      $(".card_container").append( generateCardHtml(
            informacionFront
        ) 
      );

      eventoEliminarDocumento();

      $(".file").val("");

    });
});

function eventoEliminarDocumento() 
{
   $('.btn-eliminar').off('click');
   $('.btn-eliminar').on('click', function() {
      
      let data_id = $(this).data("id");
      console.log("data_id eliminar: " + data_id);

      $(".titulo_modal_confirmar").text("You are sure?");
      $(".mensaje_modal_confirmar").text("Are you sure you want to delete this record?");
      $(".mensaje_espera_moda_confirmacion").text("");
      $(".tipo_modal_confirmar").val("eliminar_card_documento");
      $(".data_id").val(data_id);
      $('#btn_aplicar_ventana_confirmacion').prop('disabled', false);
      $('#btn_close_ventana_confirmacion').prop('disabled', false);
      $('#btn_cerrar_ventana_confirmacion').prop('disabled', false);

      $('#btn_cerrar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CERRAR,
         'color': COLOR_TEXT_VENTANA_CERRAR
      });
 

      $('#btn_aplicar_ventana_confirmacion').css({
         'background-color': COLOR_FONDO_VENTANA_CONFIRMACION,
         'color': COLOR_TEXT_VENTANA_CONFIRMACION,
         //'display': "none"
      });

      $("#ventana_confirmacion").modal("show");

 
   });

}


function getFileBase64AndExtension(inputSelector, callback) {
   const fileInput = $(inputSelector)[0];
   if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
      callback({ error: "No file selected" });
      return;
   }
   const file = fileInput.files[0];
   const reader = new FileReader();
   
   // Get file extension
   const fileName = file.name;
   const extension = fileName.split('.').pop().toLowerCase();
   reader.onload = function(e) {
      const base64String = e.target.result; // Full data URL (e.g., "data:image/png;base64,...")
      callback({
            base64: base64String,
            extension: extension,
            name: file.name
      });
   };

   reader.onerror = function() {
      callback({ error: "Error reading file" });
   };
   reader.readAsDataURL(file);
}

</script>
{/literal}