{% extends "base.html" %}
{% load django_tables2 %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}تحديث الملف الشخصي{% endblock %}

{% block content %}

    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="card">
            <div class="card-header display-5">
                <h1><strong>تحديث الملف الشخصي</strong></h1>
            </div>
            <div class="card-body row">
                <div class="mt-4 col-md-9 h2">
                    <div class="mb-3 d-flex align-items-center">
                        <p class="m-0 me-2" style="white-space: nowrap;"><strong>اسم الـمستخدم: </strong></p>
                        <input type="text" name="username" id="username" class="form-control" value="{{ user.username }}">
                    </div>
                    <div class="mb-3 d-flex align-items-center">
                        <p class="m-0 me-2" style="white-space: nowrap;"><strong>البريد الالكتروني: </strong></p>
                        <input type="email" name="email" id="email" class="form-control" value="{{ user.email }}">
                    </div>
                    <div class="mb-3 d-flex align-items-center">
                        <p class="m-0 me-2" style="white-space: nowrap;"><strong>الاســــــــــــــــــم: </strong></p>
                        <input type="text" name="first_name" id="first_name" class="form-control" value="{{ user.first_name }}">
                        <p class="m-0 me-2" style="white-space: nowrap;"><strong>الـــلقب: </strong></p>
                        <input type="text" name="last_name" id="last_name" class="form-control" value="{{ user.last_name }}">
                    </div>
                    <div class="mb-3 d-flex align-items-center">
                        <p class="m-0 me-2" style="white-space: nowrap;"><strong>رقـــــم الـــهاتف: </strong></p>
                        <input type="text" name="phone" id="phone" class="form-control" value="{{ user.phone }}">
                    </div>
                    <div class="mb-3 d-flex align-items-center">
                        <p class="m-0 me-2" style="white-space: nowrap;"><strong>جهـــــة الـــعمل: </strong></p>
                        <input type="text" name="occupation" id="occupation" class="form-control" value="{{ user.occupation }}">
                    </div>
                </div>
                <div class="col-md-3 mt-4 d-block mx-auto">
                    <img id="profile_image_preview" 
                    src="{% static 'img/default_profile.webp' %}" 
                    alt="Profile Image" class="img-thumbnail" width="250">
                </div>
            </div>
        </div>
        <div class="mt-4">
            <button type="submit" class="btn btn-success" title="حفظ التغييرات">
                <i class="bi bi-check2-square text-light me-1 h4"></i> حفظ التغييرات
            </button>
            <a href="{% url 'user_profile' %}" class="btn btn-secondary" title="إلغـــاء">
                <i class="bi bi-x-circle text-light me-1 h4"></i> إلغـــاء
            </a>
        </div>
    </form>

    <!-- Change Password Modal -->
    <div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="resetPasswordModalLabel">تغيير كلمة المرور</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="post">
                        {% csrf_token %}
                        {{ password_form.as_p }}
                        <button type="submit" name="change_password" class="btn btn-success">تغيير</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}