<!--
Archivo: RecepcionCotiz.html (OPTIMIZADO)
Ruta: src\templates\Ventas\Cotiz\RecepcionCotiz.html
Descripción: Plantilla optimizada para recepcion de cotizador al departamento de ingeniería.
Optimización: Mejor estructura, lógica condicional, accesibilidad mejorada
Autor: Equipo de Desarrollo IGSA
Fecha: 2025
-->


{% 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">

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">

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

<style>
    /* ===============================
       🎨 VARIABLES CSS
       =============================== */
    :root {
        /* Colores principales y variantes */
        --primary-color: #1f71c2;
        --primary-color-light: #1f71c249;
        --secondary-color: #007bff;
        --secondary-color-dark: #0056b3;
        
        /* Colores para acciones */
        --success-color: #28a745;
        --success-color-dark: #218838;
        --danger-color: #dc3545;
        --danger-color-dark: #c82333;
        
        /* Colores neutros */
        --light-bg: #e3f2fd;
        --border-color: #ccc;
        --text-color: #333;
        --white: white;
        --black: black;
        --gray-bg: #f8f9fa;
    }

    /* ===============================
       🎨 ESTILOS ORIGINALES DEL FORMULARIO
       =============================== */
    .form-group select.form-control {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        height: calc(1.5em + 0.75rem + 2px);
        line-height: 1.5;
    }

    /* Estilo para unificar el aspecto de todos los elementos deshabilitados */
    .disabled-style {
        background-color: #e9ecef !important;
        color: #6c757d !important;
        cursor: not-allowed;
    }

    /* Estilo para la flecha del select cuando está deshabilitado */
    .disabled-style.form-select {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDFCIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        padding-right: 30px !important;
    }

    /* Restablece los estilos del hover para botones deshabilitados */
    .search-button-secondary[disabled]:hover,
    .btn-custom[disabled]:hover,
    .btn[disabled]:hover {
        cursor: not-allowed;
        background-color: #6c757d;
        border-color: #6c757d;
        transform: none;
        box-shadow: none;
        opacity: 0.65;
    }

    /* ===============================
       🎨 CONTENEDOR GENERAL DE DATATABLES
       =============================== */
    
    #ApprovalAccessDistributorsTable_wrapper {
        background-color: var(--white);
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* ===============================
       📤 ESTILOS PARA BOTONES DE EXPORTACIÓN Y BÚSQUEDA
       =============================== */
    
    /* Contenedor de botones y búsqueda */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_filter {
        float: right;
        text-align: right;
        margin-bottom: 15px;
    }

    #ApprovalAccessDistributorsTable_wrapper .dt-buttons {
        float: left;
        margin-bottom: 15px;
    }

    /* Estilos para los botones de exportación */
    .dt-buttons .dt-button {
        background-color: var(--secondary-color) !important;
        color: var(--white) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        padding: 8px 16px !important;
        border-radius: 4px !important;
        margin-right: 8px !important;
        border: none !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .dt-buttons .dt-button:hover {
        background-color: var(--secondary-color-dark) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    }

    /* Botón de Excel - Verde */
    .dt-buttons .buttons-excel {
        background-color: var(--success-color) !important;
    }

    .dt-buttons .buttons-excel:hover {
        background-color: var(--success-color-dark) !important;
    }

    /* Botón de PDF - Rojo */
    .dt-buttons .buttons-pdf {
        background-color: var(--danger-color) !important;
    }

    .dt-buttons .buttons-pdf:hover {
        background-color: var(--danger-color-dark) !important;
    }

    /* ===============================
       🔍 ESTILOS PARA EL BUSCADOR
       =============================== */
    
    .dataTables_filter {
        font-size: 14px;
        font-weight: 500;
    }

    .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-color);
        font-weight: 600;
    }

    .dataTables_filter input {
        font-size: 13px !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        border: 1px solid var(--border-color) !important;
        transition: all 0.3s ease !important;
        width: 250px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .dataTables_filter input:focus {
        border-color: var(--secondary-color) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    }

    /* ===============================
   🔧 ELIMINAR ESPACIOS EN FILA DE FILTROS
   =============================== */

    /* Reducir padding en todas las celdas de la fila de filtros */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead tr:nth-child(2) th,
    #ApprovalAccessDistributorsTable thead tr:nth-child(2) th {
        background-color: var(--primary-color-light) !important;
        padding: 4px 4px !important; /* 🔥 Reducido de 8px a 4px */
        border: none !important;
        height: auto !important;
        line-height: 1 !important;
    }

    /* Hacer que las celdas VACÍAS (sin input) tengan altura mínima */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead tr:nth-child(2) th:empty,
    #ApprovalAccessDistributorsTable thead tr:nth-child(2) th:empty {
        padding: 2px !important; /* 🔥 Padding mínimo para celdas vacías */
        height: 35px !important; /* 🔥 Altura fija igual a los inputs */
    }

    /* Asegurar que los inputs ocupen todo el espacio disponible */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead input,
    #ApprovalAccessDistributorsTable thead input {
        font-size: 12px !important;
        text-align: center !important;
        padding: 6px 8px !important;
        border: 1px solid #c5d9ed !important;
        border-radius: 4px !important;
        width: 95% !important;
        background-color: var(--white) !important;
        margin: 0 !important; /* 🔥 Sin márgenes */
        box-sizing: border-box !important;
        height: 31px !important; /* 🔥 Altura fija */
    }

    /* Eliminar cualquier espaciado interno adicional */
    #ApprovalAccessDistributorsTable thead tr:nth-child(2) {
        line-height: 1 !important;
    }

    /* ===============================
       🎨 ESTILOS PARA LA TABLA
       =============================== */
    
    /* Tabla principal */
    #ApprovalAccessDistributorsTable {
        table-layout: fixed !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    /* Evitar que DataTables sobreescriba los anchos */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* ===============================
       📋 ESTILOS PARA ENCABEZADOS
       =============================== */
    
    /* Encabezados principales - Azul sólido como la referencia */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead th,
    #ApprovalAccessDistributorsTable thead th {
        background-color: var(--primary-color) !important;
        color: var(--white) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 12px 8px !important;
        border-bottom: 2px solid var(--secondary-color-dark) !important;
    }

    /* Primera fila de encabezados */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead tr:first-child th {
        background-color: var(--primary-color) !important;
    }

    /* Segunda fila - Filtros con fondo azul claro */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead tr:nth-child(2) th {
        background-color: var(--light-bg) !important;
        padding: 8px 4px !important;
    }

    /* Inputs de filtro */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead input,
    #ApprovalAccessDistributorsTable thead input {
        font-size: 12px !important;
        font-family: inherit !important;
        text-align: center !important;
        padding: 6px 8px !important;
        border: 1px solid #c5d9ed !important;
        border-radius: 4px !important;
        outline: none !important;
        width: 95% !important;
        background-color: var(--white) !important;
        transition: all 0.2s ease !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead input:focus,
    #ApprovalAccessDistributorsTable thead input:focus {
        border-color: var(--secondary-color) !important;
        box-shadow: 0 0 0 2px rgba(31, 113, 194, 0.1) !important;
    }

    /* ===============================
       📊 ESTILOS PARA EL CUERPO DE LA TABLA
       =============================== */
    
    #ApprovalAccessDistributorsTable tbody td {
        font-size: 13px !important;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 12px 8px !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    /* Alineación específica por columna */
    #ApprovalAccessDistributorsTable tbody td:nth-child(2),
    #ApprovalAccessDistributorsTable tbody td:nth-child(3) {
        text-align: left !important;
        padding-left: 12px !important;
    }

    /* Filas alternadas con fondo claro */
    #ApprovalAccessDistributorsTable tbody tr:nth-child(odd) {
        background-color: var(--white) !important;
    }

    #ApprovalAccessDistributorsTable tbody tr:nth-child(even) {
        background-color: var(--gray-bg) !important;
    }

    /* Hover en las filas */
    #ApprovalAccessDistributorsTable tbody tr:hover {
        background-color: var(--light-bg) !important;
        transition: background-color 0.2s ease;
    }

    /* ===============================
       📏 ANCHOS DE COLUMNAS
       =============================== */
    
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(1),
    #ApprovalAccessDistributorsTable thead th:nth-child(1),
    #ApprovalAccessDistributorsTable tbody td:nth-child(1) {
        width: 6% !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(2),
    #ApprovalAccessDistributorsTable thead th:nth-child(2),
    #ApprovalAccessDistributorsTable tbody td:nth-child(2) {
        width: 15% !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(3),
    #ApprovalAccessDistributorsTable thead th:nth-child(3),
    #ApprovalAccessDistributorsTable tbody td:nth-child(3) {
        width: 28% !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(4),
    #ApprovalAccessDistributorsTable thead th:nth-child(4),
    #ApprovalAccessDistributorsTable tbody td:nth-child(4) {
        width: 10% !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(5),
    #ApprovalAccessDistributorsTable thead th:nth-child(5),
    #ApprovalAccessDistributorsTable tbody td:nth-child(5) {
        width: 9% !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(6),
    #ApprovalAccessDistributorsTable thead th:nth-child(6),
    #ApprovalAccessDistributorsTable tbody td:nth-child(6) {
        width: 12% !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(7),
    #ApprovalAccessDistributorsTable thead th:nth-child(7),
    #ApprovalAccessDistributorsTable tbody td:nth-child(7) {
        width: 12% !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead table thead tr th:nth-child(8),
    #ApprovalAccessDistributorsTable thead th:nth-child(8),
    #ApprovalAccessDistributorsTable tbody td:nth-child(8) {
        width: 8% !important;
    }

    /* ===============================
       🔘 ESTILOS PARA BOTONES DE ACCIÓN
       =============================== */
    
    #ApprovalAccessDistributorsTable tbody button {
        font-size: 12px !important;
        font-weight: 500 !important;
        padding: 6px 12px !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border: none !important;
        color: var(--white) !important;
        margin: 0 2px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Botón Aprobar - Verde */
    #ApprovalAccessDistributorsTable tbody .btn-approve,
    #ApprovalAccessDistributorsTable tbody button:first-of-type {
        background-color: var(--success-color) !important;
    }

    #ApprovalAccessDistributorsTable tbody .btn-approve:hover,
    #ApprovalAccessDistributorsTable tbody button:first-of-type:hover {
        background-color: var(--success-color-dark) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3) !important;
    }

    /* Botón Rechazar - Rojo */
    #ApprovalAccessDistributorsTable tbody .btn-reject,
    #ApprovalAccessDistributorsTable tbody button:last-of-type {
        background-color: var(--danger-color) !important;
    }

    #ApprovalAccessDistributorsTable tbody .btn-reject:hover,
    #ApprovalAccessDistributorsTable tbody button:last-of-type:hover {
        background-color: var(--danger-color-dark) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(220, 53, 69, 0.3) !important;
    }

    /* ===============================
       📄 ESTILOS PARA LA PAGINACIÓN
       =============================== */
    
    /* Contenedor de la información y paginación */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_info {
        float: left;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--text-color) !important;
        padding: 10px 0 !important;
        margin-top: 10px !important;
    }

    #ApprovalAccessDistributorsTable_wrapper .dataTables_paginate {
        float: right;
        text-align: right;
        margin-top: 10px !important;
    }

    /* Botones de paginación */
    .dataTables_paginate .paginate_button {
        padding: 6px 12px !important;
        margin: 0 2px !important;
        border-radius: 4px !important;
        background-color: var(--white) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-color) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }

    .dataTables_paginate .paginate_button:hover {
        background-color: var(--light-bg) !important;
        border-color: var(--secondary-color) !important;
        color: var(--secondary-color) !important;
    }

    .dataTables_paginate .paginate_button.current {
        background-color: var(--secondary-color) !important;
        color: var(--white) !important;
        border-color: var(--secondary-color) !important;
        font-weight: 600 !important;
    }

    .dataTables_paginate .paginate_button.current:hover {
        background-color: var(--secondary-color-dark) !important;
        border-color: var(--secondary-color-dark) !important;
    }

    .dataTables_paginate .paginate_button.disabled,
    .dataTables_paginate .paginate_button.disabled:hover {
        background-color: var(--gray-bg) !important;
        color: #aaa !important;
        border-color: var(--border-color) !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }

    /* Selector de cantidad de registros */
    .dataTables_length {
        float: left;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .dataTables_length select {
        padding: 6px 30px 6px 10px !important;
        border-radius: 4px !important;
        border: 1px solid var(--border-color) !important;
        margin: 0 8px !important;
        font-size: 13px !important;
        background-color: var(--white) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .dataTables_length select:focus {
        border-color: var(--secondary-color) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    }

    /* Clearfix para flotantes */
    #ApprovalAccessDistributorsTable_wrapper::after {
        content: "";
        display: table;
        clear: both;
    }
    

    /* ===============================
       📱 ESTILOS RESPONSIVOS
       =============================== */
    
    @media screen and (max-width: 1000px) {
        
        /* Ocultar filtros en móviles */
        #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead tr:nth-child(2),
        #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead thead tr:nth-child(2) input {
            display: none !important;
        }

        /* Activar scroll horizontal */
        #ApprovalAccessDistributorsTable_wrapper {
            overflow-x: auto !important;
            white-space: nowrap !important;
        }

        /* Mantener tabla con ancho fijo */
        #ApprovalAccessDistributorsTable {
            width: 1200px !important;
            min-width: 1200px !important;
        }

        /* Prevenir scroll en body */
        body {
            overflow-x: hidden !important;
        }

        /* Encabezados fijos */
        #ApprovalAccessDistributorsTable_wrapper .dataTables_scrollHead {
            position: sticky !important;
            top: 0 !important;
            background-color: var(--primary-color) !important;
            z-index: 1000 !important;
        }

        /* Botones y búsqueda en móviles */
        .dt-buttons,
        .dataTables_filter,
        .dataTables_length {
            float: none !important;
            text-align: center !important;
            margin-bottom: 10px !important;
        }

        .dataTables_filter input {
            width: 100% !important;
            max-width: 300px !important;
        }

        /* Ajustar botones de exportación */
        .dt-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
        }

        .dt-buttons .dt-button {
            flex: 0 1 auto;
            margin: 4px !important;
        }

        /* Paginación en móviles */
        .dataTables_paginate,
        .dataTables_info {
            float: none !important;
            text-align: center !important;
            margin-top: 15px !important;
        }
    }

    /* ===============================
       🎯 AJUSTES FINALES
       =============================== */
    
    /* Eliminar bordes internos innecesarios */
    #ApprovalAccessDistributorsTable_wrapper .dataTables_scroll {
        border: none !important;
    }

    /* Asegurar que el wrapper no tenga overflow por defecto */
    @media screen and (min-width: 1001px) {
        #ApprovalAccessDistributorsTable_wrapper {
            overflow-x: visible !important;
        }
    }
