<?php
require_once __DIR__ . '/../config/bootstrap.php';
admin_require_login();
$pdo = db();
$id = (int)get_str('id','0');
if ($id <= 0) { header('Location: events.php'); exit; }

$st = $pdo->prepare('SELECT id, status, nome_evento, data_evento, destino, endereco, token_publico FROM eventos WHERE id=? LIMIT 1');
$st->execute([$id]);
$ev = $st->fetch();
if (!$ev) { header('Location: events.php'); exit; }
?>
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Builder - Evento #<?= (int)$ev['id']; ?></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <link href="../assets/css/style.css" rel="stylesheet">
  <style>
    .form-section-title{ font-weight:700; font-size:.95rem; margin-top:.75rem; }
    .sticky-actions{ position: sticky; top: 0; z-index: 5; background: rgba(248,249,250,.95); backdrop-filter: blur(6px); padding: 8px 0; }
    .builder-side-scroll{ max-height: calc(100vh - 140px); overflow: auto; }
    .preview-sticky{ position: sticky; top: 12px; }
  </style>
</head>
<body class="bg-light" data-event-id="<?= (int)$ev['id']; ?>">

<div class="container-fluid py-3">
  <div class="d-flex align-items-center justify-content-between mb-2">
    <div class="d-flex align-items-center gap-2">
      <a href="events.php" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left"></i></a>
      <h4 class="m-0">Builder — Evento #<?= (int)$ev['id']; ?></h4>
      <span id="evt_status" class="badge text-bg-warning">draft</span>
    </div>
    <div class="d-flex gap-2">
      <button id="btnPreview" class="btn btn-outline-primary btn-sm"><i class="bi bi-eye"></i> Preview</button>
      <button id="btnSave" class="btn btn-primary btn-sm"><i class="bi bi-save"></i> Salvar</button>
      <button id="btnPublish" class="btn btn-success btn-sm"><i class="bi bi-upload"></i> Publicar</button>
      <button id="btnArchive" class="btn btn-outline-secondary btn-sm"><i class="bi bi-archive"></i> Arquivar</button>
    </div>
  </div>

  <div class="row g-3">

    <!-- COL LEFT: FORM -->
    <div class="col-lg-5">
      <div class="card shadow-sm">
        <div class="card-body">

          <!-- HEADER DO EVENTO -->
          <div class="mb-3">
            <div class="fw-semibold" id="evt_nome">—</div>
            <div class="small text-muted">
              <span id="evt_destino">—</span> • <span id="evt_data">—</span>
            </div>

            <div class="row g-2 mt-2">
              <div class="col-md-4">
                <label class="form-label small">Token</label>
                <input id="evt_token" class="form-control form-control-sm" readonly>
              </div>
              <div class="col-md-8">
                <label class="form-label small">Link do Cliente</label>
                <div class="input-group input-group-sm">
                  <input id="evt_link_input" class="form-control" readonly>
                  <button id="btnCopyLink" class="btn btn-outline-secondary" type="button" title="Copiar link"><i class="bi bi-clipboard"></i></button>
                  <a id="evt_link" class="btn btn-outline-primary" href="#" target="_blank" title="Abrir link"><i class="bi bi-box-arrow-up-right"></i></a>
                </div>
                <div class="small text-muted mt-1">O cliente acessa somente por este link (token travado).</div>
              </div>
            </div>
          </div>

          <!-- TABS -->
          <ul class="nav nav-tabs" id="builderTabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="tab-regras" data-bs-toggle="tab" data-bs-target="#pane-regras" type="button" role="tab">Regras</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="tab-fundo" data-bs-toggle="tab" data-bs-target="#pane-fundo" type="button" role="tab">Fundo</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="tab-titulo" data-bs-toggle="tab" data-bs-target="#pane-titulo" type="button" role="tab">Título</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="tab-foto" data-bs-toggle="tab" data-bs-target="#pane-foto" type="button" role="tab">Foto</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="tab-nome" data-bs-toggle="tab" data-bs-target="#pane-nome" type="button" role="tab">Tarja + Nome</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="tab-slogan" data-bs-toggle="tab" data-bs-target="#pane-slogan" type="button" role="tab">Slogan</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="tab-rodape" data-bs-toggle="tab" data-bs-target="#pane-rodape" type="button" role="tab">Rodapé</button>
            </li>
          </ul>

          <div class="builder-side-scroll pt-3">
            <div class="tab-content">

              <!-- REGRAS -->
              <div class="tab-pane fade show active" id="pane-regras" role="tabpanel">
                <div class="form-section-title">Regras</div>
                <div class="row g-2">
                  <div class="col-md-6">
                    <label class="form-label">Máx. caracteres do nome</label>
                    <input id="cfg_nome_max_chars" type="number" class="form-control" min="5" max="40" value="26">
                    <div class="small text-muted mt-1">Esse limite é validado no Cliente e no servidor.</div>
                  </div>
                </div>
              </div>

              <!-- FUNDO -->
              <div class="tab-pane fade" id="pane-fundo" role="tabpanel">
                <div class="form-section-title">Fundo</div>
                <div class="row g-2">
                  <div class="col-md-6">
                    <label class="form-label">Tipo</label>
                    <select id="bg_type" class="form-select">
                      <option value="solid">Cor sólida</option>
                      <option value="gradient">Gradiente</option>
                      <option value="image">Imagem</option>
                    </select>
                  </div>
                </div>

                <div id="bg_solid_group" class="mt-2">
                  <label class="form-label">Cor</label>
                  <input id="bg_solid_color" type="color" class="form-control form-control-color">
                </div>

                <div id="bg_grad_group" class="mt-2" style="display:none">
                  <div class="row g-2">
                    <div class="col-md-4">
                      <label class="form-label">Cor A</label>
                      <input id="bg_grad_a" type="color" class="form-control form-control-color">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Cor B</label>
                      <input id="bg_grad_b" type="color" class="form-control form-control-color">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Ângulo</label>
                      <input id="bg_grad_angle" type="number" class="form-control" min="0" max="360">
                    </div>
                  </div>
                </div>

                <div id="bg_img_group" class="mt-2" style="display:none">
                  <div class="row g-2">
                    <div class="col-md-8">
                      <label class="form-label">Upload (JPG/PNG/BMP/WEBP)</label>
                      <input id="bg_upload" type="file" class="form-control" accept="image/*">
                      <div class="small text-muted mt-1">Ao enviar, o Asset ID é preenchido automaticamente.</div>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Asset ID</label>
                      <input id="bg_asset_id" class="form-control" placeholder="ex: 12">
                    </div>
                  </div>

                  <div class="mt-2">
                    <div class="small text-muted mb-1">Preview do asset:</div>
                    <img id="bg_asset_thumb" src="" alt="Preview" style="width:100%;max-height:120px;object-fit:contain;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:#fff;display:none;">
                  </div>

                  <div class="row g-2 mt-2">
                    <div class="col-md-4">
                      <label class="form-label">Zoom</label>
                      <input id="bg_zoom" type="number" step="0.05" class="form-control" value="1">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Horizontal (X)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move para esquerda/direita. Ex: 0 = padrão."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="bg_x" type="number" class="form-control" value="0">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Vertical (Y)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move para cima/baixo. Ex: 0 = padrão."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="bg_y" type="number" class="form-control" value="0">
                    </div>
                  </div>

                  <div class="row g-2 mt-2">
                    <div class="col-md-4">
                      <label class="form-label">Rotação (°)</label>
                      <input id="bg_rotate" type="number" class="form-control" min="0" max="360" value="0">
                    </div>
                    <div class="col-md-8">
                      <label class="form-label">Modo</label>
                      <select id="bg_fit" class="form-select">
                        <option value="cover">Preencher (cover)</option>
                        <option value="contain">Ajustar (contain)</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>

              <!-- TÍTULO -->
              <div class="tab-pane fade" id="pane-titulo" role="tabpanel">
                <div class="form-section-title">Título</div>
                <div class="row g-2">
                  <div class="col-md-6">
                    <label class="form-label">Tipo</label>
                    <select id="title_type" class="form-select">
                      <option value="text">Texto</option>
                      <option value="image">Imagem</option>
                    </select>
                  </div>
                </div>

                <div id="title_text_group" class="mt-2">
                  <div class="mb-2">
                    <label class="form-label">Texto</label>
                    <input id="title_text_value" class="form-control" placeholder="Título do frame">
                  </div>
                  <div class="row g-2">
                    <div class="col-md-6">
                      <label class="form-label">Fonte</label>
                      <select id="title_font_family" class="form-select">
                        <option>Montserrat</option>
                        <option>Arial</option>
                        <option>Impact</option>
                        <option>Georgia</option>
                      </select>
                    </div>
                    <div class="col-md-3">
                      <label class="form-label">Tamanho</label>
                      <input id="title_font_size" type="number" class="form-control" value="72">
                    </div>
                    <div class="col-md-3">
                      <label class="form-label">Peso</label>
                      <input id="title_font_weight" type="number" class="form-control" value="700">
                    </div>
                  </div>
                  <div class="row g-2 mt-2">
                    <div class="col-md-4">
                      <label class="form-label">Cor</label>
                      <input id="title_color" type="color" class="form-control form-control-color">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Alinhamento</label>
                      <select id="title_align" class="form-select">
                        <option value="center">Centro</option>
                        <option value="left">Esquerda</option>
                        <option value="right">Direita</option>
                      </select>
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Rotação (°)</label>
                      <input id="title_rotate" type="number" class="form-control" value="0">
                    </div>
                  </div>
                  <div class="row g-2 mt-2">
                    <div class="col-md-6">
                      <label class="form-label">Posição horizontal do título (X)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="540 centraliza. Use para alinhar o título."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="title_x" type="number" class="form-control" value="540">
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Posição vertical do título (Y)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move o título para cima/baixo. Ex: 180 é padrão."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="title_y" type="number" class="form-control" value="180">
                    </div>
                  </div>
                </div>

                <div id="title_img_group" class="mt-2" style="display:none">
                  <div class="row g-2">
                    <div class="col-md-8">
                      <label class="form-label">Upload (logo/título)</label>
                      <input id="title_upload" type="file" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Asset ID</label>
                      <input id="title_asset_id" class="form-control" placeholder="ex: 15">
                    </div>
                  </div>
                  <div class="row g-2 mt-2">
                    <div class="col-md-4">
                      <label class="form-label">Largura</label>
                      <input id="title_w" type="number" class="form-control" value="600">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Altura</label>
                      <input id="title_h" type="number" class="form-control" value="180">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Rotação (°)</label>
                      <input id="title_img_rotate" type="number" class="form-control" value="0">
                    </div>
                  </div>
                  <div class="row g-2 mt-2">
                    <div class="col-md-6">
                      <label class="form-label">Posição horizontal da imagem (X)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move a imagem do título para esquerda/direita."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="title_img_x" type="number" class="form-control" value="240">
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Posição vertical da imagem (Y)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move a imagem do título para cima/baixo."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="title_img_y" type="number" class="form-control" value="120">
                    </div>
                  </div>
                </div>
              </div>

              <!-- FOTO -->
              <div class="tab-pane fade" id="pane-foto" role="tabpanel">
                <div class="form-section-title">Foto do Participante (slot circular)</div>
                <div class="row g-2">
                  <div class="col-md-4">
                    <label class="form-label">Horizontal (X)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Esquerda ↔ direita. Ex: 540 centraliza."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="photo_x" type="number" class="form-control" value="540">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Vertical (Y)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Cima ↔ baixo. Ex: 840 é um padrão bom."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="photo_y" type="number" class="form-control" value="840">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Tamanho do círculo (Raio)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Maior = foto maior. Ex: 340 é o padrão."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="photo_radius" type="number" class="form-control" value="340">
                  </div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-md-4">
                    <div class="form-check mt-4">
                      <input id="photo_border_enabled" class="form-check-input" type="checkbox" checked>
                      <label class="form-check-label">Borda</label>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Cor da borda</label>
                    <input id="photo_border_color" type="color" class="form-control form-control-color">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Espessura da borda</label>
                    <input id="photo_border_width" type="number" class="form-control" value="10">
                  </div>
                </div>
              </div>

              <!-- TARJA + NOME -->
              <div class="tab-pane fade" id="pane-nome" role="tabpanel">
                <div class="form-section-title">Tarja do Nome</div>
                <div class="row g-2">
                  <div class="col-md-3">
                    <label class="form-label">Posição horizontal da tarja (X)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move a tarja para esquerda/direita. Ex: 120 é padrão."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="bar_x" type="number" class="form-control" value="120">
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">Posição vertical da tarja (Y)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move a tarja para cima/baixo. Ex: 1320 é padrão."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="bar_y" type="number" class="form-control" value="1320">
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">Largura</label>
                    <input id="bar_w" type="number" class="form-control" value="840">
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">Altura</label>
                    <input id="bar_h" type="number" class="form-control" value="170">
                  </div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-md-4">
                    <label class="form-label">Arredondamento da tarja (raio)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Quanto maior, mais arredondada a tarja. Ex: 18 é padrão."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="bar_radius" type="number" class="form-control" value="18">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Cor</label>
                    <input id="bar_color" type="color" class="form-control form-control-color">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Opacidade</label>
                    <input id="bar_opacity" type="number" step="0.01" min="0" max="1" class="form-control" value="0.92">
                  </div>
                </div>

                <div class="row g-2 mt-2">
                  <div class="col-md-4">
                    <div class="form-check mt-4">
                      <input id="bar_stroke_enabled" class="form-check-input" type="checkbox">
                      <label class="form-check-label">Contorno</label>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Cor contorno</label>
                    <input id="bar_stroke_color" type="color" class="form-control form-control-color">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Espessura</label>
                    <input id="bar_stroke_width" type="number" class="form-control" value="2">
                  </div>
                </div>

                <div class="row g-2 mt-2">
                  <div class="col-md-4">
                    <div class="form-check mt-4">
                      <input id="bar_shadow_enabled" class="form-check-input" type="checkbox">
                      <label class="form-check-label">Sombra</label>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Blur</label>
                    <input id="bar_shadow_blur" type="number" class="form-control" value="12">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Opacidade</label>
                    <input id="bar_shadow_opacity" type="number" step="0.01" min="0" max="1" class="form-control" value="0.25">
                  </div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-md-6">
                    <label class="form-label">Deslocamento da sombra (X)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move a sombra para esquerda/direita. Ex: 0 é padrão."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="bar_shadow_x" type="number" class="form-control" value="0">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Deslocamento da sombra (Y)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move a sombra para cima/baixo. Ex: 6 dá efeito de profundidade."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="bar_shadow_y" type="number" class="form-control" value="6">
                  </div>
                </div>

                <hr>

                <div class="form-section-title">Texto do Nome</div>
                <div class="row g-2">
                  <div class="col-md-6">
                    <label class="form-label">Fonte</label>
                    <select id="name_font_family" class="form-select">
                      <option>Montserrat</option>
                      <option>Arial</option>
                      <option>Impact</option>
                      <option>Georgia</option>
                    </select>
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">Tamanho</label>
                    <input id="name_font_size" type="number" class="form-control" value="64">
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">Peso</label>
                    <input id="name_font_weight" type="number" class="form-control" value="800">
                  </div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-md-4">
                    <label class="form-label">Cor</label>
                    <input id="name_color" type="color" class="form-control form-control-color">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Alinhamento</label>
                    <select id="name_align" class="form-select">
                      <option value="center">Centro</option>
                      <option value="left">Esquerda</option>
                      <option value="right">Direita</option>
                    </select>
                  </div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-md-6">
                    <label class="form-label">Posição horizontal do nome (X)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Em geral 540 centraliza. Ajuste para alinhar com a tarja."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="name_x" type="number" class="form-control" value="540">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Posição vertical do nome (Y)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Ajusta o nome para cima/baixo dentro da tarja. Ex: 1435 é padrão."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="name_y" type="number" class="form-control" value="1435">
                  </div>
                </div>
              </div>

              <!-- SLOGAN -->
              <div class="tab-pane fade" id="pane-slogan" role="tabpanel">
                <div class="form-section-title">Slogan/Subtítulo (fixo do Evento)</div>
                <div class="mb-2">
                  <label class="form-label">Texto</label>
                  <input id="sub_value" class="form-control" placeholder="Ex: Excursão Oficial">
                </div>
                <div class="row g-2">
                  <div class="col-md-6">
                    <label class="form-label">Fonte</label>
                    <select id="sub_font_family" class="form-select">
                      <option>Montserrat</option>
                      <option>Arial</option>
                      <option>Impact</option>
                      <option>Georgia</option>
                    </select>
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">Tamanho</label>
                    <input id="sub_font_size" type="number" class="form-control" value="36">
                  </div>
                  <div class="col-md-3">
                    <label class="form-label">Peso</label>
                    <input id="sub_font_weight" type="number" class="form-control" value="600">
                  </div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-md-4">
                    <label class="form-label">Cor</label>
                    <input id="sub_color" type="color" class="form-control form-control-color">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label">Alinhamento</label>
                    <select id="sub_align" class="form-select">
                      <option value="center">Centro</option>
                      <option value="left">Esquerda</option>
                      <option value="right">Direita</option>
                    </select>
                  </div>
                </div>
                <div class="row g-2 mt-2">
                  <div class="col-md-6">
                    <label class="form-label">Posição horizontal do slogan (X)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Em geral 540 centraliza."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="sub_x" type="number" class="form-control" value="540">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Posição vertical do slogan (Y)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Move o slogan para cima/baixo. Ex: 1530 é padrão."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="sub_y" type="number" class="form-control" value="1530">
                  </div>
                </div>
              </div>

              <!-- RODAPÉ -->
              <div class="tab-pane fade" id="pane-rodape" role="tabpanel">
                <div class="form-section-title">Rodapé (texto ou imagem)</div>
                <div class="row g-2">
                  <div class="col-md-6">
                    <label class="form-label">Tipo</label>
                    <select id="footer_type" class="form-select">
                      <option value="text">Texto</option>
                      <option value="image">Imagem</option>
                    </select>
                  </div>
                  <div class="col-md-6">
                    <label class="form-label">Alinhamento</label>
                    <select id="footer_align" class="form-select">
                      <option value="center">Centro</option>
                      <option value="left">Esquerda</option>
                      <option value="right">Direita</option>
                    </select>
                  </div>
                </div>

                <div class="row g-2 mt-2">
                  <div class="col-md-6">
                    <label class="form-label">Margem lateral (Padding X)
                      <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Usado no alinhamento esquerda/direita. Define o afastamento das bordas."><i class="bi bi-question-circle"></i></span>
                    </label>
                    <input id="footer_padding_x" type="number" class="form-control" value="80">
                  </div>
                </div>

                <div id="footer_text_group" class="mt-2">
                  <div class="mb-2">
                    <label class="form-label">Texto</label>
                    <input id="footer_text_value" class="form-control" placeholder="Ex: @suaempresa">
                  </div>
                  <div class="row g-2">
                    <div class="col-md-6">
                      <label class="form-label">Fonte</label>
                      <select id="footer_font_family" class="form-select">
                        <option>Montserrat</option>
                        <option>Arial</option>
                        <option>Impact</option>
                        <option>Georgia</option>
                      </select>
                    </div>
                    <div class="col-md-3">
                      <label class="form-label">Tamanho</label>
                      <input id="footer_font_size" type="number" class="form-control" value="28">
                    </div>
                    <div class="col-md-3">
                      <label class="form-label">Peso</label>
                      <input id="footer_font_weight" type="number" class="form-control" value="600">
                    </div>
                  </div>
                  <div class="row g-2 mt-2">
                    <div class="col-md-4">
                      <label class="form-label">Cor</label>
                      <input id="footer_color" type="color" class="form-control form-control-color">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Posição vertical do rodapé (Y)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Para texto no rodapé. Ex: 1860 é padrão."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="footer_y" type="number" class="form-control" value="1860">
                    </div>
                  </div>
                </div>

                <div id="footer_img_group" class="mt-2" style="display:none">
                  <div class="row g-2">
                    <div class="col-md-8">
                      <label class="form-label">Upload (rodapé)</label>
                      <input id="footer_upload" type="file" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Asset ID</label>
                      <input id="footer_asset_id" class="form-control" placeholder="ex: 22">
                    </div>
                  </div>
                  <div class="row g-2 mt-2">
                    <div class="col-md-4">
                      <label class="form-label">Largura</label>
                      <input id="footer_w" type="number" class="form-control" value="240">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Altura</label>
                      <input id="footer_h" type="number" class="form-control" value="80">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Posição vertical da imagem (Y)
                        <span class="ms-1 text-muted" data-bs-toggle="tooltip" title="Para imagem no rodapé. Ex: 1830 é padrão."><i class="bi bi-question-circle"></i></span>
                      </label>
                      <input id="footer_img_y" type="number" class="form-control" value="1830">
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- COL RIGHT: PREVIEW -->

    <div class="col-lg-7">
      <div class="card shadow-sm preview-sticky">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="m-0">Preview (1080×1920)</h5>
            <div class="text-muted small">Guia: canvas fixo • sem “public/” no deploy</div>
          </div>
          <div class="builder-canvas-wrap">
            <canvas id="builderCanvas" class="builder-canvas"></canvas>
          </div>
          <div class="small text-muted mt-2">
            Dica: use <b>Preview</b> para ver rapidamente sem salvar. Use <b>Salvar</b> para gravar o config_json.
          </div>
        </div>
      </div>

    </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/renderer.js"></script>
<script src="../assets/js/builder.js"></script>
</body>
</html>
