<?php
session_start();
include '../includes/session_control.php';
require_once '../cotizaciones/api/_node.php';

/* 1) Banner -------------------------------------------------------------- */
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
if (!$id) {
    header('Location: listado_banners.php');
    exit;
}

$token = cpn_node_token_or_fail();
$base = cpn_node_api_base();

$view = cpn_node_request(
    'GET',
    $base . '/api/banners/editar/view?id=' . urlencode((string)$id),
    $token
);

if (!($view['ok'] ?? false)) {
    header('Location: listado_banners.php');
    exit;
}

$data = $view['data'] ?? [];
$banner = $data['banner'] ?? null;
if (!$banner) {
    header('Location: listado_banners.php');
    exit;
}

$idUbic = $banner['idUbicacion'] ?? 0;
$idEst = $banner['idEstado'] ?? 0;
$noOrden = $banner['noOrden'] ?? 0;
$fd = $banner['fechaDesde'] ?? null;
$fh = $banner['fechaHasta'] ?? null;
$urlImg = $banner['urlImagen'] ?? '';

$ubicaciones = $data['ubicaciones'] ?? [];
$estados = $data['estados'] ?? [];
$hiperv = $data['hipervinculos'] ?? [];

/* Helper datetime-local -------------------------------------------------- */
function dtl(?string $dt)
{
    return $dt ? date('Y-m-d\TH:i', strtotime($dt)) : '';
}
?>
<?php include '../templates/header.php'; ?>

<h1 class="h3 mb-4 text-gray-800">Editar Banner #<?= $id ?></h1>

