{% extends '@admin/base.html.twig' %}

{% block stylesheets %}
  {{ parent() }}
  <style>
    .company-shell {
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
    }
    .company-header {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .company-header-badge {
      width: 50px;
      height: 50px;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, #111827 0%, #334155 100%);
      box-shadow: 0 10px 22px rgba(17, 24, 39, .18);
      font-size: 1.15rem;
      flex: 0 0 auto;
    }
    .company-header-title {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
      color: #0f172a;
    }
    .company-header-subtitle {
      margin: .2rem 0 0;
      color: #64748b;
      font-size: .9rem;
    }
    .company-tabs {
      overflow-x: auto;
      white-space: nowrap;
      flex-wrap: nowrap;
      scrollbar-width: thin;
      margin-bottom: 0;
    }
    .company-tabs .nav-link {
      display: flex;
      align-items: center;
      gap: .4rem;
      padding: .6rem .9rem;
      border-radius: 12px 12px 0 0;
    }
    .company-tabs .nav-link.active {
      font-weight: 600;
    }
    .company-tab-content {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-top: none;
      border-radius: 0 0 14px 14px;
      padding: 14px;
      box-shadow: 0 12px 24px rgba(15, 23, 42, .04);
    }
    .company-form .crm-fieldset {
      padding: 1rem;
      margin-bottom: 1rem;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15, 23, 42, .03);
    }
    .company-form .crm-legend {
      margin-bottom: .9rem;
      font-size: 1rem;
      font-weight: 700;
      color: #111827;
    }
    .company-fields-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      align-items: start;
    }
    .company-fields-grid--single {
      grid-template-columns: minmax(0, 1fr);
    }
    .company-field {
      margin-bottom: 1rem;
    }
    .company-field:last-child {
      margin-bottom: 0;
    }
    .company-field-label {
      display: block;
      font-size: .82rem;
      font-weight: 700;
      color: #475569;
      margin-bottom: .45rem;
    }
    .company-form .form-control,
    .company-form .m-input,
    .company-form select {
      min-height: 42px;
      border-radius: 10px;
    }
    .company-help {
      font-size: .78rem;
      color: var(--crm-muted);
      display: flex;
      align-items: center;
      gap: .35rem;
      margin-top: .35rem;
    }
    .company-actions {
      display: flex;
      justify-content: center;
      gap: .5rem;
      flex-wrap: wrap;
    }
    .company-actions .btn-dark {
      min-width: 220px;
      min-height: 46px;
      font-size: .98rem;
      font-weight: 700;
      border-radius: 12px;
      box-shadow: 0 10px 20px rgba(15, 23, 42, .14);
    }
    .company-logo-grid .logo-card {
      border: 1px solid var(--crm-border);
      border-radius: 14px;
      background: #fff;
      padding: 14px;
      height: 100%;
      position: relative;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .03);
    }
    .company-logo-grid .logo-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
    }
    .company-logo-grid .logo-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 2px solid #111;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .company-logo-grid .logo-circle img {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
    }
    .company-logo-grid .logo-circle img.is-hidden {
      opacity: 0;
    }
    .company-logo-grid .no-image {
      color: #9aa0a6;
      font-size: 22px;
      display: none;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
    }
    .company-logo-grid .no-image.is-visible {
      display: flex;
    }
    .company-logo-grid .logo-loader {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .7);
      border-radius: 50%;
      color: #6b7280;
      font-size: 18px;
    }
    .company-logo-grid .logo-circle.is-loading .logo-loader {
      display: flex;
    }
    .company-logo-grid .logo-remove,
    .company-logo-grid .logo-delete {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      cursor: pointer;
    }
    .company-logo-grid .logo-remove {
      border: 1px solid #f0b4b4;
      background: #ffecec;
      color: #b42318;
    }
    .company-logo-grid .logo-delete {
      border: 1px solid #ffd2a8;
      background: #fff3e6;
      color: #b45309;
    }
    .company-logo-grid .logo-delete input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .company-logo-grid .logo-dropzone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 2px dashed #cfd6e0;
      border-radius: 10px;
      padding: 14px;
      text-align: center;
      background: #fafbfc;
      cursor: pointer;
      min-height: 120px;
      width: 100%;
      position: relative;
      user-select: none;
    }
    .company-logo-grid .logo-dropzone * {
      cursor: pointer;
    }
    .company-logo-grid .logo-dropzone i {
      font-size: 22px;
      color: #8892a6;
      margin-bottom: 6px;
    }
    .company-logo-grid .logo-dropzone small {
      display: block;
      color: #8a94a6;
    }
    .company-logo-grid .logo-input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .company-logo-error {
      font-size: .78rem;
      color: var(--crm-danger);
      margin-top: .35rem;
    }
    .company-social-source {
      max-width: 220px;
      width: 100%;
    }
    .company-social-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: .75rem;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      margin-bottom: .75rem;
    }
    .company-social-row .company-social-source-wrap {
      flex: 0 0 220px;
      max-width: 220px;
    }
    .company-social-row .company-social-link-wrap {
      flex: 1 1 auto;
      min-width: 0;
    }
    .company-social-row .company-social-action {
      flex: 0 0 auto;
    }
    .company-social-select {
      min-width: 180px;
      height: 42px;
      background: #f8f9fa;
      border: 1px solid var(--crm-border);
      border-radius: 10px;
      padding: .45rem 2.2rem .45rem 2rem;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236b7280'%3E%3Cpath d='M7.8 8.8a2.4 2.4 0 010-3.4l1.7-1.7a2.4 2.4 0 013.4 3.4l-.9.9'/%3E%3Cpath d='M6.2 5.2a2.4 2.4 0 010 3.4L4.5 10.3a2.4 2.4 0 11-3.4-3.4l.9-.9'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: .6rem 50%, right .7rem 50%;
      background-size: 14px 14px, 12px 12px;
      -webkit-appearance: none;
      appearance: none;
    }
    @media (max-width: 767.98px) {
      .company-fields-grid {
        grid-template-columns: 1fr;
      }
      .company-social-source {
        max-width: 100%;
      }
      .company-social-row {
        flex-wrap: nowrap;
      }
      .company-social-row .company-social-source-wrap {
        flex-basis: 160px;
        max-width: 160px;
      }
    }
  </style>
{% endblock %}

