<?php
require_once __DIR__ . '/../../includes/layout.php';
$version = '20260520';

renderHeader('Gestión de Compras e Ingresos a Bodega', 'compras');
?>
<style>
/* Modern Glassmorphism Styling para Compras */
.compras-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
}

.glass-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.modern-input {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--surface-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.modern-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Buscador de productos */
.search-container {
    position: relative;
    margin-bottom: 1.5rem;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--surface-card);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin-top: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
    display: none;
}

.search-result-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

.search-result-item:hover {
    background: var(--surface-hover);
}

/* Tabla de Detalle */
.cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

.cart-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

.cart-table td {
    padding: 1rem;
    background: var(--surface-bg);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.cart-table td:first-child {
    border-left: 1px solid var(--border-color);
    border-radius: 0.5rem 0 0 0.5rem;
}

.cart-table td:last-child {
    border-right: 1px solid var(--border-color);
    border-radius: 0 0.5rem 0.5rem 0;
}

.qty-input {
    width: 70px;
    text-align: center;
}

.price-input {
    width: 100px;
    text-align: right;
}

/* Resumen Lateral */
.summary-card {
    position: sticky;
    top: 1.5rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.95rem;
}

.summary-row.total {
    border-bottom: none;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-color);
}

.btn-primary {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 0.375rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: #dc2626;
}

@media (max-width: 1024px) {
    .compras-container {
        grid-template-columns: 1fr;
    }
    .summary-card {
        position: static;
    }
}
</style>

<!-- Tabs Navigation -->
<div class="max-w-[1400px] mx-auto px-4 pt-4">
    <div class="flex gap-2 border-b border-slate-800 pb-3 mb-6" style="border-bottom: 2px solid var(--border-color); display: flex; gap: 0.5rem; margin-bottom: 1.5rem;">
        <button id="btnTabHistorial" onclick="switchComprasTab('historial')" class="tab-btn active" style="padding: 0.6rem 1.2rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.85rem; background: var(--primary-color); border: none; color: white; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);">
            📋 Historial de Compras
        </button>
        <button id="btnTabNueva" onclick="switchComprasTab('nueva')" class="tab-btn" style="padding: 0.6rem 1.2rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.85rem; background: transparent; border: 1px solid transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.2s;">
            ＋ Registrar Compra
        </button>
    </div>
</div>

