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

{% block content %}



<div class="container-fluid py-4">
<main class="container-fluid px-0">


<!-- HERO BAR -->
<section class="hero-bar mb-0">

  <div class="hero-bar-inner">
    <!-- LEFT COAT -->
    <img src="{% static 'assets/img/coat.png' %}" class="hero-coat-bar left">

    <!-- CENTER TEXT -->
    <div class="hero-bar-text">
      <h1>KIGOMA REGION ACADEMICS MANAGEMENT</h1>
      <p>Quality Education • Digital Systems • Transparency</p>
    </div>

    <!-- RIGHT COAT -->
    <img src="{% static 'assets/img/coat.png' %}" class="hero-coat-bar right">

  </div>
</section>





<!-- TOP MEGA NAV BAR -->
<div class="container-fluid px-0 top-bottom top-shadow">
  <nav class="navbar navbar-expand-lg nav-bottom-header">
    <div class="container-fluid px-4">

      <ul class="navbar-nav w-100 d-flex justify-content-between">

        <li class="nav-item">
          <a class="nav-link active" href="">Mwanzo</a>
        </li>



<li class="nav-item dropdown mega-dropdown">
  <a class="nav-link dropdown-toggle"
     href="#"
     role="button"
     data-bs-toggle="dropdown"
     data-bs-auto-close="outside"  
     aria-expanded="false">
    Matokeo
  </a>

  <div class="dropdown-menu mega-menu w-100">
    <div class="row g-0">
      <div class="col-md-3 mega-left">
        <h6>Matokeo></h6>
      </div>
      <div class="col-md-9">
        <div class="mega-grid">
          <a href="#"><span>O-level</span><p>Form I-IV</p></a>
          <a href="#"><span>A-Level</span><p>Form V-VI</p></a>
          <a href="#"><span>Primary</span><p>Msingi</p></a>
        </div>
      </div>
    </div>
  </div>
</li>


        <!-- MIFUMO -->
        <li class="nav-item dropdown mega-dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Taaluma</a>

          <div class="dropdown-menu mega-menu">
            <div class="row">
              <div class="col-md-3 mega-left">
                <h6>Taaluma</h6>
              </div>

              <div class="col-md-9">
                <div class="mega-grid">
                  <a href="#"><span>Ufundishaji</span></a>
                  <a href="#"><span>Mahudhurio</span><p></a>
                  <a href="#"><span>Mitihani ya ndani</span></a>
                </div>
              </div>
            </div>
          </div>
        </li>

        <!-- MIONGOZO -->
        <li class="nav-item dropdown mega-dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Shule Zetu</a>

          <div class="dropdown-menu mega-menu">
            <div class="row">
              <div class="col-md-3 mega-left">
                <h6>Orodha</h6>
              </div>

              <div class="col-md-9">
                <div class="mega-grid">
                  <a href="#"><span>Zote</span></a>
                  <a href="#"><span>Msingi</span></a>
                  <a href="#"><span>Secondary</span></a>
                </div>
              </div>
            </div>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Downloads</a>
        </li>

        <li class="nav-item dropdown mega-dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Matukio/Usajili</a>

          <div class="dropdown-menu mega-menu">
            <div class="row">
              <div class="col-md-3 mega-left">
                <h6>Taarifa></h6>
              </div>

              <div class="col-md-9">
                <div class="mega-grid">
                  <a href="#"><span>FTNA</span></a>
                  <a href="#"><span>CSEE</span></a>
                  <a href="#"><span>ACEEE</span></a>
                  <a href="#"><span>SFNA</span></a>
                  <a href="#"><span>PSLE</span></a>
                </div>
              </div>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </nav>
</div>
























<div class="card mb-4">
  <div class="card-body">

    <div id="galleryCarousel"
         class="carousel slide"
         data-bs-ride="carousel"
         data-bs-interval="4000">

      <div class="carousel-inner">
        {% for g in gallery %}
          <div class="carousel-item {% if forloop.first %}active{% endif %}">
            <img src="{{ g.image.url }}"
                 class="d-block w-100 rounded"
                 style="height:320px; object-fit:cover"
                 alt="{{ g.title }}">
                  <div class="carousel-caption glass-caption">
                    <h5>{{ g.title }}</h5>
                  </div>

          </div>
        {% endfor %}
      </div>

      <button class="carousel-control-prev"
              type="button"
              data-bs-target="#galleryCarousel"
              data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>

      <button class="carousel-control-next"
              type="button"
              data-bs-target="#galleryCarousel"
              data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>

    </div>

  </div>
</div>





<div class="row g-4">

  <!-- PROJECT LIST -->
  <div class="col-lg-3">
    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white">
        Matokeo ya Mitihani
      </div>
            <ul class="list-group list-group-flush">
              {% for p in projects %}
                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">

                  <!-- Project Info -->
                  <div>
                    <strong>{{ p.name }}</strong>
                    <small class="text-muted d-block">{{ p.year }}</small>
                  </div>

                  <!-- Action Button -->
                  <a href="{% url 'exams:public_project_schools' p.id %}"
                     class="btn btn-sm btn-outline-primary rounded-pill mt-2 mt-md-0">
                    View Results
                  </a>

                </li>
              {% empty %}
                <li class="list-group-item text-muted">No active projects</li>
              {% endfor %}
            </ul>

    </div>
  </div>

  <!-- NEWS -->
  <div class="col-lg-9">
    <div class="card shadow-sm">
      <div class="card-header bg-warning">
        Latest News
      </div>
      <ul class="list-group list-group-flush">
        {% for n in news_list %}
          <li class="list-group-item">
            <strong>{{ n.title }}</strong>
            <p class="mb-1 text-muted">{{ n.content|truncatewords:25 }}</p>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

