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

{% block content %}
  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
        <div>
          <h2 class="mb-1 fw-bold">Onboarding partenaire</h2>
          <p class="text-muted mb-0">
            Préparez les documents et le message qui seront envoyés aux partenaires après signature de la convention.
          </p>
        </div>
        
      </div>

      <div class="row g-4">
        <div class="col-12 col-xl-5">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="fw-bold mb-1">Paramétrage</h5>
              <p class="text-muted mb-4">Activez l’onboarding et personnalisez le message d’accueil envoyé avec les documents.</p>

              <form
                method="post"
                action="{{ path('projet_onboarding_settings_update', { id: projet.idtoken }) }}"
                class="needs-validation"
                novalidate
              >
                <input type="hidden" name="_token" value="{{ csrf_token('project_onboarding_settings_' ~ projet.idtoken) }}">

                {% if settingsErrors.global is defined %}
                  <div class="alert alert-danger">{{ settingsErrors.global }}</div>
                {% endif %}

                <div class="mb-4 p-3 rounded-3 border d-flex align-items-center justify-content-between gap-3">
                  <div>
                    <div class="fw-semibold">Activer l’onboarding partenaire</div>
                    <div class="text-muted small">Quand l’onboarding est actif, les documents deviennent disponibles pour le futur envoi post-signature.</div>
                  </div>
                  <div class="form-check form-switch m-0">
                    <input
                      type="checkbox"
                      class="form-check-input"
                      id="project-onboarding-enabled"
                      name="is_enabled"
                      value="1"
                      {{ onboarding.isEnabled ? 'checked' : '' }}
                    >
                  </div>
                </div>

                <div class="mb-3">
                  <label for="project-onboarding-welcome-message" class="form-label fw-semibold">Message d’accueil</label>
                  <textarea
                    id="project-onboarding-welcome-message"
                    name="welcome_message"
                    rows="6"
                    class="form-control{{ settingsErrors.welcome_message is defined ? ' is-invalid' : '' }}"
                    placeholder="Expliquez aux partenaires ce qu'ils vont recevoir après signature."
                  >{{ onboarding.welcomeMessage ?? '' }}</textarea>
                  <div class="form-text">Ce message pourra être injecté dans l’email envoyé au partenaire.</div>
                  {% if settingsErrors.welcome_message is defined %}
                    <div class="invalid-feedback">{{ settingsErrors.welcome_message }}</div>
                  {% endif %}
                </div>

                <div class="text-end">
                  <button type="submit" class="btn btn-primary">Enregistrer les paramètres</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <div class="col-12 col-xl-7">
          <turbo-frame id="onboarding-documents-frame" src="{{ path('projet_onboarding_documents_frame', { id: projet.idtoken }) }}">
            Chargement des documents onboarding...
          </turbo-frame>
        </div>

        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
                <div>
                  <h5 class="fw-bold mb-1">Suivi partenaires</h5>
                  <p class="text-muted mb-0">Historique des onboardings rattachés aux conventions signées du projet.</p>
                </div>
                <span class="badge bg-light text-dark border">{{ dispatches|length }} suivi{{ dispatches|length > 1 ? 's' : '' }}</span>
              </div>

              {% if dispatches is empty %}
                <div class="border rounded-4 p-4 text-center bg-light-subtle text-muted">
                  Aucun envoi onboarding n’a encore été généré. Un suivi sera créé automatiquement dès qu’une convention liée au projet sera signée.
                </div>
              {% else %}
                <div class="table-responsive">
                  <table class="table align-middle mb-0">
                    <thead>
                      <tr>
                        <th>Partenaire</th>
                        <th>Convention</th>
                        <th>Statut</th>
                        <th>Envoyé le</th>
                        <th>Ouvert le</th>
                        <th>Téléchargé le</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for dispatch in dispatches %}
                        <tr>
                          <td>
                            <div class="fw-semibold">{{ dispatch.partner.nom }}</div>
                            <div class="text-muted small">{{ dispatch.partner.contact ? dispatch.partner.contact.email : dispatch.partner.email }}</div>
                          </td>
                          <td>
                            <div class="fw-semibold">{{ dispatch.convention.numero ?: 'Convention' }}</div>
                            <div class="text-muted small">{{ dispatch.convention.idtoken }}</div>
                          </td>
                          <td>
                            <span class="badge {{ dispatch.status.badgeClass }}">{{ dispatch.status.label }}</span>
                          </td>
                          <td>{{ dispatch.sentAt ? dispatch.sentAt|date('d/m/Y H:i') : '-' }}</td>
                          <td>{{ dispatch.openedAt ? dispatch.openedAt|date('d/m/Y H:i') : '-' }}</td>
                          <td>{{ dispatch.downloadedAt ? dispatch.downloadedAt|date('d/m/Y H:i') : '-' }}</td>
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}