<?php
header("Location: calculo_costos_v3.php");
exit();
$pageTitle = "Cálculo de Costos V2";
include 'db/config.php';
include 'layout_header.php';

$db = db();

// Obtener productos para el select del modal
$stmt_products = $db->query("SELECT id, nombre FROM products ORDER BY nombre ASC");
$productos_select = $stmt_products->fetchAll(PDO::FETCH_ASSOC);

// Obtener videos y sus costos asociados
$stmt = $db->query("SELECT mv.id, mv.orden, mv.foto_producto, p.nombre as nombre_producto,
                           mc.costo_producto, mc.costo_fijo_film, mc.comision_asesora, 
                           mc.delivery, mc.costo_publicitario, mc.inversion_total, 
                           mc.promo_1, mc.promo_2, mc.promo_3
                    FROM marketing_videos mv 
                    LEFT JOIN products p ON mv.producto_id = p.id 
                    LEFT JOIN marketing_costos mc ON mv.id = mc.video_id
                    ORDER BY mv.orden ASC, mv.fecha_creacion DESC");
$costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<style>
    .table-v2 {
        font-size: 0.85rem;
        border-collapse: separate;
        border-spacing: 0 5px;
    }
    .table-v2 th {
        background-color: #f1f3f5;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
        padding: 12px 8px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .table-v2 td {
        vertical-align: middle;
        padding: 8px 4px;
        background-color: #fff;
    }
    .input-cell {
        width: 100%;
        min-width: 85px;
        padding: 8px;
        border: 2px solid #e9ecef;
        border-radius: 6px;
        text-align: center;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.2s;
        cursor: text !important;
        pointer-events: auto !important;
    }
    .input-cell:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
        outline: 0;
        background-color: #fff;
    }
    .input-cell:hover {
        border-color: #adb5bd;
    }
    .input-cell.saving {
        background-color: #fff3cd !important;
        border-color: #ffc107 !important;
    }
    .input-cell.saved {
        background-color: #d1e7dd !important;
        border-color: #198754 !important;
    }
    .recaudo-v2 {
        background-color: #f8f9fa;
        font-weight: bold;
        text-align: center;
        padding: 10px;
        border-radius: 6px;
        min-width: 100px;
        border: 1px solid #dee2e6;
    }
    .img-v2 {
        width: 45px;
        height: 45px;
        object-fit: cover;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .btn-action {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
    }
    .editable-label {
        font-size: 0.7rem;
        color: #6c757d;
        display: block;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
</style>

<div class="d-flex justify-content-between align-items-center mb-4 mt-2">
    <div>
        <p class="text-muted mb-0">Edición directa: Escribe en los cuadros y los cambios se guardarán al salir del cuadro.</p>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-secondary" onclick="location.reload()">
            <i class="fas fa-sync-alt"></i> Actualizar Todo
        </button>
        <button type="button" class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#modalNuevoV2">
            <i class="fas fa-plus me-2"></i> Nuevo Producto
        </button>
    </div>
</div>

<?php if (isset($_GET['success'])): ?>
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="fas fa-check-circle me-2"></i> ¡Operación realizada con éxito!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<?php endif; ?>

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive" style="max-height: 70vh;">
            <table class="table table-v2 mb-0">
                <thead>
                    <tr>
                        <th class="text-center">Orden</th>
                        <th>Producto</th>
                        <th class="text-center">Imagen</th>
                        <th class="text-center">Costo Prod.</th>
                        <th class="text-center">Film</th>
                        <th class="text-center">Asesora</th>
                        <th class="text-center">Delivery</th>
                        <th class="text-center">Publicidad</th>
                        <th class="text-center bg-light">Inversión Total</th>
                        <th class="text-center">Promo 1</th>
                        <th class="text-center">Recaudo 1</th>
                        <th class="text-center">Promo 2</th>
                        <th class="text-center">Recaudo 2</th>
                        <th class="text-center">Promo 3</th>
                        <th class="text-center">Recaudo 3</th>
                        <th class="text-center">Acción</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($costos as $c): ?>
                        <?php 
                            $inversion_total = ($c['costo_producto'] ?? 0) +
                                               ($c['costo_fijo_film'] ?? 0) + 
                                               ($c['comision_asesora'] ?? 0) + 
                                               ($c['delivery'] ?? 0) + 
                                               ($c['costo_publicitario'] ?? 0);

                            function getVal($promo) {
                                if (empty($promo)) return 0;
                                preg_match('/[\d.]+/', $promo, $matches);
                                return isset($matches[0]) ? floatval($matches[0]) : 0;
                            }

                            $p1 = getVal($c['promo_1']);
                            $p2 = getVal($c['promo_2']);
                            $p3 = getVal($c['promo_3']);

                            $r1 = $p1 > 0 ? $p1 - $inversion_total : null;
                            $r2 = $p2 > 0 ? $p2 - $inversion_total : null;
                            $r3 = $p3 > 0 ? $p3 - $inversion_total : null;
                        ?>
                        <tr id="row-<?php echo $c['id']; ?>" data-id="<?php echo $c['id']; ?>">
                            <td class="text-center fw-bold text-primary"><?php echo $c['orden']; ?></td>
                            <td style="max-width: 140px;">
                                <div class="text-truncate fw-bold" title="<?php echo htmlspecialchars($c['nombre_producto']); ?>">
                                    <?php echo htmlspecialchars($c['nombre_producto'] ?: 'General'); ?>
                                </div>
                            </td>
                            <td class="text-center">
                                <?php if ($c['foto_producto']): ?>
                                    <img src="<?php echo $c['foto_producto']; ?>" class="img-v2">
                                <?php else: ?>
                                    <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width:45px; height:45px;">
                                        <i class="fas fa-image text-muted"></i>
                                    </div>
                                <?php endif; ?>
                            </td>
                            <td><input type="number" step="0.01" class="input-cell" data-field="costo_producto" value="<?php echo $c['costo_producto']; ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'costo_producto', this.value)"></td>
                            <td><input type="number" step="0.01" class="input-cell" data-field="costo_fijo_film" value="<?php echo $c['costo_fijo_film']; ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'costo_fijo_film', this.value)"></td>
                            <td><input type="number" step="0.01" class="input-cell" data-field="comision_asesora" value="<?php echo $c['comision_asesora']; ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'comision_asesora', this.value)"></td>
                            <td><input type="number" step="0.01" class="input-cell" data-field="delivery" value="<?php echo $c['delivery']; ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'delivery', this.value)"></td>
                            <td><input type="number" step="0.01" class="input-cell" data-field="costo_publicitario" value="<?php echo $c['costo_publicitario']; ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'costo_publicitario', this.value)"></td>
                            <td class="text-center">
                                <div class="recaudo-v2 bg-light fw-bold text-dark" id="total-<?php echo $c['id']; ?>">
                                    S/ <?php echo number_format($inversion_total, 2); ?>
                                </div>
                            </td>
                            
                            <td><input type="text" class="input-cell" data-field="promo_1" value="<?php echo htmlspecialchars($c['promo_1']); ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'promo_1', this.value)"></td>
                            <td><div class="recaudo-v2 recaudo-1 <?php echo $r1 >= 0 ? 'text-success' : 'text-danger'; ?>" id="r1-<?php echo $c['id']; ?>"><?php echo $r1 !== null ? 'S/ '.number_format($r1, 2) : '-'; ?></div></td>
                            
                            <td><input type="text" class="input-cell" data-field="promo_2" value="<?php echo htmlspecialchars($c['promo_2']); ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'promo_2', this.value)"></td>
                            <td><div class="recaudo-v2 recaudo-2 <?php echo $r2 >= 0 ? 'text-success' : 'text-danger'; ?>" id="r2-<?php echo $c['id']; ?>"><?php echo $r2 !== null ? 'S/ '.number_format($r2, 2) : '-'; ?></div></td>
                            
                            <td><input type="text" class="input-cell" data-field="promo_3" value="<?php echo htmlspecialchars($c['promo_3']); ?>" onchange="updateRow(<?php echo $c['id']; ?>, 'promo_3', this.value)"></td>
                            <td><div class="recaudo-v2 recaudo-3 <?php echo $r3 >= 0 ? 'text-success' : 'text-danger'; ?>" id="r3-<?php echo $c['id']; ?>"><?php echo $r3 !== null ? 'S/ '.number_format($r3, 2) : '-'; ?></div></td>
                            
                            <td class="text-center">
                                <button class="btn btn-danger btn-action" onclick="eliminarRow(<?php echo $c['id']; ?>)" title="Eliminar">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Nuevo -->
<div class="modal fade" id="modalNuevoV2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form action="save_marketing_video.php" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="redirect" value="calculo_costos_v2.php?success=1">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i> Nuevo Producto para Costos</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Seleccionar Producto</label>
                        <select name="producto_id" id="select_producto_nuevo" class="form-select form-select-lg" required onchange="fetchProductCost(this.value)">
                            <option value="">Seleccionar...</option>
                            <?php foreach ($productos_select as $p): ?>
                                <option value="<?php echo $p['id']; ?>"><?php echo htmlspecialchars($p['nombre']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Costo Base (S/)</label>
                            <input type="number" name="costo_producto" id="costo_producto_nuevo" class="form-control" step="0.01" placeholder="0.00">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Orden de Lista</label>
                            <input type="number" name="orden" class="form-control" value="1">
                        </div>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-bold">Imagen del Producto</label>
                        <input type="file" name="foto_producto" class="form-control">
                        <small class="text-muted">Opcional. Si no se sube, se usará la del producto.</small>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary px-4">Crear Registro</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
console.log("Script de Cálculo de Costos V2 cargado");

function fetchProductCost(productId) {
    if (!productId) return;
    
    fetch(`get_product_details.php?id=${productId}`)
    .then(response => response.json())
    .then(data => {
        if (data.success && data.product.costo) {
            document.getElementById('costo_producto_nuevo').value = data.product.costo;
        }
    })
    .catch(error => console.error('Error fetching product cost:', error));
}

function updateRow(id, field, value) {
    const row = document.getElementById(`row-${id}`);
    const input = row.querySelector(`[data-field="${field}"]`);
    
    if (!input) return;
    
    input.classList.add('saving');
    console.log(`Actualizando ${field} para ID ${id} con valor ${value}`);
    
    fetch('update_marketing_costos_field.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, field, value })
    })
    .then(response => response.json())
    .then(data => {
        input.classList.remove('saving');
        if (data.success) {
            input.classList.add('saved');
            setTimeout(() => input.classList.remove('saved'), 1500);
            
            // Recalcular todo en la fila
            recalculateRow(id);
        } else {
            alert('Error al guardar: ' + (data.error || 'Error desconocido'));
        }
    })
    .catch(error => {
        input.classList.remove('saving');
        console.error('Error:', error);
        alert('Error de conexión al servidor');
    });
}

function recalculateRow(id) {
    const row = document.getElementById(`row-${id}`);
    if (!row) return;
    
    const fields = ['costo_producto', 'costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario'];
    
    let total = 0;
    fields.forEach(f => {
        const el = row.querySelector(`[data-field="${f}"]`);
        if (el) {
            total += parseFloat(el.value) || 0;
        }
    });
    
    const totalEl = document.getElementById(`total-${id}`);
    if (totalEl) {
        totalEl.innerText = 'S/ ' + total.toFixed(2);
    }
    
    // Recalcular recaudos
    for (let i = 1; i <= 3; i++) {
        const promoEl = row.querySelector(`[data-field="promo_${i}"]`);
        const recaudoEl = document.getElementById(`r${i}-${id}`);
        
        if (promoEl && recaudoEl) {
            const promoVal = promoEl.value;
            const match = promoVal.match(/[\d.]+/);
            const pVal = match ? parseFloat(match[0]) : 0;
            
            if (pVal > 0) {
                const recaudo = pVal - total;
                recaudoEl.innerText = 'S/ ' + recaudo.toFixed(2);
                recaudoEl.className = 'recaudo-v2 ' + (recaudo >= 0 ? 'text-success' : 'text-danger');
            } else {
                recaudoEl.innerText = '-';
                recaudoEl.className = 'recaudo-v2 text-muted';
            }
        }
    }
}

function eliminarRow(id) {
    if (confirm('¿Estás seguro de que deseas eliminar este registro de costos?')) {
        window.location.href = 'delete_marketing_video.php?id=' + id + '&redirect=calculo_costos_v2.php';
    }
}
</script>

<?php include 'layout_footer.php'; ?>