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

{% block content %}

<div class="container mt-4">
  
  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-md-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h2 class="mb-1">
            <i class="fas fa-project-diagram text-primary"></i> 
            {% if is_edit %}Edit{% else %}Add New{% endif %} Joint Exam Project
          </h2>
          <p class="text-muted">
            {% if is_edit %}
              Update the project details below
            {% else %}
              Fill in the details below to create a new project
            {% endif %}
          </p>
        </div>
        <a href="{% url 'exams:project_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-arrow-left"></i> Back to List
        </a>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card shadow-sm">
        <div class="card-header bg-white py-3">
          <h5 class="mb-0">
            <i class="fas fa-info-circle text-primary"></i> Project Information
          </h5>
        </div>
        <div class="card-body">
          
          <form method="post" enctype="multipart/form-data" novalidate>
            {% csrf_token %}
            
            {% if form.non_field_errors %}
            <div class="alert alert-danger">
              {% for error in form.non_field_errors %}
                {{ error }}
              {% endfor %}
            </div>
            {% endif %}
            
            <div class="row">
              <!-- Project Short Name -->
              <div class="col-md-6 mb-3">
                <label for="{{ form.name.id_for_label }}" class="form-label fw-bold">
                  <i class="fas fa-tag"></i> Project Short Name <span class="text-danger">*</span>
                </label>
                {{ form.name }}
                {% if form.name.errors %}
                <div class="invalid-feedback d-block">
                  {% for error in form.name.errors %}{{ error }}{% endfor %}
                </div>
                {% endif %}
                <div class="form-text">Short name used in menus and quick references.</div>
              </div>

              <!-- Year -->
              <div class="col-md-6 mb-3">
                <label for="{{ form.year.id_for_label }}" class="form-label fw-bold">
                  <i class="fas fa-calendar-alt"></i> Year <span class="text-danger">*</span>
                </label>
                {{ form.year }}
                {% if form.year.errors %}
                <div class="invalid-feedback d-block">
                  {% for error in form.year.errors %}{{ error }}{% endfor %}
                </div>
                {% endif %}
                <div class="form-text">The academic year for this examination.</div>
              </div>
            </div>














<div class="row">
    <!-- Number of Schools -->
    <div class="col-md-6 mb-3">
        <label for="{{ form.total_schools.id_for_label }}" class="form-label">Total Schools</label>
        {{ form.total_schools }}
        <small class="text-muted">Number of schools participating in this project</small>
        {% if form.total_schools.errors %}
            <div class="text-danger small">{{ form.total_schools.errors }}</div>
        {% endif %}
    </div>

    <!-- Upload Switch -->
    <div class="col-md-6 mb-3">
        <div class="form-check form-switch">
            {{ form.upload }}
            <label class="form-check-label" for="{{ form.upload.id_for_label }}">
                Enable School Upload
            </label>
        </div>
        <small class="text-muted">Allow schools to upload their own results</small>
        {% if form.upload.errors %}
            <div class="text-danger small">{{ form.upload.errors }}</div>
        {% endif %}
    </div>
</div>















            <div class="row">
              <!-- Project Full Title -->
              <div class="col-md-12 mb-3">
                <label for="{{ form.title.id_for_label }}" class="form-label fw-bold">
                  <i class="fas fa-heading"></i> Project Full Title
                </label>
                {{ form.title }}
                {% if form.title.errors %}
                <div class="invalid-feedback d-block">
                  {% for error in form.title.errors %}{{ error }}{% endfor %}
                </div>
                {% endif %}
                <div class="form-text">Full title for reports and certificates (e.g., "Kigoma Regional Mock Examinations - Form Six 2024")</div>
              </div>
            </div>

            <div class="row">
              <!-- Academic Level -->
              <div class="col-md-6 mb-3">
                <label for="{{ form.academic_level.id_for_label }}" class="form-label fw-bold">
                  <i class="fas fa-graduation-cap"></i> Academic Level <span class="text-danger">*</span>
                </label>
                {{ form.academic_level }}
                {% if form.academic_level.errors %}
                <div class="invalid-feedback d-block">
                  {% for error in form.academic_level.errors %}{{ error }}{% endfor %}
                </div>
                {% endif %}
                <div class="form-text">Select the level of education for this exam.</div>
              </div>

              <!-- Project Location -->
              <div class="col-md-6 mb-3">
                <label for="{{ form.project_place.id_for_label }}" class="form-label fw-bold">
                  <i class="fas fa-map-marker-alt"></i> Project Location
                </label>
                {{ form.project_place }}
                {% if form.project_place.errors %}
                <div class="invalid-feedback d-block">
                  {% for error in form.project_place.errors %}{{ error }}{% endfor %}
                </div>
                {% endif %}
                <div class="form-text">Region, district, or venue where the exam is conducted.</div>
              </div>
            </div>

            <div class="row">
              <!-- Project Logo -->
              <div class="col-md-12 mb-3">
                <label for="{{ form.project_logo.id_for_label }}" class="form-label fw-bold">
                  <i class="fas fa-image"></i> Project Logo
                </label>
                {{ form.project_logo }}
                {% if form.project_logo.errors %}
                <div class="invalid-feedback d-block">
                  {% for error in form.project_logo.errors %}{{ error }}{% endfor %}
                </div>
                {% endif %}
                
                {% if project and project.project_logo %}
                <div class="mt-2">
                  <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> Current logo: 
                    <strong>{{ project.project_logo.name|cut:"project_logos/" }}</strong>
                    <div class="mt-2">
                      <img src="{{ project.project_logo.url }}" alt="Current Logo" 
                           style="max-height: 80px; max-width: 200px; border: 1px solid #ddd; padding: 5px;">
                    </div>
                  </div>
                </div>
                {% endif %}
                <div class="form-text">Upload a logo to display on project reports and certificates. Recommended size: 200x200px.</div>
              </div>
            </div>

            <!-- Description -->
            <div class="mb-3">
              <label for="{{ form.description.id_for_label }}" class="form-label fw-bold">
                <i class="fas fa-align-left"></i> Description
              </label>
              {{ form.description }}
              {% if form.description.errors %}
              <div class="invalid-feedback d-block">
                {% for error in form.description.errors %}{{ error }}{% endfor %}
              </div>
              {% endif %}
              <div class="form-text">Additional information about this project (optional).</div>
            </div>

            <!-- Active Status -->
            <div class="mb-4">
              <div class="form-check">
                {{ form.is_active }}
                <label class="form-check-label fw-bold" for="{{ form.is_active.id_for_label }}">
                  <i class="fas fa-check-circle"></i> Active
                </label>
                <div class="form-text">If unchecked, this project will be hidden from most views.</div>
              </div>
            </div>

            <!-- Form Actions -->
            <hr class="my-4">
            <div class="d-flex justify-content-end gap-2">
              <a href="{% url 'exams:project_list' %}" class="btn btn-secondary">
                <i class="fas fa-times"></i> Cancel
              </a>
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> 
                {% if is_edit %}Update{% else %}Create{% endif %} Project
              </button>
            </div>
            
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const titleField = document.getElementById('{{ form.title.id_for_label }}');
    if (titleField) {
      // Use \n for newline in the actual value
      titleField.placeholder = 'PRIME MINISTERS OFFICE - REGIONAL ADMINISTRATION AND LOCAL GOVERNMENT-(PMO-RALG)\nBUHIGWE DISTRICT COUNCIL\nFORM FOUR JOINT EXAMINATIONS RESULTS, MAY-2026';
    }
  });
</script>
{% endblock %}

{% endblock %}