<!--
Archivo: CotizCreatedIng.html
Ruta: src\templates\Operaciones\Ingenieria\CotizCreatedIng.html
Lenguaje: HTML
-->

{% extends "layout.html" %}

{% block title %}{{ _('Creación de Cotización') }}{% endblock %}

{% block content %}

<!-- DataTables CSS (Última versión estable) -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

<!-- Botones de DataTables (Última versión estable) -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.10.10/dist/autoNumeric.min.js"></script>


<link rel="stylesheet" href="{{ url_for('static', filename='css/Operaciones/Ingenieria/Cotiz/CotizCreatedIng.css') }}">

<script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.min.js"></script>

<!-- Botones de DataTables (Última versión estable) -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

<style>

/* Estilo para moneda con prefijo $ fijo */


.currency {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #333;
  font-weight: 500;
}

/* prefijo $ fijo */
.currency::before {
  content: "$ ";
  color: #198754;
  font-weight: 600;
}

/* Inputs más anchos y altos */
.form-section .input-group {
    width: 250%;
    /* Más ancho que el original */
}

.form-section .form-control {
    height: 50px;
    /* Más alto */
    font-size: 0.80rem;
    /* Letra un poco más pequeña */
}

/* Ajustar los spans ($ y %) para que coincidan con la altura */
.form-section .input-group-text {
    height: 50px;
    font-size: 0.80rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo para select deshabilitado personalizado */
.select-disabled {
    background-color: #ccc;
    /* gris oscuro */
    color: #555;
    cursor: not-allowed;
}

/* CSS (colócalo en tu CSS principal) */
#unidadTiempo:disabled {
    background-color: #CCCCCC !important;
    color: #666666 !important;
    cursor: not-allowed;
}

/* opcional: transición suave */
#unidadTiempo {
    transition: background-color 0.18s ease;
}
</style>

<!--  
<link rel="stylesheet" href="{{ url_for('static', filename='css/Operaciones/Ingenieria/PE/PE_DM/CZM_GensetModel.css') }}">
-->

<main>
    <section class="clean-block">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">{{ _('Creación de Cotización') }}</h2>
                <p>{{ _(' Bienvenido al creador de cotizaciones. ') }}</p>
            </div>

            <div class="form-main-container">
                <div class="form-section">
                    <div class="row-flex">
                        <label class="flex-auto" for="opnumber">Número de Tarea:</label>
                        <input id="opnumber" class="flex-1-min100 form-control">
                        <button id="opbtn" class="flex-1-min100 btn-custom btn-primary">Buscar</button>
                        <div class="flex-8"></div> <!-- Espaciador -->
                    </div>
                </div>
                <!-- Datos de la Oportunidad -->
                <form id="Forms-opotunity" class="form-section">
                    <h3 class="form-title mb-2">Datos de la Oportunidad</h3>

                    <div class="spacer mb-4"></div>

                    <div class="row-3col">
                        <div class="form-group">
                            <label for="CRM_OpportunityNumber">No. de Oportunidad</label>
                            <input type="text" id="CRM_OpportunityNumber" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactName">Nombre del Contacto</label>
                            <input type="text" id="CRM_ContactName" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactType">Tipo de Contacto</label>
                            <input type="text" id="CRM_ContactType" class="form-control" disabled>
                        </div>
                    </div>
                    <div class="row-3col">
                        <div class="form-group">
                            <label for="CRM_AssignedSalesperson">Vendedor Asignado</label>
                            <input type="text" id="CRM_AssignedSalesperson" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactAdress">Dirección</label>
                            <input type="text" id="CRM_ContactAdress" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactColonia">Colonia</label>
                            <input type="text" id="CRM_ContactColonia" class="form-control" disabled>
                        </div>
                    </div>
                    <div class="row-3col">
                        <div class="form-group">
                            <label for="CRM_ContactCity">Ciudad</label>
                            <input type="text" id="CRM_ContactCity" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactNumber">Número</label>
                            <input type="text" id="CRM_ContactNumber" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactCountry">País</label>
                            <input type="text" id="CRM_ContactCountry" class="form-control" disabled>
                        </div>
                    </div>
                    <div class="row-3col">
                        <div class="form-group">
                            <label for="CRM_ContactLegalIdentifier">Identificador Legal</label>
                            <input type="text" id="CRM_ContactLegalIdentifier" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactZip">Código Postal</label>
                            <input type="text" id="CRM_ContactZip" class="form-control" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactState">Estado</label>
                            <input type="text" id="CRM_ContactState" class="form-control" disabled>
                        </div>
                    </div>

                    <div class="form-row-group">
                        <div class="form-group">
                            <label for="CRM_ContactEmail">Correo Electrónico</label>
                            <input type="email" id="CRM_ContactEmail" class="form-control" disabled>
                        </div>
                        <div class="form-group"></div>
                        <div class="form-group"></div>
                    </div>
                </form>

