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

    <div class="container-fluid mt-10">

        <div class="card-body">
            <div class="row">

                <div class="col-6" style="--bs-border-opacity: .15;">
                <div class=" text-center">
                    <h6 class="fs-4 fw-semibold mb-0"><i class="ti ti-building-skyscraper fs-7"></i>Hôtel</h6>
                </div>
                <h4 class="mb-0 mt-1 text-nowrap fs-5 fw-bolder text-center">
                    {{societe.nom}}
                </h4>
                </div>

                <div class="col-6 border-start border-primary" style="--bs-border-opacity: .15;">
                <div class=" text-center">
                    <h6 class="fs-4 fw-semibold mb-0"><i class="ti ti-flame fs-7"></i>Registre</h6>
                </div>
                <h4 class="mb-0 mt-1 text-nowrap text-center fs-5 fw-bolder">
                    {{registre.nom}}
                </h4>
                </div>
                    
            </div>
        </div>

        <form id="addDocumentForm" class="form-horizontal r-separator needs-validation" novalidate="">

        <div class="form-group p-3 mb-3">
          <div class="row">
            <label for="nom" class="col-sm-3 text-end  col-form-label">Date</label>
            <div class="col-sm-9">
              <input type="date" class="form-control" data-field="dateControle" id="dateControle" name="dateControle" value="{{ 'now'|date('Y-m-d') }}" required="" >
            </div>
          </div>
        </div>

        <div class="form-group p-3 mb-3">
          <div class="row">
            <label for="nom" class="col-sm-3 text-end  col-form-label">Catégorie</label>
            <div class="col-sm-9">
              <select class="form-control" id="categorieId" data-field="categorieId" name="categorieId" required="">
                  {% for categorie in categories %}
                      <option value="{{ categorie.idtoken }}">{{ categorie.nom }}</option>
                  {% endfor %}
              </select>
            </div>
          </div>
        </div>

        <div class="form-group p-3 mb-3">
          <div class="row">
            <label for="nom" class="col-sm-3 text-end  col-form-label">Entreprise</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="entreprise" data-field="entreprise" name="entreprise" required="">
            </div>
          </div>
        </div>

        <div class="form-group p-3 mb-3">
          <div class="row">
            <label for="nom" class="col-sm-3 text-end  col-form-label">Intervenant</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="intervenant" data-field="intervenant" name="intervenant" required="">
            </div>
          </div>
        </div>

        <div class="form-group p-3 mb-3">
          <div class="row">
            <label for="nom" class="col-sm-3 text-end  col-form-label">Vérifications / Observations</label>
            <div class="col-sm-9">
              <textarea class="form-control" id="verifications" data-field="verifications" name="verifications" required=""></textarea>
            </div>
          </div>
        </div>

        <div class="form-group p-3 mb-3">
          <div class="row">
            <label for="nom" class="col-sm-3 text-end  col-form-label">Document</label>
            <div class="col-sm-9">
              <input type="file" class="form-control" id="document" data-field="document" name="document">
            </div>
          </div>
        </div>

        <div class="form-group p-3 mb-3">
          <div class="row">
            <label for="nom" class="col-sm-3 text-end  col-form-label">Signature</label>
            <div class="col-sm-9">
        <div class="signature-wrapper text-center">
          <canvas id="signature-pad" width="400" height="150" style="border:1px solid #ccc; border-radius: 20px;"></canvas>
        </div>
            </div>
          </div>
        </div>

      </div>

      <div class="p-2 text-end">
        <button id="clear-signature" class="btn btn-success">Effacer la signature</button>
        <button type="button" class="btn btn-primary" data-form="addDocumentForm" data-btn="enregistrerControle" data-route="{{ path('registre_document_save_controle') }}" data-modal="ajaxModalXl">Enregistrer</button></form>
      </div>

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>

<script>

let signaturePad;

function resizeSignatureCanvas(canvas, signaturePadInstance) {
  const ratio = Math.max(0.5, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext("2d").scale(ratio, ratio);
  signaturePadInstance.clear();
}

document.addEventListener('DOMContentLoaded', function () {
  const canvas = document.getElementById('signature-pad');
  const clearBtn = document.getElementById('clear-signature');
  signaturePad = new SignaturePad(canvas);
  resizeSignatureCanvas(canvas, signaturePad);

  clearBtn.addEventListener('click', (e) => {
    e.preventDefault();
    signaturePad.clear();
  });

  // Récupère le bouton d'enregistrement
  const saveBtn = document.querySelector('button[data-btn="enregistrerControle"]');
  const form = document.getElementById('addDocumentForm');

  saveBtn.addEventListener('click', function (e) {
    e.preventDefault();

    // Vérification du formulaire
    if (!form.checkValidity()) {
      form.classList.add('was-validated');
      return;
    }
    console.log(signaturePad);
    // Vérifie que la signature est présente
    if (signaturePad.isEmpty()) {
      alert("Veuillez signer avant d'enregistrer.");
      return;
    }

    // Construction de FormData
    const formData = new FormData(form);

    // Ajout de la signature en base64 (image PNG)
    const signatureDataURL = signaturePad.toDataURL('image/png');
    formData.append('signature', signatureDataURL);

    // Envoi AJAX
    fetch(saveBtn.dataset.route, {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (!response.ok) {
        throw new Error("Erreur lors de l'enregistrement");
      }
      return response.json();
    })
    .then(data => {
      window.location.href = '{{ path('registresecurite_ok') }}';
    })
    .catch(error => {
      console.error("Erreur :", error);
      alert("Une erreur s'est produite lors de l'envoi du formulaire.");
    });
  });
});
</script>
{% include 'partials/footer.html.twig' %}