<!--
Archivo: GSYCManufacBOMIng.html
Ruta: src\templates\SupYCtrol\GerenteSyc\UtilityMaterials\GSYCManufacBOMIng.html
Lenguaje: HTML
-->

{% extends "layout.html" %}

{% block title %}Ctrl. de Materiales - Sup. y Ctrl.{% endblock %}

{% block content %}

<link rel="stylesheet" href="{{ url_for('static', filename='css/SupYCtrol/GerenteSyC/UtilityMaterials/GSYCManufacBOMIng.css') }}">

<main class="page">
    <section class="clean-block clean-form dark">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">BOM de un elemento manufacturado</h2>
                <p>Visualiza la BOM multinivel de un producto manufacturado por IGSA.</p>
            </div>

            <!-- Indicador de carga -->
            <div id="loading-indicator" style="display: none; text-align: center; margin-top: 10px;">
                <span class="spinner-border text-primary" role="status" aria-hidden="true"></span>
                <span>Procesando BOM...</span>
            </div>

            <!-- Formulario de búsqueda -->
            <div class="row mb-4">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Explotar BOM</h5>
                            <form id="bomForm">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="partNumSearch" class="form-label">Buscar Número de Parte</label>
                                            <input type="text" class="form-control" id="partNumSearch" 
                                                placeholder="Escriba para buscar..." autocomplete="off">
                                            <div id="partSearchResults" class="list-group mt-2" style="display: none;"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="partNum" class="form-label">Número de Parte</label>
                                            <input type="text" class="form-control" id="partNum" required readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="revision" class="form-label">Revisión</label>
                                            <input type="text" class="form-control" id="revision" required readonly>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary" id="explodeBtn">
                                    <i class="fas fa-sitemap"></i> Explotar BOM
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title">Información del Proceso</h6>
                            <div id="processInfo" style="display: none;">
                                <p><strong>Proceso ID:</strong> <span id="processId"></span></p>
                                <p><strong>Estado:</strong> <span id="processStatus"></span></p>
                                <p><strong>Niveles:</strong> <span id="processLevels"></span></p>
                                <p><strong>Materiales:</strong> <span id="processMaterials"></span></p>
                                <p><strong>Operaciones:</strong> <span id="processOperations"></span></p>
                                <p><strong>Tiempo:</strong> <span id="processTime"></span> ms</p>
                                <p><strong>Costo Total:</strong><span id="totalCostDisplay"></span></p>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Resultados -->
            <div id="results" style="display: none;">
                <!-- Pestañas -->
                <ul class="nav nav-tabs" id="bomTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="materials-tab" data-bs-toggle="tab" 
                                data-bs-target="#materials" type="button" role="tab">
                            <i class="fas fa-boxes"></i> Materiales
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="operations-tab" data-bs-toggle="tab" 
                                data-bs-target="#operations" type="button" role="tab">
                            <i class="fas fa-tools"></i> Operaciones
                        </button>
                    </li>
                </ul>
                
                <!-- Contenido de pestañas -->
                <div class="tab-content" id="bomTabContent">
                    <div class="tab-pane fade show active" id="materials" role="tabpanel">
                        <div class="table-responsive mt-3">
                            <table class="table table-striped table-sm" id="materialsTable">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Nivel</th>
                                        <th>Seq</th>
                                        <th>Tipo</th>
                                        <th>Parte</th>
                                        <th>Rev</th>
                                        <th>Descripción</th>
                                        <th>Cantidad</th>
                                        <th>UDM</th>
                                        <th>TranNum</th>
                                        <th>TranDate</th>
                                        <th>MtlUnitCost</th>
                                        <th>LbrUnitCost</th>
                                        <th>BurUnitCost</th>
                                        <th>SubUnitCost</th>
                                        <th>MtlBurUnitCost</th>
                                        <th>ExtCost</th>
                                        <th>PO</th>
                                        <th>POLine</th>                                        
                                        <th>Status</th>
                                        <th>Editar</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Modal para editar ExtCost - Colocado al final del body -->
                    <div class="modal fade" id="editExtCostModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header bg-primary text-white">
                                    <h5 class="modal-title">Editar ExtCost</h5>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label class="form-label">Costo Actual</label>
                                        <input type="text" class="form-control" id="currentExtCostDisplay" readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Nuevo Costo</label>
                                        <input type="number" step="0.00001" class="form-control" id="extCostInput" required>
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                    <button type="button" class="btn btn-primary" id="saveExtCostBtn">Guardar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!---->

                    <div class="tab-pane fade" id="operations" role="tabpanel">
                        <div class="table-responsive mt-3">
                            <table class="table table-striped table-sm" id="operationsTable">
                                <thead class="table-dark">
                                    <tr>
                                        <th>Nivel</th>
                                        <th>Tipo</th>
                                        <th>Código Op.</th>
                                        <th>Descripción</th>
                                        <th>Horas Est.</th>
                                        <th>UDM</th>
                                        <th>PartTran</th>
                                        <th>TranDate</th>
                                        <th>MtlUnitCost</th>
                                        <th>LbrUnitCost</th>
                                        <th>BurUnitCost</th>
                                        <th>SubUnitCost</th>
                                        <th>MtlBurUnitCost</th>
                                        <th>ExtCost</th>
                                        <th>PO</th>
                                        <th>POLine</th>
                                        <th>Editar</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Alerta para errores -->
            <div id="errorAlert" class="alert alert-danger" style="display: none;" role="alert">
                <i class="fas fa-exclamation-triangle"></i>
                <span id="errorMessage"></span>
            </div>

            <!-- Alerta para éxito -->
            <div id="successAlert" class="alert alert-success" style="display: none;" role="alert">
                <i class="fas fa-check-circle"></i>
                <span id="successMessage"></span>
            </div>

        </div>
    </section>
</main>

<script src="{{ url_for('static', filename='js/SupYCtrol/GerenteSyC/UtilityMaterials/GSYCManufacBOMIng.js') }}"></script>

{% endblock %}