{% extends "base.html" %}
{% load static %}
{% load tz %}
{% load app_filters %}

{% block extrastyle %}
{{ block.super }}
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Viewport meta tag for responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Custom Dashboard CSS -->
<link href="{% static 'css/dashboard.css' %}" rel="stylesheet" />
<!-- Responsive overrides -->
<style>
  @media (max-width: 768px) {
    .welcome-section h2 {
      font-size: 1.5rem;
    }
    .summary-card .card-body {
      padding: 0.75rem;
    }
    .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .bottom-nav {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .profile-actions {
      margin-top: 1rem;
      width: 100%;
      justify-content: center;
    }
  }
  @media (max-width: 576px) {
    .container-fluid {
      padding-left: 10px;
      padding-right: 10px;
    }
    .col-md-6, .col-lg-3, .col-md-4, .col-md-3 {
      padding-left: 5px;
      padding-right: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    .modal-body {
      padding: 10px;
    }
  }
</style>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom Dashboard JS -->
<script src="{% static 'js/dashboard.js' %}"></script>
{% endblock %}

{% block content %}

<div class="container-fluid py-4">
  <!-- Welcome Section -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="content-card welcome-section">
        <div class="d-flex justify-content-between align-items-center flex-wrap">
          {% if student.image %}
            <img src="{{ student.image.url }}" alt="{{ student.name }}" class="rounded-circle me-3" style="width: 60px; height: 60px; object-fit: cover;">
          {% else %}
            <img src="{% static 'img/user.png' %}" alt="Default User" class="rounded-circle me-3" style="width: 60px; height: 60px; object-fit: cover;">
          {% endif %}
          <div class="flex-grow-1">
            <h2 class="mb-1">Welcome, {{ student.name }}!</h2>
            <p class="text-muted mb-0">Student <span class="ms-2 badge bg-info text-white">ID: {{ student.id }}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Content Sections -->
  <div class="content-section active" id="dashboardSection">
    <!-- Summary Cards -->
    <div class="row mb-4">
      <!-- Attendance Summary Card -->
      <div class="col-md-4 col-lg-3 mb-3">
        <div class="summary-card h-100">
          <div class="card-header">
            <h5 class="card-title mb-0 small"><i class="fas fa-calendar-check me-1"></i> Attendance Summary</h5>
          </div>
          <div class="card-body p-2">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div>
                <small class="text-muted d-block mb-1">Total Classes</small>
                <h3 class="fw-bold mb-0">{{ attendance_summary.total_classes }}</h3>
              </div>
              <div class="text-end">
                <small class="text-muted d-block mb-1">Attendance Rate</small>
                <h3 class="fw-bold text-primary mb-0">{{ attendance_summary.attendance_percentage|floatformat:1 }}%</h3>
              </div>
            </div>
            <div class="d-flex justify-content-between mt-3">
              <span class="badge bg-success p-2"><i class="fas fa-fire me-1"></i> Current: {{ attendance_summary.current_streak }} days</span>
              <span class="badge bg-info p-2"><i class="fas fa-trophy me-1"></i> Best: {{ attendance_summary.longest_streak }} days</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Course Progress Card -->
      <div class="col-md-4 col-lg-3 mb-3">
        <div class="summary-card h-100">
          <div class="card-header">
            <h5 class="card-title mb-0 small"><i class="fas fa-graduation-cap me-1"></i> Course Progress</h5>
          </div>
          <div class="card-body p-2">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div>
                <small class="text-muted d-block mb-1">Total Courses</small>
                <h3 class="fw-bold mb-0">{{ course_summary.total_courses }}</h3>
              </div>
              <div class="text-end">
                <small class="text-muted d-block mb-1">Completion Rate</small>
                <h3 class="fw-bold text-success mb-0">{{ course_summary.completion_percentage|floatformat:1 }}%</h3>
              </div>
            </div>
            <div class="d-flex justify-content-between mt-3">
              <div>
                <small class="text-muted d-block">Completed</small>
                <span class="badge bg-success p-2"><i class="fas fa-check me-1"></i> {{ course_summary.completed_courses }}</span>
              </div>
              <div class="text-end">
                <small class="text-muted d-block">Ongoing</small>
                <span class="badge bg-warning p-2"><i class="fas fa-spinner me-1"></i> {{ course_summary.ongoing_courses }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recent Activity Card -->
      <div class="col-md-4 col-lg-3 mb-3">
        <div class="summary-card h-100">
          <div class="card-header">
            <h5 class="card-title mb-0 small"><i class="fas fa-clock me-1"></i> Recent Activity</h5>
          </div>
          <div class="card-body p-2">
            <div class="activity-scroll" style="max-height: 150px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin;">
              {% for leave in recent_leaves %}
              <div class="d-flex align-items-center mb-2">
                <i class="fas fa-calendar-alt text-primary me-2"></i>
                <div>
                  <small class="mb-0 d-block">Leave Request ({{ leave.date|date:"M d" }})</small>
                  <span class="badge {% if leave.status == 0 %}bg-warning{% elif leave.status == 1 %}bg-success{% else %}bg-danger{% endif %}">{{ leave.get_status_display }}</span>
                  <small class="text-muted">{{ leave.created_at|timesince }} ago</small>
                </div>
              </div>
              {% endfor %}

              {% for feedback in recent_feedback %}
              <div class="d-flex align-items-center mb-2">
                <i class="fas fa-comment text-success me-2"></i>
                <div>
                  <small class="mb-0 d-block">Gave feedback {% if feedback.teacher %}to {{ feedback.teacher.name }}{% endif %}</small>
                  <div>
                    {% for i in "12345"|make_list %}
                    {% if forloop.counter <= feedback.rating %}
                      <i class="fas fa-star text-warning" style="font-size: 0.7rem;"></i>
                    {% else %}
                      <i class="far fa-star text-warning" style="font-size: 0.7rem;"></i>
                    {% endif %}
                    {% endfor %}
                    <small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
                  </div>
                </div>
              </div>
              {% endfor %}

              {% for notice in notices %}
              <div class="d-flex align-items-center mb-2">
                <i class="fas fa-bullhorn text-info me-2"></i>
                <div>
                  <small class="mb-0 d-block">{{ notice.title }}</small>
                  <small class="text-muted">{{ notice.created_at|timesince }} ago</small>
                </div>
              </div>
              {% endfor %}

              {% for record in attendance_records %}
              <div class="d-flex align-items-center mb-2">
                <i class="fas fa-user-check {% if record.student_attend %}text-success{% else %}text-danger{% endif %} me-2"></i>
                <div>
                  <small class="mb-0 d-block">{% if record.student_attend %}Attended{% else %}Missed{% endif %} {{ record.attendance.routine.subject.name|truncatechars:15 }}</small>
                  <small class="text-muted">{{ record.attendance.date|date:"M d" }}</small>
                </div>
              </div>
              {% endfor %}

              {% if not recent_leaves and not recent_feedback and not notices and not attendance_records %}
              <div class="text-center">
                <small class="text-muted">No recent activity</small>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      <!-- Leave Status Card -->
      <div class="col-md-4 col-lg-3 mb-3">
        <div class="summary-card h-100">
          <div class="card-header">
            <h5 class="card-title mb-0 small"><i class="fas fa-calendar-minus me-1"></i> Leave Status</h5>
          </div>
          <div class="card-body p-2">
            <div class="d-flex justify-content-between mb-2">
              <small class="mb-0">Pending</small>
              <span class="badge leave-pending">{{ pending_leaves }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
              <small class="mb-0">Approved</small>
              <span class="badge leave-approved">{{ approved_leaves }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
              <small class="mb-0">Rejected</small>
              <span class="badge leave-rejected">{{ rejected_leaves }}</span>
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary w-100 mt-1" id="requestLeaveBtn" onclick="openLeaveModal()">
              <i class="fas fa-plus-circle me-1"></i> Request
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Course Overview Section -->
    <div class="row mb-4">
      <div class="col-12">
        <div class="content-card">
          <h4 class="card-title mb-3 d-flex align-items-center">
            <i class="fas fa-graduation-cap me-2"></i> Course Details
          </h4>
          
          {% if course_details %}
            {% for course in course_details %}
            <div class="mb-4">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">{{ course.name }}</h5>
                <span class="status-badge {% if course.progress_status == 'Completed' %}bg-success{% elif course.progress_status == 'In Progress' %}bg-warning{% else %}bg-secondary{% endif %}">
                  {{ course.progress_status }}
                </span>
              </div>

              <!-- Course Progress -->
              <div class="progress mb-3">
                <div class="progress-bar bg-primary" role="progressbar"
                     aria-valuenow="{{ course.completion_percentage }}" aria-valuemin="0" aria-valuemax="100"
                     style="--progress-width: {{ course.completion_percentage }}%">
                  {{ course.completion_percentage }}%
                </div>
              </div>

              <!-- Course Information -->
              <div class="row mb-4">
                <div class="col-md-6">
                  <table class="table">
                    <tbody>
                      <tr>
                        <th>Start Date</th>
                        <td>{{ course.start_date|date:"M d, Y" }}</td>
                      </tr>
                      <tr>
                        <th>Duration Type</th>
                        <td>{{ course.duration_type }}</td>
                      </tr>
                      <tr>
                        <th>Total Duration</th>
                        <td>
                          {% if course.duration_type == "Semester" %}
                            {{ course.duration }} years ({{ course.duration|multiply:2 }} semesters)
                          {% else %}
                            {{ course.duration }} years
                          {% endif %}
                        </td>
                      </tr>
                      <tr>
                        <th>Expected End Date</th>
                        <td>{{ course.expected_end_date|date:"M d, Y" }}</td>
                      </tr>
                      {% if course.actual_end_date %}
                      <tr>
                        <th>Actual End Date</th>
                        <td>{{ course.actual_end_date|date:"M d, Y" }}</td>
                      </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
                <div class="col-md-6">
                  <table class="table">
                    <tbody>
                      <tr>
                        <th>Current Semester</th>
                        <td>{{ course.current_semester }}</td>
                      </tr>
                      <tr>
                        <th>Semester Start</th>
                        <td>{{ course.semester_start_date|date:"M d, Y" }}</td>
                      </tr>
                      <tr>
                        <th>Semester End</th>
                        <td>{{ course.semester_end_date|date:"M d, Y" }}</td>
                      </tr>
                      {% if course.remaining_days is not None %}
                      <tr>
                        <th>Semester Days Remaining</th>
                        <td>{{ course.remaining_days }} days</td>
                      </tr>
                      {% endif %}
                      {% if course.total_remaining_days is not None %}
                      <tr>
                        <th>Total Course Days Remaining</th>
                        <td>{{ course.total_remaining_days }} days</td>
                      </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            {% endfor %}
          {% else %}
            <div class="alert alert-info">
              <i class="fas fa-info-circle me-2"></i>No courses assigned yet.
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="content-section" id="subjectsSection">
    <div class="content-card">
      <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-book me-2"></i>Current Semester Subjects
      </h3>
      {% if current_subjects %}
        <div class="row g-3">
          {% for subject in current_subjects %}
            <div class="col-md-4 col-lg-3">
              <div class="card mb-3">
                <div class="card-body">
                  <h5 class="card-title">{{ subject.name }}</h5>
                  <p class="card-text">
                    <small class="text-muted">Semester: {{ subject.semester_or_year }}</small>
                  </p>
                  <div class="d-flex justify-content-between align-items-center">
                    <button class="btn btn-primary btn-sm view-subject-files" data-subject-id="{{ subject.id }}" onclick="openSubjectFilesModal('{{ subject.id }}')">
                      View Files
                    </button>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="alert alert-info">
          <i class="fas fa-info-circle me-2"></i>No subjects assigned for the current semester.
        </div>
      {% endif %}
    </div>
  </div>

  <div class="content-section" id="routineSection">
    <div class="content-card">
      <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-calendar-alt mr-2"></i> Class Routine
      </h3>
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Time</th>
              <th>Subject</th>
              <th>Teacher</th>
            </tr>
          </thead>
          <tbody>
            {% if current_semester_routines %}
              {% for routine in current_semester_routines %}
                <tr>
                  <td>{{ routine.start_time|time:"H:i" }} - {{ routine.end_time|time:"H:i" }}</td>
                  <td>{{ routine.subject.name }}</td>
                  <td>{{ routine.teacher.name }}</td>
                </tr>
              {% endfor %}
            {% elif has_routines %}
              <tr>
                <td colspan="3" class="text-center">No routines for current semester (Semester {{ student.current_semester }}).</td>
              </tr>
            {% else %}
              <tr>
                <td colspan="3" class="text-center">No routines assigned yet.</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>

      <!-- Attendance Record Section -->
      <div class="content-card mt-4">
        <h3 class="text-xl font-semibold mb-4">
          <i class="fas fa-history mr-2"></i> Attendance Record
        </h3>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Date</th>
                <th>Subject</th>
                <th>Teacher</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {% for record in attendance_records %}
              <tr>
                <td>{{ record.attendance.date|date:"M d, Y" }}</td>
                <td>{{ record.attendance.routine.name }}</td>
                <td>{{ record.attendance.teacher.name }}</td>
                <td>
                  <span class="status-badge {% if record.student_attend %}bg-success{% else %}bg-danger{% endif %}">
                    {% if record.student_attend %}Present{% else %}Absent{% endif %}
                  </span>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="4" class="text-center">No attendance records found.</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="content-section" id="leaveSection">
    <div class="content-card">
      <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-calendar-times mr-2"></i> Leave Management
      </h3>
      <div class="row mb-4">
        <div class="col-12">
          <button class="btn btn-primary" onclick="openLeaveModal()">
            <i class="fas fa-plus me-2"></i>Request Leave
          </button>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Message</th>
              <th>Status</th>
              <th>Created At</th>
            </tr>
          </thead>
          <tbody>
            {% for leave in student_leaves %}
            <tr>
              <td>{{ leave.date|date:"M d, Y" }}</td>
              <td>{{ leave.message }}</td>
              <td>
                <span class="status-badge {% if leave.status == 1 %}bg-success{% elif leave.status == 2 %}bg-danger{% else %}bg-warning{% endif %}">
                  {{ leave.get_status_display }}
                </span>
              </td>
              <td>{{ leave.created_at|date:"M d, Y H:i" }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="4" class="text-center">No leave requests found.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="content-section" id="feedbackSection">
    <div class="content-card">
      <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-comments mr-2"></i> Feedback
      </h3>
      <div class="d-flex justify-content-end mb-4">
        <button class="btn btn-primary" onclick="openFeedbackModal()">
          <i class="fas fa-plus me-2"></i>Give Feedback
        </button>
      </div>

      <div class="row">
        <div class="col-md-6">
          <h4 class="mb-3">Teacher Feedback</h4>
          {% for feedback in student.feedbacks.all %}
          <div class="card mb-3 border-0 shadow-sm">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <h5 class="card-title mb-0">{{ feedback.teacher.name }}</h5>
                <div class="rating">
                  {% for i in "12345"|make_list %}
                  {% with i_float=forloop.counter|floatformat:0|add:"0" %}
                    {% if feedback.rating >= i_float %}
                      <i class="fas fa-star text-warning"></i>
                    {% elif feedback.rating >= i_float|add:"-0.5" %}
                      <i class="fas fa-star-half-alt text-warning"></i>
                    {% else %}
                      <i class="far fa-star text-warning"></i>
                    {% endif %}
                  {% endwith %}
                  {% endfor %}
                </div>
              </div>
              <div class="feedback-message p-3 bg-light rounded mb-2">
                <p class="card-text mb-0">{{ feedback.feedback_text }}</p>
              </div>
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
                <span class="badge bg-primary">{{ feedback.rating }}/5</span>
              </div>
            </div>
          </div>
          {% empty %}
          <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i> No feedback given to teachers yet.
          </div>
          {% endfor %}
        </div>
        <div class="col-md-6">
          <h4 class="mb-3">Institute Feedback</h4>
          {% for feedback in student.institute_feedbacks.all %}
          <div class="card mb-3 border-0 shadow-sm">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <h5 class="card-title mb-0">{{ feedback.feedback_type }}</h5>
                <div class="rating">
                  {% for i in "12345"|make_list %}
                  {% with i_float=forloop.counter|floatformat:0|add:"0" %}
                    {% if feedback.rating >= i_float %}
                      <i class="fas fa-star text-warning"></i>
                    {% elif feedback.rating >= i_float|add:"-0.5" %}
                      <i class="fas fa-star-half-alt text-warning"></i>
                    {% else %}
                      <i class="far fa-star text-warning"></i>
                    {% endif %}
                  {% endwith %}
                  {% endfor %}
                </div>
              </div>
              <div class="feedback-message p-3 bg-light rounded mb-2">
                <p class="card-text mb-0">{{ feedback.feedback_text }}</p>
              </div>
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
                <span class="badge bg-primary">{{ feedback.rating }}/5</span>
              </div>
            </div>
          </div>
          {% empty %}
          <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i> No institute feedback given yet.
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <div class="content-section" id="noticeSection">
    <div class="content-card">
      <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-bullhorn mr-2"></i> Notices
      </h3>
      <div class="row">
        {% for notice in notices %}
        <div class="col-md-6 mb-4">
          <div class="card h-100">
            {% if notice.image %}
            <img src="{{ notice.image.url }}" class="card-img-top" alt="{{ notice.title }}">
            {% endif %}
            <div class="card-body">
              <h5 class="card-title">{{ notice.title }}</h5>
              <p class="card-text">{{ notice.message }}</p>
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">{{ notice.created_at|date:"M d, Y" }}</small>
                {% if notice.file %}
                <a href="{{ notice.file.url }}" class="btn btn-sm btn-primary" target="_blank">
                  <i class="fas fa-download me-1"></i>Download
                </a>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
        {% empty %}
        <div class="col-12">
          <p class="text-muted text-center">No notices available.</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="content-section" id="profileSection">
    <div class="content-card">
      <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-user mr-2"></i> Profile Information
      </h3>
      <div class="row">
        <!-- Profile Header with Image and Actions -->
        <div class="col-12 mb-4">
          <div class="d-flex flex-wrap align-items-center justify-content-between">
            <div class="d-flex align-items-center mb-3 mb-md-0">
              {% if student.image %}
                <img src="{{ student.image.url }}" alt="{{ student.name }}" class="rounded-circle me-3" style="width: 80px; height: 80px; object-fit: cover;">
              {% else %}
                <img src="{% static 'img/user.png' %}" alt="Default User" class="rounded-circle me-3" style="width: 80px; height: 80px; object-fit: cover;">
              {% endif %}
              <div>
                <h4 class="mb-1">{{ student.name }}</h4>
                <p class="mb-0 text-muted">
                  <span class="me-3"><i class="fas fa-id-card me-1"></i> {{ student.id }}</span>
                  <span class="me-3"><i class="fas fa-envelope me-1"></i> {{ student.email }}</span>
                  <span><i class="fas fa-phone me-1"></i> {{ student.phone }}</span>
                </p>
                <div class="mt-2">
                  <span class="badge {% if student.status == 'Active' %}bg-success{% elif student.status == 'Leave' %}bg-warning{% else %}bg-secondary{% endif %} me-2">
                    {{ student.status }}
                  </span>
                  {% if student.course %}
                    <span class="badge bg-info me-2">{{ student.course.name }}</span>
                  {% endif %}
                  <span class="badge bg-primary">Semester {{ student.current_semester }}</span>
                </div>
              </div>
            </div>
            <div class="profile-actions d-flex gap-2">
              <button class="btn btn-sm btn-primary" onclick="openProfileModal()">
                <i class="fas fa-camera me-1"></i> Update Photo
              </button>
              <button class="btn btn-sm btn-secondary" onclick="openPasswordModal()">
                <i class="fas fa-key me-1"></i> Change Password
              </button>
            </div>
          </div>
        </div>

        <!-- Personal Information Section -->
        <div class="col-md-6 mb-4">
          <div class="card h-100 border-0 shadow-sm">
            <div class="card-header bg-light py-2">
              <h5 class="card-title mb-0"><i class="fas fa-user-circle me-2"></i>Personal Information</h5>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-6">
                  <small class="text-muted d-block">Full Name</small>
                  <p class="mb-0 fw-medium">{{ student.name }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Gender</small>
                  <p class="mb-0 fw-medium">{{ student.gender }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Birth Date</small>
                  <p class="mb-0 fw-medium">{{ student.birth_date|date:"M d, Y" }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Marital Status</small>
                  <p class="mb-0 fw-medium">{{ student.marital_status }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Citizenship No.</small>
                  <p class="mb-0 fw-medium">{{ student.citizenship_no|default:"Not provided" }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Joining Date</small>
                  <p class="mb-0 fw-medium">{{ student.joining_date|date:"M d, Y" }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Contact & Parent Information -->
        <div class="col-md-6 mb-4">
          <div class="card h-100 border-0 shadow-sm">
            <div class="card-header bg-light py-2">
              <h5 class="card-title mb-0"><i class="fas fa-address-book me-2"></i>Contact Information</h5>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-6">
                  <small class="text-muted d-block">Email Address</small>
                  <p class="mb-0 fw-medium">{{ student.email }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Phone Number</small>
                  <p class="mb-0 fw-medium">{{ student.phone }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Parent Name</small>
                  <p class="mb-0 fw-medium">{{ student.parent_name|default:"Not provided" }}</p>
                </div>
                <div class="col-md-6">
                  <small class="text-muted d-block">Parent Phone</small>
                  <p class="mb-0 fw-medium">{{ student.parent_phone|default:"Not provided" }}</p>
                </div>
                <div class="col-12">
                  <small class="text-muted d-block">Temporary Address</small>
                  <p class="mb-0 fw-medium">{{ student.temporary_address|default:"Not provided" }}</p>
                </div>
                <div class="col-12">
                  <small class="text-muted d-block">Permanent Address</small>
                  <p class="mb-0 fw-medium">{{ student.permanent_address|default:"Not provided" }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Academic Information -->
        <div class="col-12 mb-4">
          <div class="card border-0 shadow-sm">
            <div class="card-header bg-light py-2">
              <h5 class="card-title mb-0"><i class="fas fa-graduation-cap me-2"></i>Academic Information</h5>
            </div>
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-3">
                  <small class="text-muted d-block">Course</small>
                  <p class="mb-0 fw-medium">{{ student.course.name|default:"Not assigned" }}</p>
                </div>
                <div class="col-md-3">
                  <small class="text-muted d-block">Current Semester</small>
                  <p class="mb-0 fw-medium">{{ student.current_semester }}</p>
                </div>
                <div class="col-md-3">
                  <small class="text-muted d-block">Joining Date</small>
                  <p class="mb-0 fw-medium">{{ student.joining_date|date:"M d, Y" }}</p>
                </div>
                <div class="col-md-3">
                  <small class="text-muted d-block">Batches</small>
                  <p class="mb-0">
                    {% for batch in student.batches.all %}
                      <span class="badge bg-info me-1">{{ batch.name }}</span>
                    {% empty %}
                      <span class="text-muted">No batches assigned</span>
                    {% endfor %}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Edit Profile Modal -->
  <div id="profileModal" 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) closeProfileModal();">
    <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;">Update Profile Picture</h5>
        <button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeProfileModal()">&times;</button>
      </div>
      <div style="padding: 20px;">
        <!-- Profile Picture Upload Form -->
        <form action="{% url 'update_profile' %}" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <div style="text-align: center; margin-bottom: 20px;">
            {% if student.image %}
              <img src="{{ student.image.url }}" alt="{{ student.name }}" class="rounded-circle" style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #3F51B5;">
            {% else %}
              <img src="{% static 'img/user.png' %}" alt="Default User" class="rounded-circle" style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #3F51B5;">
            {% endif %}
          </div>
          <div style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 8px; font-weight: 500;">Select New Profile Picture</label>
            <input type="file" name="image" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
          </div>
          <div style="display: flex; justify-content: space-between;">
            <button type="button" onclick="closeProfileModal()" style="background-color: #9E9E9E; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Cancel</button>
            <button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Update Picture</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Change Password Modal -->
  <div id="passwordModal" 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) closePasswordModal();">
    <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;">Change Password</h5>
        <button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closePasswordModal()">&times;</button>
      </div>
      <div style="padding: 20px;">
        <!-- Change Password Form -->
        <form action="{% url 'change_password' %}" method="post">
          {% csrf_token %}
          <div style="margin-bottom: 15px;">
            <label for="current_password" style="display: block; margin-bottom: 8px; font-weight: 500;">Current Password</label>
            <input type="password" id="current_password" name="current_password" 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="new_password" style="display: block; margin-bottom: 8px; font-weight: 500;">New Password</label>
            <input type="password" id="new_password" name="new_password" 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="confirm_password" style="display: block; margin-bottom: 8px; font-weight: 500;">Confirm New Password</label>
            <input type="password" id="confirm_password" name="confirm_password" required style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;">
          </div>
          <button type="submit" style="background-color: #3F51B5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; width: 100%;">Change Password</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Leave Request Modal -->
<div id="customLeaveModal" 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) closeLeaveModal();">
  <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;">Request Leave</h5>
      <button id="closeCustomModal" style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeLeaveModal()">&times;</button>
    </div>
    <form action="{% url 'request_leave' %}" method="post">
      {% csrf_token %}
      <div style="padding: 20px;">
        <div style="margin-bottom: 15px;">
          <label for="customLeaveDate" style="display: block; margin-bottom: 8px; font-weight: 500;">Date</label>
          <input type="date" id="customLeaveDate" name="date" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;" required>
        </div>
        <div style="margin-bottom: 15px;">
          <label for="customLeaveMessage" style="display: block; margin-bottom: 8px; font-weight: 500;">Reason</label>
          <textarea id="customLeaveMessage" name="message" rows="3" style="width: 100%; padding: 10px; border: 1px solid #BDBDBD; border-radius: 4px; box-sizing: border-box;" required></textarea>
        </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" id="cancelCustomModal" 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="closeLeaveModal()">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;">Submit Request</button>
      </div>
    </form>
  </div>
</div>

<!-- Feedback Modal -->
<div id="feedbackModal" 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) closeFeedbackModal();">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 600px; 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;">Give Feedback</h5>
      <button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeFeedbackModal()">&times;</button>
    </div>
    <div style="padding: 20px;">
      <!-- Custom Tab Navigation -->
      <div class="feedback-tabs d-flex mb-4">
        <div id="teacher-tab-btn" class="feedback-tab-btn active" onclick="switchFeedbackTab('teacher')" style="background-color: #3F51B5; color: white;">
          Teacher Feedback
        </div>
        <div id="institute-tab-btn" class="feedback-tab-btn" onclick="switchFeedbackTab('institute')" style="border-color: #3F51B5;">
          Institute Feedback
        </div>
      </div>
      
      <!-- Tab Content -->
      <div class="tab-content">
        <!-- Teacher Feedback Form -->
        <div id="teacher-tab-content" class="tab-pane active">
          <form method="post" action="{% url 'submit_feedback' %}" id="teacherFeedbackForm">
            {% csrf_token %}
            <input type="hidden" name="feedback_type" value="teacher">
            <div class="mb-3">
              <label for="teacher_select" class="form-label">Select Teacher</label>
              <select class="form-select" id="teacher_select" name="teacher_id" required style="border-color: #BDBDBD;">
                <option value="">Select Teacher</option>
                {% for teacher in teachers %}
                  <option value="{{ teacher.id }}">{{ teacher.name }} - {{ teacher.designation }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">Rating</label>
              <div id="teacher-rating" class="rating-container d-flex justify-content-start gap-2">
                {% for i in "12345"|make_list %}
                <div class="form-check">
                  <input class="form-check-input visually-hidden" type="radio" name="rating" value="{{ i }}" id="teacherStar{{ i }}" required>
                  <label class="form-check-label" for="teacherStar{{ i }}">
                    <i class="far fa-star fs-4" style="color: #FFC107;"></i>
                  </label>
                </div>
                {% endfor %}
              </div>
            </div>
            <div class="mb-3">
              <label for="teacher_feedback" class="form-label">Your Feedback</label>
              <textarea class="form-control" id="teacher_feedback" name="feedback_text" rows="3" required style="border-color: #BDBDBD;"></textarea>
            </div>
            <div class="d-flex justify-content-end gap-2">
              <button type="button" class="btn" style="background-color: #9E9E9E; color: white;" onclick="closeFeedbackModal()">Cancel</button>
              <button type="submit" class="btn" style="background-color: #3F51B5; color: white;">Submit Feedback</button>
            </div>
          </form>
        </div>
        
        <!-- Institute Feedback Form -->
        <div id="institute-tab-content" class="tab-pane">
          <form method="post" action="{% url 'submit_feedback' %}" id="instituteFeedbackForm">
            {% csrf_token %}
            <input type="hidden" name="feedback_type" value="institute">
            <div class="mb-3">
              <label for="feedback_type_select" class="form-label">Feedback Category</label>
              <select class="form-select" id="feedback_type_select" name="category" required style="border-color: #BDBDBD;">
                <option value="">Select Category</option>
                <option value="General">General</option>
                <option value="Facilities">Facilities</option>
                <option value="Teaching">Teaching Quality</option>
                <option value="Infrastructure">Infrastructure</option>
                <option value="Administration">Administration</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="form-label">Rating</label>
              <div id="institute-rating" class="rating-container d-flex justify-content-start gap-2">
                {% for i in "12345"|make_list %}
                <div class="form-check">
                  <input class="form-check-input visually-hidden" type="radio" name="rating" value="{{ i }}" id="instituteStar{{ i }}" required>
                  <label class="form-check-label" for="instituteStar{{ i }}">
                    <i class="far fa-star fs-4" style="color: #FFC107;"></i>
                  </label>
                </div>
                {% endfor %}
              </div>
            </div>
            <div class="mb-3">
              <label for="institute_feedback" class="form-label">Your Feedback</label>
              <textarea class="form-control" id="institute_feedback" name="feedback_text" rows="3" required placeholder="Please provide your feedback about the institute" style="border-color: #BDBDBD;"></textarea>
            </div>
            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="is_anonymous" id="isAnonymous" style="border-color: #BDBDBD;">
                <label class="form-check-label" for="isAnonymous">
                  Submit anonymously
                </label>
              </div>
            </div>
            <div class="d-flex justify-content-end gap-2">
              <button type="button" class="btn" style="background-color: #9E9E9E; color: white;" onclick="closeFeedbackModal()">Cancel</button>
              <button type="submit" class="btn" style="background-color: #3F51B5; color: white;">Submit Feedback</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- PDF Viewer Modal -->
<div id="pdfViewerModal" 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) closePdfViewerModal();">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; max-width: 1000px; height: 90vh; 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;">Subject Syllabus</h5>
      <button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closePdfViewerModal()">&times;</button>
    </div>
    <div style="height: calc(90vh - 60px); padding: 0;">
      <iframe id="pdfViewer" style="width: 100%; height: 100%; border: none;"></iframe>
    </div>
  </div>
</div>

<!-- Subject Files Modal -->
<div id="subjectFilesModal" 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) closeSubjectFilesModal();">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; 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;">Subject Files</h5>
      <button style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 24px;" onclick="closeSubjectFilesModal()">&times;</button>
    </div>
    <div style="padding: 20px;">
      <div id="subjectFilesList" class="list-group">
        <!-- Files will be loaded here -->
      </div>
    </div>
  </div>
</div>

<!-- Additional responsive scripts -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Make all tables responsive
    const tables = document.querySelectorAll('table:not(.table-responsive)');
    tables.forEach(table => {
      const wrapper = document.createElement('div');
      wrapper.classList.add('table-responsive');
      table.parentNode.insertBefore(wrapper, table);
      wrapper.appendChild(table);
    });
    
    // Adjust card layout on small screens
    function adjustLayout() {
      const windowWidth = window.innerWidth;
      if (windowWidth < 768) {
        // Smaller screens adjustments
        document.querySelectorAll('.card-title').forEach(title => {
          title.style.fontSize = '1rem';
        });
      } else {
        // Reset for larger screens
        document.querySelectorAll('.card-title').forEach(title => {
          title.style.fontSize = '';
        });
      }
    }
    
    // Run on load and resize
    adjustLayout();
    window.addEventListener('resize', adjustLayout);
  });
</script>

<!-- Bottom Navigation -->
<div class="bottom-nav">
  <div class="nav-container">
    <a href="#" class="nav-item active" data-section="dashboard">
      <i class="fas fa-home"></i>
      <span class="d-none d-sm-block">Dashboard</span>
    </a>
    <a href="#" class="nav-item" data-section="subjects">
      <i class="fas fa-book"></i>
      <span class="d-none d-sm-block">Subjects</span>
    </a>
    <a href="#" class="nav-item" data-section="routine">
      <i class="fas fa-calendar-alt"></i>
      <span class="d-none d-sm-block">Routine</span>
    </a>
    <a href="#" class="nav-item" data-section="leave">
      <i class="fas fa-calendar-times"></i>
      <span class="d-none d-sm-block">Leaves</span>
    </a>
    <a href="#" class="nav-item" data-section="feedback">
      <i class="fas fa-comments"></i>
      <span class="d-none d-sm-block">Feedback</span>
    </a>
    <a href="#" class="nav-item" data-section="notice">
      <i class="fas fa-bullhorn"></i>
      <span class="d-none d-sm-block">Notices</span>
    </a>
    <a href="#" class="nav-item" data-section="profile">
      <i class="fas fa-user"></i>
      <span class="d-none d-sm-block">Profile</span>
    </a>
    <a href="#" class="nav-item" onclick="document.getElementById('logoutForm').submit(); return false;">
      <i class="fas fa-sign-out-alt"></i>
      <span class="d-none d-sm-block">Logout</span>
    </a>
    <form id="logoutForm" method="post" action="{% url 'logout' %}" style="display: none;">
      {% csrf_token %}
    </form>
  </div>
</div>

<!-- Toast Notification -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11000">
  <div id="notificationToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="fas fa-bell me-2"></i>
      <strong class="me-auto" id="toastTitle">Notification</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body" id="toastMessage">
      <!-- Notification message will appear here -->
    </div>
  </div>
</div>
{% endblock %}