<!-- ░░░░  FORMULARIO PRINCIPAL ░░░░ -->
<form id="bannerForm" class="mb-4">
    <div class="row g-3">
        <div class="col">
            <label>Ubicación</label>
            <select name="idUbicacion" class="form-control">
                <?php foreach ($ubicaciones as $u): ?>
                    <option value="<?= $u['id'] ?>" <?= $u['id'] == $idUbic ? ' selected' : '' ?>>
                        <?= htmlspecialchars($u['nombre']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col">
            <label>Estado</label>
            <select name="idEstado" class="form-control">
                <?php foreach ($estados as $e): ?>
                    <option value="<?= $e['id'] ?>" <?= $e['id'] == $idEst ? ' selected' : '' ?>>
                        <?= htmlspecialchars($e['nombre']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="col">
            <label>No. Orden</label>
            <input type="number" name="noOrden" class="form-control" value="<?= $noOrden ?>">
        </div>
        <div class="col">
            <label>Fecha Desde</label>
            <input type="datetime-local" name="fechaDesde" class="form-control" value="<?= dtl($fd) ?>">
        </div>
        <div class="col">
            <label>Fecha Hasta</label>
            <input type="datetime-local" name="fechaHasta" class="form-control" value="<?= dtl($fh) ?>">
        </div>
    </div>
    <input type="hidden" name="id" value="<?= $id ?>">
    <button type="submit" class="btn btn-primary mt-3">Guardar Cambios</button>
</form>

<!-- ░░░░  IMAGEN + CAPA DE DIBUJO ░░░░ -->
<div id="imgWrap" style="position:relative;display:inline-block;">
    <img id="bannerImg" src="<?= htmlspecialchars($urlImg) ?>" alt="Banner" style="display:block;max-width:100%;height:auto;">
    <div id="drawLayer" style="position:absolute;inset:0;display:none;"></div>
</div>

<div class="mt-3">
    <button id="addLinkBtn" class="btn btn-secondary">Agregar Hipervínculo</button>
    <button id="fullLinkBtn" class="btn btn-secondary ms-2">Full Imagen</button>
</div>

<!-- ░░░░  LISTA HIPERVÍNCULOS ░░░░ -->
<h4 class="mt-4">Hipervínculos existentes</h4>
<table class="table table-sm">
    <thead>
        <tr>
            <th>XY Inicial</th>
            <th>XY Final</th>
            <th>URL</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($hiperv as $h): ?>
            <tr>
                <td><?= htmlspecialchars($h['xyInicial']) ?></td>
                <td><?= htmlspecialchars($h['xyFinal'])   ?></td>
                <td><a href="<?= htmlspecialchars($h['urlExterna']) ?>" target="_blank"><?= htmlspecialchars($h['urlExterna']) ?></a></td>
                <td><button class="btn btn-sm btn-danger delete-link" data-id="<?= $h['id'] ?>">Eliminar</button></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>
<style>
    .link-rect {
        position: absolute;
        border: 2px dashed #0d6efd;
        background: rgba(13, 110, 253, .25);
        pointer-events: none;
    }
</style>

<script>
    $(function() {

        try {
            $('#bannerForm select').select2({
                width: '100%'
            });
        } catch (e) {
            // continuar sin romper la pgina
        }

        /* ───── ESCALA REAL-VISIBLE (actualizable) ───── */
        let scaleX = 1,
            scaleY = 1,
            imgRect;
        const img = document.getElementById('bannerImg');

        function calcEscala() {
            imgRect = img.getBoundingClientRect(); // tamaño que VE el usuario
            scaleX = img.naturalWidth / imgRect.width;
            scaleY = img.naturalHeight / imgRect.height;
        }
        img.addEventListener('load', calcEscala);
        window.addEventListener('resize', calcEscala);
        calcEscala();

        /* ───── Guardar cambios del banner ───── */
        $('#bannerForm').on('submit', e => {
            e.preventDefault();
            $.post('update_banner.php', $(e.target).serialize())
                .done(() => alert('Banner actualizado'))
                .fail(() => alert('Error al actualizar'));
        });

        /* ───── Dibujar rectángulo para área clicable ───── */
        let drawing = false,
            sx = 0,
            sy = 0,
            $rect = null;
        $('#addLinkBtn').click(() => {
            $('#drawLayer').show();
            drawing = true;
        });

        $('#drawLayer')
            .on('mousedown', e => {
                if (!drawing) return;
                sx = e.clientX - imgRect.left;
                sy = e.clientY - imgRect.top;
                $rect = $('<div class="link-rect"></div>').css({
                    left: sx,
                    top: sy,
                    width: 0,
                    height: 0
                }).appendTo('#drawLayer');
            })
            .on('mousemove', e => {
                if (!drawing || !$rect) return;
                const cx = e.clientX - imgRect.left,
                    cy = e.clientY - imgRect.top;
                const w = cx - sx,
                    h = cy - sy;
                $rect.css({
                    left: w < 0 ? cx : sx,
                    top: h < 0 ? cy : sy,
                    width: Math.abs(w),
                    height: Math.abs(h)
                });
            })
            .on('mouseup', e => {
                if (!drawing || !$rect) return;
                drawing = false;
                $('#drawLayer').hide();

                const ex = e.clientX - imgRect.left,
                    ey = e.clientY - imgRect.top;
                const x1v = Math.min(sx, ex),
                    y1v = Math.min(sy, ey),
                    x2v = Math.max(sx, ex),
                    y2v = Math.max(sy, ey);

                /* 1) VISIBLE → REAL */
                const x1 = Math.round(x1v * scaleX),
                    y1 = Math.round(y1v * scaleY),
                    x2 = Math.round(x2v * scaleX),
                    y2 = Math.round(y2v * scaleY);

                const url = prompt('URL externa:');
                if (url && url.trim()) {
                    $.post('guardar_hipervinculo.php', {
                            idBanner: <?= $id ?>,
                            xyInicial: `${x1},${y1}`,
                            xyFinal: `${x2},${y2}`,
                            urlExterna: url.trim()
                        }).done(() => location.reload())
                        .fail(() => {
                            alert('Error al guardar');
                            $rect.remove();
                        });
                } else $rect.remove();
            });

        /* ───── Full imagen ───── */
        $('#fullLinkBtn').click(() => {
            const url = prompt('URL externa para toda la imagen:');
            if (!url || !url.trim()) return;
            $.post('guardar_hipervinculo.php', {
                    idBanner: <?= $id ?>,
                    xyInicial: '',
                    xyFinal: '',
                    urlExterna: url.trim()
                }).done(() => location.reload())
                .fail(() => alert('Error al guardar hipervínculo'));
        });

        /* ───── Eliminar vínculo ───── */
        $('.delete-link').click(function() {
            if (!confirm('¿Eliminar este hipervínculo?')) return;
            $.post('eliminar_hipervinculo.php', {
                    id: $(this).data('id')
                })
                .done(() => location.reload())
                .fail(() => alert('Error al eliminar'));
        });

    });
</script>

<?php include '../templates/footer.php'; ?>