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

<link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/signature.css') }}">

<script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('assets/libs/datatables.net/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('assets/libs/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('assets/libs/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/libs/pdfmake/vfs_fonts.js') }}"></script>

<link rel="stylesheet" href="{{asset('assets/libs/dropzone/dist/dropzone.css')}}" />
<script src="{{asset('assets/libs/dropzone/dist/min/dropzone.min.js')}}"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Allura&family=Caveat:wght@400..700&family=Dancing+Script:wght@400..700&family=Great+Vibes&family:Pacifico&family=Satisfy&display=swap" rel="stylesheet">

      <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">
                <div class="d-sm-flex align-items-center justify-space-between">
                  <h5>Signature de votre convention avec {{convention.societe.nom}}</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            
            <div class="row">
              <div class="col-8 ">
                <div class="card-body">
                  <div class="d-sm-flex align-items-center justify-space-between">
                    <nav aria-label="breadcrumb" class="ms-auto">
                      {% if convention.document.statutMecene == 'Envoyée' %}
                      <button type="button" class="btn btn-rounded btn-danger mb-2" data-bs-toggle="modal" data-bs-target="#signatureModal">
                            <i class="ti ti-writing-sign fs-4 me-2"></i>
                            Signer la convention
                        </button>
                      {% endif %}
                    </nav>
                  </div>
                  <embed src="{{ asset( convention.societe.dossier ~ '/conventions/' ~ convention.document.document) }}" type="application/pdf" width="100%" height="600px" />
                </div>
            </div>
            
            <div class="col-4 py-2 px-3">

              <div class="d-flex flex-row comment-row border-bottom p-3 gap-3">
                <div class="comment-text w-100">
                  <div class="comment-footer mt-2">
                    <div class="d-flex align-items-center" id="titre-container">
                      <h5 id="titre-texte">{{convention.document.nom}}</h5>
                      
                    </div>
                  </div>
                </div>
              </div>

              <div class="comment-footer mt-2">
                <div class="d-flex flex-row comment-row border-bottom p-3 gap-3">
                  <div class="comment-text w-100">
                    <h6 class="fw-medium">Créé le</h6>
                    <p class="mb-1 fs-4 text-muted">
                      {{convention.document.createdAt | date('d/m/Y à H:i')}}
                    </p>
                    <h6 class="fw-medium">Auteur</h6>
                    <p class="mb-1 fs-4 text-muted">
                      {{convention.document.createdBy.prenom}} {{convention.document.createdBy.nom}}
                    </p>
                    <h6 class="fw-medium">Statut</h6>
                    <span class="badge bg-primary-subtle text-primary ">{{convention.document.statut}}</span>
                          
                  </div>
                </div>
              </div>

              <div class="comment-footer mt-2">
                <div class="flex-row comment-row border-bottom p-3 gap-3">

                  <h6>Signataires de la convention</h6><br/>

                    <div class="d-flex align-items-center mb-3 pb-3 border-bottom gap-6">
                      {% if convention.projet.societe.contact.image is null %}
                          {% set initials = convention.projet.societe.contact.prenom|slice(0, 1)|upper ~ convention.projet.societe.contact.nom|slice(0, 1)|upper %}
                          <a href="" class="text-bg-primary text-white fs-6 round-40 rounded-circle me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                            {{initials}}
                          </a>
                      {% else %}
                          <img src="{{asset('uploads/profiles/user/' ~ convention.projet.societe.contact.image )}}" alt="matdash-img" class="img-fluid rounded-circle" width="30" height="30" id="imgProfilApp">
                      {% endif %}
                      <div>
                        <div class="d-flex align-items-center justify-space-between">
                          <div>
                            <h5 class="mb-0 fs-12">{{convention.projet.societe.contact.prenom}} {{convention.projet.societe.contact.nom}}
                            </h5>
                            <p class="mb-0 text-dark">
                              {{convention.projet.societe.contact.email}}
                            </p>
                            <p class="mb-0 fs-2 text-dark opacity-75">
                              Organisateur
                            </p>
                        </div>
                        <div>
                          <span class="badge {% if convention.document.statutOrga == 'Signée' %}bg-success-subtle text-success{% else %}bg-primary-subtle text-primary{% endif %}  ms-4">{{convention.document.statutOrga}}</span>
                        </div>
                        </div>
                        
                      </div>
                    </div>

                    <div class="d-flex align-items-center mb-3 pb-3 gap-6">
                      {% if convention.mecene.contact.image is null %}
                          {% set initials = convention.mecene.contact.prenom|slice(0, 1)|upper ~ convention.mecene.contact.nom|slice(0, 1)|upper %}
                          <a href="" class="text-bg-primary text-white fs-6 round-40 rounded-circle me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                            {{initials}}
                          </a>
                      {% else %}
                          <img src="{{asset('uploads/profiles/user/' ~ convention.mecene.contact.image )}}" alt="matdash-img" class="img-fluid rounded-circle" width="30" height="30" id="imgProfilApp">
                      {% endif %}
                      <div>
                        <div class="d-flex align-items-center justify-space-between">
                          <div>
                            <h5 class="mb-0 fs-12">{{convention.mecene.contact.prenom}} {{convention.mecene.contact.nom}}
                            </h5>
                            <p class="mb-0 text-dark">
                              {{convention.mecene.contact.email}}
                            </p>
                            <p class="mb-0 fs-2 text-dark opacity-75">
                              Mécène / Partenaire
                            </p>
                        </div>
                        <div>
                          <span class="badge {% if convention.document.statutMecene == 'Signée' %}bg-success-subtle text-success{% else %}bg-primary-subtle text-primary{% endif %}  ms-4">{{convention.document.statutMecene}}</span>
                        </div>
                        </div>
                        
                      </div>
                    </div>

                </div>
              </div>

          </div>
        </div>
      </div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
    const conventionId = '{{convention.idtoken}}';
    const conventionProjetId = '{{convention.projet.idtoken}}';
    
