<?php
date_default_timezone_set('America/Mexico_City');
$fechaHoy = date('Y-m-d');
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Etiqueta Producto 4x6</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap opcional por CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        :root {
            --bg: #f3f5f9;
            --card: #ffffff;
            --text: #111827;
            --muted: #6b7280;
            --border: #d1d5db;
            --brand: #0f172a;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
        }

        .app-wrapper {
            max-width: 1100px;
            margin: 30px auto;
            padding: 15px;
        }

        .panel {
            background: var(--card);
            border-radius: 18px;
            box-shadow: 0 12px 35px rgba(0,0,0,.08);
            padding: 24px;
            border: 1px solid #e5e7eb;
        }

        .title {
            font-weight: 800;
            color: var(--brand);
            margin-bottom: 5px;
        }

        .subtitle {
            color: var(--muted);
            margin-bottom: 20px;
        }

        .form-label {
            font-weight: 700;
            font-size: 14px;
        }

        .form-control {
            border-radius: 12px;
            min-height: 45px;
        }

        .btn-print {
            border-radius: 12px;
            padding: 12px 22px;
            font-weight: 700;
        }

        .preview-title {
            font-weight: 800;
            margin-bottom: 10px;
            color: var(--brand);
        }

        /*
            Etiqueta real:
            6 pulgadas ancho x 4 pulgadas alto
            Horizontal
        */
        .label-area {
            width: 6in;
            height: 4in;
            background: #fff;
            border: 2px solid #111;
            margin: 0 auto;
            padding: 0.22in;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .label-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 2px solid #111;
            padding-bottom: 8px;
        }

        .label-company {
            font-size: 18px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .label-small {
            font-size: 11px;
            color: #333;
        }

        .label-product {
            text-align: center;
            margin-top: 12px;
        }

        .label-product .caption {
            font-size: 13px;
            font-weight: 700;
            color: #444;
            text-transform: uppercase;
        }

        .label-product .value {
            font-size: 34px;
            font-weight: 900;
            line-height: 1.1;
            word-break: break-word;
            text-transform: uppercase;
        }

        .label-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 12px;
        }

        .label-box {
            border: 2px solid #111;
            border-radius: 10px;
            padding: 9px;
            min-height: 62px;
        }

        .label-box .caption {
            font-size: 12px;
            font-weight: 800;
            color: #444;
            text-transform: uppercase;
        }

        .label-box .value {
            font-size: 25px;
            font-weight: 900;
            line-height: 1.1;
        }

        .label-notes {
            border-top: 2px solid #111;
            padding-top: 8px;
            font-size: 13px;
            min-height: 34px;
        }

        .label-footer {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: #333;
            border-top: 1px solid #999;
            padding-top: 5px;
        }

        @page {
            size: 6in 4in landscape;
            margin: 0;
        }

        @media print {
            body {
                background: #fff;
                margin: 0;
                padding: 0;
            }

            .no-print {
                display: none !important;
            }

            .app-wrapper {
                margin: 0;
                padding: 0;
                max-width: none;
            }

            .panel {
                box-shadow: none;
                border: none;
                padding: 0;
                margin: 0;
            }

            .print-container {
                display: block !important;
                margin: 0;
                padding: 0;
            }

            .label-area {
                width: 6in;
                height: 4in;
                border: none;
                margin: 0;
                page-break-after: always;
            }
        }
    </style>
</head>

<body>

