{% extends "adminpanel/base.html" %}
{% block title %}Settings — admin{% endblock %}
{% block heading %}Settings{% endblock %}

{% block content %}
<div class="pane" style="max-width:820px">
  <div class="tabs">
    <button onclick="location.search='?tab=website'" class="{% if tab == 'website' %}on{% endif %}">Website</button>
    <button onclick="location.search='?tab=pricing'" class="{% if tab == 'pricing' %}on{% endif %}">Pricing</button>
    <button onclick="location.search='?tab=services'" class="{% if tab == 'services' %}on{% endif %}">Services</button>
    <button onclick="location.search='?tab=payment'" class="{% if tab == 'payment' %}on{% endif %}">Payment</button>
    <button onclick="location.search='?tab=email'" class="{% if tab == 'email' %}on{% endif %}">Email</button>
    <button onclick="location.search='?tab=account'" class="{% if tab == 'account' %}on{% endif %}">Account</button>
  </div>

  {% if tab == 'pricing' %}
    <div class="panel">
      <div class="panel-h"><h2>Public packages</h2>
        <a href="{% url 'admin_package_new' %}" class="btn btn-sm act">Add package</a></div>
      <div style="overflow:auto"><table>
        <tr><th>Package</th><th>Price</th><th>Delivery</th><th>Shown</th><th></th></tr>
        {% for p in packages %}
        <tr><td>{{ p.name }}</td><td>{{ p.price }}</td><td>{{ p.delivery_time }}</td>
          <td><span class="status {% if p.published %}s-online{% else %}s-draft{% endif %}">{% if p.published %}Live{% else %}Hidden{% endif %}</span></td>
          <td><a href="{% url 'admin_package_edit' p.pk %}" class="btn btn-sm">Edit</a></td></tr>
        {% empty %}<tr><td colspan="5" class="muted">No packages yet.</td></tr>{% endfor %}
      </table></div>
    </div>

  {% elif tab == 'services' %}
    <div class="panel">
      <div class="panel-h"><h2>Services</h2><a href="{% url 'admin_service_new' %}" class="btn btn-sm act">Add service</a></div>
      <div style="overflow:auto"><table>
        <tr><th>Service</th><th>Starting price</th><th>Delivery</th><th>Shown</th><th></th></tr>
        {% for s in services %}
        <tr><td>{{ s.title }}</td><td>{{ s.starting_price }}</td><td>{{ s.delivery_time }}</td>
          <td><span class="status {% if s.published %}s-online{% else %}s-draft{% endif %}">{% if s.published %}Live{% else %}Hidden{% endif %}</span></td>
          <td><a href="{% url 'admin_service_edit' s.pk %}" class="btn btn-sm">Edit</a></td></tr>
        {% empty %}<tr><td colspan="5" class="muted">No services yet.</td></tr>{% endfor %}
      </table></div>
    </div>

  {% elif tab == 'payment' %}
    <div class="panel">
      <div class="panel-h"><h2>Payment configuration</h2></div>
      <div class="panel-b">
        <div class="warnbox">Secret keys are read from environment variables and are never written to the database or shown here.</div>
        <form method="post">{% csrf_token %}
          <div class="field"><label for="pp">Provider</label><input id="pp" name="payment_provider" value="{{ site.payment_provider }}"></div>
          <div class="field"><label for="pm">Mode</label>
            <select id="pm" name="payment_mode">
              <option {% if site.payment_mode == 'Live' %}selected{% endif %}>Live</option>
              <option {% if site.payment_mode == 'Test' %}selected{% endif %}>Test</option>
            </select></div>
          <div class="field"><label for="wh">Webhook URL</label><input id="wh" name="webhook_url" value="{{ site.webhook_url }}"></div>
          <button class="btn btn-primary">Save payment settings</button>
        </form>
      </div>
    </div>

  {% elif tab == 'email' %}
    <div class="panel">
      <div class="panel-h"><h2>Outgoing mail</h2>
        <span class="status {% if email.enabled %}s-online{% else %}s-draft{% endif %} act">
          {% if email.enabled %}On{% else %}Off{% endif %}</span></div>
      <div class="panel-b">
        <form method="post">{% csrf_token %}
          <label style="display:flex;align-items:center;gap:10px;padding:9px 0">
            <input type="checkbox" name="enabled" style="width:auto" {% if email.enabled %}checked{% endif %}>
            <span>Send email. Untick and nothing goes out.</span></label>

          <div class="field"><label for="provider">Provider</label>
            <select id="provider" name="provider">
              {% for value, label in providers %}
                <option value="{{ value }}" {% if email.provider == value %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
            <p class="hint" id="provider-hint">{{ preset_hint }}</p></div>

          <div class="two">
            <div class="field"><label for="host">SMTP host</label>
              <input id="host" name="host" value="{{ email.host }}" placeholder="mail.teniteno1.com"></div>
            <div class="field"><label for="port">Port</label>
              <input id="port" name="port" type="number" value="{{ email.port }}"></div>
          </div>

          <div class="two">
            <label style="display:flex;align-items:center;gap:10px;padding:9px 0">
              <input type="checkbox" name="use_tls" id="use_tls" style="width:auto" {% if email.use_tls %}checked{% endif %}>
              <span>STARTTLS (port 587)</span></label>
            <label style="display:flex;align-items:center;gap:10px;padding:9px 0">
              <input type="checkbox" name="use_ssl" id="use_ssl" style="width:auto" {% if email.use_ssl %}checked{% endif %}>
              <span>SSL (port 465)</span></label>
          </div>

          <div class="two">
            <div class="field"><label for="username">Username</label>
              <input id="username" name="username" value="{{ email.username }}" placeholder="hello@teniteno1.com"></div>
            <div class="field"><label for="password">Password</label>
              <input id="password" name="password" type="password"
                     placeholder="{% if email.password %}••••••••  leave blank to keep{% else %}SMTP password{% endif %}">
              <p class="hint">Stored in the database so you can set it here. Leave it
                blank and put EMAIL_HOST_PASSWORD in .env if you would rather it did not
                touch the database.</p></div>
          </div>

          <div class="two">
            <div class="field"><label for="from_name">From name</label>
              <input id="from_name" name="from_name" value="{{ email.from_name }}"></div>
            <div class="field"><label for="from_email">From address</label>
              <input id="from_email" name="from_email" type="email" value="{{ email.from_email }}"></div>
          </div>
          <div class="field"><label for="reply_to">Reply-to</label>
            <input id="reply_to" name="reply_to" type="email" value="{{ email.reply_to }}"
                   placeholder="Optional — where replies land"></div>

          <h3 style="font-size:16px;margin:22px 0 6px">Send mail when</h3>
          <label style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)">
            <input type="checkbox" name="on_new_lead" style="width:auto" {% if email.on_new_lead %}checked{% endif %}>
            <span>A project request or enquiry arrives</span></label>
          <label style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)">
            <input type="checkbox" name="on_ticket_opened" style="width:auto" {% if email.on_ticket_opened %}checked{% endif %}>
            <span>A client opens a support ticket</span></label>
          <label style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)">
            <input type="checkbox" name="on_ticket_reply" style="width:auto" {% if email.on_ticket_reply %}checked{% endif %}>
            <span>You reply to a ticket</span></label>
          <label style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)">
            <input type="checkbox" name="on_project_status" style="width:auto" {% if email.on_project_status %}checked{% endif %}>
            <span>A project status changes</span></label>
          <label style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)">
            <input type="checkbox" name="on_invoice_issued" style="width:auto" {% if email.on_invoice_issued %}checked{% endif %}>
            <span>An invoice is issued</span></label>
          <label style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)">
            <input type="checkbox" name="on_payment_received" style="width:auto" {% if email.on_payment_received %}checked{% endif %}>
            <span>A payment comes in</span></label>
          <label style="display:flex;align-items:center;gap:10px;padding:8px 0">
            <input type="checkbox" name="on_new_message" style="width:auto" {% if email.on_new_message %}checked{% endif %}>
            <span>A message is sent either way</span></label>
          <p class="hint">Clients can still switch off their own copies in their account settings.</p>

          <button class="btn btn-primary" name="save_email" value="1" style="margin-top:18px">Save email settings</button>
        </form>
      </div>
    </div>

    <div class="panel">
      <div class="panel-h"><h2>Send a test</h2></div>
      <div class="panel-b">
        {% if email.last_tested_at %}
          <div class="mono" style="margin-bottom:14px">
            Last test {{ email.last_tested_at|date:"j M Y · H:i" }} — {{ email.last_test_result }}</div>
        {% endif %}
        <form method="post">{% csrf_token %}
          <div class="field"><label for="test_to">Send to</label>
            <input id="test_to" name="test_to" type="email" value="{{ user.email }}"></div>
          <button class="btn" name="send_test" value="1">Send test email</button>
          <p class="hint">Save your settings first. Any SMTP error is shown here in full.</p>
        </form>
      </div>
    </div>

  {% elif tab == 'account' %}
    <div class="panel">
      <div class="panel-h"><h2>Security</h2></div>
      <div class="panel-b">
        <dl class="dl">
          <dt>Account</dt><dd>{{ user.get_full_name|default:user.username }} — {{ user.email }}</dd>
          <dt>Staff access</dt><dd><span class="status s-online">Enabled</span></dd>
          <dt>Login alerts</dt><dd>Every sign-in is written to the activity log</dd>
        </dl>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:18px">
          <a href="{% url 'password_change' %}" class="btn btn-sm">Change password</a>
          <a href="{% url 'admin_activity' %}" class="btn btn-sm">Login history</a>
        </div>
      </div>
    </div>

  {% else %}
    <div class="panel">
      <div class="panel-h"><h2>Website</h2></div>
      <div class="panel-b">
        <form method="post">{% csrf_token %}
          <div class="two">
            <div class="field"><label for="sn">Site name</label><input id="sn" name="name" value="{{ site.name }}"></div>
            <div class="field"><label for="tg">Tagline</label><input id="tg" name="tagline" value="{{ site.tagline }}"></div>
          </div>
          <div class="two">
            <div class="field"><label for="ce">Contact email</label><input id="ce" name="contact_email" value="{{ site.contact_email }}"></div>
            <div class="field"><label for="wa">WhatsApp</label><input id="wa" name="whatsapp" value="{{ site.whatsapp }}"></div>
          </div>
          <div class="field"><label for="lo">Location</label><input id="lo" name="location" value="{{ site.location }}"></div>
          <div class="two">
            <div class="field"><label for="gh">GitHub</label><input id="gh" name="github_url" value="{{ site.github_url }}"></div>
            <div class="field"><label for="li">LinkedIn</label><input id="li" name="linkedin_url" value="{{ site.linkedin_url }}"></div>
          </div>
          <div class="field"><label for="md">Meta description</label><textarea id="md" name="meta_description" style="min-height:80px">{{ site.meta_description }}</textarea></div>
          <button class="btn btn-primary">Save settings</button>
        </form>
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
var PRESETS = {{ presets_json|safe }};
var provider = document.getElementById('provider');
if (provider) {
  provider.addEventListener('change', function () {
    var preset = PRESETS[provider.value];
    if (!preset) return;
    if (preset.host) document.getElementById('host').value = preset.host;
    if (preset.port) document.getElementById('port').value = preset.port;
    document.getElementById('use_tls').checked = preset.use_tls;
    document.getElementById('use_ssl').checked = preset.use_ssl;
    document.getElementById('provider-hint').textContent = preset.hint || '';
  });
}
</script>
{% endblock %}