{% extends "admin/base_site.html" %}
{% load static %}
{% block extrastyle %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
          rel="stylesheet" />
    <style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 2rem;
    }

    </style>
{% endblock %}
{% block content %}
    <div class="container mt-4">
        <div class ="page-header">
            <h1 class="page-title">
                <i class="nav-icon fas fa-edit"></i>
                Edit Student
            </h1>
            <a href="{% url 'manage_student' %}" class="btn btn-primary">
                <i class="fas fa-list"></i> Back to Student
            </a>
        </div>
        <form method="POST" action="{% url 'edit_student' student.id %}">
            {% csrf_token %}
            <div class="row">
                <div class="col-md-4">
                    <label for="first_name">First Name</label>
                    <input type="text"
                           class="form-control"
                           id="first_name"
                           name="first_name"
                           value="{{ student.first_name }}"
                           required>
                </div>
                <div class="col-md-4">
                    <label for="middle_name">Middle Name</label>
                    <input type="text"
                           class="form-control"
                           id="middle_name"
                           name="middle_name"
                           value="{{ student.middle_name }}">
                </div>
                <div class="col-md-4">
                    <label for="last_name">Last Name</label>
                    <input type="text"
                           class="form-control"
                           id="last_name"
                           name="last_name"
                           value="{{ student.last_name }}"
                           required>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-4">
                    <label for="email">Email</label>
                    <input type="email"
                           class="form-control"
                           id="email"
                           name="email"
                           value="{{ student.email }}"
                           required>
                </div>
                <div class="col-md-4">
                    <label for="phone">Phone</label>
                    <input type="text"
                           class="form-control"
                           id="phone"
                           name="phone"
                           value="{{ student.phone }}"
                           required>
                </div>
                <div class="col-md-4">
                    <label for="dob">Date of Birth</label>
                    <input type="date"
                           class="form-control"
                           id="dob"
                           name="dob"
                           value="{{ student.dob|date:'Y-m-d' }}"
                           required>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-4">
                    <label for="gender">Gender</label>
                    <select class="form-control" id="gender" name="gender" required>
                        <option value="M" {% if student.gender == "M" %}selected{% endif %}>Male</option>
                        <option value="F" {% if student.gender == "F" %}selected{% endif %}>Female</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="course">Course</label>
                    <select class="form-control" id="course" name="course" required>
                        <option value="">Select Course</option>
                        {% for course in courses %}
                            <option value="{{ course.id }}"
                                    {% if student.course.id == course.id %}selected{% endif %}>
                                {{ course.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="academic_year">Academic Year</label>
                    <select class="form-control" id="academic_year" name="academic_year" required>
                        <option value="">Select Academic Year</option>
                        {% for year in academic_years %}
                            <option value="{{ year.id }}"
                                    {% if student.academic_year.id == year.id %}selected{% endif %}>
                                {{ year.start_date }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-4">
                    <label for="father_name">Father's Name</label>
                    <input type="text"
                           class="form-control"
                           id="father_name"
                           name="father_name"
                           value="{{ student.father_name }}"
                           required>
                </div>
                <div class="col-md-4">
                    <label for="father_occupation">Father's Occupation</label>
                    <select class="form-control"
                            id="father_occupation"
                            name="father_occupation"
                            required>
                        {% for key, value in occupation_choices %}
                            <option value="{{ key }}"
                                    {% if student.father_occupation == key %}selected{% endif %}>{{ value }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="mother_name">Mother's Name</label>
                    <input type="text"
                           class="form-control"
                           id="mother_name"
                           name="mother_name"
                           value="{{ student.mother_name }}"
                           required>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-4">
                    <label for="mother_occupation">Mother's Occupation</label>
                    <select class="form-control"
                            id="mother_occupation"
                            name="mother_occupation"
                            required>
                        {% for key, value in occupation_choices %}
                            <option value="{{ key }}"
                                    {% if student.mother_occupation == key %}selected{% endif %}>{{ value }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="guardian_name">Guardian's Name</label>
                    <input type="text"
                           class="form-control"
                           id="guardian_name"
                           name="guardian_name"
                           value="{{ student.guardian_name }}"
                           required>
                </div>
                <div class="col-md-4">
                    <label for="guardian_number">Guardian's Number</label>
                    <input type="text"
                           class="form-control"
                           id="guardian_number"
                           name="guardian_number"
                           value="{{ student.guardian_number }}"
                           required>
                </div>
                <div class="col-md-4">
                    <label for="relationship_with_student">Relationship with Student</label>
                    <select class="form-control"
                            id="relationship_with_student"
                            name="relationship_with_student"
                            required>
                        {% for key, value in relationship_choices %}
                            <option value="{{ key }}"
                                    {% if student.relationship_with_student == key %}selected{% endif %}>
                                {{ value }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group mt-3">
                <label for="address">Address</label>
                <textarea class="form-control" id="address" name="address" rows="3" required>{{ student.address }}</textarea>
            </div>
            <div class="text-right mt-4">
                <button type="submit" class="btn btn-primary">Update</button>
                <a href="{% url 'manage_student' %}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
{% endblock %}