</style>

<main>
    <section class="clean-block">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">{{ _('Recepción de Cotización') }}</h2>
                <p>{{ _(' Bienvenido. Módulo para recepción de cotización al departamento de ingeniería,
                    diseñado para el área comercial de IGSA. ') }}</p>
            </div>

            <div class="form-main-container">
                <div class="form-section">
                    <div class="row-flex">
                        <label class="flex-auto" for="opnumber">Número de Respuesta de Cotización:</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>
                    </div>
                </div>
                <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-style" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactName">Nombre del Contacto</label>
                            <input type="text" id="CRM_ContactName" class="form-control disabled-style" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactType">Tipo de Contacto</label>
                            <input type="text" id="CRM_ContactType" class="form-control disabled-style" 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-style"
                                disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactAdress">Dirección</label>
                            <input type="text" id="CRM_ContactAdress" class="form-control disabled-style" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactColonia">Colonia</label>
                            <input type="text" id="CRM_ContactColonia" class="form-control disabled-style" 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-style" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactNumber">Número</label>
                            <input type="text" id="CRM_ContactNumber" class="form-control disabled-style" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactCountry">País</label>
                            <input type="text" id="CRM_ContactCountry" class="form-control disabled-style" 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-style"
                                disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactZip">Código Postal</label>
                            <input type="text" id="CRM_ContactZip" class="form-control disabled-style" disabled>
                        </div>
                        <div class="form-group">
                            <label for="CRM_ContactState">Estado</label>
                            <input type="text" id="CRM_ContactState" class="form-control disabled-style" 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-style" disabled>
                        </div>
                    </div>
                </form>

                <form id="Forms-oportunity" class="form-section">
                    <h3 class="form-title mb-3">Cálculo Financiero</h3>
                    <div class="container-fluid">
                        <div class="row g-3 mb-4">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="Finance_ListPrice" class="form-label col-4 text-start">Precio de la
                                    propuesta:</label>
                                <div class="col-8">
                                    <input type="text" id="Finance_ListPrice"
                                        class="form-control form-control-lg disabled-style" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 mb-4">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="Finance_Discount" class="form-label col-4 text-start">Descuento:</label>
                                <div class="col-8">
                                    <input type="text" id="Finance_Discount"
                                        class="form-control form-control-lg disabled-style" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 mb-4">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="Finance_OfferPrice" class="form-label col-4 text-start">Precio de la
                                    oferta:</label>
                                <div class="col-8">
                                    <input type="text" id="Finance_OfferPrice"
                                        class="form-control form-control-lg disabled-style" disabled>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="Finance_CurrencyType" class="form-label col-4 text-start">Moneda :</label>
                                <div class="col-8">
                                    <select id="Finance_CurrencyType"
                                        class="form-control form-control-lg disabled-style" disabled
                                        style="appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDFCIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;">
                                        <option value="">Seleccione una opción</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="Finance_IVA" class="form-label col-4 text-start">Inpuesto :</label>
                                <div class="col-8">
                                    <select id="Finance_IVA" class="form-control form-control-lg disabled-style"
                                        disabled
                                        style="appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDFCIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;">
                                        <option value="">Seleccione una opción</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-8 d-flex align-items-center">
                                <label for="Finance_PriceWithIVA" class="form-label col-4 text-start">Precio de venta
                                    con Inpuesto</label>
                                <div class="col-8">
                                    <input type="text" id="Finance_PriceWithIVA"
                                        class="form-control form-control-lg disabled-style" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-12 d-flex justify-content-center mt-3">
                                <button type="button" disabled class="search-button-secondary btn-custom btn-success">
                                    <i class="fas fa-eye me-1"></i> Previsualizar
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="form-section">
                    <h3 class="form-title mb-3">Lineas de Cotización</h3>
                    <section class=" clean-block clean-form dark">
                        <div class="table-responsive">
                            <table id="ApprovalAccessDistributorsTable" class="table table-striped align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ _('No') }}</th>
                                        <th>{{ _('Partnum') }}</th>
                                        <th>{{ _('Descripción') }}</th>
                                        <th>{{ _('Cantidad') }}</th>
                                        <th>{{ _('Unidad') }}</th>
                                        <th>{{ _('Precio unitario') }}</th>
                                        <th>{{ _('Importe') }}</th>
                                        <th>{{ _('Acciones') }}</th>
                                    </tr>
                                    <tr>
                                        <th></th>
                                        <th><input type="text" class="form-control form-control-sm column-filter"
                                                placeholder="{{ _('Buscar Partnum') }}" data-column="1"></th>
                                        <th><input type="text" class="form-control form-control-sm column-filter"
                                                placeholder="{{ _('Buscar Descripción') }}" data-column="2">
                                        </th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="ApprovalAccessDistributorsbody">
                                    <!-- Los datos se cargarán dinámicamente con JavaScript -->
                                </tbody>
                            </table>
                        </div>
                    </section>
                </div>

                <div class="form-section condiciones container mt-3">
                    <h3 class="form-title mb-3">Tiempo de entrega</h3>
                    <form id="formTiempo" class="needs-validation" novalidate>
                        <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 mb-4 mb-md-0">
                                <input type="number" id="tiempoEjecucion"
                                    class="form-control btn-styles-cotizForm disabled-style" placeholder="Ej. 30"
                                    min="1" step="1" required disabled>
                                <div class="invalid-feedback">
                                    Ingresa un número válido mayor a 0.
                                </div>
                            </div>
                            <div class="col-md-3">
                                <select id="unidadTiempo" class="form-select form-control-lg disabled-style" required
                                    disabled>
                                    <option value="" selected>Selecciona...</option>
                                    <option value="0">Días</option>
                                    <option value="1">Semanas</option>
                                    <option value="2">Meses</option>
                                </select>
                                <div st class="invalid-feedback">
                                    Selecciona una unidad de tiempo.
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="form-section">
                    <h3 class="form-title mb-2">
                        Términos y Condiciones
                    </h3>
                    <div class="row-1col">
                        <div class="field-group">
                            <label for="address">Condiciones Comerciales</label>
                            <textarea id="address" rows="6" class="disabled-style" disabled></textarea>
                        </div>
                    </div>
                </div>

                <div class="row-actions center mt-3">
                    <button class="search-button-secondary btn-custom btn-success w-25" disabled>
                        <i class="fas fa-sign-out-alt me-1"></i>Enviar Cotización
                    </button>
                </div>
            </div>
        </div>
    </section>
</main>

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

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

<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>

<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/Ventas/Cotiz/RecepcionCotiz.js') }}"></script>



<script>


</script>
{% endblock %}