<%- include('partials/head', {
  title,
  pageTitle: 'Configurações',
  sectionLabel: 'Loja',
  active: 'settings'
}) %>

<%
  const fieldClass = (key) => errors && errors[key] ? 'field has-error' : 'field';
%>

<div class="admin-section-head">
  <div>
    <h2>Informações da loja</h2>
    <p>Esses dados aparecem no site, no rodapé e nos links de atendimento.</p>
  </div>
  <div class="admin-section-head__actions">
    <a class="btn btn--outline btn--sm" href="<%= url('/admin/exportar') %>"><%- icon('upload') %> Exportar backup</a>
  </div>
</div>

<form class="admin-form" action="<%= url('/admin/configuracoes') %>" method="post">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>">

  <section class="panel">
    <div class="panel__head"><h2>Identidade</h2></div>
    <div class="panel__body">
      <div class="settings-grid">
        <div class="<%= fieldClass('nomeLoja') %>">
          <label for="nomeLoja">Nome da loja <span class="req">*</span></label>
          <input id="nomeLoja" name="nomeLoja" type="text" value="<%= values.nomeLoja || '' %>" maxlength="80" required>
          <% if (errors.nomeLoja) { %><span class="field__error"><%= errors.nomeLoja %></span><% } %>
        </div>

        <div class="<%= fieldClass('siteUrl') %>">
          <label for="siteUrl">URL do site</label>
          <input id="siteUrl" name="siteUrl" type="url" value="<%= values.siteUrl || '' %>" placeholder="https://www.sualoja.com.br">
          <% if (errors.siteUrl) { %><span class="field__error"><%= errors.siteUrl %></span><% } else { %><small class="hint">Usada nos links compartilhados e no sitemap.</small><% } %>
        </div>
      </div>
    </div>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Contato</h2></div>
    <div class="panel__body">
      <div class="settings-grid">
        <div class="<%= fieldClass('whatsapp') %>">
          <label for="whatsapp">WhatsApp (somente números) <span class="req">*</span></label>
          <input id="whatsapp" name="whatsapp" type="text" value="<%= values.whatsapp || '' %>" placeholder="5511999999999" required>
          <% if (errors.whatsapp) { %><span class="field__error"><%= errors.whatsapp %></span><% } else { %><small class="hint">Com DDI e DDD. Ex.: 5511999999999.</small><% } %>
        </div>

        <div class="field">
          <label for="whatsappExibicao">WhatsApp como aparece no site</label>
          <input id="whatsappExibicao" name="whatsappExibicao" type="text" value="<%= values.whatsappExibicao || '' %>" placeholder="(11) 99999-9999">
        </div>

        <div class="<%= fieldClass('email') %>">
          <label for="email">E-mail</label>
          <input id="email" name="email" type="email" value="<%= values.email || '' %>" placeholder="contato@sualoja.com.br">
          <% if (errors.email) { %><span class="field__error"><%= errors.email %></span><% } %>
        </div>

        <div class="field">
          <label for="instagram">Instagram (sem @)</label>
          <input id="instagram" name="instagram" type="text" value="<%= values.instagram || '' %>" placeholder="sualoja">
        </div>
      </div>

      <label class="check">
        <input type="checkbox" name="mostrarInstagram" <%= values.mostrarInstagram !== false ? 'checked' : '' %>>
        <span><strong>Mostrar Instagram no rodapé</strong><small>Exibe o link apenas se o perfil estiver preenchido</small></span>
      </label>
    </div>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Endereço e atendimento</h2></div>
    <div class="panel__body">
      <div class="settings-grid">
        <div class="field">
          <label for="endereco">Endereço</label>
          <input id="endereco" name="endereco" type="text" value="<%= values.endereco || '' %>" maxlength="160">
        </div>

        <div class="field">
          <label for="cidade">Cidade / estado</label>
          <input id="cidade" name="cidade" type="text" value="<%= values.cidade || '' %>" maxlength="100">
        </div>

        <div class="field field--full">
          <label for="horario">Horário de atendimento</label>
          <textarea id="horario" name="horario" rows="3" maxlength="300"><%= values.horario || '' %></textarea>
          <small class="hint">Uma linha por período. Ex.: Segunda a sexta, das 8h às 18h.</small>
        </div>
      </div>
    </div>
  </section>

  <section class="panel">
    <div class="panel__head"><h2>Textos do site</h2></div>
    <div class="panel__body">
      <div class="field">
        <label for="avisoTopo">Aviso no topo da página inicial</label>
        <textarea id="avisoTopo" name="avisoTopo" rows="2" maxlength="120"><%= values.avisoTopo || '' %></textarea>
      </div>

      <div class="field">
        <label for="sobreTitulo">Título da seção “Sobre a loja”</label>
        <input id="sobreTitulo" name="sobreTitulo" type="text" value="<%= values.sobreTitulo || '' %>" maxlength="120">
      </div>

      <div class="field">
        <label for="sobreTexto">Texto sobre a loja</label>
        <textarea id="sobreTexto" name="sobreTexto" rows="5" maxlength="800"><%= values.sobreTexto || '' %></textarea>
      </div>

      <div class="field">
        <label for="rodapeTexto">Texto do rodapé</label>
        <textarea id="rodapeTexto" name="rodapeTexto" rows="3" maxlength="300"><%= values.rodapeTexto || '' %></textarea>
      </div>
    </div>
  </section>

  <div class="form-actions">
    <a class="btn btn--outline" href="<%= url('/admin') %>">Cancelar</a>
    <button class="btn btn--green" type="submit"><%- icon('check') %> Salvar configurações</button>
  </div>
</form>

<%- include('partials/foot') %>
