{% extends "base.html" %}

{% block title %}Share Feedback | TrustForge{% endblock %}
{% block meta_description %}Share feedback on your recent service experience and help create verified proof of work.{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="tf-panel tf-panel-centered">
          <div class="tf-eyebrow">Customer feedback</div>
          <h1 class="tf-page-title">How was your experience?</h1>
          <p class="tf-page-subtitle">{{ job.business.name }} completed {{ job.service_type|lower }} in {{ job.city }}, {{ job.state }}. Your feedback helps verify real work and guide follow-up.</p>

          {% if submitted %}
            <div class="tf-empty-state text-center mt-4">
              {% if positive %}
                <h2 class="h3 mb-3">Thank you — this proof is ready to help the next customer.</h2>
                <p class="text-secondary-emphasis mb-4">Your feedback has been saved. The business can now publish this as verified proof of work.</p>
                {% if redirect_url %}
                <a href="{{ redirect_url }}" class="btn tf-btn tf-btn-primary">Continue to Google review</a>
                {% endif %}
              {% else %}
                <h2 class="h3 mb-3">Thanks for the feedback.</h2>
                <p class="text-secondary-emphasis mb-0">This response stays internal so the business can follow up directly and improve the experience.</p>
              {% endif %}
            </div>
          {% else %}
            <form method="post" class="text-start mt-4">
              {% csrf_token %}
              <div class="tf-feedback-grid mb-4">
                {% for radio in form.experience %}
                <label class="tf-feedback-option">
                  {{ radio.tag }}
                  <span>{{ radio.choice_label }}</span>
                </label>
                {% endfor %}
              </div>
              {% if form.experience.errors %}<div class="text-danger small mb-3">{{ form.experience.errors|join:', ' }}</div>{% endif %}
              <div class="mb-3">
                <label class="form-label">Optional testimonial</label>
                {{ form.testimonial }}
                {% if form.testimonial.errors %}<div class="text-danger small mt-1">{{ form.testimonial.errors|join:', ' }}</div>{% endif %}
              </div>
              <button type="submit" class="btn tf-btn tf-btn-primary w-100">Submit feedback</button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}