let signaturePad;
let currentMode = 'draw';
let signatureData = null;
let typedFont = 'Satisfy';

function resizeSignatureCanvas(canvas, signaturePad) {
  const ratio = window.devicePixelRatio || 1;
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);
  signaturePad.clear();
}

document.addEventListener('DOMContentLoaded', function () {
  const canvas = document.getElementById('signature-pad');
  const slider = document.getElementById('slider-confirm');
  const validateBtn = document.getElementById('validate-signature');
  const clearBtn = document.getElementById('clear-signature');
  const uploadInput = document.getElementById('signature-upload');
  const typedInput = document.getElementById('typed-name');
  const typedPreview = document.getElementById('typed-preview');
  const fontSelect = document.getElementById('typed-font');
  const signaturePreview = document.getElementById('signaturePreview'); // pour le slider progressif
  const sliderContainer = document.querySelector('.slider-container');

  // --- Initialisation à l’ouverture de la modal Bootstrap ---
  $('#signatureModal').on('shown.bs.modal', function () {
    signaturePad = new SignaturePad(canvas);
    //resizeSignatureCanvas(canvas, signaturePad);
    slider.value = 0;
    validateBtn.disabled = true;
    updateSliderVisual(0);
    signatureData = null;
    currentMode = 'draw';
    if (typedPreview) typedPreview.textContent = '';
  });

  // --- GESTION DU SLIDER INTERACTIF ---
  slider.addEventListener('input', (e) => {
    const val = e.target.value;
    updateSliderVisual(val);

    // Si le slider est à 100% et qu'une signature est prête, active le bouton
    const ready = hasSignatureData();
    validateBtn.disabled = !(val == 100 && ready);
  });

  function updateSliderVisual(val) {
    // fond coloré du slider
    slider.style.background = `linear-gradient(to right, #70e3c5 ${val}%, #e8e8e8 ${val}%)`;

    // texte sur le slider
    sliderContainer.style.setProperty('--progress', `${val}%`);

    // progression du nom tapé
    const preview = document.getElementById('signaturePreview');
    if (preview) {
      preview.style.background = `linear-gradient(to right, #000 ${val}%, #ccc ${val}%)`;
      preview.style.webkitBackgroundClip = 'text';
      preview.style.webkitTextFillColor = 'transparent';
    }
  }

  // --- Effacer la signature / reset ---
  if (clearBtn) {
    clearBtn.addEventListener('click', () => {
      if (currentMode === 'draw' && signaturePad) signaturePad.clear();
      if (currentMode === 'upload') {
        document.getElementById('signature-upload-preview').innerHTML = '';
        uploadInput.value = '';
      }
      if (currentMode === 'typed') {
        typedInput.value = '';
        typedPreview.textContent = '';
      }
      slider.value = 0;
      updateSliderVisual(0);
      validateBtn.disabled = true;
      signatureData = null;
    });
  }

  // --- Upload image ---
  if (uploadInput) {
    uploadInput.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = function (ev) {
        signatureData = ev.target.result;
        document.getElementById('signature-upload-preview').innerHTML = `<img src="${signatureData}" style="max-width:100%;border:1px solid #ccc;border-radius:8px;">`;
        checkReadyState();
      };
      reader.readAsDataURL(file);
    });
  }

  // --- Nom tapé ---
  const fontPool = ["Satisfy","Dancing Script","Great Vibes","Pacifico","Allura","Caveat"];
  if (typedInput) {
    typedInput.addEventListener('input', () => {
      typedPreview.textContent = typedInput.value;
      typedPreview.style.fontFamily = `'${typedFont}', cursive`;
      signatureData = typedInput.value ? typedInput.value : null;
      checkReadyState();
    });
  }
  if (fontSelect) {
    fontSelect.addEventListener('change', () => {
      typedFont = fontSelect.value === 'random' ? fontPool[Math.floor(Math.random()*fontPool.length)] : fontSelect.value;
      typedPreview.style.fontFamily = `'${typedFont}', cursive`;
      if (typedInput.value) signatureData = typedInput.value;
      checkReadyState();
    });
  }

  // --- Tabs de mode ---
  document.querySelectorAll('#signatureTab button').forEach(btn => {
    btn.addEventListener('click', () => {
      currentMode = btn.id.replace('-tab', ''); // draw / upload / typed
      signatureData = null;
      validateBtn.disabled = true;
      slider.value = 0;
      updateSliderVisual(0);
    });
  });

  // --- Vérifie si un mode est prêt ---
  function hasSignatureData() {
    if (currentMode === 'draw') return !signaturePad.isEmpty();
    if (currentMode === 'upload') return !!signatureData;
    if (currentMode === 'typed') return !!signatureData;
    return false;
  }

  function checkReadyState() {
    const ready = hasSignatureData();
    validateBtn.disabled = !(ready && slider.value == 100);
  }

  // --- Validation / envoi AJAX ---
  validateBtn.addEventListener('click', () => {
    let dataURL;
     validateBtn.disabled = true;
    validateBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Signature en cours...`;

    if (currentMode === 'draw') {
      if (signaturePad.isEmpty()) {
        alert("Veuillez signer avant de valider.");
        return;
      }
      dataURL = signaturePad.toDataURL();
    }
    else if (currentMode === 'upload') {
      if (!signatureData) {
        alert("Veuillez importer votre signature avant de valider.");
        return;
      }
      dataURL = signatureData;
    }
    else if (currentMode === 'typed') {
      if (!signatureData) {
        alert("Veuillez saisir votre nom avant de valider.");
        return;
      }

      // conversion texte → image côté serveur (exemple d'appel AJAX)
      $.ajax({
        type: 'POST',
        url: Routing.generate('api_signature_render_text'),
        data: JSON.stringify({
          text: signatureData,
          font: typedFont,
          size: 72,
          color: '#000000'
        }),
        contentType: 'application/json',
        async: false,
        success: function (res) {
          if (res.success) {
            dataURL = res.dataUrl;
            document.location.reload();
          }
        },
        error: function () {
          alert("Erreur lors de la conversion de la signature tapée.");
        }
      });
    }

    const docId = validateBtn.dataset.docid || 'doc-demo';
    const userId = validateBtn.dataset.userid || 'doc-demo';
    if (!dataURL) {
      alert("Aucune donnée de signature trouvée.");
      return;
    }

    $.ajax({
      type: 'POST',
      url: Routing.generate('public_document_convention_add_signature'),
      data: { image: dataURL, docId: docId, userId: userId },
      success: function (res) {
        showToast('Signature enregistrée avec succès !', 'success');
        $('#signatureModal').modal('hide');
        document.location.replace(Routing.generate('public_document_convention_after_signature', {
          'id': conventionProjetId, // adapte selon ton contexte
          'conventionid': conventionId
        }));
      },
      error: function () {
        alert('❌ Une erreur est survenue lors de l’enregistrement.');
      }
    });
  });
});

</script>
<style>
.slider-glow.validated {
  box-shadow: 0 0 12px 4px rgba(40, 167, 69, 0.6);
  border-radius: 5px;
  outline: none;
}
</style>

{% include '@Projet/convention/public/signature.html.twig' %}
{% include 'partials/modal/ajax_modal_xl.html.twig' %}
{% 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/convention.js') }}"></script>




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