{% include 'partials/header.html.twig' %}

<script src="{{ asset('assets/libs/jquery/dist/jquery.min.js') }}"></script>

      <div class="body-wrapper">
        <div class="container-fluid">
          
          <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <h5>Modèles de contrat</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_modeles', {'id': projet.idtoken})}}" class="p-2">Modèle de contrat </a>
                  
                </div>
              </div>
            </div>
          </div>

          <div class="card">
              
                <div class="card-body">
                  <h6>Nouveau modèle de convention</h6>

                  <form id="addModele" class="form-horizontal needs-validation" novalidate="">
            
                    <div class="form-group mb-3 p-3 pt-0">
                      <input type="text" class="form-control" data-field="titre" id="titre" placeholder="Titre du modèle" />
                    </div> 

                    <div class="form-group mb-3 p-3 pt-0">
                      <input type="hidden" data-field="projetId" id="projetId" value="{{projet.idtoken}}" />
                      <textarea class="form-control tinymce" rows="3" data-field="contenu" id="contenu"></textarea>
                    </div>     

                  </form>

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

<script>

    tinymce.init({
      selector: 'textarea.tinymce',
      height: 600,
      language: 'fr_FR',
      plugins: 'lists link table image',
      toolbar: 'balises | undo redo | bold italic | alignleft aligncenter alignright alignjustify  | bullist numlist | link table | image | saveButton',
      placeholder: 'Rédigez ici le modèle de convention...',
      setup: function (editor) {
        editor.ui.registry.addMenuButton('balises', {
          text: 'Balises dynamiques',
          fetch: (callback) => callback([
            {
              type: 'nestedmenuitem',
          text: 'Organisateur',
          getSubmenuItems: () => [
            { type: 'menuitem', text: 'Forme juridique de l\'organisateur', onAction: () => editor.insertContent('[organisateur_forme_juridique]') },
            { type: 'menuitem', text: 'Nom de l\'organisateur', onAction: () => editor.insertContent('[organisateur_nom]') },
            { type: 'menuitem', text: 'SIRET de l\'organisateur', onAction: () => editor.insertContent('[organisateur_siret]') },
            { type: 'menuitem', text: 'Secteur d\'activité de l\'organisateur', onAction: () => editor.insertContent('[organisateur_secteur]') },
            { type: 'menuitem', text: 'Adresse de l\'organisateur', onAction: () => editor.insertContent('[organisateur_adresse]') },
            { type: 'menuitem', text: 'Représentant de l\'organisateur', onAction: () => editor.insertContent('[organisateur_representant]') },
            { type: 'menuitem', text: 'Fonction de l\'organisateur', onAction: () => editor.insertContent('[organisateur_representant_fonction]') }
          ]
        },
        {
          type: 'nestedmenuitem',
          text: 'Partenaire',
          getSubmenuItems: () => [
            { type: 'menuitem', text: 'Nom du partenaire', onAction: () => editor.insertContent('[partenaire_nom]') },
            { type: 'menuitem', text: 'SIRET du partenaire', onAction: () => editor.insertContent('[partenaire_siret]') },
            { type: 'menuitem', text: 'Secteur d\'activité du partenaire', onAction: () => editor.insertContent('[partenaire_secteur]') },
            { type: 'menuitem', text: 'Adresse du partenaire', onAction: () => editor.insertContent('[partenaire_adresse]') },
            { type: 'menuitem', text: 'Représentant du partenaire', onAction: () => editor.insertContent('[partenaire_representant]') },
            { type: 'menuitem', text: 'Fonction du représentant', onAction: () => editor.insertContent('[partenaire_representant_fonction]') }
          ]
        },
        {
          type: 'nestedmenuitem',
          text: 'Projet',
          getSubmenuItems: () => [
            { type: 'menuitem', text: 'Nom du projet', onAction: () => editor.insertContent('[projet_nom]') },
            { type: 'menuitem', text: 'Date de la convention', onAction: () => editor.insertContent('[date_convention]') },
            { type: 'menuitem', text: 'Date de la fin de la convention', onAction: () => editor.insertContent('[date_fin_convention]') }

          ]
        },
        {
          type: 'nestedmenuitem',
          text: 'Partenariat',
          getSubmenuItems: () => [
            { type: 'menuitem', text: 'Formule', onAction: () => editor.insertContent('[formule]') },
            { type: 'menuitem', text: 'Montant de la formule', onAction: () => editor.insertContent('[formule_montant]') },
            { type: 'menuitem', text: 'Liste des contreparties', onAction: () => editor.insertContent('[formule_contreparties]') },
          ]
        },
        {
          type: 'nestedmenuitem',
          text: 'Autres balises',
          getSubmenuItems: () => [
            { type: 'menuitem', text: 'Date du jour', onAction: () => editor.insertContent('[date_du_jour]') }

          ]
        },
        {
          type: 'nestedmenuitem',
          text: 'Signature',
          getSubmenuItems: () => [
            { type: 'menuitem', text: 'Lieu de la signature', onAction: () => editor.insertContent('[signature_lieu]') },
            { type: 'menuitem', text: 'Signature de l\'organisateur', onAction: () => editor.insertContent('[signature_organisateur]') },
            { type: 'menuitem', text: 'Signature du partenaire', onAction: () => editor.insertContent('[signature_partenaire]') }
          ]
        },
            // on peut ajouter d’autres groupes ici
          ])
        });

        editor.ui.registry.addButton('saveButton', {
          text: 'Enregistrer',
          icon: 'save',
          onAction: function () {
            const form = document.querySelector('#addModele');
            const titre = form.querySelector('[data-field="titre"]').value;
            const projetId = form.querySelector('[data-field="projetId"]').value;
            const contenu = editor.getContent();

            const actionUrl = "{{path('modele_add')}}";
            const method = form?.getAttribute('method')?.toUpperCase() || 'POST';

            fetch(actionUrl, {
              method: method,
              body: JSON.stringify({
                titre: titre,
                projetId: projetId,
                contenu: contenu
              }),
              headers: {
                'X-Requested-With': 'XMLHttpRequest'
              }
            })
            .then(response => {
              if (!response.ok) {
                throw new Error("Erreur réseau");
              }
              return response.json();
            })
            .then(data => {
              if (data.success) {
                showToast("Modèle créé avec succès !");
                const projetUrl = "{{ path('projet_view_modeles', { id: projet.idtoken }) }}?tab=modele";
                window.location.href = projetUrl;
              } else {
                alert("Erreur : " + (data.message || 'sauvegarde impossible.'));
              }
            })
            .catch(error => {
              console.error("Erreur AJAX :", error);
              alert("Échec de la sauvegarde.");
            });
          }
        });
      },
    });
</script>


{% include 'partials/modal/delete_modal.html.twig' %}
{% include 'partials/modal/ajax_modal.html.twig' %}
{% include 'partials/modal/edit_modalxl.html.twig' %}

<script src="{{ asset('assets/js/global/fonctions.js') }}"></script>
<script src="{{ asset('assets/js/projet/projet_view.js') }}"></script>




{% include 'partials/footer.html.twig' %}