{% extends "exams/base.html" %}
{% load static %}

{% block content %}

<div class="container-fluid px-4 mt-4">
   
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h3 class="mb-1 fw-bold">
        <i class="fas fa-eye text-primary me-2"></i>Site Settings Preview
      </h3>
      <p class="text-muted mb-0">Preview how your site settings will appear</p>
    </div>
    <div>
      <a href="{% url 'exams:site_settings_management' %}" class="btn btn-primary">
        <i class="fas fa-edit me-2"></i>Edit Settings
      </a>
    </div>
  </div>

  <!-- Live Preview -->
  <div class="row">
    <div class="col-12">
      <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white py-3 border-bottom">
          <h6 class="mb-0 fw-bold">
            <i class="fas fa-desktop me-2 text-primary"></i>Live Preview
          </h6>
        </div>
        <div class="card-body">
          
          <!-- Header Preview -->
          <div class="preview-header" style="background-color: {{ setting.header_bg_color|default:'#ffffff' }};
                     {% if setting.header_image %}background-image: url('{{ setting.header_image.url }}'); background-size: cover; background-position: center;{% endif %}">
            <div class="container py-4">
              <div class="row align-items-center">
                <div class="col-md-2 text-center">
                  {% if setting.logo %}
                    <img src="{{ setting.logo.url }}" alt="{{ setting.site_name }}" style="max-height: 80px;">
                  {% else %}
                    <img src="{% static 'assets/img/coat.png' %}" alt="Logo" style="max-height: 80px;">
                  {% endif %}
                </div>
                <div class="col-md-10">
                  <h1 class="mb-2">{{ setting.site_name|default:"KIGOMA | RESULTS" }}</h1>
                  {% if setting.site_tagline %}
                    <p class="lead mb-0">{{ setting.site_tagline }}</p>
                  {% endif %}
                  {% if setting.header_text %}
                    <div class="mt-3 p-3 bg-light rounded">
                      {{ setting.header_text|safe }}
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          
          <!-- Content Preview -->
          <div class="preview-content py-4">
            <div class="container">
              <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                This is a preview of your site settings. The actual content will appear here.
              </div>
              
              <div class="row mt-4">
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <h5>Sample Section</h5>
                      <p>Your site content will be displayed here with the selected settings.</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="card">
                    <div class="card-body">
                      <h5>Another Section</h5>
                      <p>Configure your site settings to customize the look and feel.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Footer Preview -->
          <div class="preview-footer mt-4" style="background-color: #f8f9fa; border-top: 1px solid #dee2e6;">
            <div class="container py-4">
              <div class="row">
                <div class="col-md-6">
                  {% if setting.footer_text %}
                    {{ setting.footer_text|safe }}
                  {% else %}
                    <p>Your footer text will appear here.</p>
                  {% endif %}
                </div>
                <div class="col-md-6 text-md-end">
                  <p class="mb-0">{{ setting.footer_copyright|default:"© 2024. All rights reserved." }}</p>
                  {% if setting.footer_links %}
                    <div class="mt-2">
                      {% with setting.footer_links|safe as links %}
                        <!-- This will need JavaScript to parse JSON -->
                      {% endwith %}
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
  
  <!-- Settings Summary -->
  <div class="row">
    <div class="col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 border-bottom">
          <h6 class="mb-0 fw-bold">
            <i class="fas fa-list me-2 text-primary"></i>Current Settings Summary
          </h6>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <table class="table table-sm">
                <tr>
                  <th style="width: 40%">Site Name:</th>
                  <td>{{ setting.site_name|default:"Not set" }}</td>
                </tr>
                <tr>
                  <th>Site Title:</th>
                  <td>{{ setting.site_title|default:"Not set" }}</td>
                </tr>
                <tr>
                  <th>Site Tagline:</th>
                  <td>{{ setting.site_tagline|default:"Not set" }}</td>
                </tr>
                <tr>
                  <th>Header BG Color:</th>
                  <td>
                    <span style="display: inline-block; width: 20px; height: 20px; background-color: {{ setting.header_bg_color|default:'#ffffff' }}; border: 1px solid #ddd; vertical-align: middle;"></span>
                    {{ setting.header_bg_color|default:"#ffffff" }}
                  </td>
                </tr>
                <tr>
                  <th>Logo:</th>
                  <td>{% if setting.logo %}✓ Uploaded{% else %}✗ Not set{% endif %}</td>
                </tr>
                <tr>
                  <th>Favicon:</th>
                  <td>{% if setting.favicon %}✓ Uploaded{% else %}✗ Not set{% endif %}</td>
                </tr>
              </table>
            </div>
            <div class="col-md-6">
              <table class="table table-sm">
                <tr>
                  <th style="width: 40%">Contact Email:</th>
                  <td>{{ setting.contact_email|default:"Not set" }}</td>
                </tr>
                <tr>
                  <th>Contact Phone:</th>
                  <td>{{ setting.contact_phone|default:"Not set" }}</td>
                </tr>
                <tr>
                  <th>Facebook:</th>
                  <td>{% if setting.facebook_url %}✓ Set{% else %}✗ Not set{% endif %}</td>
                </tr>
                <tr>
                  <th>Twitter:</th>
                  <td>{% if setting.twitter_url %}✓ Set{% else %}✗ Not set{% endif %}</td>
                </tr>
                <tr>
                  <th>Instagram:</th>
                  <td>{% if setting.instagram_url %}✓ Set{% else %}✗ Not set{% endif %}</td>
                </tr>
                <tr>
                  <th>Custom CSS/JS:</th>
                  <td>{% if setting.custom_css or setting.custom_js %}✓ Set{% else %}✗ Not set{% endif %}</td>
                </tr>
              </table>
            </div>
          </div>
          
          {% if setting.created_at or setting.updated_at %}
          <hr>
          <div class="text-muted small">
            {% if setting.created_at %}
              Created: {{ setting.created_at|date:"F j, Y H:i:s" }}
            {% endif %}
            {% if setting.updated_at %}
              <br>Last updated: {{ setting.updated_at|date:"F j, Y H:i:s" }}
            {% endif %}
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.preview-header {
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.preview-header h1 {
  font-size: 2rem;
  margin: 0;
}

.preview-content {
  min-height: 300px;
}

.preview-footer {
  border-radius: 8px;
}

.table-sm th {
  font-weight: 600;
  color: #495057;
}

@media (max-width: 768px) {
  .preview-header h1 {
    font-size: 1.5rem;
  }
}
</style>

{% endblock %}