{% extends 'base.html' %}
{% load i18n %}
{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">Offer Requests</h2>
            <p class="text-muted mb-0">Review incoming customer offers and update each offer status.</p>
        </div>
        <a href="{% url 'shop:manage_dashboard' %}" class="btn btn-outline-secondary">Back to Admin Dashboard</a>
    </div>

    {% if offers %}
        {% for offer in offers %}
            <div id="offer-{{ offer.id }}" class="card mb-4 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">Offer #{{ offer.id }} for {{ offer.product.name }}</h5>
                        <small class="text-muted">Submitted by {{ offer.user.username }} on {{ offer.created_at|date:'d M Y H:i' }}</small>
                    </div>
                    <span class="badge bg-{% if offer.status == 'Pending' %}warning{% elif offer.status == 'Accepted' %}success{% else %}danger{% endif %}">
                        {{ offer.status }}
                    </span>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <p class="mb-1"><strong>Product price</strong></p>
                            <p class="mb-0">{{ offer.product.price|floatformat:2 }}</p>
                        </div>
                        <div class="col-md-4">
                            <p class="mb-1"><strong>Offered price</strong></p>
                            <p class="mb-0">{{ offer.offered_price|floatformat:2 }}</p>
                        </div>
                        <div class="col-md-4">
                            <p class="mb-1"><strong>Customer</strong></p>
                            <p class="mb-0">{{ offer.user.username }} <br><small>{{ offer.user.email }}</small></p>
                        </div>
                    </div>

                    {% if offer.message %}
                        <div class="mb-3">
                            <p class="mb-1"><strong>Customer message</strong></p>
                            <div class="p-3 border rounded bg-light">{{ offer.message|linebreaksbr }}</div>
                        </div>
                    {% endif %}

                    <form method="post" action="{% url 'shop:update_offer_status' offer.id %}">
                        {% csrf_token %}
                        <div class="row gy-3">
                            <div class="col-md-4">
                                <label for="status-{{ offer.id }}" class="form-label">Status</label>
                                <select id="status-{{ offer.id }}" name="status" class="form-select">
                                    <option value="Pending" {% if offer.status == 'Pending' %}selected{% endif %}>Pending</option>
                                    <option value="Accepted" {% if offer.status == 'Accepted' %}selected{% endif %}>Accepted</option>
                                    <option value="Declined" {% if offer.status == 'Declined' %}selected{% endif %}>Declined</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label for="response-{{ offer.id }}" class="form-label">Admin Response</label>
                                <textarea id="response-{{ offer.id }}" name="admin_response" rows="3" class="form-control" placeholder="Optional response to the customer">{{ offer.admin_response }}</textarea>
                            </div>
                        </div>
                        <div class="mt-3 d-flex justify-content-end gap-2">
                            <button type="submit" class="btn btn-primary">Save Status</button>
                        </div>
                    </form>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="alert alert-info">
            There are currently no offer requests.
        </div>
    {% endif %}
</div>
{% endblock %}