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

{% block styles %}
  {{ parent() }}

  <style>
    .card {
      margin-bottom:0;
      border-radius: 0px;
    }
   
  </style>
{% endblock %}

{% block content %}
  {% set pageStyle = { bgColor: '#ffffff', bgImageUrl: '' } %}
  {% if presentation %}
    {% for b in presentation.projetBlocks %}
      {% if b.type == 'page_style' %}
        {% set pageStyle = b.data %}
      {% endif %}
    {% endfor %}
  {% endif %}
  {% set heroImage = presentation and presentation.background ? asset('uploads/projets/presentations/' ~ presentation.background) : '' %}

  <div class="bg-light-gray" style="height: 520px; background-size:cover; background-position:center; {% if heroImage %}background-image: url('{{ heroImage }}');{% endif %}">
  </div>

  <div class="container bg-white" style="
    margin-top: -180px; padding-bottom: 60px; position: relative; z-index: 2;
">
    <div class="row p-4">
      <div class="col-12">
        <div class="text-center">
          <div class="text-primary fw-semibold mb-2">Proposition de partenariat</div>
          <h2 class="fw-bolder mb-3">{{ projet ? projet.titre : 'Projet' }}</h2>
        </div>
      </div>
      <div class="col-12">
        <div class="card shadow-sm border-0">
          <div class="card-body">
            <div class="row g-3 align-items-center">
              <div class="col-md-8">
                <div class="row g-3">
                  <div class="col-6">
                    <div class="text-muted small">Proposé par</div>
                    <div class="fw-semibold">
                      {{ proposition.createdBy ? proposition.createdBy.prenom ~ ' ' ~ proposition.createdBy.nom : '-' }}
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="text-muted small">Statut</div>
                    <span class="badge bg-warning-subtle text-warning">{{ proposition.statut }}</span>
                  </div>
                  <div class="col-6">
                    <div class="text-muted small">Entité</div>
                    <div class="fw-semibold">
                      {{ proposition.prospection and proposition.prospection.mecene ? proposition.prospection.mecene.nom : '-' }}
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="text-muted small">Proposition</div>
                    <div class="fw-semibold">#{{ proposition.idtoken|slice(0, 6) }}</div>
                  </div>
                </div>
              </div>
              <div class="col-md-4 text-md-end">
                <div class="d-flex flex-column flex-md-row gap-2 justify-content-md-end">
                  <form method="post" action="{{ path('public_proposition_decline', { token: proposition.publicToken }) }}">
                    <button type="submit" class="btn btn-outline-secondary w-100 w-md-auto">
                      Je décline la proposition
                    </button>
                  </form>
                  <form method="post" action="{{ path('public_proposition_accept', { token: proposition.publicToken }) }}">
                    <button type="submit" class="btn btn-primary w-100 w-md-auto">
                      J'accepte la proposition de partenariat
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid overflow-hidden" style="background-color: {{ pageStyle.bgColor|default('#ffffff') }}; {% if pageStyle.bgImageUrl|default('') %}background-image: url('{{ pageStyle.bgImageUrl }}'); background-size:cover; background-position:center;{% endif %} margin-top: -200px; padding: 200px 0px 0px 0px;z-index: 1;">
    <div class="d-flex flex-column">
      {% if presentation %}
        {% for block in presentation.projetBlocks|sort((a,b)=> a.position <=> b.position) %}
          {% if block.type == 'formule' %}
            {# skip here, we'll show the proposition formula at the end #}
          {% elseif block.type == 'text' %}
            {% set titleColor = block.data.titleColor|default('#111827') %}
            {% set textColor = block.data.textColor|default('#374151') %}
            {% set backgroundColor = block.data.backgroundColor|default('#ffffff') %}
            <section class="p-4" style="background-color: {{ backgroundColor }};">
              <div class="container card-body" style="color: {{ textColor }};">
                {% if block.data.titre ?? '' %}<h2 style="color: {{ titleColor }};">{{ block.data.titre }}</h2>{% endif %}
                {{ (block.data.text ?? '')|raw }}
              </div>
            </section>
          {% elseif block.type == 'chiffres' %}
            {% set titleColor = block.data.titleColor|default('#ffffff') %}
            {% set textColor = block.data.textColor|default('#ffffff') %}
            {% set backgroundColor = block.data.backgroundColor|default('#111111') %}
            <section class="card p-4" style="background-color: {{ backgroundColor }}; color: {{ textColor }};">
              
              {% set figures = block.data.figures ?? [] %}
              {% if figures is not empty %}
                <div class="container card-body">
                  <h2 class="fs-7 fw-bolder mb-0" style="color: {{ titleColor }};">{{ block.data.titre ?? '' }}</h2>
                  <span class="fs-4" style="color: {{ textColor }};">{{ (block.data.text ?? '')|raw }}</span>
                  <div class="row g-3 row-cols-1 row-cols-sm-2 row-cols-md-4 text-center">
                    {% for fig in figures %}
                      <div class="col">
                        <div class="p-3 h-100">
                          <div class="fs-7 fw-bold" style="color: {{ textColor }};">{{ fig.value ?? '' }}</div>
                          <div class="fs-5" style="color: {{ textColor }};">{{ fig.label ?? '' }}</div>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              {% endif %}
            </section>
          {% elseif block.type == 'image' %}
            {% set imageUrl = block.data.imageUrl ?? '' %}
            {% if imageUrl %}
              <figure class="card">
                <div class="container card-body">
                  <img src="{{ imageUrl }}" alt="Image du projet" class="img-fluid rounded">
                </div>
              </figure>
            {% endif %}
          {% elseif block.type == 'description' %}
            {% set textColor = block.data.textColor|default('#374151') %}
            {% set backgroundColor = block.data.backgroundColor|default('#ffffff') %}
            {% if block.data.imageUrl is defined %}
              {% if block.data.imageUrl == '' %}
                {% set imageUrl = block.data.url %}
              {% else %}
                {% set imageUrl = block.data.imageUrl %}
              {% endif %}
            {% endif %}
            <section class="p-4" style="background-color: {{ backgroundColor }};">
              <div class="container card-body">
                <div class="row g-4 align-items-center">
                  {% if imageUrl %}
                    <div class="col-md-5">
                      <img src="{{ imageUrl }}" alt="Illustration projet" class="img-fluid rounded">
                    </div>
                  {% endif %}
                  <div class="col-md-7">
                    <div class="content">
                      <span class="fs-4" style="color: {{ textColor }};">{{ (block.data.text ?? '')|raw }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          {% elseif block.type == 'partenaire' %}
            {% include '@Projet/projet/presentation/preview/block/partenaire.html.twig' %}
          {% endif %}
        {% endfor %}
      {% endif %}

      <section class="card shadow-sm">
        <div class="container card-body">
          <h2 class="h4 mb-3">Formule proposée</h2>
          {% if formule %}
            {% include '@Projet/projet/presentation/preview/block/formule_proposition.html.twig' %}
            <div class="text-end mt-3">
              <div class="d-flex flex-column flex-md-row gap-2 justify-content-md-end">
                <form method="post" action="{{ path('public_proposition_decline', { token: proposition.publicToken }) }}">
                  <button type="submit" class="btn btn-outline-secondary">
                    Je décline la proposition
                  </button>
                </form>
                <form method="post" action="{{ path('public_proposition_accept', { token: proposition.publicToken }) }}">
                  <button type="submit" class="btn btn-primary">
                    J'accepte la proposition de partenariat
                  </button>
                </form>
              </div>
            </div>
          {% else %}
            <div class="text-muted">Formule indisponible.</div>
          {% endif %}
        </div>
      </section>
    </div>
  </div>
{% endblock %}