{% block subheader %}
  <div class="company-header">
    <div class="company-header-badge">
      <i class="fa fa-building"></i>
    </div>
    <div>
      <h3 class="company-header-title">Param&egrave;tre de l'entreprise</h3>
      <p class="company-header-subtitle">Coordonn&eacute;es, fiscalit&eacute;, logos et r&eacute;seaux sociaux de la soci&eacute;t&eacute;.</p>
    </div>
  </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
  <div class="row">
    <div class="col-lg-12">
      <div class="contentMargin">
        <div class="m-content">
          <div class="company-shell">
            <div class="m-portlet m-portlet--tab border-0 shadow-none bg-transparent mb-0">
              <div class="m-portlet__body p-0">
                <form class="m-form m-form--fit m-form--label-align-right company-form" name="CompanyForm" id="CompanyForm" action="{{ path('app_company') }}" method="post" enctype="multipart/form-data">
                  <div class="m-portlet__body p-0">
                    <ul class="nav nav-tabs company-tabs mb-3" id="companyTabs" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#tabCompanyInfo" role="tab">
                          <i class="fa fa-store"></i> Entreprise
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#tabCompanySocial" role="tab">
                          <i class="fa fa-share-alt"></i> Social
                        </a>
                      </li>
                    </ul>

                    <div class="tab-content company-tab-content">
                      <div class="tab-pane fade show active" id="tabCompanyInfo" role="tabpanel">
                        <div class="company-fields-grid">
                          <fieldset class="crm-fieldset">
                            <legend class="crm-legend"><i class="fa fa-store me-2"></i> Informations entreprise</legend>
                            <div class="company-field">
                              <label for="name" class="company-field-label">Entreprise</label>
                              <input type="text" name="name" placeholder="Nom de la boutique" id="name" class="form-control m-input" value="{{ company.name }}">
                            </div>
                            <div class="company-field">
                              <label for="region" class="company-field-label">Gouvernorat</label>
                              <select name="region" id="region" class="form-control m-input">
                                <option value="">-- S&eacute;lectionner --</option>
                                {% for reg in regions %}
                                  <option value="{{ reg.name }}" {% if company.region == reg.name %}selected{% endif %}>{{ reg.name }}</option>
                                {% endfor %}
                              </select>
                            </div>
                            <div class="company-field">
                              <label for="address" class="company-field-label">Adresse</label>
                              <input type="text" name="address" placeholder="Adresse" id="address" class="form-control m-input" value="{{ company.address }}">
                            </div>
                            <div class="company-field">
                              <label for="zip" class="company-field-label">Code postal</label>
                              <input type="text" name="zip" placeholder="Code postal" id="zip" class="form-control m-input" value="{{ company.zip }}">
                            </div>
                          </fieldset>

                          <fieldset class="crm-fieldset">
                            <legend class="crm-legend"><i class="fa fa-phone me-2"></i> Contacts</legend>
                            <div class="company-field">
                              <label for="phone" class="company-field-label">T&eacute;l&eacute;phone</label>
                              <input type="text" name="phone" placeholder="Tel." id="phone" class="form-control m-input" value="{{ company.phone }}">
                            </div>
                            <div class="company-field">
                              <label for="mobile" class="company-field-label">T&eacute;l&eacute;phone mobile</label>
                              <input type="text" name="mobile" placeholder="Tel. mobile" id="mobile" class="form-control m-input" value="{{ company.mobile }}">
                            </div>
                            <div class="company-field">
                              <label for="mail" class="company-field-label">E-mail</label>
                              <input type="text" name="mail" placeholder="E-mail" id="mail" class="form-control m-input" value="{{ company.mail }}">
                            </div>
                            <div class="company-field">
                              <label for="website" class="company-field-label">Site web</label>
                              <input type="text" name="website" placeholder="Site web" id="website" class="form-control m-input" value="{{ company.website }}">
                            </div>
                          </fieldset>
                        </div>

                        <div class="company-fields-grid company-fields-grid--single">
                          <fieldset class="crm-fieldset">
                            <legend class="crm-legend"><i class="fa fa-receipt me-2"></i> Configuration fiscale</legend>
                            <div class="company-fields-grid">
                              <div class="company-field">
                                <label for="tva_code" class="company-field-label">Code TVA</label>
                                <input type="text" id="tva_code" name="tva_code" class="form-control m-input" value="{{ company.tvaCode }}">
                              </div>
                              <div class="company-field">
                                <label for="tva_rate_buy_id" class="company-field-label">TVA d'achat (%)</label>
                                <select name="tva_rate_buy_id" id="tva_rate_buy_id" class="form-control m-input select2">
                                  <option value="">-- Aucune --</option>
                                  {% for tva in tvas %}
                                    <option value="{{ tva.id }}" {% if company.tvaRateBuy and company.tvaRateBuy.id == tva.id %}selected{% endif %}>{{ tva.number }} %</option>
                                  {% endfor %}
                                </select>
                              </div>
                              <div class="company-field">
                                <label for="tva_rate_sale_id" class="company-field-label">TVA de vente (%)</label>
                                <select name="tva_rate_sale_id" id="tva_rate_sale_id" class="form-control m-input select2">
                                  <option value="">-- Aucune --</option>
                                  {% for tva in tvas %}
                                    <option value="{{ tva.id }}" {% if company.tvaRateSale and company.tvaRateSale.id == tva.id %}selected{% endif %}>{{ tva.number }} %</option>
                                  {% endfor %}
                                </select>
                              </div>
                            </div>
                          </fieldset>
                        </div>

                        <fieldset class="crm-fieldset">
                          <legend class="crm-legend"><i class="fa fa-image me-2"></i> Logos</legend>
                          <div class="row company-logo-grid">
                            <div class="col-12 col-md-6 mb-3 mb-md-0">
                              <div class="logo-card">
                                <div class="logo-header">
                                  <div class="logo-circle">
                                    <img src="{{ company.logo }}" alt="" id="company_logo_preview" data-original="{{ company.logo }}">
                                    <span class="no-image" id="company_logo_empty" data-bs-toggle="tooltip" title="Aucune image">
                                      <i class="fa fa-image"></i>
                                    </span>
                                    <span class="logo-loader" id="company_logo_loader">
                                      <i class="fa fa-spinner fa-spin"></i>
                                    </span>
                                  </div>
                                  <div class="d-flex align-items-center" style="gap:.4rem;">
                                    <button type="button" class="logo-remove" data-bs-target="company_logo" data-preview="company_logo_preview" title="Annuler le chargement">
                                      <i class="fa fa-undo"></i>
                                    </button>
                                    <label class="logo-delete" title="Supprimer le logo enregistr&eacute;">
                                      <input type="checkbox" name="delete_logo" value="1" data-preview="company_logo_preview" data-empty="company_logo_empty">
                                      <i class="fa fa-trash"></i>
                                    </label>
                                  </div>
                                </div>
                                <div class="logo-dropzone" data-input="company_logo">
                                  <i class="fa fa-cloud-upload-alt"></i>
                                  <div>Logo de l'entreprise</div>
                                  <small>Cliquez pour t&eacute;l&eacute;charger ou glissez-d&eacute;posez</small>
                                  <small>PNG, JPG, WebP (max 200 Ko)</small>
                                </div>
                                <input type="file" id="company_logo" name="logo" class="logo-input" accept="image/*">
                                <div class="company-help">
                                  <i class="fa fa-info-circle"></i>
                                  Taille max 256 px, 200 Ko. L'image est redimensionn&eacute;e si besoin.
                                </div>
                                <div class="company-logo-error" id="company_logo_error"></div>
                              </div>
                            </div>
                            <div class="col-12 col-md-6">
                              <div class="logo-card">
                                <div class="logo-header">
                                  <div class="logo-circle">
                                    <img src="{{ company.footerLogo }}" alt="" id="company_footerLogo_preview" data-original="{{ company.footerLogo }}">
                                    <span class="no-image" id="company_footerLogo_empty" data-bs-toggle="tooltip" title="Aucune image">
                                      <i class="fa fa-image"></i>
                                    </span>
                                    <span class="logo-loader" id="company_footerLogo_loader">
                                      <i class="fa fa-spinner fa-spin"></i>
                                    </span>
                                  </div>
                                  <div class="d-flex align-items-center" style="gap:.4rem;">
                                    <button type="button" class="logo-remove" data-bs-target="company_footerLogo" data-preview="company_footerLogo_preview" title="Annuler le chargement">
                                      <i class="fa fa-undo"></i>
                                    </button>
                                    <label class="logo-delete" title="Supprimer le logo enregistr&eacute;">
                                      <input type="checkbox" name="delete_footer_logo" value="1" data-preview="company_footerLogo_preview" data-empty="company_footerLogo_empty">
                                      <i class="fa fa-trash"></i>
                                    </label>
                                  </div>
                                </div>
                                <div class="logo-dropzone" data-input="company_footerLogo">
                                  <i class="fa fa-cloud-upload-alt"></i>
                                  <div>Signature de l'entreprise</div>
                                  <small>Cliquez pour t&eacute;l&eacute;charger ou glissez-d&eacute;posez</small>
                                  <small>PNG, JPG, WebP (max 200 Ko)</small>
                                </div>
                                <input type="file" id="company_footerLogo" name="footerLogo" class="logo-input" accept="image/*">
                                <div class="company-help">
                                  <i class="fa fa-info-circle"></i>
                                  Taille max 256 px, 200 Ko. L'image est redimensionn&eacute;e si besoin.
                                </div>
                                <div class="company-logo-error" id="company_footerLogo_error"></div>
                              </div>
                            </div>
                          </div>
                        </fieldset>
                      </div>

                      <div class="tab-pane fade" id="tabCompanySocial" role="tabpanel">
                        <fieldset class="crm-fieldset">
                          <legend class="crm-legend"><i class="fa fa-share-alt me-2"></i> Liens sociaux</legend>
                          <div id="companySocialRows">
                            {% set socialCount = 0 %}
                            {% for linkItem in socialLinks %}
                              <div id="companySocialRow_{{ socialCount }}" class="company-social-row">
                                <div class="company-social-source-wrap">
                                  <select name="social_links[{{ socialCount }}][source_id]" class="form-control company-social-select" style="font-size:0.95rem;">
                                    <option value=""></option>
                                    {% for ls in linkSources %}
                                      <option value="{{ ls.id }}" {% if linkItem.source_id is defined and linkItem.source_id == ls.id %}selected{% endif %}>{{ ls.name }}</option>
                                    {% endfor %}
                                  </select>
                                </div>
                                <div class="company-social-link-wrap">
                                  <input type="text" name="social_links[{{ socialCount }}][link]" class="form-control" value="{{ linkItem.link ?? '' }}" placeholder="Lien">
                                </div>
                                <div class="company-social-action">
                                  <button type="button" class="btn btn-outline-danger btn-sm remove-link" title="Supprimer ce lien">
                                    <i class="fa fa-times"></i>
                                  </button>
                                </div>
                              </div>
                              {% set socialCount = socialCount + 1 %}
                            {% endfor %}
                          </div>

                          <div class="col-12 text-center mt-3">
                            <button type="button" class="btn btn-success btn-sm" id="addRowCompanySocial">
                              <i class="fa fa-plus-circle me-1"></i> Ajouter un lien
                            </button>
                          </div>
                        </fieldset>
                      </div>
                    </div>
                  </div>

                  <div class="m-portlet__foot m-portlet__foot--fit bg-transparent border-0 px-0 pb-0">
                    <div class="m-form__actions">
                      <div class="company-actions">
                        <button name="edit_save" id="edit" type="submit" class="btn btn-dark loader-submit-modal">
                          <i class="fa fa-save me-1"></i> Enregistrer
                        </button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    window.COMPANY_LINK_SOURCES = [
      {% for ls in linkSources %}
      {
        id: {{ ls.id }},
        name: '{{ ls.name|e('js') }}'
      }{{ not loop.last ? ',' : '' }}
      {% endfor %}
    ];
    window.COMPANY_SOCIAL_COUNT = {{ socialLinks|length }};
  </script>
  <script>
    (function () {
      var MAX_DIMENSION = 256;
      var MAX_BYTES = 200 * 1024;

      function setError(targetId, message) {
        var node = document.getElementById(targetId);
        if (!node) {
          return;
        }
        node.textContent = message || '';
      }

      function updatePreview(previewId, url) {
        var img = document.getElementById(previewId);
        if (img) {
          img.src = url;
        }
      }

      function setLoading(previewId, isLoading) {
        var img = document.getElementById(previewId);
        if (!img) {
          return;
        }
        var circle = img.closest('.logo-circle');
        if (!circle) {
          return;
        }
        if (isLoading) {
          circle.classList.add('is-loading');
        } else {
          circle.classList.remove('is-loading');
        }
      }

      function resizeImage(file, callback) {
        var img = new Image();
        var url = URL.createObjectURL(file);
        img.onload = function () {
          var width = img.width;
          var height = img.height;
          var scale = Math.min(1, MAX_DIMENSION / Math.max(width, height));
          var targetW = Math.max(1, Math.round(width * scale));
          var targetH = Math.max(1, Math.round(height * scale));
          var canvas = document.createElement('canvas');
          canvas.width = targetW;
          canvas.height = targetH;
          var ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, targetW, targetH);
          var type = file.type && file.type.indexOf('image/') === 0 ? file.type : 'image/png';
          var quality = type === 'image/jpeg' ? 0.85 : undefined;
          canvas.toBlob(function (blob) {
            URL.revokeObjectURL(url);
            callback(blob);
          }, type, quality);
        };
        img.onerror = function () {
          URL.revokeObjectURL(url);
          callback(null);
        };
        img.src = url;
      }

      function handleLogoInput(inputId, previewId, errorId) {
        var input = document.getElementById(inputId);
        if (!input) {
          return;
        }

        input.addEventListener('change', function () {
          setError(errorId, '');
          if (!input.files || !input.files.length) {
            return;
          }

          var file = input.files[0];
          var preview = document.getElementById(previewId);
          var emptyIcon = document.getElementById(previewId + '_empty');
          var deleteCheckbox = document.querySelector('.logo-delete input[data-preview="' + previewId + '"]');

          if (!file.type || file.type.indexOf('image/') !== 0) {
            setError(errorId, 'Fichier non valide. Choisir une image.');
            input.value = '';
            return;
          }

          setLoading(previewId, true);
          resizeImage(file, function (blob) {
            if (!blob) {
              setLoading(previewId, false);
              setError(errorId, 'Impossible de lire l image.');
              return;
            }

            if (blob.size > MAX_BYTES) {
              setError(errorId, 'Image trop lourde apres compression.');
            }

            var newFile = new File([blob], file.name, { type: blob.type });
            var dataTransfer = new DataTransfer();
            dataTransfer.items.add(newFile);
            input.files = dataTransfer.files;

            if (preview) {
              preview.classList.remove('is-hidden');
            }
            if (emptyIcon) {
              emptyIcon.classList.remove('is-visible');
            }
            if (deleteCheckbox) {
              deleteCheckbox.checked = false;
            }

            var objectUrl = URL.createObjectURL(newFile);
            if (preview) {
              preview.onload = function () {
                setLoading(previewId, false);
                preview.onload = null;
                URL.revokeObjectURL(objectUrl);
              };
            }
            updatePreview(previewId, objectUrl);
          });
        });
      }

      handleLogoInput('company_logo', 'company_logo_preview', 'company_logo_error');
      handleLogoInput('company_footerLogo', 'company_footerLogo_preview', 'company_footerLogo_error');

      document.querySelectorAll('.logo-remove').forEach(function (btn) {
        btn.addEventListener('click', function (e) {
          e.preventDefault();
          e.stopPropagation();
          var inputId = btn.getAttribute('data-bs-target');
          var previewId = btn.getAttribute('data-preview');
          var input = document.getElementById(inputId);
          var preview = document.getElementById(previewId);
          if (input) {
            input.value = '';
          }
          if (preview && preview.dataset.original !== undefined) {
            preview.src = preview.dataset.original || '';
          }
          setError(inputId === 'company_logo' ? 'company_logo_error' : 'company_footerLogo_error', '');
        });
      });

      document.querySelectorAll('.logo-dropzone').forEach(function (zone) {
        zone.addEventListener('click', function () {
          var inputId = zone.getAttribute('data-input');
          if (!inputId) {
            return;
          }
          var input = document.getElementById(inputId);
          if (input) {
            input.click();
          }
        });
      });

      document.querySelectorAll('.logo-delete input[type="checkbox"]').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
          var previewId = checkbox.getAttribute('data-preview');
          var preview = document.getElementById(previewId);
          var emptyId = checkbox.getAttribute('data-empty') || '';
          var emptyIcon = emptyId ? document.getElementById(emptyId) : null;
          if (!preview) {
            return;
          }
          if (checkbox.checked) {
            preview.classList.add('is-hidden');
            if (emptyIcon) {
              emptyIcon.classList.add('is-visible');
            }
          } else {
            preview.classList.remove('is-hidden');
            if (emptyIcon) {
              emptyIcon.classList.remove('is-visible');
            }
          }
        });
      });

      function initEmptyPreview(previewId, emptyId) {
        var preview = document.getElementById(previewId);
        var emptyIcon = document.getElementById(emptyId);
        if (!preview || !emptyIcon) {
          return;
        }
        if (!preview.getAttribute('src')) {
          preview.classList.add('is-hidden');
          emptyIcon.classList.add('is-visible');
        }
      }

      initEmptyPreview('company_logo_preview', 'company_logo_empty');
      initEmptyPreview('company_footerLogo_preview', 'company_footerLogo_empty');
    })();
  </script>
{% endblock %}