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

{% block content %}
<div class="container-fluid">

<h3 class="mb-4">Website Management <a href="/joint-results">View SITE</a></h3>

<!-- ================= SITE SETTINGS ================= -->
<div class="card mb-4">
  <div class="card-header">Site Settings</div>

  <div class="card-body">
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <input type="hidden" name="action" value="update_site">

      <div class="mb-2">
        <label>Site Name</label>
        <input class="form-control" name="site_name" value="{{ site.site_name }}">
      </div>

      <div class="mb-2">
        <label>About</label>
        <textarea class="form-control" name="about">{{ site.about }}</textarea>
      </div>

      <div class="mb-2">
        <label>Logo</label>
        <input type="file" name="logo" class="form-control">
      </div>

      <button class="btn btn-primary">Save Site</button>
    </form>
  </div>
</div>

<!-- ================= GALLERY ================= -->
<div class="card mb-4">
  <div class="card-header d-flex justify-content-between">
    <span>Gallery</span>
    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#galleryModal">
      Add Image
    </button>
  </div>

  <table class="table table-striped">
    <tr>
      <th>Image</th><th>Title</th><th>Status</th><th>Action</th>
    </tr>

    {% for g in gallery %}
    <tr>
      <td width="80"><img src="{{ g.image.url }}" class="img-fluid rounded"></td>
      <td>{{ g.title }}</td>
      <td>
        {% if g.is_active %}
          <span class="badge bg-success">Enabled</span>
        {% else %}
          <span class="badge bg-danger">Disabled</span>
        {% endif %}
      </td>
      <td>
        <form method="post" style="display:inline">
          {% csrf_token %}
          <input type="hidden" name="action" value="toggle_gallery">
          <input type="hidden" name="id" value="{{ g.id }}">
          <button class="btn btn-secondary btn-sm">
            {% if g.is_active %}Disable{% else %}Enable{% endif %}
          </button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </table>
</div>

<!-- ================= NEWS ================= -->
<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span>News</span>
    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#newsModal">
      Add News
    </button>
  </div>

  <table class="table">
    <tr>
      <th>Title</th><th>Status</th><th>Action</th>
    </tr>

    {% for n in news %}
    <tr>
      <td>{{ n.title }}</td>
      <td>
        {% if n.is_active %}
          <span class="badge bg-success">Enabled</span>
        {% else %}
          <span class="badge bg-danger">Disabled</span>
        {% endif %}
      </td>
      <td>
        <form method="post" style="display:inline">
          {% csrf_token %}
          <input type="hidden" name="action" value="toggle_news">
          <input type="hidden" name="id" value="{{ n.id }}">
          <button class="btn btn-secondary btn-sm">
            {% if n.is_active %}Disable{% else %}Enable{% endif %}
          </button>
        </form>
      </td>
    </tr>
    {% endfor %}
  </table>
</div>

</div>

<!-- ================= MODALS ================= -->

<div class="modal fade" id="galleryModal">
  <div class="modal-dialog">
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <input type="hidden" name="action" value="add_gallery">
      <div class="modal-content">
        <div class="modal-header"><h5>Add Gallery</h5></div>
        <div class="modal-body">
          <input class="form-control mb-2" name="title" placeholder="Title">
          <input class="form-control mb-2" type="file" name="image">
          <textarea class="form-control" name="description" placeholder="Description"></textarea>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="newsModal">
  <div class="modal-dialog">
    <form method="post">
      {% csrf_token %}
      <input type="hidden" name="action" value="add_news">
      <div class="modal-content">
        <div class="modal-header"><h5>Add News</h5></div>
        <div class="modal-body">
          <input class="form-control mb-2" name="title" placeholder="Title">
          <textarea class="form-control" name="content" placeholder="Content"></textarea>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

{% endblock %}