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

{% block content %}

      <script src="{{ asset('assets/libs/tinymce/tinymce.min.js') }}"></script>
      <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
      <script>
        async function copyPresentationLink(url) {
          try {
            if (navigator.clipboard && window.isSecureContext) {
              await navigator.clipboard.writeText(url);
            } else {
              const textarea = document.createElement('textarea');
              textarea.value = url;
              textarea.style.position = 'fixed';
              textarea.style.left = '-9999px';
              document.body.appendChild(textarea);
              textarea.focus();
              textarea.select();
              document.execCommand('copy');
              document.body.removeChild(textarea);
            }
            if (typeof showToast === 'function') {
              showToast('Lien copié', 'success');
            } else {
              alert('Lien copié');
            }
          } catch (e) {
            if (typeof showToast === 'function') {
              showToast('Impossible de copier le lien', 'error');
            } else {
              alert('Impossible de copier le lien');
            }
          }
        }
      </script>

      <div class="body-wrapper" id="page-projet-root" data-import-pending="{{ projet.import ? '0' : '1' }}" data-projet-id="{{ projet.idtoken }}">
        <div class="container-fluid">
          

          <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <h5>Présentations du projet</h5>
                <div class="d-sm-flex align-items-center justify-space-between">
                  
                  <a href="{{path('app_index')}}" class="p-2"><iconify-icon icon="solar:home-2-broken" class="fs-6"></iconify-icon> </a> >
                  <a href="{{path('projet_index')}}" class="p-2">Projets </a> >
                  <a href="{{path('projet_view', {'id': projet.idtoken})}}" class="p-2">{{projet.titre}} </a> >
                  <a href="{{path('projet_view_presentation', {'id': projet.idtoken})}}" class="p-2">Présentations </a> >
                  <a href="{{path('projet_view_presentation_view', {'id': projet.idtoken, 'presentationid': presentation.idtoken})}}" class="p-2">{{presentation.titre}} </a> 
                </div>
              </div>
            </div>
          </div>
          
          <div>
            <div
              id="block-builder"
              data-controller="presentation-builder"
              data-presentation-builder-presentation-id-value="{{ presentation.idtoken }}"
              data-presentation-builder-projet-id-value="{{ projet.idtoken }}"
              data-presentation-builder-save-url-value="{{ path('projetpresentation_save_block', { id: presentation.idtoken }) }}"
              data-presentation-builder-block-template-url-value="{{ path('projet_bloc_template', { type: 'TYPE', projetId: projet.idtoken }) }}"
              data-presentation-builder-upload-image-url-value="{{ path('projet_view_presentation_upload_image') }}"
              data-presentation-builder-upload-background-url-value="{{ path('projet_view_presentation_upload_background', { id: presentation.idtoken }) }}"
            >
              <div class="mb-4 text-end">
                <button
                  type="button"
                  class="btn btn-outline-primary me-2"
                  onclick="copyPresentationLink('{{ absolute_url(path('public_presentation_view', {presentationid: presentation.idtoken}))|e('js') }}')"
                >
                  <i class="ti ti-copy fs-4 me-2"></i>Copier le lien
                </button>
                <a class="btn btn-outline-success" target="_blank" href="{{path('public_presentation_view', {presentationid: presentation.idtoken})}}"><i class="ti ti-eye fs-4 me-2"></i>Voir la présentation</a>
                <form
                  method="post"
                  action="{{ path('projetpresentation_delete', { id: projet.idtoken, presentationid: presentation.idtoken }) }}"
                  class="d-inline-block ms-2"
                  data-turbo-confirm="Supprimer cette présentation ?"
                  data-turbo-frame="_top"
                >
                  <button type="submit" class="btn btn-outline-danger">
                    <i class="ti ti-trash fs-4 me-2"></i>Supprimer
                  </button>
                </form>
                <!-- etc. -->
              </div>

              <!-- Toolbar de blocs -->
              <div id="block-toolbar" class="mb-4" data-presentation-builder-target="toolbar">
                <button class="btn btn-outline-primary" data-type="text" data-action="presentation-builder#addBlock">+ Bloc texte</button>
                <button class="btn btn-outline-primary" data-type="chiffres" data-action="presentation-builder#addBlock">+ Bloc chiffres</button>
                <button class="btn btn-outline-primary" data-type="description" data-action="presentation-builder#addBlock">+ Bloc présentation</button>
                <button class="btn btn-outline-primary" data-type="image" data-action="presentation-builder#addBlock">+ Bloc image</button>
                <button class="btn btn-outline-primary" data-type="formule" data-action="presentation-builder#addBlock">+ Bloc formules</button>
                <button class="btn btn-outline-primary" data-type="partenaire" data-action="presentation-builder#addBlock">+ Bloc partenaires</button>
                <!-- etc. -->
              </div>

              <div class="row">
                <div class="col-9">
                  <!-- Zone de construction -->
                  <div id="blocks-container" data-presentation-builder-target="blocks" data-action="click->presentation-builder#removeBlock">
                    {% set pageStyle = { bgColor: '#ffffff', bgImageUrl: '' } %}
                    {% for b in presentation.projetBlocks %}
                      {% if b.type == 'page_style' %}
                        {% set pageStyle = b.data %}
                      {% endif %}
                    {% endfor %}
                    {% for block in presentation.projetBlocks %}
                      {% if block.type != 'page_style' %}
                        {% include '@Projet/projet/presentation/block/' ~ block.type ~ '.html.twig' with { block: block } %}
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>

                <div class="col-3 card">
                  <div class="card-body">
                    <h4>Entête</h4>

                    <div class="d-flex align-items-center gap-2 mb-3">
                      <button id="btn-upload-bg" class="btn btn-outline-primary" type="button" data-presentation-builder-target="backgroundButton" data-action="presentation-builder#triggerBackgroundUpload">
                        Uploader une image de fond
                      </button>
                      <input id="input-upload-bg" type="file" accept="image/*" class="d-none" data-presentation-builder-target="backgroundInput" data-action="change->presentation-builder#uploadBackground">
                    </div>

                    <div class="img-background border rounded p-3" data-presentation-builder-target="backgroundPreview"
                        style="min-height:240px; background-size:cover; background-position:center; {% if presentation.background is not null %}background-image: url('{{asset('uploads/projets/presentations/' ~ presentation.background )}}'); {% endif %}">
                      {# Option 1: background-image via CSS (défaut) #}
                      {# Option 2: si tu préfères un <img>, dé-commente :
                      <img class="img-fluid d-none" alt="Aperçu" />
                      #}
                    </div>

                    <h4 class="mt-4">Fond de page</h4>
                    <div class="mb-3">
                      <label class="form-label">Couleur de fond</label>
                      <input
                        type="color"
                        class="form-control form-control-color"
                        data-presentation-builder-target="pageBackgroundColor"
                        value="{{ pageStyle.bgColor|default('#ffffff') }}"
                      >
                    </div>
                    <div class="mb-3">
                      <label class="form-label">Image de fond (prioritaire)</label>
                      <input
                        type="file"
                        accept="image/*"
                        class="form-control"
                        data-presentation-builder-target="pageBackgroundInput"
                        data-action="change->presentation-builder#uploadPageBackground"
                        data-url="{{ pageStyle.bgImageUrl|default('') }}"
                      >
                    </div>
                    <div
                      class="border rounded p-3"
                      data-presentation-builder-target="pageBackgroundPreview"
                      style="min-height:120px; background-size:cover; background-position:center; background-color: {{ pageStyle.bgColor|default('#ffffff') }}; {% if pageStyle.bgImageUrl|default('') %}background-image: url('{{ pageStyle.bgImageUrl }}');{% endif %}"
                    ></div>

                    <h4>Formules</h4>
                    <div class="mt-3" data-presentation-builder-target="formules">
                      {% for formule in formules %}
                        {% if not formule.personnalise %}
                          <div class="form-check mb-2">
                            <input
                              class="form-check-input"
                              type="checkbox"
                              id="presentation-formule-{{ formule.idtoken }}"
                              value="{{ formule.idtoken }}"
                              data-action="change->presentation-builder#save"
                              data-presentation-formule="true"
                              {% if formule in presentation.formules %}checked{% endif %}
                            >
                            <label class="form-check-label" for="presentation-formule-{{ formule.idtoken }}">
                              {{ formule.nom }} ({{ formule.valeur }} €)
                            </label>
                          </div>
                        {% endif %}
                      {% else %}
                        <div class="text-muted">Aucune formule disponible.</div>
                      {% endfor %}
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="card-body">
                    <div class="text-end">
                      <button id="save-presentation" class="btn btn-primary" data-presentation-builder-target="saveButton" data-action="presentation-builder#save">Enregistrer</button>
                    </div>
                  </div>
                </div>
            </div>

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

{% endblock %}