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

{% extends "layout.html" %}

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

{% block content %}
<!-- Conexion de CSS CotizEdit -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/Operaciones/Ingenieria/Cotiz/CotizEdit.css') }}">

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


<main>
    <section class="clean-block">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">{{ _('Editar Cotización') }}</h2>
                <p>{{ _(' Bienvenido a editar una nueva cotización existente. ') }}</p>
            </div>
            
            <div class="form-main-container">
                <!-- Sección: 1 NUMERO DE COTIZACION -->
                <div class="form-section">
                    <div class="row-flex">
                        <label class="flex-auto" for="opnumber">{{ _(' Numero 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>

                <!-- Sección: 2 DATOS DE LA OPORTUNIDAD -->
                <form id="Forms-opotunity" class="form-section">
                    <h3 class="form-title mb-2">{{ _(' Datos de la Oportunidad ') }}</h3>
                        <!-- CAMPOS: NO. DE OPORTUNIDAD, NOMBRE DEL CONTACTO, TIPO DE CONTACTO -->                  
                        <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>

                        <!-- CAMPOS: VENDEDOR ASIGNADO, DIRECCION, COLONIA -->
                        <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>

                        <!-- CAMPOS: CIUDAD, NUMERO, PAIS -->
                        <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>

                        <!-- CAMPOS: IDENTIFICADOR LEGAL, CODIGO POSTAL, ESTADO -->
                        <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>

                        <!-- CAMPOS: CORREO ELECTRONICO -->
                        <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>

                <!-- Sección: 3 CATALOGO DE CONCEPTOS  -->
                <div class="form-section">
                    <h3 class="form-title mb-2">{{ _(' Catálogo de Conceptos ') }}</h3>
                    <section class="clean-block clean-form dark">
                        <table id="CotizEditTable" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{{ _('No') }}</th>
                                    <th>{{ _('Partnum') }}</th>
                                    <th>{{ _('Descripción') }}</th>
                                    <th>{{ _('Cantidad') }}</th>
                                    <th>{{ _('Unidad') }}</th>
                                    <th>{{ _('Pin') }}</th>
                                    <th>{{ _('Importe') }}</th>
                                    <th>{{ _('Acciones') }}</th>                                    
                                </tr>
                                <tr>
                                    <th></th>
                                    <th><input type="text" placeholder="{{ _('Buscar Partnum') }}"></th>
                                    <th><input type="text" placeholder="{{ _('Buscar Descripción') }}"></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th> <!-- No necesitamos búsqueda en la columna de acciones -->
                                </tr>
                            </thead>
                            <tbody id="CotizEditbody">
                                <!-- Los datos se cargarán dinámicamente con JavaScript -->
                            </tbody>
                        </table>
                    </section>

                    <!-- Sección: 3 BOTONES -->
                    <div class="row-2col">                        
                        <div class="row-flex">
                            <!-- CAMPOS: AGREGAR -->
                            <button class="btn btn-primary">
                                <i class="fa fa-plus" aria-hidden="true"></i>
                                {{ _(' Agregar ') }}
                            </button>

                            <!-- CAMPOS: IMPORTAR -->
                            <button class="btn btn-primary">
                                <i class="fa fa-upload" aria-hidden="true"></i>
                                {{ _(' Importar ') }}
                            </button>
                        </div>

                        <div class="row-actions end">
                            <!-- CAMPOS: DESCARGAR PLANTILLA -->
                            <button class="btn btn-primary">
                                <i class="fa fa-download" aria-hidden="true"></i>
                                {{ _(' Descargar Plantilla ') }}
                            </button>
                        </div>

                    </div>
                </div>

                <!-- Sección: 4 ARCHIVOS ADJUNTOS -->
                <div class="form-section">
                    <h3 class="form-title mb-2">{{ _(' Archivos Adjuntos ') }}</h3>
                    <div class="row-1col mt-3">
                        <div class="form-group">
                            <label for="In-PFinalArchivo">{{ _(' Documentos ') }}</label>
                            <div class="file-input-container">
                                <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>
                </div>

                <!-- Sección: 5 CONDICIONES Y TERMINOS TECNICOS -->
                <div class="form-section">
                    <h3 class="form-title mb-2">
                        {{ _(' Condiciones y Términos Técnicos ') }}                        
                    </h3>
                    <!-- CAMPOS: VIGENCIA, DIAS -->
                    <div class="row-3col">
                        <div class="field-group">
                            <div class="row-flex mb-3">
                                <label class="flex-auto">{{ _(' Vigencia: ') }}</label>
                                <input type="text" class="form-control w-25" placeholder="30">
                                <label class="flex-auto">{{ _(' dias ') }}</label>
                            </div>
                        </div>
                    </div>

                    <!-- CAMPOS: TERMINOS DE INGENIERIA -->
                    <div class="row-1col">
                        <div class="field-group">
                            <label for="address">{{ _(' Términos de Ingenieria ') }}</label>
                            <textarea id="address" rows="6"></textarea>
                        </div>
                    </div>
                </div>
              
                <!-- Sección: 6 CALCULO FINANCIERO -->
                <div class="form-section">
                    <h3 class="form-title mb-2">{{ _(' Cálculo Financiero ') }}</h3>
                    <div class="row-2col">
                        <div class="form-group">
                            <label class="search-label">Costo Total:</label>
                            <input type="number" class="search-input form-control" placeholder="">                        
                        </div>

                        <div class="form-group">
                            <label class="search-label">Utilidad (%):</label>
                            <input type="number" class="search-input form-control" placeholder="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="search-label">Precio Venta:</label>
                        <input type="number" class="search-input form-control" placeholder="">
                    </div>
                </div>               
                
                <!-- Botón final -->
                <div class="row-actions center mt-3">
                    <button class="search-button-secondary btn-custom btn-success w-25">
                        <i class="fas fa-sign-out-alt me-1">
                        </i>{{ _(' Enviar Cotización ') }}
                    </button>
                </div>
            </div>
        </div>
    </section>
</main>


<!-- jQuery (Debe ir antes de cualquier otro script de DataTables) -->
<script src="https://code.jquery.com/jquery-3.6.0.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> -->

<!-- Conexion de JS CotizEdit -->
<script src="{{ url_for('static', filename='js/Operaciones/Ingenieria/Cotiz/CotizEdit.js') }}"></script>

{% endblock %}