{% load static %}
{% load app_filters %}

<!-- Add Subject Modal -->
<div id="addSubjectModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 10000;" onclick="if(event.target === this) closeAddSubjectModal();">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
    <div style="background-color: #3F51B5; color: white; padding: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
      <h5 style="margin: 0; font-size: 18px;">Add New Subject</h5>
      <button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeAddSubjectModal()">&times;</button>
    </div>
    <form id="addSubjectForm" action="{% url 'add_subject' %}" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div style="padding: 20px;">
        <div style="margin-bottom: 15px;">
          <label for="subjectName" style="display: block; margin-bottom: 8px; font-weight: 500;">Subject Name</label>
          <input type="text" id="subjectName" name="name" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
        </div>
        <div style="margin-bottom: 15px;">
          <label for="subjectCode" style="display: block; margin-bottom: 8px; font-weight: 500;">Subject Code</label>
          <input type="text" id="subjectCode" name="code" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
        </div>
        <div style="margin-bottom: 15px;">
          <label for="periodOrYear" style="display: block; margin-bottom: 8px; font-weight: 500;">Period/{{ course.duration_type }}</label>
          <input type="number" id="periodOrYear" name="period_or_year" min="1" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
          <small style="color: #666; display: block; margin-top: 5px;">
            {% if course.duration_type == 'Semester' %}
              Enter semester number (1-{{ course.duration|multiply:2 }})
            {% else %}
              Enter year number (1-{{ course.duration }})
            {% endif %}
          </small>
        </div>
        <div style="margin-bottom: 15px;">
          <label for="syllabusPdf" style="display: block; margin-bottom: 8px; font-weight: 500;">Syllabus PDF</label>
          <input type="file" id="syllabusPdf" name="syllabus_pdf" accept=".pdf" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
          <small style="color: #666; display: block; margin-top: 5px;">Upload syllabus or study material in PDF format</small>
        </div>
      </div>
      <div style="padding: 15px; border-top: 1px solid #EEEEEE; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end;">
        <button type="button" style="background-color: #9E9E9E; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin-right: 10px; margin-bottom: 10px; cursor: pointer; font-size: 14px;" onclick="closeAddSubjectModal()">Cancel</button>
        <button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-bottom: 10px;">Add Subject</button>
      </div>
    </form>
  </div>
</div>

<script>
function openAddSubjectModal() {
  // Set max value for period/year input based on course duration
  const periodInput = document.getElementById('periodOrYear');
  {% if course.duration_type == 'Semester' %}
    periodInput.max = {{ course.duration|multiply:2 }};
  {% else %}
    periodInput.max = {{ course.duration }};
  {% endif %}
  
  document.getElementById('addSubjectModal').style.display = 'block';
}

function closeAddSubjectModal() {
  document.getElementById('addSubjectModal').style.display = 'none';
  document.getElementById('addSubjectForm').reset();
}

// Handle form submission
document.getElementById('addSubjectForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  
  // Validate period/year before submission
  const periodInput = document.getElementById('periodOrYear');
  const periodValue = parseInt(periodInput.value);
  const maxPeriod = parseInt(periodInput.max);
  
  if (periodValue > maxPeriod) {
    {% if course.duration_type == 'Semester' %}
      alert(`Semester number cannot exceed ${maxPeriod}`);
    {% else %}
      alert(`Year number cannot exceed ${maxPeriod}`);
    {% endif %}
    return;
  }
  
  fetch(this.action, {
    method: 'POST',
    body: formData,
    headers: {
      'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      closeAddSubjectModal();
      // Refresh the subjects table or add the new subject dynamically
      location.reload();
    } else {
      alert(data.message || 'Error adding subject');
    }
  })
  .catch(error => {
    console.error('Error:', error);
    alert('An error occurred while adding the subject');
  });
});
</script>