</div>




  <!-- STATS -->
  <div class="row g-3 mb-4">
    <div class="col-md-3" v-for="stat in stats">
      <div class="stat-card">
        <h2>{{ stat.value }}</h2>
        <p>{{ stat.label }}</p>
      </div>
    </div>
  </div>

  <!-- CONTENT -->
  <div class="row g-4">

    <!-- ABOUT -->
    <div class="col-lg-6">
      <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
          About the Institution
        </div>
        <div class="card-body">
          {{ about_text|linebreaks }}
        </div>
      </div>
    </div>

    <!-- LATEST DOWNLOADS -->
    <div class="col-lg-3">
      <div class="card shadow-sm">
        <div class="card-header bg-success text-white">
          Latest Downloads
        </div>
        <ul class="list-group list-group-flush">
          {% for file in downloads %}
            <li class="list-group-item">
              <a href="{{ file.file.url }}">{{ file.title }}</a>
              <small class="text-muted d-block">{{ file.created_at }}</small>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

    <!-- NEWS -->
    <div class="col-lg-3">
      <div class="card shadow-sm">
        <div class="card-header bg-warning">
          Latest News
        </div>
        <ul class="list-group list-group-flush">
          {% for news in news_list %}
            <li class="list-group-item">
              <a href="{% url 'exams:news_detail' news.id %}">
                {{ news.title }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

  </div>
</div>





<div class="row g-3 my-4">
  {% for k,v in visitor.items %}
  <div class="col-md-2">
    <div class="stat-card">
      <h4>{{ v }}</h4>
      <small class="text-muted">{{ k|title }}</small>
    </div>
  </div>
  {% endfor %}
</div>









<!-- ================= FOOTER ================= -->
<footer class="ega-footer">

  <div class="container-lg px-3">
    <div class="row pt-5">

      <!-- CONTACT -->
      <div class="col-12 col-md-3 footer-content">
        <h6 class="footer-heading">Wasiliana Nasi</h6>
        <div class="circuit-line"><span></span><span></span></div>

        <p class="mb-1">Ofisi ya Mkuu wa Mkoa,</p>
        <p class="mb-1">Mkoa wa Mbeya,</p>
        <p class="mb-1">S.L.P 123, Mbeya.</p>
        <p class="mb-1"><strong>Barua pepe:</strong> info@mbeya.go.tz</p>
        <p class="mb-1"><strong>Simu:</strong> +255 25 250 0000</p>
      </div>

      <!-- QUICK LINKS -->
      <div class="col-12 col-md-3 footer-content">
        <h6 class="footer-heading">Tovuti Mashuhuri</h6>
        <div class="circuit-line"><span></span><span></span></div>

        <a href="https://www.necta.go.tz/" target="_blank">NECTA</a>
        <a href="https://ess.utumishi.go.tz/" target="_blank">ESS</a>
        <a href="https://www.pmo.go.tz/" target="_blank">Ofisi ya Waziri Mkuu</a>
        <a href="https://www.utumishi.go.tz/" target="_blank">OR-UTUMISHI</a>
      </div>

      <!-- PARTNERS -->
      <div class="col-12 col-md-3 footer-content">
        <h6 class="footer-heading">Taasisi Husika</h6>
        <div class="circuit-line"><span></span><span></span></div>

        <a href="https://www.moe.go.tz/" target="_blank">Wizara ya Elimu</a>
        <a href="https://www.tamisemi.go.tz/" target="_blank">TAMISEMI</a>
        <a href="https://www.nactvet.go.tz/" target="_blank">NACTVET</a>
        <a href="https://www.costech.or.tz/" target="_blank">COSTECH</a>

      </div>

      <!-- ONLINE SERVICES -->
      <div class="col-12 col-md-3 footer-content">
        <h6 class="footer-heading">Huduma Mtandao</h6>
        <div class="circuit-line"><span></span><span></span></div>

        <a href="http://127.0.0.1:8000/">Login-Mfumo wa Matokeo</a>
        <a href="#">Usajili wa Shule</a>
        <a href="#">Ripoti za Elimu</a>
        <a href="#">Msaada kwa Mtumiaji</a>
      </div>

    </div>

    <hr class="footer-divider">

    <!-- BOTTOM BAR -->
    <div class="row py-4 align-items-center">
      <div class="col-md-6 text-center text-md-start footer-small">
        © {{ now|date:"Y" }} Mkoa wa Mbeya — Haki Zote Zimehifadhiwa
      </div>

      <div class="col-md-6 text-center text-md-end footer-social">
        <a href="#"><i class="bi bi-facebook"></i></a>
        <a href="#"><i class="bi bi-twitter-x"></i></a>
        <a href="#"><i class="bi bi-youtube"></i></a>
      </div>
    </div>
  </div>

</footer>












{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'site/css/home.css' %}">
{% endblock %}

{% block extra_js %}
<script src="{% static 'site/js/home.js' %}"></script>
<!-- <script src="{% static 'adminlte/plugins/jquery/bootstrap.bundle.min.js' %}"></script> -->
<script src="{% static 'adminlte/plugins/jquery/bootstrap.bundle.min.js' %}"></script>
{% endblock %}