<!--  CATALOGO DE CONCEPTOS  -->
<div class="form-section">
    <h3 class="form-title mb-2" id="conceptsCatalog">Catálogo de Conceptos</h3>

    <section class="container-fluid py-3">
        <!-- 🔹 CONTENEDOR FIJO -->
        <div id="ApprovalAccessDistributorsContainer" class="table-responsive">
            <table id="ApprovalAccessDistributorsTable"
                class="table table-striped table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th scope="col">No. de Parte</th>
                        <th scope="col">Descripción</th>
                        <th scope="col">Cantidad</th>
                        <th scope="col">Unidad</th>
                        <th scope="col">Precio Unitario</th>
                        <th scope="col">Importe</th>
                        <th scope="col">Acciones</th>
                    </tr>
                    <tr>
                        <th><input type="text" class="form-control form-control-sm"
                                placeholder="Buscar número de parte"></th>
                        <th><input type="text" class="form-control form-control-sm"
                                placeholder="Buscar descripción"></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="ApprovalAccessDistributorsbody">
                    <!-- Se llena dinámicamente -->
                </tbody>
            </table>
        </div>
    </section>

                    <!-- BUTTONS -->
                    <div class="row-2col">
                        <div class="row-flex">
                            <button id="btn_agregar" class="btn btn-primary"><i class="fa fa-plus"
                                    aria-hidden="true"></i>
                                Agregar
                            </button>

                            <button id="importBtn" class="btn btn-primary position-relative">
                                <i class="fa fa-upload" aria-hidden="true"></i> Importar
                                <input id="fileInput" type="file" accept=".xlsx" />
                            </button>
                        </div>
                        <div class="row-actions end">
                            <button id="downloadFormat" class="btn btn-primary">
                                <i class="fa fa-download" aria-hidden="true"></i>Descargar Plantilla</button>
                        </div>

                    </div>

                    <!-- === Controles de cálculo (debajo de los botones) === -->
                    <div class="spacer mb-3"></div>

                </div>

                <!-- Costeo caso 1 -->
                <div  class="form-section costeo">

                    <div class="container p-3">
                        <!-- Fila 1: h3 centrado -->
                        <div class="row">
                            <div class="col d-flex justify-content-center align-items-center">
                                <h3 class="form-title" id="costing-case-title">Cálculo financiero</h3>
                            </div>
                        </div>

                        <!-- Fila 2: switches -->
                        <div class="row mt-3">
                            <div class="col d-flex justify-content-center gap-5">
                                <!-- Switch 1 -->
                                <div class="form-check form-switch">
                                    <input class="form-check-input form-switch-Neodata" type="checkbox"
                                        id="switchNeodataOrigin" style="transform: scale(1.6);">
                                    <label class="form-check-label fs-5 ms-2" for="switchNeodataOrigin">
                                        Origen Neodata
                                    </label>
                                </div>

                                <!-- Switch 2 -->
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="switchTender"
                                        style="transform: scale(1.6);">
                                    <label class="form-check-label fs-5 ms-2" for="switchTender">
                                        Es una Licitación
                                    </label>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="container">
                        <!-- Fila Costo Directo -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputDirectCost">Costo Directo</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="text" class="form-control fs-6 input-direct-cost text-end"
                                        id="inputDirectCost" placeholder="0.00" disabled>
                                </div>
                            </div>
                        </div>

                        <!-- Fila Indirecto -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputIndirectValue">Indirecto</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control input-indirect-value text-end"
                                        id="inputIndirectValue" placeholder="0.00" min="0" step="0.01" disabled>
                                </div>
                                <div class="input-group w-100">
                                    <span class="input-group-text">%</span>
                                    <input type="number" class="form-control input-indirect-percent text-end"
                                        id="inputIndirectPercent" placeholder="0" disabled>
                                </div>
                            </div>
                        </div>

                        <!-- Fila Financiamiento -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputFinancingValue">Financiamiento</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control input-financing-value text-end"
                                        id="inputFinancingValue" placeholder="0.00" min="0" step="0.01" disabled>
                                </div>
                                <div class="input-group w-100">
                                    <span class="input-group-text">%</span>
                                    <input type="number" class="form-control input-financing-percent text-end"
                                        id="inputFinancingPercent" placeholder="0" disabled>
                                </div>
                            </div>
                        </div>

                        <!-- Fila Utilidad -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputProfitValue">Utilidad</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control input-profit-value text-end"
                                        id="inputProfitValue" placeholder="0.00" min="0" step="0.01" disabled>
                                </div>
                                <div class="input-group w-100">
                                    <span class="input-group-text">%</span>
                                    <input type="number" class="form-control input-profit-percent text-end"
                                        id="inputProfitPercent" placeholder="0" disabled>
                                </div>
                            </div>
                        </div>

                        <!-- Fila Importe de la propuesta (Sin gastos de operación) -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="proposedAmountValue">Importe de la propuesta (Sin
                                    gastos de operación)</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control fs-6 input-proposedAmountValue text-end"
                                        id="inputProposedAmountValue" placeholder="0.00" disabled>
                                </div>
                            </div>
                        </div>

                        <!-- Fila Gastos de operación -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputOperatingExpenses">Gastos de
                                    operación</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control input-operating-expenses-value text-end"
                                        id="inputOperatingExpensesValue" placeholder="0.00" min="0" step="0.01"
                                        disabled>
                                </div>
                                <div class="input-group w-100">
                                    <span class="input-group-text">%</span>
                                    <input type="number" class="form-control input-operating-expenses-percent text-end"
                                        id="inputOperatingExpensesPercent" placeholder="0" disabled>
                                </div>
                            </div>
                        </div>

                        <!-- Precio de Venta (mínimo) -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputMinSalePrice">Precio de venta
                                    (mínimo)</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control input-min-sale-price text-end"
                                        id="inputMinSalePrice" placeholder="0.00" disabled>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="container">
                        <!-- Fila Descuento máximo autorizado -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputMaxDiscount">Descuento máximo
                                    autorizado</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control input-max-discount-value text-end"
                                        id="inputMaxDiscountValue" placeholder="0.00" min="0" step="0.01" disabled>
                                </div>
                                <div class="input-group w-100">
                                    <span class="input-group-text">%</span>
                                    <input type="number" class="form-control input-max-discount-percent text-end"
                                        id="inputMaxDiscountPercent" placeholder="0" disabled>
                                </div>
                            </div>
                        </div>

                        <!-- Fila Precio de Lista -->
                        <div class="row mb-3 align-items-center">
                            <div class="col-12 col-md-3 text-start">
                                <label class="form-label fw-bold" for="inputListPrice">Precio de Lista</label>
                            </div>
                            <div class="col-12 col-md-6 d-flex flex-column flex-md-row justify-content-center gap-2">
                                <div class="input-group w-100">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control input-list-price text-end"
                                        id="inputListPrice" placeholder="0.00" disabled>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Archivos adjuntos -->
                <div class="form-section adjuntos">
                    <h3 class="form-title mb-2">Archivos Adjuntos</h3>
                    <div class="row-1col mt-3" style="display:none">
                        <div class="form-group">
                            <label for="In-PFinalArchivo">Documentos</label>
                            <div class="file-input-container btn-styles-cotizForm">
                                <input type="file" id="In-PFinalArchivo" multiple accept=".pdf,.doc,.docx">
                                <div class="file-input-display">
                                    <span class="file-input-icon">📁</span>
                                    <span>Arrastra archivos aquí o haz clic para seleccionar</span>
                                </div>
                            </div>
                            <div class="mt-4" id="file-preview-container"></div>
                        </div>
                    </div>

                    <upload-file-component
                    id="uploader"
                    module-name="FormAire"
                    file-type="Aire"
                    display-name="Aires"
                    max-file-size="2097152"
                    allowed-extensions='[".pdf", ".doc", ".docx", ".jpg", ".png"]'>
                    </upload-file-component>

                <button id="btnEnviar" style="display:none">Subir archivos</button>
                </div>

                <!-- Condiciones y Términos Técnicos -->
                <div class="form-section condiciones">
                    <h3 class="form-title mb-2">
                         Términos Técnicos y Condiciones
                    </h3>

                    <div class="row-1col">
                        <div class="field-group">
                            <label for="address">Términos de Ingeniería</label>
                            <textarea id="address" rows="6"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Tiempo de ejecución -->
                <div class="form-section condiciones container mt-3">
                    <h3 class="form-title mb-3">Tiempo de ejecución</h3>

                    <form id="formTiempo" class="needs-validation" novalidate>
                        <!-- Fila para tiempo de ejecución -->
                        <div class="row align-items-center mb-3">
                            <div class="col-auto">
                                <label for="tiempoEjecucion" class="col-form-label fw-semibold">Tiempo:</label>
                            </div>

                            <div class="col-md-3">
                                <input type="number" id="tiempoEjecucion" class="form-control btn-styles-cotizForm"
                                    placeholder="Ej. 30" min="1" step="1" required />
                                <div class="invalid-feedback">
                                    Ingresa un número válido mayor a 0.
                                </div>
                            </div>

                            <div class="col-md-3 mt-2">
                                <select id="unidadTiempo" style="background-color: #CCCCCC;"
                                    class="form-select select-disabled" required>
                                    <option value="" selected>Selecciona...</option>
                                    <option value="dias">Días</option>
                                    <option value="semanas">Semanas</option>
                                    <option value="meses">Meses</option>
                                </select>
                                <div st class="invalid-feedback">
                                    Selecciona una unidad de tiempo.
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>

            <!-- Modal Buscador de Partes -->
            <div class="modal fade modal-stretch" id="BuscadorPartesModal" tabindex="-1"
                aria-labelledby="BuscadorPartesModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg modal-custom-width">
                    <div class="modal-content">

                        <!-- Header -->
                        <div class="modal-header">
                            <h5 class="modal-title" id="BuscadorPartesModalLabel">Buscador de Partes</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Cerrar"></button>
                        </div>

                        <!-- Body -->
                        <div class="modal-body">
                            <form class="modal-form-custom">
                                <!-- Buscador -->
                                <div class="form-row">
                                    <div class="form-group w-100">
                                        <input type="text" id="searchInput" class="form-control"
                                            placeholder="Buscar por No. de Parte o Descripción..." />
                                    </div>
                                </div>

                                <!-- Tabla -->
                                <div class="form-row mt-3">
                                    <div class="form-group w-100">
                                        <div id="tableContainer" class="table-responsive">
                                            <table class="table table-striped table-hover align-middle">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>No. de Parte</th>
                                                        <th>Descripción</th>
                                                        <th>Último Costo</th>
                                                        <th>Última Fecha</th>
                                                        <th>Acción</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tableBody">
                                                    <!-- El contenido se generará con JavaScript -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- Form de selección -->
                                <div id="selectionForm" class="mt-4" style="display: none;">
                                    <div class="form-row">
                                        <div class="form-group">
                                            <h5 class="mb-3">Agregar ítem seleccionado</h5>
                                        </div>
                                    </div>

                                    <div class="form-row row g-3">
                                        <div class="form-group col-md-6">
                                            <label for="selectedItem" class="form-label">No. de Parte</label>
                                            <input type="text" id="selectedItem" class="form-control" readonly />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="selectedDescription" class="form-label">Descripción</label>
                                            <input type="text" id="selectedDescription" class="form-control" readonly />
                                        </div>
                                    </div>

                                    <div class="form-row row g-3 mt-1">
                                        <div class="form-group col-md-6">
                                            <label for="unitPrice" class="form-label">Precio Unitario</label>
                                            <input type="number" id="unitPrice" class="form-control" step="0.01" />
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="quantity" class="form-label">Cantidad</label>
                                            <input type="number" id="quantity" class="form-control" value="1" min="1" />
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Footer -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <!-- Este botón agrega el item seleccionado (usa tu función JS) -->
                            <button type="button" class="btn btn-primary" onclick="addSelected()">Agregar a la
                                Cotización</button>
                        </div>

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

            <!-- Modal: Agregar Item -->
            <div class="modal fade" id="editItemModal" tabindex="-1" aria-labelledby="AgregarItemModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-custom-width">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="AgregarItemModalLabel">Edición de ítem</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Cerrar"></button>
                        </div>

                        <form id="agregarItemForm" class="modal-form-custom">
                            <div class="modal-body">
                                <div class="row g-3">
                                    <!-- No. Parte -->
                                    <div class="col-12">
                                        <label for="ai_partNum" class="form-label">No. de Parte</label>
                                        <input type="text" id="ai_partNum" name="partNum" class="form-control"
                                            required />
                                    </div>

                                    <!-- Descripción -->
                                    <div class="col-12">
                                        <label for="ai_description" class="form-label">Descripción</label>
                                        <textarea id="ai_description" name="description" class="form-control"
                                            required></textarea>
                                    </div>

                                    <!-- Cantidad y Unidad -->
                                    <div class="col-md-6">
                                        <label for="ai_quantity" class="form-label">Cantidad</label>
                                        <input type="number" id="ai_quantity" name="quantity" class="form-control"
                                            value="1" min="0" step="1" required />
                                    </div>
                                        
                                    <div class="col-md-6">
                                        <label for="ai_unit" class="form-label">Unidad</label>
                                        <select id="ai_unit" name="unit" class="form-select" required>
                                            <option value="" disabled selected>Seleccione una unidad</option>
                                            <!-- Las opciones se generarían dinámicamente desde la base de datos -->
                                            <option value="ACT">ACTIVIDAD</option>
                                            <option value="BOL">BOLSA</option>
                                            <option value="BUL">BULTO</option>
                                            <option value="C62">C62 (UNO)</option>
                                            <option value="CAM">CAMIÓN</option>
                                            <option value="CB">CUBETA</option>
                                            <option value="CJ">CAJA</option>
                                            <option value="CM">CENTÍMETRO</option>
                                            <option value="DIA">DÍA</option>
                                            <option value="ELE">ELEMENTO</option>
                                            <option value="EQUIPO">EQUIPO</option>
                                            <option value="FT">PIE</option>
                                            <option value="FT2">PIE CUADRADO</option>
                                            <option value="GL">GALÓN</option>
                                            <option value="GR">GRAMO</option>
                                            <option value="GT">GASTO</option>
                                            <option value="HA">HECTÁREA</option>
                                            <option value="HR">HORA</option>
                                            <option value="IN">PULGADA</option>
                                            <option value="IN2">PULGADA CUADRADA</option>
                                            <option value="JGO">JUEGO</option>
                                            <option value="KG">KILOGRAMO</option>
                                            <option value="KM">KILÓMETRO</option>
                                            <option value="KIT">KIT</option>
                                            <option value="KWH">KILOVATIO</option>
                                            <option value="LB">LIBRA</option>
                                            <option value="LOTE">LOTE</option>
                                            <option value="LT">LITRO</option>
                                            <option value="M">METRO</option>
                                            <option value="M2">METRO CUADRADO</option>
                                            <option value="M3">METRO CÚBICO</option>
                                            <option value="ME">MES</option>
                                            <option value="MI">MILLA</option>
                                            <option value="MIL">MILLAR</option>
                                            <option value="ML">METRO LINEAL</option>
                                            <option value="MM">MILÍMETRO</option>
                                            <option value="MIN">MINUTO</option>
                                            <option value="N/A">NO APLICA</option>
                                            <option value="NC">NOTA DE CRÉDITO</option>
                                            <option value="OZ">ONZA</option>
                                            <option value="PAQ">PAQUETE</option>
                                            <option value="PL">PLACA</option>
                                            <option value="PO">PORRÓN</option>
                                            <option value="PZ">PIEZA</option>
                                            <option value="QU">QUINCENA</option>
                                            <option value="ROL">ROLLO</option>
                                            <option value="SE">SEMANA</option>
                                            <option value="SERV">SERVICIO</option>
                                            <option value="SET">SET</option>
                                            <option value="SG">SEGUNDO</option>
                                            <option value="TB">TAMBO</option>
                                            <option value="TN">TONELADA</option>
                                            <option value="TR">TONELADA DE REFRIGERACIÓN</option>
                                            <option value="UNI">UNIDAD</option>
                                            <option value="XVN">VEHÍCULO</option>
                                            <option value="YD">YARDA</option>
                                        </select>
                                    </div>

                                    <!-- Precio Unitario e Importe -->
                                    <div class="col-md-6">
                                        <label for="ai_unitPrice" class="form-label">Precio Unitario</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="number" id="ai_unitPrice" name="unitPrice" class="form-control"
                                                min="0" step="0.01" value="0.00" required />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="ai_amount" class="form-label">Importe</label>
                                        <div class="input-group">
                                            <span class="input-group-text">$</span>
                                            <input type="text" disabled id="ai_amount" name="amount"
                                                class="form-control" value="0.00" readonly />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Footer con botón centrado -->
                            <div class="modal-footer d-flex flex-column">
                                <span class="text-muted small mb-2">El importe se calcula automáticamente.</span>
                                <div class="d-flex justify-content-center w-100">
                                    <button type="button" class="btn btn-secondary me-2"
                                        data-bs-dismiss="modal">Cancelar</button>
                                    <button type="button" id="btn_agregar2" class="btn btn-primary">Guardar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Botón final -->
            <div class="row-actions center mt-3 boton-final ">
                <button
                    class="search-button-secondary btn-styles-cotizForm btn-custom btn-success w-25 boton-final-enviar"
                    id="boton-final-enviar">
                    <i class="fas fa-sign-out-alt me-1">
                    </i>Enviar Cotización
                </button>
            </div>
        </div>
        </div>
    </section>
</main>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const datosPrueba = [
            {
                Acciones: '<button class="btn btn-sm btn-danger">Eliminar</button>',
                No: 1,
                Partnum: 'IGSA-2023-001',
                Descripción: 'Interruptor termomagnético 20A',
                Cantidad: 5,
                Unidad: 'pza',
                Pin: 'A1234',
                Importe: '1,250.50'
            },
        ];

        const tableBody = document.getElementById('TableBody');

        datosPrueba.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
            <td>${item.Acciones}</td>
            <td>${item.No}</td>
            <td>${item.Partnum}</td>
            <td>${item.Descripción}</td>
            <td>${item.Cantidad}</td>
            <td>${item.Unidad}</td>
            <td>${item.Pin}</td>
            <td>$${item.Importe}</td>
            `;
            tableBody.appendChild(row);
        });
    });
</script>

<!-- jQuery (Debe ir antes de cualquier otro script de DataTables) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Axios cdn -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<!-- Botones de DataTables (Última versión estable) -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

<!-- Dependencias para exportar a Excel/PDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

<script src="{{ url_for('static', filename='js/Operaciones/Ingenieria/Cotiz/CotizCreatedIng.js') }}"></script>

<script>
</script>
{% endblock %}
