{% extends 'dashboard/base.html' %}
{% block title %}Settings{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Settings</h1>
    <p class="sp-muted">Manage your business details and website configuration.</p>
  </div>
</div>

<div class="sp-tabs">
  <a href="?section=business" class="{% if section == 'business' %}active{% endif %}">Business Details</a>
  <a href="?section=email" class="{% if section == 'email' %}active{% endif %}">Email Settings</a>
  <a href="?section=analytics" class="{% if section == 'analytics' %}active{% endif %}">Analytics</a>
  <a href="?section=blog" class="{% if section == 'blog' %}active{% endif %}">Blog</a>
  <a href="?section=cookies" class="{% if section == 'cookies' %}active{% endif %}">Cookie Consent</a>
</div>

<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="sp-card" style="max-width:{% if section == 'cookies' %}860px{% else %}560px{% endif %};">

    {% if section == 'business' %}
      <h2>Business Details</h2>
      <label class="sp-label">Business Name</label>{{ form.site_name }}
      <label class="sp-label">Logo</label>
      <div class="sp-image-slot">
        {% if site_settings.logo %}
          <img src="{{ site_settings.logo.url }}" alt="Logo" class="preview">
        {% endif %}
        <div style="flex:1;">
          {{ form.logo }}
          {% if site_settings.logo %}
            <button
              type="submit"
              class="sp-btn sp-btn-sm sp-btn-danger"
              style="margin-top:8px;"
              formaction="{% url 'dashboard_settings_image_delete' 'logo' %}"
              formmethod="post"
              formnovalidate
              data-sp-confirm="This cannot be undone." data-sp-confirm-title="Remove the logo?"
            >
              <i class="fa-solid fa-trash"></i> Remove logo
            </button>
          {% endif %}
        </div>
      </div>
      <label class="sp-label">Favicon</label>
      <div class="sp-image-slot">
        {% if site_settings.favicon %}
          <img src="{{ site_settings.favicon.url }}" alt="Favicon" class="preview">
        {% endif %}
        <div style="flex:1;">
          {{ form.favicon }}
          {% if site_settings.favicon %}
            <button
              type="submit"
              class="sp-btn sp-btn-sm sp-btn-danger"
              style="margin-top:8px;"
              formaction="{% url 'dashboard_settings_image_delete' 'favicon' %}"
              formmethod="post"
              formnovalidate
              data-sp-confirm="This cannot be undone." data-sp-confirm-title="Remove the favicon?"
            >
              <i class="fa-solid fa-trash"></i> Remove favicon
            </button>
          {% endif %}
        </div>
      </div>
      <label class="sp-label">Phone</label>{{ form.phone }}
      <label class="sp-label">Email</label>{{ form.email }}
      <label class="sp-label">Address</label>{{ form.address }}
      <label class="sp-label">WhatsApp Number</label>{{ form.whatsapp_number }}
      <label class="sp-label">Facebook URL</label>{{ form.facebook_url }}
      <label class="sp-label">Instagram URL</label>{{ form.instagram_url }}
      <label class="sp-label">X (Twitter) URL</label>{{ form.twitter_url }}
      <label class="sp-label">LinkedIn URL</label>{{ form.linkedin_url }}
      <label class="sp-label">YouTube URL</label>{{ form.youtube_url }}
      <label class="sp-label">TikTok URL</label>{{ form.tiktok_url }}
      <label class="sp-label">Pinterest URL</label>{{ form.pinterest_url }}
      <label class="sp-label">Footer Text</label>{{ form.footer_text }}
      <label class="sp-label">Google Maps Embed</label>{{ form.google_maps_embed }}
      <label class="sp-label">Opening Hours</label>
      <p class="sp-muted" style="margin-top:-4px;">One day per line, e.g. "Monday: 9:00 AM - 5:00 PM" or "Sunday: Closed".</p>
      {{ form.opening_hours }}

    {% elif section == 'email' %}
      <h2>Email Settings (SMTP)</h2>
      <p class="sp-muted" style="margin-top:-6px;">Leave blank to use the default mailbox for your site.</p>
      <label class="sp-label">SMTP Host</label>{{ form.smtp_host }}
      <label class="sp-label">SMTP Port</label>{{ form.smtp_port }}
      <label class="sp-label">SMTP Username</label>{{ form.smtp_username }}
      <label class="sp-label">SMTP Password</label>{{ form.smtp_password }}
      <label class="sp-label">From Email</label>{{ form.smtp_from_email }}
      <label class="sp-label sp-flex" style="gap:8px;">{{ form.smtp_use_tls }} Use TLS</label>
      <label class="sp-label sp-flex" style="gap:8px;">{{ form.smtp_use_ssl }} Use SSL</label>

    {% elif section == 'analytics' %}
      <h2>Analytics</h2>
      <label class="sp-label">Google Analytics ID</label>{{ form.google_analytics_id }}

    {% elif section == 'blog' %}
      <h2>Blog Settings</h2>
      <label class="sp-label sp-flex" style="gap:8px;">{{ form.blog_enabled }} Enable blog</label>
      <label class="sp-label">Blog Title</label>{{ form.blog_title }}
      <label class="sp-label">Blog Description</label>{{ form.blog_description }}

    {% elif section == 'cookies' %}
      <h2>Cookie Consent Banner</h2>
      <p class="sp-muted" style="margin-top:-6px;">Show a cookie notice to visitors. Choose where and how it appears — the preview updates as you change options.</p>

      <div class="sp-cookie-layout">
        <div class="sp-cookie-fields">
          <label class="sp-label sp-flex" style="gap:8px;">{{ form.cookie_consent_enabled }} Enable cookie consent banner</label>

          <label class="sp-label">Position</label>
          {{ form.cookie_consent_position }}

          <label class="sp-label">Theme</label>
          {{ form.cookie_consent_theme }}

          <label class="sp-label">Message</label>
          {{ form.cookie_consent_message }}

          <label class="sp-label">Accept button text</label>
          {{ form.cookie_consent_button_text }}

          <label class="sp-label sp-flex" style="gap:8px;">{{ form.cookie_consent_show_decline }} Show a Decline button</label>

          <label class="sp-label">Decline button text</label>
          {{ form.cookie_consent_decline_text }}

          <label class="sp-label">Cookie / privacy policy link</label>
          <p class="sp-muted" style="margin-top:-4px;">Optional. Shown as a "Learn more" link. Leave blank to hide it.</p>
          {{ form.cookie_consent_policy_url }}
          {% if legal_pages %}
          <select class="sp-input" id="sp-legal-page-picker" style="margin-top:8px;">
            <option value="">— Or pick one of your Legal Pages —</option>
            {% for legal_page in legal_pages %}
            <option value="/legal/{{ legal_page.slug }}/">{{ legal_page.title }}</option>
            {% endfor %}
          </select>
          <script>
            document.getElementById('sp-legal-page-picker').addEventListener('change', function(){
              if(!this.value) return;
              document.getElementById('id_cookie_consent_policy_url').value = this.value;
              this.value = '';
            });
          </script>
          {% else %}
          <p class="sp-muted" style="margin-top:8px;">
            No <a href="{% url 'dashboard_legal_pages_list' %}">Legal Pages</a> yet — create a Privacy Policy page there and it'll show up here for quick linking.
          </p>
          {% endif %}
        </div>

        <div class="sp-cookie-preview-wrap">
          <p class="sp-label" style="margin-bottom:8px;">Preview</p>
          <div id="sp-cookie-preview-stage">
            <div id="sp-cookie-preview-overlay"></div>
            <div id="sp-cookie-preview-banner">
              <span id="sp-cookie-preview-message"></span>
              <div id="sp-cookie-preview-actions">
                <button type="button" id="sp-cookie-preview-decline"></button>
                <button type="button" id="sp-cookie-preview-accept"></button>
              </div>
            </div>
          </div>
          <p class="sp-muted" style="margin-top:8px; font-size:12px;">This is a preview only — it isn't sent when you save.</p>
        </div>
      </div>
    {% endif %}

   <div class="sp-save-bar">
    <span class="sp-save-hint">Don't forget to save your changes</span>
    <button class="sp-btn-save" type="submit"><i class="fa-solid fa-floppy-disk"></i> Save Changes</button>
  </div>
</form>

{% if section == 'cookies' %}
<style>
  .sp-cookie-layout {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .sp-cookie-fields {
    flex: 1 1 320px;
    min-width: 280px;
  }
  .sp-cookie-preview-wrap {
    flex: 1 1 300px;
    min-width: 280px;
    position: sticky;
    top: 16px;
  }
  #sp-cookie-preview-stage {
    position: relative;
    height: 320px;
    border: 1px solid var(--sp-border, #d5e0d6);
    border-radius: 10px;
    background:
      linear-gradient(180deg, #eef3ee 0%, #eef3ee 100%),
      repeating-linear-gradient(45deg, #e4ece4 0, #e4ece4 1px, transparent 1px, transparent 12px);
    overflow: hidden;
  }
  #sp-cookie-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 26, 15, 0.35);
    display: none;
  }
  #sp-cookie-preview-banner {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 8px 24px -8px rgba(20, 26, 15, 0.35);
  }
  #sp-cookie-preview-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  #sp-cookie-preview-actions button {
    border: none;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
  }
</style>
<script>
(function () {
  var stage = document.getElementById('sp-cookie-preview-stage');
  var overlay = document.getElementById('sp-cookie-preview-overlay');
  var banner = document.getElementById('sp-cookie-preview-banner');
  var messageEl = document.getElementById('sp-cookie-preview-message');
  var acceptBtn = document.getElementById('sp-cookie-preview-accept');
  var declineBtn = document.getElementById('sp-cookie-preview-decline');

  var positionEl = document.getElementById('id_cookie_consent_position');
  var themeEl = document.getElementById('id_cookie_consent_theme');
  var messageInput = document.getElementById('id_cookie_consent_message');
  var acceptInput = document.getElementById('id_cookie_consent_button_text');
  var declineToggle = document.getElementById('id_cookie_consent_show_decline');
  var declineInput = document.getElementById('id_cookie_consent_decline_text');

  var THEMES = {
    dark:  { bg: '#1a2e1c', text: '#f5f0e8', accept: '#6aab78', acceptText: '#141a0f', decline: 'transparent', declineText: '#f5f0e8', declineBorder: '#3d4a3e' },
    light: { bg: '#ffffff', text: '#3d4a3e', accept: '#1e4d2b', acceptText: '#ffffff', decline: 'transparent', declineText: '#3d4a3e', declineBorder: '#d5e0d6' },
    brand: { bg: '#1e4d2b', text: '#f5f0e8', accept: '#8c5e38', acceptText: '#ffffff', decline: 'transparent', declineText: '#f5f0e8', declineBorder: '#3a7d44' }
  };

  function applyPosition(position) {
    banner.style.top = banner.style.bottom = banner.style.left = banner.style.right = 'auto';
    banner.style.width = 'auto';
    banner.style.borderRadius = '10px';
    banner.style.flexDirection = 'row';
    overlay.style.display = 'none';

    if (position === 'bottom_bar') {
      banner.style.left = '0'; banner.style.right = '0'; banner.style.bottom = '0';
      banner.style.width = '100%'; banner.style.borderRadius = '0';
      banner.style.justifyContent = 'space-between';
    } else if (position === 'top_bar') {
      banner.style.left = '0'; banner.style.right = '0'; banner.style.top = '0';
      banner.style.width = '100%'; banner.style.borderRadius = '0';
      banner.style.justifyContent = 'space-between';
    } else if (position === 'bottom_left') {
      banner.style.left = '14px'; banner.style.bottom = '14px'; banner.style.maxWidth = '78%';
      banner.style.flexDirection = 'column'; banner.style.alignItems = 'flex-start';
    } else if (position === 'bottom_right') {
      banner.style.right = '14px'; banner.style.bottom = '14px'; banner.style.maxWidth = '78%';
      banner.style.flexDirection = 'column'; banner.style.alignItems = 'flex-start';
    } else if (position === 'center_modal') {
      banner.style.left = '50%'; banner.style.top = '50%';
      banner.style.transform = 'translate(-50%, -50%)';
      banner.style.maxWidth = '82%';
      banner.style.flexDirection = 'column'; banner.style.alignItems = 'flex-start';
      overlay.style.display = 'block';
      return;
    }
    banner.style.transform = 'none';
  }

  function applyTheme(themeKey) {
    var t = THEMES[themeKey] || THEMES.dark;
    banner.style.background = t.bg;
    banner.style.color = t.text;
    acceptBtn.style.background = t.accept;
    acceptBtn.style.color = t.acceptText;
    declineBtn.style.background = t.decline;
    declineBtn.style.color = t.declineText;
    declineBtn.style.border = '1px solid ' + t.declineBorder;
  }

  function render() {
    applyPosition(positionEl ? positionEl.value : 'bottom_bar');
    applyTheme(themeEl ? themeEl.value : 'dark');
    messageEl.textContent = (messageInput && messageInput.value) || 'We use cookies to improve your experience.';
    acceptBtn.textContent = (acceptInput && acceptInput.value) || 'Accept';
    var showDecline = declineToggle && declineToggle.checked;
    declineBtn.style.display = showDecline ? 'inline-block' : 'none';
    declineBtn.textContent = (declineInput && declineInput.value) || 'Decline';
  }

  [positionEl, themeEl, messageInput, acceptInput, declineToggle, declineInput].forEach(function (el) {
    if (el) el.addEventListener('input', render);
    if (el) el.addEventListener('change', render);
  });

  render();
})();
</script>
{% endif %}
{% endblock %}