{% extends 'shared/base.html' %}
{% load static %}
{% load tz %}
{% load app_filters %}


{% block content %}
<!-- Add CSRF token to the page -->
{% csrf_token %}

<div class="container-fluid py-4">
  <!-- Welcome Section -->
  {% include 'shared/welcome_section.html' with user=student %}

  <!-- Dashboard Content -->
  <div id="dashboardSection" class="content-section" style="display: block;">
    <!-- 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-3">
              <div>
                <span class="d-block text-muted small">Days Attended</span>
                <h3>{{ attendance_summary.classes_attended }}</h3>
                {% if attendance_summary.actual_classes %}
                <span class="d-block text-muted small mt-2">Classes Recorded</span>
                <h5>{{ attendance_summary.actual_classes }}</h5>
                {% endif %}
              </div>
              <div class="text-end">
                <span class="d-block text-muted small">Attendance Rate</span>
                <h3 class="text-primary">{{ attendance_summary.attendance_percentage|floatformat:1 }}%</h3>
                {% if attendance_summary.actual_percentage %}
                <span class="d-block text-muted small mt-2">Rate (Recorded Only)</span>
                <h5 class="text-primary">{{ attendance_summary.actual_percentage|floatformat:1 }}%</h5>
                {% endif %}
              </div>
            </div>
            <div class="d-flex justify-content-between mb-1">
              <div><small>0%</small></div>
              <div><small>100%</small></div>
            </div>
            <div class="progress mb-2 position-relative" style="height: 15px; border-radius: 20px; background-color: #f0f0f0;">
              <!-- Target marker at 75% -->
              <div class="position-absolute" style="left: 75%; top: -10px; bottom: -10px; width: 2px; background-color: #dc3545;"></div>
              <div class="progress-bar {% if attendance_summary.attendance_percentage < 75 %}bg-danger{% else %}bg-success{% endif %}"
                   role="progressbar"
                   style="width: {{ attendance_summary.attendance_percentage }}%;"
                   aria-valuenow="{{ attendance_summary.attendance_percentage }}"
                   aria-valuemin="0"
                   aria-valuemax="100"></div>
            </div>

            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">Minimum required: 75%</small>
              {% if attendance_summary.attendance_percentage < 75 %}
              <small class="text-danger"><i class="fas fa-exclamation-triangle"></i> Below minimum requirement</small>
              {% endif %}
            </div>
            <!-- <small class="text-muted d-block text-center">
              Based on attendance out of {% if student.course and student.course.duration_type == "Year" %}365 days per year{% else %}180 days per semester{% endif %}
            </small> -->
          </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>Course Name</th>
                        <td>{{ course.name }}</td>
                      </tr>
                      <tr>
                        <th>Course Code</th>
                        <td>{{ course.code|default:"-" }}</td>
                      </tr>
                      <tr>
                        <th>Description</th>
                        <td>{{ course.description|default:"No description available" }}</td>
                      </tr>
                      <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>Status</th>
                        <td>
                          <span class="badge {% if course.is_active %}bg-success{% else %}bg-secondary{% endif %}">
                            {{ course.is_active|yesno:"Active,Inactive" }}
                          </span>
                        </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>{% if course.duration_type == "Semester" %}Current Semester{% else %}Current Year{% endif %}</th>
                        <td>{% if course.duration_type == "Semester" %}Semester{% else %}Year{% endif %} {{ course.current_period }}</td>
                      </tr>
                      <tr>
                        <th>{% if course.duration_type == "Semester" %}Semester{% else %}Year{% endif %} Start</th>
                        <td>{{ course.period_start_date|date:"M d, Y" }}</td>
                      </tr>
                      <tr>
                        <th>{% if course.duration_type == "Semester" %}Semester{% else %}Year{% endif %} End</th>
                        <td>{{ course.period_end_date|date:"M d, Y" }}</td>
                      </tr>
                      {% if course.remaining_days is not None %}
                      <tr>
                        <th>{% if course.duration_type == "Semester" %}Semester{% else %}Year{% endif %} 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" style="display: none;">
    <div class="content-card">
      <h3 class="text-xl font-semibold mb-4">
        <i class="fas fa-book me-2"></i>Current {% if active_tracking.course.duration_type == "Semester" %}Semester{% else %}Year{% endif %} 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">{% if subject.course.duration_type == "Semester" %}Semester{% else %}Year{% endif %}: {{ subject.period_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 {% if active_tracking.course.duration_type == "Semester" %}semester{% else %}year{% endif %}.
        </div>
      {% endif %}
    </div>
  </div>

  <div class="content-section" id="routineSection" style="display: none;">
    <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>Code</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.subject.code|default:"-" }}</td>
                  <td>{{ routine.teacher.name }}</td>
                </tr>
              {% endfor %}
            {% elif has_routines %}
              <tr>
                <td colspan="4" class="text-center">No routines for current semester (Semester {{ student.current_semester }}).</td>
              </tr>
            {% else %}
              <tr>
                <td colspan="4" class="text-center">No routines assigned yet.</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="content-section" id="leaveSection" style="display: none;">
    <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 table-responsive table-hover">
          <thead>
            <tr>
              <th>Start Date</th>
              <th>End Date</th>
              <th>Message</th>
              <th>Status</th>
              <th>Created At</th>
            </tr>
          </thead>
          <tbody>
            {% for leave in student_leaves %}
            <tr>
              <td>{{ leave.start_date|date:"M d, Y" }}</td>
              <td>{{ leave.end_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="5" class="text-center">No leave requests found.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="content-section" id="feedbackSection" style="display: none;">
    <div class="content-card">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="mb-0">
          <i class="fas fa-comments me-2"></i> Feedback
        </h3>
        <button class="btn btn-primary" onclick="openFeedbackModal()">
          <i class="fas fa-plus me-2"></i> Give Feedback
        </button>
      </div>

      <div class="row">
        <!-- Teacher Feedback -->
        <div class="col-md-6 mb-4">
          <h4 class="mb-3">Teacher Feedback</h4>
          {% if student.feedbacks.all %}
            <div class="feedback-list">
              {% for feedback in student.feedbacks.all %}
                <div class="feedback-card">
                  <div class="feedback-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <div>
                        <h5 class="mb-1">{{ feedback.teacher.name }}</h5>
                        <small class="text-muted">{{ feedback.teacher.designation }}</small>
                      </div>
                      <div class="rating-stars">
                        {% for i in "12345"|make_list %}
                          {% if forloop.counter <= feedback.rating %}
                            <i class="fas fa-star text-warning"></i>
                          {% else %}
                            <i class="far fa-star text-warning"></i>
                          {% endif %}
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  <div class="feedback-message mt-3">
                    <p>{{ feedback.feedback_text }}</p>
                  </div>
                  <div class="feedback-footer mt-2">
                    <small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="empty-state">
              <i class="fas fa-comments"></i>
              <p>No teacher feedback submitted yet.</p>
            </div>
          {% endif %}
        </div>

        <!-- Institute Feedback -->
        <div class="col-md-6 mb-4">
          <h4 class="mb-3">Institute Feedback</h4>
          {% if institute_feedback %}
            <div class="feedback-list">
              {% for feedback in institute_feedback %}
                <div class="feedback-card">
                  <div class="feedback-header">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <div>
                        <h5 class="mb-1">{{ feedback.feedback_type }}</h5>
                        <small class="text-muted">{{ feedback.created_at|date:"M d, Y" }}</small>
                      </div>
                      <div class="rating-stars">
                        {% for i in "12345"|make_list %}
                          {% if forloop.counter <= feedback.rating %}
                            <i class="fas fa-star text-warning"></i>
                          {% else %}
                            <i class="far fa-star text-warning"></i>
                          {% endif %}
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                  <div class="feedback-message mt-3">
                    <p>{{ feedback.feedback_text }}</p>
                  </div>
                  <div class="feedback-footer mt-2">
                    <small class="text-muted">{{ feedback.created_at|timesince }} ago</small>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="empty-state">
              <i class="fas fa-building"></i>
              <p>No institute feedback submitted yet.</p>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="content-section" id="noticeSection" style="display: none;">
    <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" style="display: none;">
    <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 %}
                <div class="profile-picture-container profile-md">
                  <img src="{{ student.image.url }}" alt="{{ student.name }}" class="profile-picture">
                </div>
              {% else %}
                <div class="profile-picture-container profile-md">
                  <img src="{% static 'img/user.png' %}" alt="Default User" class="profile-picture">
                </div>
              {% 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>
</div>

<!-- Common Modals -->
{% include 'shared/common_modals.html' with user=student %}

<!-- Student-specific Modals -->
{% include 'student/modals/pdf_viewer_modal.html' %}
{% include 'student/modals/subject_files_modal.html' %}
{% include 'student/modals/feedback_modal.html' %}


<!-- Add fix script -->
<script src="{% static 'js/student_modals.js' %}"></script> 
<script src="{% static 'js/navigation.js' %}"></script>
<script src="{% static 'js/rating.js' %}"></script>

<!-- Bottom Navigation -->
{% include 'shared/bottom_nav.html' with user=student %}

<!-- Add a new attendance section -->
<div class="content-section" id="attendanceSection" style="display: none;">
  <div class="content-card">
    <h3 class="text-xl font-semibold mb-4">
      <i class="fas fa-clipboard-check me-2"></i> Attendance Record
    </h3>

    <!-- Attendance Summary -->
    <div class="row mb-4">
      <div class="col-md-4">
        <div class="card border-0 shadow-sm mb-3">
          <div class="card-body">
            <h5 class="card-title mb-3"><i class="fas fa-chart-pie text-primary me-2"></i>Attendance Summary</h5>
            <div class="d-flex justify-content-between align-items-center mb-3">
              <div>
                <span class="d-block text-muted small">Days Attended</span>
                <h3>{{ attendance_summary.classes_attended }}</h3>
                {% if attendance_summary.actual_classes %}
                <span class="d-block text-muted small mt-2">Classes Recorded</span>
                <h5>{{ attendance_summary.actual_classes }}</h5>
                {% endif %}
              </div>
              <div class="text-end">
                <span class="d-block text-muted small">Attendance Rate</span>
                <h3 class="text-primary">{{ attendance_summary.attendance_percentage|floatformat:1 }}%</h3>
                {% if attendance_summary.actual_percentage %}
                <span class="d-block text-muted small mt-2">Rate (Recorded Only)</span>
                <h5 class="text-primary">{{ attendance_summary.actual_percentage|floatformat:1 }}%</h5>
                {% endif %}
              </div>
            </div>
            <div class="progress mb-2 position-relative" style="height: 15px; border-radius: 20px; background-color: #f0f0f0;">
              <!-- Target marker at 75% -->
              <div class="position-absolute" style="left: 75%; top: -10px; bottom: -10px; width: 2px; background-color: #dc3545;"></div>
              <div class="progress-bar {% if attendance_summary.attendance_percentage < 75 %}bg-danger{% else %}bg-success{% endif %}"
                   role="progressbar"
                   style="width: {{ attendance_summary.attendance_percentage }}%;"
                   aria-valuenow="{{ attendance_summary.attendance_percentage }}"
                   aria-valuemin="0"
                   aria-valuemax="100"></div>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <small class="text-muted">Minimum required: 75%</small>
              {% if attendance_summary.attendance_percentage < 75 %}
              <small class="text-danger"><i class="fas fa-exclamation-triangle"></i> Below minimum requirement</small>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="card border-0 shadow-sm mb-3">
          <div class="card-body">
            <h5 class="card-title mb-3"><i class="fas fa-info-circle text-info me-2"></i>Attendance Details</h5>
            <div class="row">
              <div class="col-md-3 mb-3">
                <div class="text-center p-3 bg-light rounded">
                  <div class="display-6 text-success mb-1">{{ attendance_summary.present_count }}</div>
                  <div class="small text-muted">Present</div>
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <div class="text-center p-3 bg-light rounded">
                  <div class="display-6 text-danger mb-1">{{ attendance_summary.absent_count }}</div>
                  <div class="small text-muted">Absent</div>
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <div class="text-center p-3 bg-light rounded">
                  <div class="display-6 text-success mb-1">{{ attendance_summary.current_streak }}</div>
                  <div class="small text-muted">Current Streak</div>
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <div class="text-center p-3 bg-light rounded">
                  <div class="display-6 text-info mb-1">{{ attendance_summary.longest_streak }}</div>
                  <div class="small text-muted">Best Streak</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Attendance Records Table -->
    <div class="table-responsive">
      <table class="table table-responsive table-hover">
        <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.subject.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>

{% endblock content %}

{% block extrascripts %}
<script>
  // Initialize Firebase and request notification permission when the page loads
  document.addEventListener('DOMContentLoaded', function() {
    // Call getDeviceToken to initialize Firebase and request notification permission
    if (typeof getDeviceToken === 'function') {
      getDeviceToken().catch(error => {
        console.error('Error initializing Firebase:', error);
      });
    }
  });
</script>
{% endblock %}