e-cosplay/assets/class/AutoCustomer.js

export class AutoCustomer extends HTMLButtonElement {
    connectedCallback() {
        const modalHTML = `
      <style>
        .modal {
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.85);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
        }
        .modal.hidden {
          display: none;
        }
        .modal-content {
          background: #1f2937; /* gray-800 */
          border-radius: 0.5rem;
          padding: 1.5rem;
          max-width: 28rem;
          width: 100%;
          position: relative;
          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5),
                      0 4px 6px -2px rgba(0,0,0,0.4);
          color: #f9fafb; /* gray-50 */
          font-family: system-ui, sans-serif;
        }
        .close-btn {
          position: absolute;
          top: 0.5rem;
          right: 0.75rem;
          background: transparent;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: #9ca3af; /* gray-400 */
        }
        .close-btn:hover {
          color: #f9fafb;
        }
        label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: 600;
          color: #d1d5db; /* gray-300 */
        }
        input[type="text"] {
          width: 100%;
          padding: 0.5rem 0.75rem;
          border: 1px solid #374151; /* gray-700 */
          border-radius: 0.375rem;
          margin-bottom: 1rem;
          font-size: 1rem;
          background-color: #111827; /* gray-900 */
          color: #f9fafb; /* gray-50 */
          box-sizing: border-box;
        }
        input[type="text"]::placeholder {
          color: #6b7280; /* gray-500 */
        }
        button.submit-btn {
          background-color: #3b82f6; /* blue-500 */
          color: white;
          padding: 0.5rem 1rem;
          font-weight: 600;
          border: none;
          border-radius: 0.375rem;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }
        button.submit-btn:hover {
          background-color: #2563eb; /* blue-600 */
        }
        .result {
          margin-top: 1rem;
          background-color: #374151; /* gray-700 */
          padding: 1rem;
          border-radius: 0.375rem;
          white-space: pre-wrap;
          font-family: monospace, monospace;
          max-height: 200px;
          overflow-y: auto;
        }
        .error {
          color: #f87171; /* red-400 */
          margin-top: 1rem;
        }
      </style>

      <div class="modal hidden" id="siret-modal">
        <div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="modal-title">
          <button class="close-btn" aria-label="Fermer la fenêtre modale">&times;</button>
          <h2 id="modal-title" style="font-size:1.25rem; font-weight:700; margin-bottom:1rem;">Recherche SIRET</h2>
          <form id="siret-form">
            <label for="siret-input">Numéro SIRET :</label>
            <input type="text" id="siret-input" name="siret" maxlength="14" pattern="\\d{14}" placeholder="Ex: 12345678901234" required />
            <button type="submit" class="submit-btn">Rechercher</button>
          </form>
          <div class="result" id="result-container" aria-live="polite"></div>
        </div>
      </div>
    `;

        this.insertAdjacentHTML('afterend', modalHTML);

        const modal = document.getElementById('siret-modal');
        const closeBtn = modal.querySelector('.close-btn');
        const form = modal.querySelector('#siret-form');
        const input = modal.querySelector('#siret-input');
        const resultContainer = modal.querySelector('#result-container');

        this.addEventListener('click', e => {
            e.preventDefault();
            resultContainer.textContent = ''; // reset résultat
            modal.classList.remove('hidden');
            input.focus();
        });

        closeBtn.addEventListener('click', () => {
            modal.classList.add('hidden');
        });

        modal.addEventListener('click', e => {
            if (e.target === modal) {
                modal.classList.add('hidden');
            }
        });

        form.addEventListener('submit', async e => {
            e.preventDefault();
            const siret = input.value.trim();
            resultContainer.textContent = '';
            if (!/^\d{14}$/.test(siret)) {
                resultContainer.innerHTML = `<div class="error">Veuillez entrer un numéro SIRET valide à 14 chiffres.</div>`;
                return;
            }

            resultContainer.textContent = 'Recherche en cours...';

            try {
                const response = await fetch(`/api-interne/intranet/customer/auto/${siret}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`Erreur API: ${response.status}`);
                }

                const data = await response.json();
                if(data.error != undefined) {
                    resultContainer.innerHTML = `<div class="error">Erreur lors de la recherche : Aucune information non trouvée</div>`;
                    input.value = "";
                    input.setAttribute('input',"")
                } else {
                    if(data.etat) {
                        let customer_raisonSocial = document.body.querySelector('#customer_raisonSocial');

                        customer_raisonSocial.setAttribute('value',data.name);
                        customer_raisonSocial.value = data.name;

                        let customer_siret = document.body.querySelector('#customer_siret');
                        customer_siret.setAttribute('value',data.siret);
                        customer_siret.value = data.siret;

                        let customer_ape = document.body.querySelector('#customer_ape');
                        customer_ape.setAttribute('value',data.ape);
                        customer_ape.value = data.ape;

                        let customer_rna = document.body.querySelector('#customer_rna');
                        customer_rna.setAttribute('value',data.rna);
                        customer_rna.value = data.rna;

                        let customer_address = document.body.querySelector('#customer_address');
                        customer_address.setAttribute('value',data.num);
                        customer_address.value = data.num;

                        let customer_zipcode = document.body.querySelector('#customer_zipcode');
                        customer_zipcode.setAttribute('value',data.zipcode);
                        customer_zipcode.value = data.zipcode;

                        let customer_city = document.body.querySelector('#customer_city');
                        customer_city.setAttribute('value',data.comune);
                        customer_city.value = data.comune;

                        modal.classList.add('hidden');
                    } else {
                        resultContainer.innerHTML = `<div class="error">Erreur lors de la recherche : Entreprise FERMER</div>`;
                        input.value = "";
                        input.setAttribute('input',"")
                    }

                }

            } catch (error) {
                resultContainer.innerHTML = `<div class="error">Erreur lors de la recherche : ${error.message}</div>`;
            }
        });
    }
}