<?php
/**
 * Punto de Venta (POS) - Módulo Integrado
 * Unifica el sistema de POS como un módulo de SufarmaERP
 * Usa la arquitectura de SufarmaERP (renderHeader/Footer)
 */

require_once __DIR__ . '/../../config/database.php';
global $assetVersion;
if (!isset($assetVersion)) {
    $assetVersion = '2026051401';
}

// CSS adicional para POS
$cssAdicional = '<link rel="stylesheet" href="assets/css/styles.css?v='.$assetVersion.'">';

// Renderizar cabecera
renderHeader('Punto de Venta (POS)', 'pos', $cssAdicional);
?>

<style>
    :root {
        --primary-color: #059669;
        --primary-dark: #047857;
        --primary-light: #d1fae5;
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --danger-color: #ef4444;
        --text-primary: #1f2937;
        --text-secondary: #6b7280;
        --text-light: #9ca3af;
        --border-color: #e5e7eb;
        --bg-primary: #ffffff;
        --bg-secondary: #f9fafb;
        --surface-elevated: #f3f4f6;
        --card-bg: #ffffff;
        --error-bg: #fee2e2;
        --success-bg: #dcfce7;
        --warning-bg: #fef3c7;
        --info-bg: #dbeafe;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    .main-container {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 1.5rem;
        padding: 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
        min-height: calc(100vh - 200px);
    }

    @media (max-width: 1024px) {
        .main-container {
            grid-template-columns: 1fr;
            gap: 1rem;
            padding: 1rem;
        }
    }

    .products-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background: var(--card-bg);
        border-radius: 0.75rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .search-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        background: var(--bg-secondary);
    }

    .search-icon {
        font-size: 1.2rem;
        opacity: 0.6;
    }

    .search-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 0.5rem;
        font-size: 0.95rem;
        outline: none;
        color: var(--text-primary);
    }

    .search-input::placeholder {
        color: var(--text-light);
    }

    .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    @media (max-width: 768px) {
        .products-grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
    }

    .product-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
    }

    .product-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
        transform: translateY(-2px);
    }

    .product-name {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
        line-height: 1.3;
        min-height: 2.4em;
    }

    .product-details {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .product-price {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .product-code {
        font-size: 0.7rem;
        color: var(--text-light);
        background: var(--surface-elevated);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        display: inline-block;
        margin-top: auto;
    }

    .cart-sidebar {
        position: sticky;
        top: 100px;
        background: var(--card-bg);
        border-radius: 0.75rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    .discount-selector {
        padding: 1rem;
        background: var(--surface-elevated);
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }

    .discount-selector label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
        color: var(--text-primary);
    }

    .filter-select {
        width: 100%;
        padding: 0.5rem;
        border-radius: 0.375rem;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-primary);
        font-size: 0.875rem;
    }

    .cart-items {
        max-height: 300px;
        overflow-y: auto;
        margin-bottom: 1rem;
    }

    .cart-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }

    .cart-item-info {
        flex: 1;
    }

    .cart-item-name {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.125rem;
    }

    .cart-item-qty {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    .cart-item-price {
        font-weight: 700;
        color: var(--primary-color);
        text-align: right;
        min-width: 60px;
    }

    .empty-state {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--text-secondary);
    }

    .empty-state-icon {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }

    .empty-state-text {
        font-size: 0.9rem;
    }

    .cart-totals {
        border-top: 1px solid var(--border-color);
        padding-top: 1rem;
        margin-bottom: 1rem;
    }

    .total-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
    }

    .grand-total {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-primary);
        border-top: 2px solid var(--border-color);
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }

    .btn-primary {
        width: 100%;
        padding: 0.75rem;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        font-size: 0.95rem;
        transition: background 0.2s ease;
    }

    .btn-primary:hover:not(:disabled) {
        background: var(--primary-dark);
    }

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

    .btn-secondary {
        padding: 0.75rem 1rem;
        background: #e2e8f0;
        color: #475569;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s ease;
    }

    .btn-secondary:hover:not(:disabled) {
        background: #cbd5e1;
    }

    .btn-secondary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .recent-sales-section {
        margin-top: 1.5rem;
        border-top: 1px solid var(--border-color);
        padding-top: 1.5rem;
    }

    .recent-sales-section h3 {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .recent-sales-list {
        max-height: 200px;
        overflow-y: auto;
    }

    .recent-sale-item {
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        font-size: 0.8rem;
        transition: all 0.2s ease;
    }

    .recent-sale-item:hover {
        background: var(--surface-elevated);
        border-left: 3px solid var(--primary-color);
    }

    .loading {
        text-align: center;
        padding: 2rem;
        color: var(--text-secondary);
    }

    .spinner {
        border: 4px solid var(--bg-secondary);
        border-top-color: var(--primary-color);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 0.8s linear infinite;
        margin: 0 auto;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Modal Styles */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: var(--card-bg);
        border-radius: 0.75rem;
        padding: 2rem;
        max-width: 500px;
        width: 90%;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .modal-header {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--text-primary);
    }

    .modal-body {
        margin-bottom: 1.5rem;
    }

    .modal-footer {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
    }

    .btn-cancel {
        padding: 0.75rem 1.5rem;
        background: #e2e8f0;
        color: #475569;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-confirm {
        padding: 0.75rem 1.5rem;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
    }

    .alert {
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }

    .alert-danger {
        background: var(--error-bg);
        color: #7f1d1d;
        border: 1px solid #fca5a5;
    }

    .alert-success {
        background: var(--success-bg);
        color: #15803d;
        border: 1px solid #86efac;
    }

    .alert-warning {
        background: var(--warning-bg);
        color: #92400e;
        border: 1px solid #fcd34d;
    }

    .alert-info {
        background: var(--info-bg);
        color: #0c4a6e;
        border: 1px solid #7dd3fc;
    }

    .descuento-info {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
    }
</style>

<div class="main-container">
    <div class="products-section">
        <div class="search-section">
            <div class="search-bar">
                <span class="search-icon">🔍</span>
                <input 
                    type="text" 
                    id="searchInput" 
                    class="search-input" 
                    placeholder="Buscar por código, nombre, o laboratorio..."
                    autocomplete="off"
                >
            </div>
        </div>

        <div id="productsGrid" class="products-grid">
            <div class="loading">
                <div class="spinner"></div>
            </div>
        </div>
    </div>

    <aside class="cart-sidebar">
        <div class="cart-container">
            <!-- Selector de Descuentos -->
            <div class="discount-selector">
                <label>🎁 Tipo de Cliente:</label>
                <select id="tipo-descuento-select" class="filter-select" onchange="cambiarTipoDescuento(this.value)">
                    <option value="ninguno">Sin Descuento</option>
                    <option value="empleado">👔 Colaborador</option>
                    <option value="ayuda_social">❤️ Ayuda Social (Auto)</option>
                </select>
                <div id="descuento-info" class="descuento-info"></div>
            </div>

            <div id="cartItems" class="cart-items">
                <div class="empty-state">
                    <div class="empty-state-icon">🛒</div>
                    <p class="empty-state-text">No hay productos en el carrito</p>
                </div>
            </div>

            <div class="cart-totals">
                <div class="total-row" style="display: none;">
                    <span>Subtotal:</span>
                    <span id="subtotal">Q 0.00</span>
                </div>
                <div class="total-row" id="descuento-row" style="display: none; color: var(--success-color);">
                    <span>Descuento:</span>
                    <span id="descuento-total">-Q 0.00</span>
                </div>
                <div class="total-row" style="display: none;">
                    <span>Impuestos (12%):</span>
                    <span id="taxes">Q 0.00</span>
                </div>
                <div class="total-row grand-total">
                    <span>Total:</span>
                    <span id="grandTotal">Q 0.00</span>
                </div>
            </div>

            <button id="btnProceedPayment" class="btn-primary" disabled>
                Proceder al Pago
            </button>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;">
                <button id="btnHoldSale" class="btn-secondary" style="display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.85rem;" disabled>
                    ⏸ En Espera
                </button>
                <button id="btnResumeSales" class="btn-secondary" style="display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.85rem;">
                    📂 Recuperar
                </button>
            </div>
        </div>
        
        <div class="recent-sales-section">
            <h3>📋 Últimas Ventas</h3>
            <div id="recentSalesList" class="recent-sales-list">
                <div style="text-align: center; padding: 1rem; color: var(--text-secondary); font-size: 0.85rem;">
                    Cargando...
                </div>
            </div>
        </div>
    </aside>
</div>

<!-- Componentes y Modales -->
<?php require_once __DIR__ . '/../../includes/components/modals_pos.php'; ?>

<div id="modalContraindications" class="modal">
    <div class="modal-content">
        <div class="modal-header">⚠️ Alerta de Contraindicación</div>
        <div class="modal-body" id="contraindicationContent"></div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closeContraindicationModal()">Cancelar</button>
            <button class="btn-confirm" onclick="confirmContraindicationModal()">Continuar de Todas Formas</button>
        </div>
    </div>
</div>

<div id="modalPayment" class="modal">
    <div class="modal-content">
        <div class="modal-header">💳 Proceder al Pago</div>
        <div class="modal-body" id="paymentContent"></div>
        <div class="modal-footer">
            <button class="btn-cancel" onclick="closePaymentModal()">Cancelar</button>
            <button class="btn-confirm" onclick="confirmPayment()">Confirmar Pago</button>
        </div>
    </div>
</div>

<div id="toastContainer" style="position: fixed; bottom: 20px; right: 20px; z-index: 2000;"></div>

<script>
    // Configuración global
    const CONFIG = {
        apiBaseUrl: 'api/',
        sucursalId: <?= json_encode($sucursal_id) ?>,
        assetVersion: '<?= $assetVersion ?>'
    };

    // Variable para rastrear contraindicaciones pendientes
    let pendingContraindicationAction = null;
</script>

<!-- Scripts necesarios para POS -->
<script src="assets/js/descuentos.js?v=<?= $assetVersion ?>"></script>
<script src="assets/js/user-selection.js?v=<?= $assetVersion ?>"></script>
<script src="assets/js/cart.js?v=<?= $assetVersion ?>"></script>
<script src="assets/js/caja.js?v=<?= $assetVersion ?>"></script>
<script src="assets/js/pos.js?v=<?= $assetVersion ?>"></script>
<script src="assets/js/fel.js?v=<?= $assetVersion ?>"></script>
<script src="assets/js/recent-sales.js?v=<?= $assetVersion ?>"></script>
<script src="assets/js/venta_especial.js?v=<?= $assetVersion ?>"></script>

<?php renderFooter(); ?>

