{% extends 'website/home/base.html' %}
{% load static %}
{% block content %}

<!-- This template uses Bootstrap 5 for styling. -->
<div class="bg-white">
    <div class="container py-2 py-lg-3 bg-light mb-4">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-lg-3 mb-4 mb-lg-0">
                {% include 'website/customer/customer_dashboard_sidebar.html' %}
            </div>

            <div class="col-lg-9">
                <div class="card shadow-sm border-0 rounded-3">
                    <div class="card-body p-4 p-md-5">

                        <!-- Header -->
                        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center mb-4 pb-3 border-bottom">
                            <div>
                                <h2 class="h4 fw-bold text-dark">Edit Profile</h2>
                            </div>
                            <a href="/customer/dashboard/" class="btn btn-secondary mt-3 mt-sm-0">
                                Back to Profile
                            </a>
                        </div>

                        <form method="POST" enctype="multipart/form-data">
                            {% csrf_token %}

                            <!-- Profile Picture -->
                            <div class="d-flex align-items-center mb-5">
                                <img class="rounded-circle border p-1" style="width: 90px; height: 90px; object-fit: cover;" {% if customer.profile_images %} src="{{customer.profile_images.url}}" {% else %} src="" {% endif %} alt="{{ customer.customer_name }}">
                                <div class="ms-3">
                                    <label class="btn btn-outline-primary btn-sm mt-2">
                                        Change Avatar
                                        <input type="file" name="photo" hidden>
                                    </label>
                                </div>
                            </div>

                            <div class="row g-4">

                                <!-- Full Name -->
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">Full Name</label>
                                    <input type="text" name="customer_name" class="form-control" value="{{ customer.customer_name }}">
                                </div>

                                <!-- Username (read-only) -->
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">Username</label>
                                    <input type="text" class="form-control" value="{{ customer.username }}" readonly>
                                </div>

                                <!-- Email -->
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">Email Address</label>
                                    <input type="email" name="email" class="form-control" value="{{ customer.email }}">
                                </div>

                                <!-- Mobile -->
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">Mobile Number</label>
                                    <input type="text" name="mobile" class="form-control" value="{{ customer.mobile }}">
                                </div>

                                <!-- Date of Birth -->
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">Date of Birth</label>
                                    <input type="date" name="date_of_birth" class="form-control" value="{{ customer.date_of_birth|date:'Y-m-d' }}">
                                </div>

                                <!-- Gender -->
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">Gender</label>
                                    <select name="gender" class="form-select">
                                        <option value="">Select Gender</option>
                                        <option value="Male" {% if customer.gender == "Male" %}selected{% endif %}>Male</option>
                                        <option value="Female" {% if customer.gender == "Female" %}selected{% endif %}>Female</option>
                                        <option value="Other" {% if customer.gender == "Other" %}selected{% endif %}>Other</option>
                                    </select>
                                </div>

                                <!-- Address -->
                                <div class="col-12">
                                    <label class="form-label small text-muted">Address</label>
                                    <textarea name="address" class="form-control" rows="3">{{ customer.address }}</textarea>
                                </div>

                                <!-- District -->
                                <div class="col-md-6">
                                    <label class="form-label small text-muted">District</label>
                                    <select name="district" class="form-select">
                                        <option value="">Select District</option>
                                        {% for district in districts %}
                                            <option value="{{ district.id }}" {% if customer.district_id == district.id %}selected{% endif %}>{{ district.district_name_english }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                  
                            </div>

                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">Save Changes</button>
                                <a href="/customer/dashboard/" class="btn btn-secondary ms-2">Cancel</a>
                            </div>

                        </form>

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

{% endblock %}