<?php
require_once __DIR__ . '/../../includes/layout.php';
$version = '20260520';
renderHeader('Gestión de Recetas Médicas', 'inventario');
?>

<style>
.prescripcion-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 350px 1fr;
    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);
}

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

.modern-input { 
    padding: 0.75rem; 
    border: 1px solid var(--border-color); 
    border-radius: 0.5rem; 
    font-size: 0.95rem; 
}

.btn-primary { 
    width: 100%; 
    padding: 0.75rem; 
    background: var(--primary-color); 
    color: white; 
    border: none; 
    border-radius: 0.5rem; 
    font-weight: bold; 
    cursor: pointer; 
}

.btn-danger { 
    background: #ef4444; 
    color: white; 
    border: none; 
    border-radius: 0.3rem; 
    padding: 0.4rem 0.8rem; 
    cursor: pointer; 
}

.search-results {
    border: 1px solid var(--border-color); 
    border-radius: 0.5rem; 
    max-height: 200px; 
    overflow-y: auto; 
    background: white; 
    margin-top: 0.2rem; 
    display: none;
}

.search-item { 
    padding: 0.5rem; 
    border-bottom: 1px solid var(--border-color); 
    cursor: pointer; 
    font-size: 0.85rem; 
}

.search-item:hover { 
    background: #f1f5f9; 
}

table.data-table { 
    width: 100%; 
    border-collapse: collapse; 
}

.data-table th { 
    background: #f8fafc; 
    padding: 0.75rem; 
    text-align: left; 
    font-size: 0.85rem; 
    color: var(--text-secondary); 
    border-bottom: 1px solid var(--border-color); 
}

.data-table td { 
    padding: 0.75rem; 
    border-bottom: 1px solid var(--border-color); 
    font-size: 0.9rem; 
}

.badge { 
    padding: 0.25rem 0.5rem; 
    border-radius: 0.5rem; 
    font-size: 0.75rem; 
    font-weight: bold; 
}

.badge-receta { 
    background: #dbeafe; 
    color: #1e40af; 
}

.badge-sin-receta { 
    background: #f3f4f6; 
    color: #6b7280; 
}

@media (max-width: 900px) {
    .prescripcion-container { grid-template-columns: 1fr; }
}
</style>

<div class="prescripcion-container">
    <!-- Formulario para búsqueda y marcado -->
    <div class="glass-card">
        <h3><i class="fas fa-plus-circle"></i> Administrar Recetas</h3>
        <p style="color:gray; font-size:0.85rem; margin-bottom:1rem;">Marcar productos que requieren receta médica.</p>

        <div class="form-group">
            <label>Buscar Producto</label>
            <input type="text" id="busqueda" class="modern-input" placeholder="Buscar por nombre genérico o comercial...">
            <div id="resBusqueda" class="search-results"></div>
            <input type="hidden" id="producto_id">
        </div>

        <div class="form-group">
            <label>Requiere Receta Médica</label>
            <select id="receta_requerida" class="modern-input">
                <option value="0">No Requiere Receta</option>
                <option value="1">Requiere Receta Médica</option>
            </select>
        </div>

        <div class="form-group">
            <label>Observaciones</label>
            <textarea id="observaciones" class="modern-input" rows="3" placeholder="Ej: Medicamento controlado, estupefaciente, etc."></textarea>
        </div>

        <button class="btn-primary" onclick="guardarCambios()">
            Guardar Cambios
        </button>
    </div>

    <!-- Listado de productos con receta -->
    <div class="glass-card">
        <h3><i class="fas fa-list"></i> Productos que Requieren Receta</h3>
        <div style="overflow-x:auto; margin-top:1rem;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Producto</th>
                        <th>Nombre Genérico</th>
                        <th>Laboratorio</th>
                        <th>Requiere Receta</th>
                        <th>Código Interno</th>
                        <th>Acción</th>
                    </tr>
                </thead>
                <tbody id="tbProductos">
                    <tr><td colspan="6" style="text-align:center;">Cargando...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    cargarProductos();
    setupAutocomplete();
});