<div class="max-w-[1400px] mx-auto px-4 pb-6">
    <!-- PANEL 1: HISTORIAL DE COMPRAS -->
    <div id="panelHistorial" class="space-y-6">
        <!-- Filtros y estadísticas del Historial -->
        <div class="glass-card" style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
            <div style="position: relative; display: flex; align-items: center; width: 100%; max-width: 450px;">
                <span style="position: absolute; left: 1rem; color: var(--text-secondary); font-size: 1rem;">🔍</span>
                <input type="text" id="historialSearchInput" oninput="debounceHistorialSearch(this.value)" placeholder="Buscar por número de factura o proveedor..." style="width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; font-size: 0.9rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background: var(--surface-bg); color: var(--text-primary); transition: all 0.2s;">
            </div>
            <div id="historialCountInfo" style="font-size: 0.8rem; color: var(--text-secondary); font-weight: 600;">
                Mostrando 0 compras
            </div>
        </div>

        <!-- Tabla de Historial -->
        <div class="glass-card" style="padding: 0; overflow: hidden; border-radius: 0.75rem;">
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; text-align: left;">
                    <thead>
                        <tr style="border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.01);">
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color);">ID</th>
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color);">Fecha</th>
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color);">Proveedor</th>
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color);">No. Factura</th>
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color);">Tipo Pago</th>
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color);">Estado</th>
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color); text-align: right;">Total</th>
                            <th style="padding: 1rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--text-secondary); tracking-spacing: 0.05em; border-bottom: 1px solid var(--border-color); text-align: center;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="historialTableBody" style="font-size: 0.85rem;">
                        <!-- Cargado dinámicamente -->
                        <tr>
                            <td colspan="8" style="text-align: center; padding: 3rem; color: var(--text-secondary);">
                                <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">⏳</div>
                                Cargando historial de compras...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Controles de Paginación -->
            <div id="historialPagination" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-top: 1px solid var(--border-color); background: rgba(255,255,255,0.01);">
                <!-- Renderizado dinámicamente -->
            </div>
        </div>
    </div>

    <!-- PANEL 2: REGISTRAR COMPRA (Existing Form Grid) -->
    <div id="panelNuevaCompra" style="display: none;">
        <div class="compras-container" style="padding: 0;">
            <!-- Panel Principal -->
            <div class="main-panel">
                
                <!-- Datos de Factura -->
                <div class="glass-card" style="margin-bottom: 1.5rem;">
                    <h2 class="section-title">📄 Datos de la Factura</h2>
                    <div class="form-grid">
                        <div class="form-group" style="grid-column: span 2;">
                            <label>Proveedor</label>
                            <select id="proveedor_id" class="modern-input" required>
                                <option value="">Seleccione un proveedor...</option>
                                <!-- Cargado por JS -->
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Número de Factura</label>
                            <input type="text" id="numero_factura" class="modern-input" placeholder="Ej. A-12345" required>
                        </div>
                        <div class="form-group">
                            <label>Fecha de Compra</label>
                            <input type="date" id="fecha_compra" class="modern-input" value="<?= date('Y-m-d') ?>" required>
                        </div>
                        <div class="form-group">
                            <label>Tipo de Pago</label>
                            <select id="tipo_pago" class="modern-input" onchange="toggleCreditoOptions()">
                                <option value="contado">Contado</option>
                                <option value="credito">Crédito</option>
                                <option value="mixto">Mixto</option>
                            </select>
                        </div>
                        <div class="form-group" id="div_dias_credito" style="display: none;">
                            <label>Días de Crédito</label>
                            <input type="number" id="dias_credito" class="modern-input" value="30">
                        </div>
                        <div class="form-group" id="div_monto_efectivo" style="display: none;">
                            <label>Monto Efectivo (Mixto)</label>
                            <input type="number" step="0.01" id="monto_efectivo" class="modern-input" placeholder="Q 0.00">
                        </div>
                    </div>
                </div>

                <!-- Buscador -->
                <div class="search-container">
                    <div class="search-input-wrapper">
                        <span class="search-icon">🔍</span>
                        <input type="text" id="searchInput" class="search-input" placeholder="Buscar producto por código, nombre o laboratorio..." autocomplete="off">
                    </div>
                    <div id="searchResults" class="search-results"></div>
                </div>

                <!-- Detalle de Compra -->
                <div class="glass-card">
                    <h2 class="section-title">📦 Detalle de Productos</h2>
                    <div style="overflow-x: auto;">
                        <table class="cart-table" id="cartTable">
                            <thead>
                                <tr>
                                    <th>Producto</th>
                                    <th width="120">Presentación</th>
                                    <th width="80">Cant.</th>
                                    <th width="110">Costo Unit.</th>
                                    <th width="120">F. Venc.</th>
                                    <th width="60">Fact.</th>
                                    <th width="110">Subtotal</th>
                                    <th width="50"></th>
                                </tr>
                            </thead>
                            <tbody id="cartItems">
                                <tr>
                                    <td colspan="8" style="text-align: center; padding: 2rem; color: var(--text-secondary);">
                                        Use el buscador de arriba para agregar productos a la factura.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Panel Lateral -->
            <aside>
                <div class="glass-card summary-card">
                    <h2 class="section-title">💰 Resumen</h2>
                    
                    <div class="summary-row">
                        <span>Items:</span>
                        <span id="summary-items">0</span>
                    </div>
                    <div class="summary-row">
                        <span>Cant. Total (Presentaciones):</span>
                        <span id="summary-qty">0</span>
                    </div>
                    <div class="summary-row">
                        <span>Unidades Base a Ingresar:</span>
                        <span id="summary-base-qty">0</span>
                    </div>
                    
                    <div class="summary-row total">
                        <span>TOTAL:</span>
                        <span id="summary-total">Q 0.00</span>
                    </div>

                    <button id="btnGuardarCompra" class="btn-primary" onclick="guardarCompra()" disabled>
                        <span>💾</span> Registrar Ingreso a Bodega
                    </button>
                    <div style="text-align: center; margin-top: 1rem; font-size: 0.8rem; color: var(--text-secondary);">
                        Este proceso recalculará el Costo Promedio Ponderado y actualizará existencias.
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>

