{% extends 'dashboard/base.html' %}
{% block title %}Site Settings{% endblock %}
{% block page_title %}Site Settings{% endblock %}
{% block content %}
<div style="max-width:700px;">
  <!-- Display Django success/error alerts if they exist -->
  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }}" style="padding:10px; margin-bottom:15px; border-radius:4px;">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <form method="POST">
    {% csrf_token %}
    
    <!-- Store Info Card -->
    <div class="card" style="margin-bottom:20px;">
      <div class="card-header"><span class="card-title">🏪 Store Information</span></div>
      <div class="card-body">
        <div class="form-group">
          <label class="form-label">Store Name</label>
          <input type="text" name="store_name" class="form-control" value="{{ form.store_name.value|default:'' }}">
        </div>
        <div class="form-group">
          <label class="form-label">Store Tagline</label>
          <input type="text" name="store_tagline" class="form-control" value="{{ form.store_tagline.value|default:'' }}">
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Contact Email</label>
            <input type="email" name="contact_email" class="form-control" value="{{ form.contact_email.value|default:'' }}">
          </div>
          <div class="form-group">
            <label class="form-label">Contact Phone</label>
            <input type="text" name="contact_phone" class="form-control" value="{{ form.contact_phone.value|default:'' }}">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Address</label>
          <textarea name="address" class="form-control" rows="2">{{ form.address.value|default:'' }}</textarea>
        </div>
      </div>
    </div>

    <!-- Delivery Settings Card -->
    <div class="card" style="margin-bottom:20px;">
      <div class="card-header"><span class="card-title">🚚 Delivery Settings</span></div>
      <div class="card-body">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Free Delivery Threshold (₦)</label>
            <input type="number" name="free_delivery_threshold" class="form-control" value="{{ form.free_delivery_threshold.value|default:'0' }}">
            <p class="form-hint">Orders above this amount get free delivery</p>
          </div>
          <div class="form-group">
            <label class="form-label">Standard Delivery Fee (₦)</label>
            <input type="number" name="standard_delivery_fee" class="form-control" value="{{ form.standard_delivery_fee.value|default:'0' }}">
          </div>
        </div>
        <div class="check-group">
          <input type="checkbox" id="cod" name="enable_cod" {% if form.enable_cod.value %}checked{% endif %}>
          <label for="cod">Enable Cash on Delivery</label>
        </div>
      </div>
    </div>

    <!-- Payment Settings Card -->
    <div class="card" style="margin-bottom:20px;">
      <div class="card-header"><span class="card-title">💳 Payment Settings</span></div>
      <div class="card-body">
        <div class="form-group">
          <label class="form-label">Paystack Public Key</label>
          <input type="text" name="paystack_public_key" class="form-control" placeholder="pk_live_..." value="{{ form.paystack_public_key.value|default:'' }}">
        </div>
        <div class="form-group">
          <label class="form-label">Flutterwave Public Key</label>
          <input type="text" name="flutterwave_public_key" class="form-control" placeholder="FLWPUBK-..." value="{{ form.flutterwave_public_key.value|default:'' }}">
        </div>
        <div class="check-group">
          <input type="checkbox" id="testmode" name="test_mode" {% if form.test_mode.value %}checked{% endif %}>
          <label for="testmode">Test mode (use test keys)</label>
        </div>
      </div>
    </div>

    <!-- Social Media Card -->
    <div class="card" style="margin-bottom:20px;">
      <div class="card-header"><span class="card-title">📣 Social Media</span></div>
      <div class="card-body">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label"><i class="fab fa-instagram" style="color:#e1306c;"></i> Instagram</label>
            <input type="url" name="instagram_url" class="form-control" placeholder="https://instagram.com/chiezstores" value="{{ form.instagram_url.value|default:'' }}">
          </div>
          <div class="form-group">
            <label class="form-label"><i class="fab fa-facebook" style="color:#1877f2;"></i> Facebook</label>
            <input type="url" name="facebook_url" class="form-control" placeholder="https://facebook.com/chiezstores" value="{{ form.facebook_url.value|default:'' }}">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label"><i class="fab fa-twitter" style="color:#1da1f2;"></i> Twitter / X</label>
            <input type="url" name="twitter_url" class="form-control" placeholder="https://twitter.com/chiezstores" value="{{ form.twitter_url.value|default:'' }}">
          </div>
          <div class="form-group">
            <label class="form-label"><i class="fab fa-tiktok"></i> TikTok</label>
            <input type="url" name="tiktok_url" class="form-control" placeholder="https://tiktok.com/@chiezstores" value="{{ form.tiktok_url.value|default:'' }}">
          </div>
          <div class="form-group">
            <label class="form-label"><i class="fab fa-whatsapp" style="color:#25d366;"></i> WhatsApp</label>
            <input type="url" name="whatsapp_url" class="form-control" placeholder="https://wa.me/1234567890" value="{{ form.whatsapp_url.value|default:'' }}">
          </div>
        </div>
      </div>
    </div>

    <div style="display:flex;gap:12px;">
      <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Settings</button>
      <button type="reset" class="btn btn-outline">Reset</button>
    </div>
  </form>
</div>
{% endblock %}