{% extends '@App/partials/base_light.html.twig' %}

{% block title %}Offre déclinée{% endblock %}

{% block styles %}
  {{ parent() }}
  <style>
    .partner-decline-page {
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 28%),
        linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
      color: #1f2937;
    }
    .partner-decline-header,
    .partner-decline-footer {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
    }
    .partner-decline-header { border-bottom: 1px solid #e5e7eb; }
    .partner-decline-footer { border-top: 1px solid #e5e7eb; }
    .partner-decline-brand {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: #1cc28a;
      color: #fff;
    }
    .partner-decline-card {
      background: #fff;
      border: 1px solid #e8edf3;
      border-radius: 28px;
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
      overflow: hidden;
    }
    .partner-decline-icon {
      width: 82px;
      height: 82px;
      border-radius: 999px;
      background: #f1f3f6;
      color: #9ca3af;
    }
    .partner-decline-panel,
    .partner-decline-contact {
      border-radius: 20px;
      padding: 1.5rem;
    }
    .partner-decline-panel {
      background: #f7f9fc;
      border: 1px solid #eef2f7;
    }
    .partner-decline-contact {
      background: linear-gradient(180deg, #d9f9e8 0%, #cbf4df 100%);
      border: 1px solid #bcebcf;
    }
    .partner-decline-summary {
      background: #f8fafc;
      border-top: 1px solid #edf2f7;
    }
    .partner-decline-help a {
      color: #16a574;
      text-decoration: none;
      font-weight: 500;
    }
    .partner-decline-help a:hover { text-decoration: underline; }
    .partner-decline-option {
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      padding: .35rem 0;
      color: #6b7280;
      cursor: pointer;
    }
    .partner-decline-option:hover { color: #1f2937; }
    .partner-decline-option input { margin-top: .2rem; }
    .partner-decline-cta {
      min-height: 62px;
      border-radius: 16px;
      font-weight: 700;
    }
    .partner-decline-cta.btn-success {
      background: #18b981;
      border-color: #18b981;
    }
    .partner-decline-cta.btn-success:hover {
      background: #12a271;
      border-color: #12a271;
    }
    .partner-decline-cta.btn-dark {
      background: #111827;
      border-color: #111827;
    }
  </style>
{% endblock %}

{% block content %}
  {% set mecene = proposition.prospection ? proposition.prospection.mecene : null %}
  {% set formule = proposition.formule %}
  {% set initials = '' %}
  {% set displayName = mecene and mecene.contact ? (mecene.contact.prenom ~ ' ' ~ mecene.contact.nom)|trim : (mecene ? mecene.nom : 'Partenaire') %}
  {% for part in displayName|split(' ')|slice(0, 2) %}
    {% if part %}
      {% set initials = initials ~ part|slice(0, 1)|upper %}
    {% endif %}
  {% endfor %}

  <div class="partner-decline-page d-flex flex-column">

    <main class="flex-grow-1 d-flex align-items-center py-5">
      <div class="container">
        <div class="mx-auto" style="max-width: 780px;">
          <div class="partner-decline-card">
            <div class="p-4 p-md-5 text-center">
              <div class="partner-decline-icon d-inline-flex align-items-center justify-content-center mb-4">
                <i class="ti ti-x fs-9"></i>
              </div>

              <h1 class="fw-bold mb-3" style="font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08;">
                Offre déclinée
              </h1>

              <p class="text-secondary fs-3 mx-auto mb-5" style="max-width: 620px; line-height: 1.5;">
                Nous prenons note de votre décision. Nous vous remercions d'avoir pris le temps d'étudier cette opportunité de partenariat.
              </p>

              <div class="partner-decline-panel mb-4 text-start">
                <h3 class="fw-bold text-center mb-3">
                  <i class="ti ti-message-dots text-success me-2"></i>Aidez-nous à nous améliorer
                </h3>
                <p class="text-secondary text-center mb-4">
                  Si vous le souhaitez, partagez-nous la raison de votre refus (optionnel)
                </p>

                {% if feedbackSaved %}
                  <div class="alert alert-success rounded-4">Votre retour a bien été enregistré.</div>
                {% endif %}

                <form method="post" action="{{ path('public_proposition_declined_feedback', { token: proposition.publicToken }) }}">
                  <div class="mb-3">
                    {% for reason in declineReasons %}
                      <label class="partner-decline-option">
                        <input type="radio" name="decline_reason" value="{{ reason }}" {% if proposition.declineReason == reason %}checked{% endif %}>
                        <span>{{ reason }}</span>
                      </label>
                    {% endfor %}
                  </div>

                  <textarea
                    name="decline_comment"
                    class="form-control rounded-4 border mb-3"
                    rows="4"
                    placeholder="Commentaire additionnel (optionnel)"
                  >{{ proposition.declineComment|default('') }}</textarea>

                  <button type="submit" class="partner-decline-cta btn btn-success w-100">
                    Envoyer le feedback
                  </button>
                </form>
              </div>

              {#<div class="partner-decline-contact mb-4">
                <h3 class="fw-bold mb-3">
                  <i class="ti ti-bell text-success me-2"></i>Restez informé
                </h3>
                <p class="text-secondary mb-4">
                  Souhaitez-vous être notifié de futures opportunités de partenariat mieux adaptées à vos critères ?
                </p>
                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                  <button type="button" class="btn btn-outline-success rounded-4 px-4 py-3 fw-semibold">
                    <i class="ti ti-check me-2"></i>Oui, me tenir informé
                  </button>
                  <button type="button" class="btn btn-outline-secondary rounded-4 px-4 py-3 fw-semibold">
                    Non merci
                  </button>
                </div>
              </div>

              <div class="row g-3">
                <div class="col-md-6">
                  <a href="{{ path('public_proposition_view', { token: proposition.publicToken }) }}" class="partner-decline-cta btn btn-dark w-100 d-inline-flex align-items-center justify-content-center gap-2">
                    <i class="ti ti-file-text"></i>
                    Retour à l'offre
                  </a>
                </div>
                <div class="col-md-6">
                  <a href="{{ path('public_proposition_view', { token: proposition.publicToken }) }}" target="_blank" class="partner-decline-cta btn btn-outline-secondary w-100 d-inline-flex align-items-center justify-content-center gap-2">
                    <i class="ti ti-search"></i>
                    Voir l'offre proposée
                  </a>
                </div>
              </div>
            </div>#}

            <div class="partner-decline-summary px-4 px-md-5 py-4">
              <div class="row g-3">
                <div class="col-md-6">
                  <div class="fw-semibold">Projet concerné</div>
                  <div class="text-secondary">{{ projet ? projet.titre : 'Projet' }}</div>
                </div>
                <div class="col-md-6 text-md-end">
                  <div class="fw-semibold">Type de partenariat proposé</div>
                  <div class="text-secondary fw-semibold">
                    {% if formule %}
                      {{ formule.type|capitalize }}{% if formule.nom %} {{ formule.nom }}{% endif %}
                    {% else %}
                      Partenariat
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>

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

  </div>
{% endblock %}