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

<div class="container mt-4">
  <h4><i class="fas fa-map"></i> Import Regions / Districts / Wards / Schools</h4>

  <div class="card shadow-sm mt-3">
    <div class="card-body">

      <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}

<p class="fw-bold">Required columns:    <a href="{% static 'templates/School-Ward-Distr-Reg-Template.xlsx' %}"
       class="btn btn-outline-secondary btn-sm"
       download>
        <i class="fas fa-download"></i> Download-Template
    </a></p>
<pre class="bg-light p-2 small">
REGION | COUNCIL | WARD | SCHOOL NAME | SCHOOL_CODE | OWNERSHIP | SCHOOL_REGNO | LATITUDE | LONGITUDE
</pre>

 
 

        <input type="file"
               name="geo_file"
               accept=".xlsx,.csv"
               class="form-control"
               required>

        <button class="btn btn-primary mt-3 w-100">
          <i class="fas fa-upload"></i> Import GEO Data
        </button>

      </form>

    </div>
  </div>
</div>


<hr>










<div class="col-md-12">
    <div class="card">
        <div class="card-body">
            <div class="row g-3">
                <!-- UPDATE SHORT NAMES BUTTON -->
                <div class="col-md-4">
                    <div class="alert alert-secondary mb-2 p-2 small">
                        <i class="fas fa-info-circle"></i> Removes "SECONDARY SCHOOL" from school names
                    </div>
                    <form method="POST" action="{% url 'exams:update_school_short_names' %}" 
                          onsubmit="return confirmShortNameUpdate(this);">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-warning w-100">
                            <i class="fas fa-edit"></i> Update Short Names
                        </button>
                    </form>
                </div>

                <!-- UPDATE PRIVATE SCHOOLS BUTTON -->
                <div class="col-md-4">
                    <div class="alert alert-secondary mb-2 p-2 small">
                        <i class="fas fa-info-circle"></i> Sets ownership to "PRIVATE" for codes starting with 'P'
                    </div>
                    <form method="POST" action="{% url 'exams:update_private_schools_ownership' %}"
                          onsubmit="return confirmOwnershipUpdate(this);">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-info w-100">
                            <i class="fas fa-building"></i> Update Private Schools
                        </button>
                    </form>
                </div>

{% if user.profile.role == "super_master" %}
<div class="col-md-4">
    <div class="alert alert-danger mb-2 p-2 small">
        <i class="fas fa-exclamation-triangle"></i> 
        <strong>DANGER ZONE:</strong> Deletes ALL regions, districts, wards that are NOT used anywhere
    </div>
    <button type="button" 
            class="btn btn-danger w-100" 
            data-bs-toggle="modal" 
            data-bs-target="#deleteGeoDataModal">
        <i class="fas fa-trash-alt"></i> Delete Unused Geographic Data
    </button>
</div>
{% endif %}

            </div>
        </div>
    </div>
</div>













<hr>

<div class="d-flex justify-content-between align-items-center mt-4 mb-2">
  <h5 class="mb-0">
    <i class="fas fa-school"></i> Schools List
  </h5>

  <a href="{% url 'exams:export_schools_excel' %}"
     class="btn btn-success btn-sm">
    <i class="fas fa-file-excel"></i> Export to Excel
  </a>
</div>

                    <!-- ================= NEW BUTTON ================= -->
                    <button type="button" 
                            class="btn btn-warning btn-sm" 
                            data-bs-toggle="modal" 
                            data-bs-target="#generateUsersModal">
                        <i class="fas fa-user-plus"></i> Generate User Accounts
                    </button>



    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    
<table id="MasterTable" class="table table-bordered table-striped table-sm mt-4">
  <thead class="table-dark">
    <tr>
      <th>Code</th>
      <th>Reg No</th>
      <th>Name</th>
      <th>Ward</th>
      <th>District</th>
      <th>Region</th>
      <th>Ownership</th>
      <th>Lat</th>
      <th>Lng</th>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    {% for s in schools %}
    <tr>
      <td>{{ s.school_code }}</td>
      <td>{{ s.school_regno|default:"—" }}</td>
      <td>{{ s.name }}</td>
      <td>{{ s.ward.name }}</td>
      <td>{{ s.district.name }}</td>
      <td>{{ s.region.name }}</td>
      <td>{{ s.ownership }}</td>
      <td>{{ s.latitude|default:"—" }}</td>
      <td>{{ s.longitude|default:"—" }}</td>

      <td class="text-center">
        <a href="{% url 'exams:school_edit' s.id %}"
           class="btn btn-sm btn-info">
          <i class="fas fa-edit"></i>
        </a>

        {% if s.can_delete %}
        <a href="{% url 'exams:school_delete' s.id %}"
           class="btn btn-sm btn-danger"
           onclick="return confirm('Delete this school?');">
          <i class="fas fa-trash"></i>
        </a>
        {% else %}
        <button class="btn btn-sm btn-secondary" disabled>
          <i class="fas fa-lock"></i>
        </button>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>







