{% extends 'base.html' %}
{% block title %}User Detail{% endblock %}

{% block content %}

<div class="container py-5">

    <!-- Back Button -->
    <div class="mb-4">
        <a href="{% url 'user_list' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>
            Back
        </a>
    </div>

    <!-- Header -->
    <div class="mb-4">
        <h3 class="fw-bold text-success mb-1">
            {{ user_obj.get_full_name }}
        </h3>
        <p class="text-muted mb-0">
            Registration Date: {{ user_obj.date_registered|date:"M d, Y" }}
        </p>
    </div>

    <form method="post">
        {% csrf_token %}

        <div class="row g-4">

            <!-- LEFT COLUMN - USER DETAILS -->
            <div class="col-lg-7">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">

                        <h5 class="fw-bold mb-4">User Information</h5>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">First Name</label>
                                <input type="text" name="first_name"
                                       value="{{ user_obj.first_name }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Last Name</label>
                                <input type="text" name="last_name"
                                       value="{{ user_obj.last_name }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Email</label>
                                <input type="email" name="email"
                                       value="{{ user_obj.email }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Phone</label>
                                <input type="text" name="phone_number"
                                       value="{{ user_obj.phone_number }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>County</label>
                                <input type="text" name="county"
                                       value="{{ user_obj.county }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Constituency</label>
                                <input type="text" name="constituency"
                                       value="{{ user_obj.constituency }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Institution</label>
                                <input type="text" name="institution"
                                       value="{{ user_obj.institution }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Course</label>
                                <input type="text" name="course"
                                       value="{{ user_obj.course }}"
                                       class="form-control">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Registration Number</label>
                                <input type="text" name="registration_number"
                                       value="{{ user_obj.registration_number }}"
                                       class="form-control">
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- RIGHT COLUMN - REVIEW PANEL -->
            <div class="col-lg-5">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">

                        <h5 class="fw-bold mb-4">Verification Panel</h5>

                        <!-- Student ID -->
                        {% if user_obj.student_id %}
                        <div class="text-center mb-4">
                            <h6 class="fw-semibold mb-3">Student ID</h6>

                            <img src="{{ user_obj.student_id.url }}"
                                 class="img-fluid rounded shadow-sm mb-3"
                                 style="max-height: 250px; object-fit: contain;">

                            <div>
                                <a href="{{ user_obj.student_id.url }}"
                                   target="_blank"
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-external-link-alt me-1"></i>
                                    View Full Image
                                </a>
                            </div>
                        </div>
                        {% else %}
                        <div class="alert alert-warning text-center">
                            No student ID uploaded.
                        </div>
                        {% endif %}

                        <hr class="my-4">

                        <!-- Approval Section -->
                        <div class="p-4 rounded-3 text-center
                            {% if user_obj.is_approved %}
                                bg-success-subtle border border-success
                            {% else %}
                                bg-warning-subtle border border-warning
                            {% endif %}">

                            <div class="form-check form-switch d-flex justify-content-center align-items-center mb-3">

                                <input class="form-check-input"
                                       type="checkbox"
                                       role="switch"
                                       name="is_approved"
                                       id="approveSwitch"
                                       style="width: 65px; height: 32px;"
                                       {% if user_obj.is_approved %}checked{% endif %}>

                                <label class="form-check-label ms-3 fw-bold fs-5"
                                       for="approveSwitch">
                                    {% if user_obj.is_approved %}
                                        Approved
                                    {% else %}
                                        Pending Approval
                                    {% endif %}
                                </label>

                            </div>

                            <button type="submit"
                                    class="btn btn-success btn-lg w-100">
                                Save Changes
                            </button>

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </form>

    <div class="text-center mt-4">
        <a href="{% url 'delete_user' user_obj.id %}"
        class="btn btn-outline-danger">
            <i class="fas fa-trash-alt me-1"></i>
            Delete User
        </a>
    </div>


</div>

{% endblock %}