<!-- MODAL DE DETALLE DE COMPRA (GLASSMORPHIC) -->
<div id="modalDetalle" class="modal-overlay" style="display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);" onclick="if(event.target === this) cerrarModalDetalle()">
    <div class="glass-card" style="max-width: 900px; w-full; margin: 0 1rem; max-height: 85vh; overflow-y: auto; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column;">
        <!-- Modal Header -->
        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 1.25rem;">
            <div>
                <h3 style="margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem;">
                    🛒 Detalle de Compra <span id="modalCompraId" style="color: var(--primary-color); font-family: monospace; font-size: 0.95rem;">#0</span>
                </h3>
                <p id="modalProveedorNombre" style="margin: 0.25rem 0 0 0; font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; font-weight: 700;"></p>
            </div>
            <button onclick="cerrarModalDetalle()" style="background: transparent; border: none; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; transition: color 0.2s;" onmouseover="this.style.color='var(--text-primary)'" onmouseout="this.style.color='var(--text-secondary)'">✕</button>
        </div>

        <!-- Modal Info Grid -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; background: var(--surface-bg); border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.75rem;">
            <div>
                <div style="font-size: 0.65rem; text-transform: uppercase; tracking: 0.05em; color: var(--text-secondary); font-weight: 600;">Fecha Compra</div>
                <div id="modalFecha" style="font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-top: 0.25rem; font-family: monospace;"></div>
            </div>
            <div>
                <div style="font-size: 0.65rem; text-transform: uppercase; tracking: 0.05em; color: var(--text-secondary); font-weight: 600;">Tipo Pago</div>
                <div id="modalTipoPago" style="font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-top: 0.25rem; text-transform: uppercase;"></div>
            </div>
            <div>
                <div style="font-size: 0.65rem; text-transform: uppercase; tracking: 0.05em; color: var(--text-secondary); font-weight: 600;">Estado Pago</div>
                <div id="modalEstadoPago" style="font-size: 0.85rem; font-weight: 700; margin-top: 0.25rem; text-transform: uppercase;"></div>
            </div>
            <div>
                <div style="font-size: 0.65rem; text-transform: uppercase; tracking: 0.05em; color: var(--text-secondary); font-weight: 600;">Monto Factura</div>
                <div id="modalTotal" style="font-size: 0.95rem; font-weight: 900; color: var(--primary-color); margin-top: 0.25rem; font-family: monospace;"></div>
            </div>
        </div>

        <!-- Modal Table -->
        <div style="overflow-x: auto; max-height: 40vh; margin-bottom: 1.25rem; border: 1px solid var(--border-color); border-radius: 0.5rem;">
            <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.8rem;">
                <thead>
                    <tr style="background: var(--surface-bg); border-bottom: 1px solid var(--border-color);">
                        <th style="padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 700;">Producto</th>
                        <th style="padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 700;">No. Factura</th>
                        <th style="padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 700; text-align: center;">Factor</th>
                        <th style="padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 700; text-align: center;">Cant. Compra</th>
                        <th style="padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 700; text-align: center;">Unidades Base</th>
                        <th style="padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 700; text-align: right;">Costo Unit.</th>
                        <th style="padding: 0.75rem 1rem; color: var(--text-secondary); font-weight: 700; text-align: right;">Costo Total</th>
                    </tr>
                </thead>
                <tbody id="modalTableBody">
                    <!-- Items -->
                </tbody>
            </table>
        </div>

        <!-- Modal Footer -->
        <div style="display: flex; justify-content: flex-end; border-top: 1px solid var(--border-color); padding-top: 1rem;">
            <button onclick="cerrarModalDetalle()" style="padding: 0.5rem 1.5rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.8rem; background: var(--surface-bg); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; transition: all 0.2s;" onmouseover="this.style.background='var(--surface-hover)'" onmouseout="this.style.background='var(--surface-bg)'">Cerrar</button>
        </div>
    </div>
</div>


<script src="js/compras.js?v=<?= $version ?>"></script>

<?php renderFooter(); ?>