function setupAutocomplete() {
    let timeout;
    const input = document.getElementById('busqueda');
    const res = document.getElementById('resBusqueda');
    const hidden = document.getElementById('producto_id');

    input.addEventListener('input', (e) => {
        clearTimeout(timeout);
        hidden.value = '';
        const q = e.target.value.trim();
        if(q.length < 2) {
            res.style.display = 'none';
            return;
        }
        timeout = setTimeout(async () => {
            const response = await fetch(`api/inventario/productos/buscar.php?q=${encodeURIComponent(q)}`);
            const data = await response.json();
            if(data.success && data.data.length > 0) {
                let html = '';
                data.data.forEach(p => {
                    html += `<div class="search-item" onclick="selectItem(${p.id}, '${p.NombreComercial.replace(/'/g, "\\'")}')">
                        ${p.NombreComercial} <small>(${p.CodigoInterno})</small>
                    </div>`;
                });
                res.innerHTML = html;
                res.style.display = 'block';
            } else {
                res.style.display = 'none';
            }
        }, 300);
    });
}

function selectItem(id, nombre) {
    document.getElementById('producto_id').value = id;
    document.getElementById('busqueda').value = nombre;
    document.getElementById('resBusqueda').style.display = 'none';
    
    // Cargar datos actuales del producto
    cargarProductoDatos(id);
}

async function cargarProductoDatos(productoId) {
    try {
        const res = await fetch(`api/inventario/productos/obtener.php?id=${productoId}`);
        const data = await res.json();
        if(data.success) {
            document.getElementById('receta_requerida').value = data.data.receta_requerida || 0;
            document.getElementById('observaciones').value = data.data.observaciones || '';
        }
    } catch(e) {
        console.error('Error cargando datos del producto:', e);
    }
}

async function guardarCambios() {
    const producto_id = document.getElementById('producto_id').value;
    const receta_requerida = document.getElementById('receta_requerida').value;
    const observaciones = document.getElementById('observaciones').value.trim();

    if(!producto_id) {
        alert('Debe seleccionar un producto.');
        return;
    }

    try {
        const res = await fetch('api/productos/prescripcion/actualizar.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ 
                producto_id: producto_id, 
                receta_requerida: parseInt(receta_requerida)
            })
        });
        const data = await res.json();
        if(data.success) {
            document.getElementById('producto_id').value = '';
            document.getElementById('busqueda').value = '';
            document.getElementById('observaciones').value = '';
            cargarProductos();
            alert('Cambios guardados correctamente.');
        } else {
            alert(data.error);
        }
    } catch(e) {
        alert("Error de conexión");
    }
}

async function cargarProductos() {
    const tbody = document.getElementById('tbProductos');
    try {
        const res = await fetch('api/productos/prescripcion/listar.php');
        const data = await res.json();
        if(data.success) {
            if(data.data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;">No hay productos registrados que requieran receta.</td></tr>';
            } else {
                let html = '';
                data.data.forEach(p => {
                    const badgeClass = p.receta_requerida ? 'badge-receta' : 'badge-sin-receta';
                    const badgeText = p.receta_requerida ? 'Requiere Receta' : 'Sin Receta';
                    html += `<tr>
                        <td>${p.NombreComercial}</td>
                        <td>${p.NombreGenerico || 'N/A'}</td>
                        <td>${p.laboratorio || 'N/A'}</td>
                        <td><span class="badge ${badgeClass}">${badgeText}</span></td>
                        <td>${p.CodigoInterno || 'N/A'}</td>
                        <td>
                            <button class="btn-danger" onclick="quitarReceta(${p.id})" ${!p.receta_requerida ? 'disabled' : ''}>
                                <i class="fas fa-minus"></i>
                            </button>
                        </td>
                    </tr>`;
                });
                tbody.innerHTML = html;
            }
        }
    } catch(e) {
        tbody.innerHTML = '<tr><td colspan="6">Error cargando productos.</td></tr>';
    }
}

async function quitarReceta(productoId) {
    if(!confirm("¿Quitar requerimiento de receta a este producto?")) return;
    
    try {
        const res = await fetch('api/productos/prescripcion/actualizar.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ 
                producto_id: productoId, 
                receta_requerida: 0
            })
        });
        const data = await res.json();
        if(data.success) {
            cargarProductos();
        } else {
            alert(data.error);
        }
    } catch(e) {
        alert("Error de conexión");
    }
}
</script>

<?php renderFooter(); ?>
