<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mi negocio | Trokkmart</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/estilos.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css" />
  <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
</head>
<body>
  <%- include('partials/nav', { activo: 'negocio' }) %>

  <main class="page">
    <div class="page-head">
      <div>
        <h1>Mi negocio</h1>
        <p class="page-sub">Esto es lo que ven tus clientes en tu tienda pública — no el nombre "Trokkmart" (esa es la plataforma).</p>
      </div>
    </div>

    <% if (mensaje) { %><p class="alert alert-ok" style="max-width: 620px;"><%= mensaje %></p><% } %>

    <div class="card form-panel" style="max-width: 640px;">
      <form action="/panel/negocio" method="POST" enctype="multipart/form-data">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
        <h3 style="font-family: var(--font-display); margin: 0 0 1rem;">Marca</h3>
        <div class="form-group">
          <label>Nombre del negocio</label>
          <input type="text" name="nombreNegocio" value="<%= negocio.nombreNegocio %>" required />
        </div>
        <div class="form-group">
          <label>Eslogan (opcional)</label>
          <input type="text" name="eslogan" value="<%= negocio.eslogan || '' %>" placeholder="Ej: Moda y estilo para vos" />
        </div>
        <div class="form-group">
          <label>Color de marca</label>
          <input type="text" name="colorPrincipal" id="colorPrincipal" value="<%= negocio.colorPrincipal %>" data-coloris />
          <p class="page-sub" style="margin: 0.3rem 0 0;">Escribí un código hex (ej: #006aff) o elegí uno del selector.</p>
        </div>
        <div class="form-group">
          <label>Logo (opcional)</label>
          <% if (negocio.logoUrl) { %>
            <img src="<%= negocio.logoUrl %>" alt="Logo actual" style="max-width: 140px; max-height: 140px; display: block; margin-bottom: 0.6rem; border-radius: 8px; border: 1px solid var(--borde, #e2e2e2);" />
          <% } %>
          <input type="file" name="logo" accept="image/*" />
          <p class="page-sub" style="margin: 0.3rem 0 0;">JPG, PNG, WEBP o GIF. Máx. 5MB. Dejalo vacío para mantener el actual.</p>
        </div>
        <div class="form-group">
          <label>Banner del catálogo (opcional)</label>
          <% if (negocio.bannerUrl) { %>
            <img src="<%= negocio.bannerUrl %>" alt="Banner actual" style="max-width: 100%; max-height: 160px; display: block; margin-bottom: 0.6rem; border-radius: 8px; border: 1px solid var(--borde, #e2e2e2);" />
          <% } %>
          <input type="file" name="banner" accept="image/*" />
          <p class="page-sub" style="margin: 0.3rem 0 0;">JPG, PNG, WEBP o GIF. Máx. 5MB. Dejalo vacío para mantener el actual.</p>
        </div>

        <h3 style="font-family: var(--font-display); margin: 1.6rem 0 1rem;">Oferta destacada</h3>
        <div class="checkbox-row" style="margin-bottom: 1rem;">
          <input type="checkbox" id="ofertaActiva" name="ofertaActiva" <%= negocio.ofertaActiva ? 'checked' : '' %> />
          <label for="ofertaActiva" style="text-transform:none; letter-spacing:0; font-weight:400;">Mostrar banner de oferta en la tienda</label>
        </div>
        <div class="form-group">
          <label>Texto de la oferta</label>
          <input type="text" name="ofertaTexto" value="<%= negocio.ofertaTexto || '' %>" placeholder="Ej: 20% off en toda la tienda esta semana" />
        </div>

        <h3 style="font-family: var(--font-display); margin: 1.6rem 0 1rem;">Contacto y redes</h3>
        <div class="form-group">
          <label>Dirección</label>
          <input type="text" name="direccion" value="<%= negocio.direccion || '' %>" />
        </div>
        <div class="form-group">
          <label>WhatsApp</label>
          <input type="text" name="whatsapp" value="<%= negocio.whatsapp || '' %>" placeholder="58412..." />
        </div>
        <div class="form-group">
          <label>Instagram</label>
          <input type="text" name="instagram" value="<%= negocio.instagram || '' %>" placeholder="usuario o URL" />
        </div>
        <div class="form-group">
          <label>Facebook</label>
          <input type="text" name="facebook" value="<%= negocio.facebook || '' %>" placeholder="usuario o URL" />
        </div>
        <div class="form-group">
          <label>TikTok</label>
          <input type="text" name="tiktok" value="<%= negocio.tiktok || '' %>" placeholder="usuario o URL" />
        </div>

        <button type="submit" class="btn btn-primary btn-full">Guardar cambios</button>
      </form>
    </div>
  </main>

  <script>
    Coloris({
      theme: 'large',
      themeMode: 'light',
      alpha: false,
      format: 'hex',
      swatches: [
        '#006aff', '#0f172a', '#1d4ed8', '#7c3aed', '#db2777',
        '#dc2626', '#ea580c', '#d97706', '#16a34a', '#0891b2',
      ],
    });
  </script>
</body>
</html>
