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

{% block content %}
<div class="body-wrapper">
  <div class="container-fluid">
    {% set sollicitation = cible.sollicitation %}
    {% set overdue = sollicitation.deadlineAt and sollicitation.deadlineAt < now and cible.statut not in ['soumis', 'valide'] %}
    {% set delayDays = overdue and sollicitation.deadlineAt ? (((now|date('U') - sollicitation.deadlineAt|date('U')) / 86400)|round(0, 'ceil')) : 0 %}

    <a class="small text-muted d-inline-flex align-items-center mb-2" href="{{ path('portail_sollicitation_index') }}">
      <i class="ti ti-arrow-left me-1"></i>Retour à mes demandes
    </a>

    <div class="d-flex align-items-center gap-2 flex-wrap mb-1">
      <h2 class="mb-0">{{ sollicitation.titre }}</h2>
      <span class="badge {{ overdue ? 'bg-warning-subtle text-warning' : 'bg-primary-subtle text-primary' }}">
        {{ overdue ? 'En retard' : (cible.statut|replace({'_':' '})|title) }}
      </span>
    </div>

    <div class="text-muted small d-flex flex-wrap gap-3 mb-3">
      {% include '@App/partials/components/badge_user_simple.html.twig' with {user: sollicitation.createdBy, taille: 20, police: 2, bold: 'fw-normal' } %}
      <span><i class="ti ti-folder me-1"></i>{{ sollicitation.projet.titre }}</span>
      <span class="{{ overdue ? 'text-danger fw-semibold' : '' }}"><i class="ti ti-calendar-event me-1"></i>{{ sollicitation.deadlineAt ? 'Échéance ' ~ sollicitation.deadlineAt|date('d/m/Y') : 'Sans échéance' }}{% if overdue %} ({{ delayDays }} jour(s) de retard){% endif %}</span>
    </div>

    <div class="row g-3">
      <div class="col-xl-8">
        <div class="card border rounded-4 mb-3">
          <div class="card-body p-4">
            <h5 class="mb-3"><i class="ti ti-info-circle text-primary me-1"></i>Instructions</h5>
            <div class="mb-3" style="white-space: pre-line;">{{ sollicitation.instructions ?: 'Aucune instruction fournie.' }}</div>

            {% if requirements is not empty %}
              <h6 class="mb-2">Points importants</h6>
              <ul class="mb-0">
                {% for req in requirements %}
                  <li>{{ req }}</li>
                {% endfor %}
              </ul>
            {% endif %}
          </div>
        </div>

        <div class="card border rounded-4 mb-3">
          <div class="card-body p-4">
            <h5 class="mb-3"><i class="ti ti-download text-primary me-1"></i>Fichiers modèles</h5>
            <div class="d-grid gap-2">
              {% set hasTemplate = false %}
              {% for piece in sollicitation.piecesJointes %}
                {% if not piece.deleted %}
                  {% set hasTemplate = true %}
                  <div class="border rounded-3 p-3 d-flex justify-content-between align-items-center">
                    <div>
                      <div class="fw-semibold">{{ piece.nomOriginal }}</div>
                      <small class="text-muted">{{ piece.size ? (piece.size / 1024 / 1024)|number_format(2, ',', ' ') ~ ' MB' : '' }}</small>
                    </div>
                    <a class="btn btn-sm btn-outline-primary" href="{{ path('portail_sollicitation_template_download', { id: cible.idtoken, pieceId: piece.idtoken }) }}">
                      <i class="ti ti-download me-1"></i>Télécharger
                    </a>
                  </div>
                {% endif %}
              {% endfor %}
              {% if not hasTemplate %}
                <div class="text-muted">Aucun fichier modèle.</div>
              {% endif %}
            </div>
          </div>
        </div>

        <div class="card border rounded-4">
          <div class="card-body p-4">
            <h5 class="mb-3"><i class="ti ti-upload text-primary me-1"></i>Déposer vos fichiers</h5>
            <form method="post"
                  enctype="multipart/form-data"
                  action="{{ path('portail_sollicitation_submit', { id: cible.idtoken }) }}"
                  data-controller="portail-sollicitation-upload"
                  data-portail-sollicitation-upload-upload-url-value="{{ path('portail_sollicitation_upload', { id: cible.idtoken }) }}">
              <div class="mb-3">
                <label class="form-label">Documents</label>
                <div class="border border-2 border-dashed rounded-4 p-5 text-center"
                     data-portail-sollicitation-upload-target="dropzone"
                     data-action="click->portail-sollicitation-upload#browse dragover->portail-sollicitation-upload#dragOver dragleave->portail-sollicitation-upload#dragLeave drop->portail-sollicitation-upload#drop">
                  <i class="ti ti-cloud-upload fs-3 text-muted mb-2"></i>
                  <div class="mb-1 fw-semibold">Glissez-déposez les fichiers ici</div>
                  <div class="text-muted small mb-2">ou cliquez pour parcourir</div>
                  <button type="button" class="btn btn-primary btn-sm" data-action="click->portail-sollicitation-upload#browse">Parcourir</button>
                </div>
                <input class="d-none"
                       type="file"
                       name="files[]"
                       multiple
                       data-portail-sollicitation-upload-target="input"
                       data-action="change->portail-sollicitation-upload#onFilesChange">
              </div>
              <div class="mb-3" data-portail-sollicitation-upload-target="list">
                <div class="text-muted small {{ draftReponse and draftReponse.fichiers|length > 0 ? 'd-none' : '' }}" data-upload-placeholder>Aucun fichier téléversé.</div>
                {% if draftReponse %}
                  {% for file in draftReponse.fichiers %}
                    {% if not file.deleted %}
                      <div class="border rounded-3 p-2 mb-2">
                        <div class="d-flex align-items-center justify-content-between">
                          <div>
                            <div class="fw-semibold">{{ file.nomOriginal }}</div>
                            <small class="text-muted">{{ file.size ? (file.size / 1024 / 1024)|number_format(2, ',', ' ') ~ ' MB' : '' }}</small>
                          </div>
                          <span class="badge bg-success-subtle text-success">Téléchargé</span>
                        </div>
                        <div class="progress mt-2" style="height:8px;">
                          <div class="progress-bar bg-success" style="width:100%"></div>
                        </div>
                      </div>
                    {% endif %}
                  {% endfor %}
                {% endif %}
              </div>
              <div class="mb-3">
                <label class="form-label">Commentaires additionnels</label>
                <textarea class="form-control" name="commentaire" rows="4" placeholder="Ajoutez des informations utiles pour l'organisateur..."></textarea>
              </div>
              <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-light border" disabled>Enregistrer brouillon</button>
                <button class="btn btn-primary" type="submit"><i class="ti ti-send me-1"></i>Soumettre la réponse</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="col-xl-4">
        <div class="card border rounded-4">
          <div class="card-body p-4">
            <h6 class="text-uppercase text-muted mb-2">Statut de la demande</h6>
            <div class="mb-3">
              <small class="text-muted d-block">Statut actuel</small>
              <span class="badge {{ overdue ? 'bg-warning-subtle text-warning' : 'bg-primary-subtle text-primary' }} mt-1">
                {{ overdue ? 'En retard' : (cible.statut|replace({'_':' '})|title) }}
              </span>
            </div>

            <div class="mb-3">
              <small class="text-muted d-block">Date limite</small>
              <div class="fw-semibold {{ overdue ? 'text-danger' : '' }}">{{ sollicitation.deadlineAt ? sollicitation.deadlineAt|date('d/m/Y') : '-' }}</div>
              {% if overdue %}<small class="text-danger">{{ delayDays }} jour(s) de retard</small>{% endif %}
            </div>

            <div class="mb-3">
              <small class="text-muted d-block">Organisateur</small>
              {% include '@App/partials/components/badge_societe.html.twig' with {societe: sollicitation.projet.societe, taille: 40} %}
            </div>

            <div class="mb-3">
              <small class="text-muted d-block">Projet</small>
              {% include '@App/partials/components/badge_projet.html.twig' with {projet: sollicitation.projet, taille: 40} %}
            </div>

            <hr>

            <h6 class="mb-2">Checklist</h6>
            <ul class="list-unstyled mb-0 small">
              {% for req in requirements|slice(0, 5) %}
                <li class="mb-2 d-flex align-items-center">
                  <i class="ti ti-circle-check text-success me-1"></i>{{ req|length > 35 ? req|slice(0, 35) ~ '…' : req }}
                </li>
              {% else %}
                <li class="text-muted">Aucune exigence explicite.</li>
              {% endfor %}
            </ul>
          </div>
        </div>

        {% if reponse %}
          <div class="card border rounded-4 mt-3">
            <div class="card-body p-4">
              <h6 class="mb-2">Dernière soumission</h6>
              <div class="mb-2">
                <span class="badge {{ reponse.statut == 'validated' ? 'bg-success-subtle text-success' : (reponse.statut == 'refused' ? 'bg-danger-subtle text-danger' : 'bg-info-subtle text-info') }}">
                  {{ reponse.statut|replace({'_':' '})|title }}
                </span>
              </div>
              <small class="text-muted d-block mb-2">{{ reponse.submittedAt ? reponse.submittedAt|date('d/m/Y H:i') : '-' }}</small>
              {% if reponse.commentaireRevision %}
                <div class="alert alert-warning mb-0 py-2 small">{{ reponse.commentaireRevision }}</div>
              {% endif %}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}