<div class="app-wrapper">
    <div class="row g-4">

        <!-- FORMULARIO -->
        <div class="col-lg-5 no-print">
            <div class="panel">
                <h3 class="title">Generador de etiqueta</h3>
                <p class="subtitle">Plantilla web sin base de datos para etiqueta horizontal 4x6 pulgadas.</p>

                <div class="mb-3">
                    <label class="form-label">Producto</label>
                    <input type="text" id="producto" class="form-control" value="Producto de prueba">
                </div>

                <div class="mb-3">
                    <label class="form-label">Código / SKU</label>
                    <input type="text" id="codigo" class="form-control" value="SKU-001">
                </div>

                <div class="mb-3">
                    <label class="form-label">Cantidad</label>
                    <input type="number" id="cantidad" class="form-control" value="1" min="0" step="1">
                </div>

                <div class="mb-3">
                    <label class="form-label">Costo</label>
                    <input type="number" id="costo" class="form-control" value="0.00" min="0" step="0.01">
                </div>

                <div class="mb-3">
                    <label class="form-label">Fecha</label>
                    <input type="date" id="fecha" class="form-control" value="<?php echo $fechaHoy; ?>">
                </div>

                <div class="mb-3">
                    <label class="form-label">Notas</label>
                    <textarea id="notas" class="form-control" rows="3">Etiqueta generada manualmente</textarea>
                </div>

                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-dark btn-print" onclick="imprimirEtiqueta()">
                        Imprimir etiqueta
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-print" onclick="limpiarCampos()">
                        Limpiar campos
                    </button>
                </div>
            </div>
        </div>

        <!-- PREVIEW ETIQUETA -->
        <div class="col-lg-7">
            <div class="panel print-container">
                <div class="no-print">
                    <h5 class="preview-title">Vista previa 4x6 horizontal</h5>
                </div>

                <div class="label-area" id="etiqueta">
                    <div>
                        <div class="label-header">
                            <div>
                                <div class="label-company">Etiqueta de producto</div>
                                <div class="label-small">Plantilla manual sin base de datos</div>
                            </div>
                            <div class="text-end">
                                <div class="label-small"><strong>Fecha:</strong></div>
                                <div class="label-small" id="lblFecha"><?php echo $fechaHoy; ?></div>
                            </div>
                        </div>

                        <div class="label-product">
                            <div class="caption">Producto</div>
                            <div class="value" id="lblProducto">Producto de prueba</div>
                        </div>

                        <div class="label-grid">
                            <div class="label-box">
                                <div class="caption">Código / SKU</div>
                                <div class="value" id="lblCodigo">SKU-001</div>
                            </div>

                            <div class="label-box">
                                <div class="caption">Cantidad</div>
                                <div class="value" id="lblCantidad">1</div>
                            </div>

                            <div class="label-box">
                                <div class="caption">Costo unitario</div>
                                <div class="value" id="lblCosto">$0.00</div>
                            </div>

                            <div class="label-box">
                                <div class="caption">Total</div>
                                <div class="value" id="lblTotal">$0.00</div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="label-notes">
                            <strong>Notas:</strong>
                            <span id="lblNotas">Etiqueta generada manualmente</span>
                        </div>

                        <div class="label-footer">
                            <span>Formato: 4x6 pulgadas horizontal</span>
                            <span>Generado desde plantilla PHP</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<script>
    const producto = document.getElementById('producto');
    const codigo = document.getElementById('codigo');
    const cantidad = document.getElementById('cantidad');
    const costo = document.getElementById('costo');
    const fecha = document.getElementById('fecha');
    const notas = document.getElementById('notas');

    const lblProducto = document.getElementById('lblProducto');
    const lblCodigo = document.getElementById('lblCodigo');
    const lblCantidad = document.getElementById('lblCantidad');
    const lblCosto = document.getElementById('lblCosto');
    const lblTotal = document.getElementById('lblTotal');
    const lblFecha = document.getElementById('lblFecha');
    const lblNotas = document.getElementById('lblNotas');

    function formatoMoneda(valor) {
        const numero = parseFloat(valor);
        if (isNaN(numero)) {
            return '$0.00';
        }

        return numero.toLocaleString('es-MX', {
            style: 'currency',
            currency: 'MXN'
        });
    }

    function actualizarEtiqueta() {
        const productoValor = producto.value.trim() || 'SIN PRODUCTO';
        const codigoValor = codigo.value.trim() || 'SIN CÓDIGO';
        const cantidadValor = parseFloat(cantidad.value) || 0;
        const costoValor = parseFloat(costo.value) || 0;
        const totalValor = cantidadValor * costoValor;
        const fechaValor = fecha.value || '';
        const notasValor = notas.value.trim() || 'Sin notas';

        lblProducto.textContent = productoValor;
        lblCodigo.textContent = codigoValor;
        lblCantidad.textContent = cantidadValor;
        lblCosto.textContent = formatoMoneda(costoValor);
        lblTotal.textContent = formatoMoneda(totalValor);
        lblFecha.textContent = fechaValor;
        lblNotas.textContent = notasValor;
    }

    function imprimirEtiqueta() {
        actualizarEtiqueta();
        window.print();
    }

    function limpiarCampos() {
        producto.value = '';
        codigo.value = '';
        cantidad.value = '';
        costo.value = '';
        fecha.value = '<?php echo $fechaHoy; ?>';
        notas.value = '';
        actualizarEtiqueta();
    }

    [producto, codigo, cantidad, costo, fecha, notas].forEach(campo => {
        campo.addEventListener('input', actualizarEtiqueta);
        campo.addEventListener('change', actualizarEtiqueta);
    });

    actualizarEtiqueta();
</script>

</body>
</html>