{% extends 'base.html' %}
{% load static %}

{% block custom_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
  .form-label { font-weight: 500; }
  @media (max-width: 768px) {
    .form-group {
      margin-bottom: 1.5rem;
    }
  }
</style>
{% endblock custom_css %}

{% block title %}Upload Lecture Note{% endblock %}

{% block content %}
<div class="container py-4">
  <div class="text-center mb-4">
    <h3 class="section-title bg-white text-primary px-3">Upload Lecture Notes</h3>
  </div>

  {% if messages %}
  <div class="alert alert-info">
    {% for message in messages %}
      {{ message }}
    {% endfor %}
  </div>
  {% endif %}

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

    <div class="row g-3">
      <!-- Note Type -->
      <div class="col-md-6">
        <label for="note_type" class="form-label">Note Type</label>
        <select class="form-select" id="note_type" name="note_type" required>
          <option value="pdf">PDF</option>
          <option value="docx">Word Document</option>
          <option value="pptx">PowerPoint</option>
          <option value="other">Other</option>
        </select>
      </div>

      <!-- CTPL -->
      <div class="col-md-6">
        <label class="form-label">Choose CTPL:</label><br>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="ctpl" id="ctpl_upsc" value="UPSC" checked>
          <label class="form-check-label" for="ctpl_upsc">UPSC</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="ctpl" id="ctpl_mppsc" value="MPPSC">
          <label class="form-check-label" for="ctpl_mppsc">MPPSC</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="ctpl" id="ctpl_both" value="BOTH">
          <label class="form-check-label" for="ctpl_both">UPSC & MPPSC Both</label>
        </div>
      </div>

      <!-- Files -->
      <div class="col-md-6">
        <label for="note_file_en" class="form-label">Upload English File</label>
        <input type="file" class="form-control" name="note_file_en" id="note_file_en">
      </div>

      <div class="col-md-6">
        <label for="note_file_hi" class="form-label">Upload Hindi File</label>
        <input type="file" class="form-control" name="note_file_hi" id="note_file_hi">
      </div>

      <!-- Area -->
      <div class="col-md-6">
        <label for="area" class="form-label">Area</label>
        <select class="form-select" name="area" id="area" required>
          <option value="">Select Area</option>
          {% for area in areas %}
            <option value="{{ area.pk }}">{{ area.name }}</option>
          {% endfor %}
        </select>
      </div>

      <!-- Part -->
      <div class="col-md-6">
        <label for="part" class="form-label">Part</label>
        <select class="form-select" name="part" id="part" required>
          <option value="">Select Part</option>
        </select>
      </div>

      <!-- Chapter -->
      <div class="col-md-6">
        <label for="chapter" class="form-label">Chapter</label>
        <select class="form-select" name="chapter" id="chapter">
          <option value="">Select Chapter</option>
        </select>
      </div>

      <!-- Topic -->
      <div class="col-md-6">
        <label for="topic" class="form-label">Topic (Optional)</label>
        <select class="form-select" name="topic" id="topic">
          <option value="">Select Topic</option>
        </select>
      </div>

      <!-- SubTopic -->
      <div class="col-md-6">
        <label for="subtopic" class="form-label">SubTopic (Optional)</label>
        <select class="form-select" name="subtopic" id="subtopic">
          <option value="">Select SubTopic</option>
        </select>
      </div>

      <!-- Submit -->
      <div class="col-12">
        <button type="submit" class="btn btn-primary w-100">Upload Notes</button>
      </div>
    </div>
  </form>
</div>
{% endblock content %}

{% block custom_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
  $(document).ready(function () {
    $('select').select2({ width: '100%' });

    // ✅ Load Parts based on Area
    $('#area').change(function () {
      const areaId = $(this).val();
      $.get("{% url 'get_parts_by_area' %}", { 'area_ids[]': areaId }, function (response) {
        $('#part').empty().append('<option value="">Select Part</option>');
        response.parts.forEach(part => {
          $('#part').append(`<option value="${part.part_serial}">${part.name}</option>`);
        });
        $('#chapter, #topic, #subtopic').html('<option value="">Select</option>');
        $('#part, #chapter, #topic, #subtopic').select2({ width: '100%' });
      });
    });

    // ✅ Load Chapters based on Part
    $('#part').change(function () {
      const partId = $(this).val();
      $.get("{% url 'get_chapters_list' %}", { 'part_ids[]': partId }, function (data) {
        $('#chapter').empty().append('<option value="">Select Chapter</option>');
        data.chapters.forEach(ch => {
          $('#chapter').append(`<option value="${ch.chapter_number}">${ch.name}</option>`);
        });
        $('#topic, #subtopic').html('<option value="">Select</option>');
        $('#chapter, #topic, #subtopic').select2({ width: '100%' });
      });
    });

    // ✅ Load Topics based on Chapter (Optional)
    $('#chapter').change(function () {
      const chapterId = $(this).val();
      if (!chapterId) {
        $('#topic').html('<option value="">Select Topic</option>').select2({ width: '100%' });
        $('#subtopic').html('<option value="">Select SubTopic</option>').select2({ width: '100%' });
        return;
      }
      $.get("{% url 'get_topics_list' %}", { 'chapter_ids[]': chapterId }, function (data) {
        $('#topic').empty().append('<option value="">Select Topic</option>');
        data.topics.forEach(t => {
          $('#topic').append(`<option value="${t.topic_SI_number}">${t.name}</option>`);
        });
        $('#subtopic').html('<option value="">Select SubTopic</option>');
        $('#topic, #subtopic').select2({ width: '100%' });
      });
    });

    // ✅ Load Subtopics based on Topic (Optional)
    $('#topic').change(function () {
      const topicId = $(this).val();
      if (!topicId) {
        $('#subtopic').html('<option value="">Select SubTopic</option>').select2({ width: '100%' });
        return;
      }
      $.get("{% url 'get_subtopics_list' %}", { 'topic_ids[]': topicId }, function (data) {
        $('#subtopic').empty().append('<option value="">Select SubTopic</option>');
        data.subtopics.forEach(sub => {
          $('#subtopic').append(`<option value="${sub.sub_topic_SI_Number}">${sub.name}</option>`);
        });
        $('#subtopic').select2({ width: '100%' });
      });
    });
  });
</script>
{% endblock custom_js %}