{% extends "exams/base.html" %}
{% load static %}
{% load widget_tweaks %}

{% block content %}

<style>
    .profile-card {
        max-width: 650px;
        margin: auto;
        padding: 25px;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #1f7ed6;
        margin: auto;
        display: block;
    }
    .profile-avatar-fallback {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin: auto;
        background: #1f7ed6;
        color: white;
        font-size: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        border: 3px solid #1f7ed6;
    }
    .disabled-field input {
        background: #f1f1f1;
        cursor: not-allowed;
    }
</style>


{% if messages %}
<div class="container mt-3">
  {% for msg in messages %}
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ msg }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}
</div>
{% endif %}


<div class="container mt-4">

    <h3 class="text-center mb-4">My Profile</h3>

<form action="{% url 'exams:profile_update' %}" 
      method="POST" 
      enctype="multipart/form-data" 
      class="profile-card">

{% csrf_token %}


<!-- Avatar Preview -->
<div class="text-center mb-4">
    {% if user.profile.photo %}
        <img src="{{ user.profile.photo.url }}" class="profile-avatar shadow">
    {% else %}
        <div class="profile-avatar-fallback shadow">
            {{ user.first_name|first }}{{ user.last_name|first }}
        </div>
    {% endif %}
</div>

<!-- Change Photo Button -->
<div class="text-center mb-3">
    <button type="button" id="pickPhoto" class="btn btn-primary">
        Change Photo
    </button>

    {{ form.photo }}  <!-- hidden input -->
</div>

<script>
document.getElementById("pickPhoto").onclick = function () {
    document.getElementById("photoInput").click();
};
</script>



        <div class="row g-3">

            <div class="col-md-6 disabled-field">
                <label class="form-label">First Name</label>
                <input type="text" value="{{ user.first_name }}" class="form-control" disabled>
            </div>

            <div class="col-md-6 disabled-field">
                <label class="form-label">Last Name</label>
                <input type="text" value="{{ user.last_name }}" class="form-control" disabled>
            </div>

            <div class="col-md-6 disabled-field">
                <label class="form-label">Username</label>
                <input type="text" value="{{ user.username }}" class="form-control" disabled>
            </div>

            <div class="col-md-6 disabled-field">
                <label class="form-label">Email</label>
                <input type="email" value="{{ user.email }}" class="form-control" disabled>
            </div>

<div class="col-md-6">
    <label class="form-label">Phone (Editable)</label>
    {{ form.phone|add_class:"form-control" }}
</div>





            <div class="col-md-6 disabled-field">
                <label class="form-label">Role</label>
                <input type="text" class="form-control" value="{{ user.profile.role|title }}" disabled>
            </div>

            <!-- Region / District / Ward / School -->
            <div class="col-md-6 disabled-field">
                <label class="form-label">Region</label>
                <input type="text" value="{{ user.profile.region }}" class="form-control" disabled>
            </div>

            <div class="col-md-6 disabled-field">
                <label class="form-label">District</label>
                <input type="text" value="{{ user.profile.district }}" class="form-control" disabled>
            </div>

            <div class="col-md-6 disabled-field">
                <label class="form-label">Ward</label>
                <input type="text" value="{{ user.profile.ward }}" class="form-control" disabled>
            </div>

            <div class="col-md-6 disabled-field">
                <label class="form-label">School</label>
                <input type="text" value="{{ user.profile.school }}" class="form-control" disabled>
            </div>

        </div>

        <button class="btn btn-success w-100 mt-4">Save Changes</button>
    </form>
</div>

{% endblock %}