{% extends 'dating_app/base_dating.html' %}

{% block title %}Edit Dating Profile{% endblock %}

{% block content %}
<style>
    .additional-photo-upload-box {
        border: 1px solid #e9ecef;
    }

    .additional-photo-upload-box .form-control,
    .additional-photo-upload-box .form-check-input {
        border-radius: 12px;
    }

    .additional-photo-upload-box input[type="file"] {
        padding: 10px 12px;
        border-radius: 14px;
        background: #fff;
    }

    .additional-photo-upload-box input[type="file"]::file-selector-button {
        border: none;
        background: linear-gradient(135deg, #0d6efd, #3d8bfd);
        color: #fff;
        padding: 10px 16px;
        margin-right: 12px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
    }

    .additional-photo-upload-box input[type="file"]::file-selector-button:hover {
        background: linear-gradient(135deg, #0b5ed7, #2f74ea);
    }
</style>
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow-sm border-0 rounded-4">
                    <div class="card-body p-4 p-lg-5">

                        <h2 class="mb-4">Edit Profile</h2>

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

                            <div class="row g-3">
                                {% for field in form %}
                                    <div class="{% if field.name == 'about_me' or field.name == 'hobbies' or field.name == 'expectations' %}col-12{% else %}col-md-6{% endif %}">
                                        <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        {{ field }}

                                        {% if field.help_text %}
                                            <small class="text-muted d-block mt-1">{{ field.help_text }}</small>
                                        {% endif %}

                                        {% for error in field.errors %}
                                            <div class="text-danger small mt-1">{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endfor %}
                            </div>

                            <div class="mt-4 d-flex gap-2 flex-wrap">
                                <button type="submit" class="btn btn-primary">Save Changes</button>
                                <a href="{% url 'dating_app:dating_partner_profile_page' %}" class="btn btn-outline-secondary">Cancel</a>
                            </div>

                            {% if form.non_field_errors %}
                                <div class="alert alert-danger mt-3 mb-0">
                                    {% for error in form.non_field_errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </form>

                        <hr class="my-5">

                        <h4 class="mb-3">Additional Photos</h4>

                        <div class="row g-4">
                            <div class="col-lg-5">
                                <div class="border rounded-4 p-3 bg-light additional-photo-upload-box h-100">
                                    <h6 class="mb-3">Upload New Photo</h6>

                                    <form method="post" action="{% url 'dating_app:upload_dating_partner_additional_photo' %}" enctype="multipart/form-data">
                                        {% csrf_token %}

                                        <div class="mb-3">
                                            <label class="form-label" for="{{ photo_form.image.id_for_label }}">Select Image</label>
                                            {{ photo_form.image }}
                                            {% if photo_form.image.help_text %}
                                                <small class="text-muted d-block mt-1">{{ photo_form.image.help_text }}</small>
                                            {% endif %}
                                            {% for error in photo_form.image.errors %}
                                                <div class="text-danger small mt-1">{{ error }}</div>
                                            {% endfor %}
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label" for="{{ photo_form.caption.id_for_label }}">Caption</label>
                                            {{ photo_form.caption }}
                                            {% if photo_form.caption.help_text %}
                                                <small class="text-muted d-block mt-1">{{ photo_form.caption.help_text }}</small>
                                            {% endif %}
                                            {% for error in photo_form.caption.errors %}
                                                <div class="text-danger small mt-1">{{ error }}</div>
                                            {% endfor %}
                                        </div>

                                        <div class="form-check mb-3">
                                            {{ photo_form.is_public }}
                                            <label class="form-check-label" for="{{ photo_form.is_public.id_for_label }}">
                                                Show this photo publicly after approval
                                            </label>
                                            {% for error in photo_form.is_public.errors %}
                                                <div class="text-danger small mt-1">{{ error }}</div>
                                            {% endfor %}
                                        </div>

                                        {% if photo_form.non_field_errors %}
                                            <div class="alert alert-danger py-2">
                                                {% for error in photo_form.non_field_errors %}
                                                    <div>{{ error }}</div>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        <button type="submit" class="btn btn-outline-primary w-100">
                                            Upload Additional Photo
                                        </button>

                                        <small class="text-muted d-block mt-2">
                                            Maximum 5 additional photos allowed. Newly uploaded photos will be reviewed first.
                                        </small>
                                    </form>
                                </div>
                            </div>

                            <div class="col-lg-7">
                                <div class="row g-3">
                                    {% for photo in additional_photos %}
                                        <div class="col-6 col-md-4">
                                            <div class="card h-100 shadow-sm border-0 rounded-4">
                                                <img
                                                    src="{{ photo.image.url }}"
                                                    alt="{{ photo.caption|default:'Additional Photo' }}"
                                                    class="card-img-top rounded-top-4"
                                                    style="height: 180px; object-fit: cover;"
                                                >

                                                <div class="card-body p-2 text-center">
                                                    {% if photo.caption %}
                                                        <small class="text-muted d-block mb-1">{{ photo.caption }}</small>
                                                    {% endif %}

                                                    <small class="d-block mt-1">
                                                        <span class="badge {% if photo.status == 'approved' %}bg-success{% elif photo.status == 'pending' %}bg-warning text-dark{% else %}bg-danger{% endif %}">
                                                            {{ photo.get_status_display }}
                                                        </span>
                                                    </small>

                                                    <small class="text-muted d-block mt-1">
                                                        {% if photo.is_public %}Public{% else %}Private{% endif %}
                                                    </small>

                                                    <form method="post" action="{% url 'dating_app:delete_dating_partner_additional_photo' photo.id %}" class="mt-2">
                                                        {% csrf_token %}
                                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                                            Delete
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    {% empty %}
                                        <div class="col-12">
                                            <div class="alert alert-light border rounded-4 mb-0">
                                                No additional photos uploaded yet.
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}