<!-- ================= CONFIRMATION MODAL ================= -->
<div class="modal fade" id="generateUsersModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle"></i> Generate User Accounts
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>This will create user accounts for all schools that don't already have users.</p>
                
                <div class="alert alert-info">
                    <strong>Account Details:</strong>
                    <ul class="mb-0 mt-2">
                        <li><strong>Username:</strong> School Code (e.g., S0001)</li>
                        <li><strong>Email:</strong> school_code@gmail.com</li>
                        <li><strong>Password:</strong> <code>Elimu@1234</code></li>
                        <li><strong>Role:</strong> School Administrator</li>
                    </ul>
                </div>
                
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Important:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Users must change their password on first login</li>
                        <li>This will not affect existing user accounts</li>
                        <li>Usernames must be unique across the system</li>
                    </ul>
                </div>
                
                <div class="mt-3">
                    <strong>Schools without users:</strong>
                    <ul class="list-group list-group-flush mt-2">
                        {% for school in schools %}
                            {% if not school.userprofile_set.exists %}
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <code>{{ school.school_code }}</code>
                                <span class="badge bg-danger">No User</span>
                            </li>
                            {% endif %}
                        {% empty %}
                            <li class="list-group-item text-success">
                                <i class="fas fa-check-circle"></i> All schools already have user accounts!
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="{% url 'exams:generate_users_from_schools' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-user-plus"></i> Generate Users
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>





<!-- Delete Geographic Data Confirmation Modal -->
<div class="modal fade" id="deleteGeoDataModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Delete Unused Geographic Data
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fas fa-trash-alt fa-4x text-danger mb-3"></i>
                </div>
                
                <div class="alert alert-warning">
                    <strong><i class="fas fa-info-circle"></i> What this will do:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Delete ALL <strong>Regions</strong> that are NOT used in any school or user profile</li>
                        <li>Delete ALL <strong>Districts</strong> that are NOT used in any school or user profile</li>
                        <li>Delete ALL <strong>Wards</strong> that are NOT used in any school or user profile</li>
                    </ul>
                </div>
                
                <div class="alert alert-danger">
                    <strong><i class="fas fa-exclamation-circle"></i> Requirements:</strong>
                    <ul class="mb-0 mt-2">
                        <li>A region CANNOT be deleted if it has ANY schools or user profiles</li>
                        <li>A district CANNOT be deleted if it has ANY schools or user profiles</li>
                        <li>A ward CANNOT be deleted if it has ANY schools or user profiles</li>
                        <li>If any geographic data is in use, the deletion will be ABORTED</li>
                    </ul>
                </div>
                
                <div class="mt-3 p-3 bg-light rounded">
                    <strong>Current Statistics:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Regions: <span id="regionsCount">{{ regions.count|default:"0" }}</span></li>
                        <li>Districts: <span id="districtsCount">{{ districts.count|default:"0" }}</span></li>
                        <li>Wards: <span id="wardsCount">{{ wards.count|default:"0" }}</span></li>
                        <li>Schools using these locations: <span id="schoolsCount">{{ schools.count|default:"0" }}</span></li>
                    </ul>
                </div>
                
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmDeleteGeoCheckbox">
                    <label class="form-check-label text-danger fw-bold" for="confirmDeleteGeoCheckbox">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        I understand that this will delete ALL unused geographic data and this action CANNOT be undone
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <form method="POST" action="{% url 'exams:delete_unused_geo_data' %}" id="deleteGeoForm">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" id="confirmDeleteGeoBtn" disabled>
                        <i class="fas fa-trash-alt me-1"></i>Yes, Delete Unused Data
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>






</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>


<script>
$(document).ready(function () {

    let table = $('#MasterTable').DataTable({
        pageLength: 50,
        lengthMenu: [10,20,50,100],
        ordering: true,
        autoWidth: false,
        responsive: true
    });

});
</script>




<!-- JavaScript for Confirmation Dialogs -->
<script>
function confirmShortNameUpdate() {
    return confirm(
        "⚠️ WARNING: This will update ALL schools by removing 'SECONDARY SCHOOL' from their short names.\n\n" +
        "This action cannot be undone.\n\n" +
        "Are you sure you want to proceed?"
    );
}

function confirmOwnershipUpdate() {
    return confirm(
        "⚠️ WARNING: This will update ALL schools with school_code starting with 'P' to PRIVATE ownership.\n\n" +
        "This action cannot be undone.\n\n" +
        "Are you sure you want to proceed?"
    );
}

// Optional: Show loading state on button click
document.querySelectorAll('form[onsubmit]').forEach(form => {
    form.addEventListener('submit', function() {
        const button = this.querySelector('button[type="submit"]');
        if (button) {
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        }
    });
});
</script>







<script>
// Add this to your existing JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // Handle delete geographic data modal checkbox
    const deleteGeoModal = document.getElementById('deleteGeoDataModal');
    
    if (deleteGeoModal) {
        deleteGeoModal.addEventListener('show.bs.modal', function() {
            const confirmCheckbox = document.getElementById('confirmDeleteGeoCheckbox');
            const confirmBtn = document.getElementById('confirmDeleteGeoBtn');
            if (confirmCheckbox) {
                confirmCheckbox.checked = false;
                confirmBtn.disabled = true;
            }
        });
        
        const confirmCheckbox = document.getElementById('confirmDeleteGeoCheckbox');
        if (confirmCheckbox) {
            confirmCheckbox.addEventListener('change', function() {
                const confirmBtn = document.getElementById('confirmDeleteGeoBtn');
                confirmBtn.disabled = !this.checked;
            });
        }
    }
});
</script>



{% endblock %}