{# Modal suppression d'images PACK #}
<style>
  .delete-images-modal .modal-content {
    border-radius: 12px;
    overflow: hidden;
  }

  .delete-images-modal .modal-header,
  .delete-images-modal .modal-footer {
    background: #fff;
    border-color: #e5e7eb;
  }

  .delete-images-modal .modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
  }

  .delete-images-modal .modal-body {
    background: #f8fafc;
    padding: .75rem .85rem;
    max-height: 72vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .delete-images-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
  }

  .delete-images-filters,
  .delete-images-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .delete-pill {
    border: 1px solid #d7dce3;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    font-size: .74rem;
    padding: .2rem .55rem;
    cursor: pointer;
    line-height: 1.2;
  }

  .delete-pill.active {
    background: #0b3ea8;
    border-color: #0b3ea8;
    color: #fff;
  }

  .delete-note {
    font-size: .78rem;
    border: 1px solid #fee2e2;
    background: #fff1f2;
    color: #9f1239;
    border-radius: 8px;
    padding: .4rem .55rem;
    margin-bottom: .55rem;
  }

  .delete-counter {
    font-size: .78rem;
    border: 1px solid #d7dce3;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: .2rem .55rem;
    white-space: nowrap;
  }

  .delete-images-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: .55rem;
  }

  .delete-images-modal .image_picker_selector {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    justify-content: flex-start;
  }

  .delete-images-modal .image_picker_selector li {
    position: relative;
    width: 82px !important;
    height: 110px !important;
    margin: 0 !important;
    list-style: none;
    border-radius: 3px;
  }

  .delete-images-modal .image_picker_selector li .thumbnail {
    width: 82px !important;
    height: 110px !important;
    border-radius: 3px !important;
    border: 1px solid #dbe3ea !important;
    background: #fff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px;
  }

  .delete-images-modal .image_picker_selector li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 3px !important;
    background: #fff;
  }

  .delete-images-modal .image_picker_selector li.selected .thumbnail,
  .delete-images-modal .image_picker_selector li .thumbnail.selected {
    border: 2px solid #7f1d1d !important;
    box-shadow: 0 0 0 3px rgba(127, 29, 29, .25) !important;
    filter: brightness(.9) contrast(1.06);
  }

  .delete-images-modal .image_picker_selector li.selected::after {
    content: "\f00d";
    font-family: "FontAwesome";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: #7f1d1d;
    border-radius: 50%;
    z-index: 5;
    pointer-events: none;
  }

  .delete-flag {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    font-size: 10px;
    background: rgba(245, 158, 11, .95);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    z-index: 4;
    pointer-events: none;
  }

  @media (max-width: 767.98px) {
    .delete-images-modal .image_picker_selector li {
      width: 72px !important;
      height: 96px !important;
    }

    .delete-images-modal .image_picker_selector li .thumbnail {
      width: 72px !important;
      height: 96px !important;
    }

    .delete-images-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
  }
</style>

<form name="images_delete"
      method="post"
      action="{{ path('pack_images_delete', { id: pack.id }) }}"
      class="delete-images-modal js-pack-delete-images-form">

  <div class="modal-header py-2 d-flex align-items-center justify-content-between">
    <h5 class="modal-title d-flex align-items-center mb-0">
      <i class="fa fa-trash me-2 text-danger"></i>
      Supprimer des images
    </h5>
    <div class="d-flex align-items-center gap-2">
      <i class="fa fa-info-circle text-info"
         data-bs-toggle="tooltip"
         data-bs-placement="left"
         title="Sélectionnez les images à  supprimer définitivement."></i>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
    </div>
  </div>

  <div class="modal-body">
    <div class="delete-note">
      <strong>Attention :</strong> la suppression est définitive.
    </div>

    {% if pack.picture|length > 0 %}
      <div class="delete-images-toolbar">
        <div class="delete-images-filters">
          <button type="button" class="delete-pill active" data-filter="all">Toutes</button>
          <button type="button" class="delete-pill" data-filter="main">Principale</button>
          <button type="button" class="delete-pill" data-filter="other">Autres</button>
        </div>

        <div class="delete-images-actions">
          <span id="deleteSelectedCount" class="delete-counter">0 sélectionnée</span>
          <button type="button" class="delete-pill" id="btnSelectAllDelete">Tout sélectionner</button>
          <button type="button" class="delete-pill" id="btnClearAllDelete">Tout désélectionner</button>
        </div>
      </div>

      <div class="delete-images-wrap">
        <select name="image_ids[]"
                multiple="multiple"
                class="image-picker show-html w-100 delete-images-picker"
                id="delete_images_picker">
          <option value=""></option>
          {% for item in pack.picture %}
            <option
              value="{{ item.id }}"
              data-img-src="{{ app.request.getSchemeAndHttpHost() }}{{ vich_uploader_asset(item, 'file') }}"
              data-is-main-pack="{{ item.isSelected ? '1' : '0' }}">
              Image {{ item.id }}
            </option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <div class="d-flex align-items-center justify-content-center" style="min-height: 120px;">
        <div class="alert alert-warning mb-0 text-center">
          Aucune image n'est disponible pour ce pack.
        </div>
      </div>
    {% endif %}
  </div>

  <div class="modal-footer d-flex justify-content-center gap-3">
    <input type="hidden" name="_token" value="{{ csrf_token('pack_delete_images_' ~ pack.id) }}">
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
    {% if pack.picture|length > 0 %}
      <button type="submit" name="images_delete[save]" class="btn btn-dark loader-submit-modal" id="confirmDeleteImagesBtn" disabled>
        Confirmer
      </button>

    {% endif %}
  </div>
</form>

<script>
(function () {
  var $scope = $('#modal_content');
  var $picker = $scope.find('#delete_images_picker');
  if (!$picker.length) return;

  if ($.fn.imagepicker && !$picker.data('picker-initialized')) {
    $picker.imagepicker({ show_label: false });
    $picker.data('picker-initialized', true);
  }

  function countSelected() {
    var raw = $picker.val();
    var values = Array.isArray(raw) ? raw : (raw ? [raw] : []);
    values = values.filter(function (v) { return v !== ''; });
    $('#deleteSelectedCount').text(values.length + (values.length > 1 ? ' sélectionnées' : ' sélectionnée'));
    var $confirmBtn = $scope.find('#confirmDeleteImagesBtn');
    if ($confirmBtn.length) {
      $confirmBtn.prop('disabled', values.length === 0);
    }
  }

  function decorateBadges() {
    var srcToMain = {};
    $picker.find('option').each(function () {
      var $opt = $(this);
      var src = ($opt.attr('data-img-src') || '').split('?')[0];
      if (!src) return;
      srcToMain[src] = String($opt.attr('data-is-main-pack') || '0') === '1';
    });

    $scope.find('.image_picker_selector li').each(function () {
      var $li = $(this);
      var src = (($li.find('img').attr('src')) || '').split('?')[0];
      var isMain = !!srcToMain[src];

      $li.find('.delete-flag').remove();
      if (isMain) {
        $li.append('<span class="delete-flag" title="Image principale"><i class="fa fa-star"></i></span>');
      }
    });
  }

  function applyFilter(mode) {
    var srcToMain = {};
    $picker.find('option').each(function () {
      var $opt = $(this);
      var src = ($opt.attr('data-img-src') || '').split('?')[0];
      if (!src) return;
      srcToMain[src] = String($opt.attr('data-is-main-pack') || '0') === '1';
    });

    $scope.find('.image_picker_selector li').each(function () {
      var $li = $(this);
      var src = (($li.find('img').attr('src')) || '').split('?')[0];
      var isMain = !!srcToMain[src];
      var show = true;

      if (mode === 'main') show = isMain;
      if (mode === 'other') show = !isMain;

      $li.toggle(show);
    });
  }

  $scope.off('click.packDeleteFilter', '.delete-pill[data-filter]').on('click.packDeleteFilter', '.delete-pill[data-filter]', function () {
    $scope.find('.delete-pill[data-filter]').removeClass('active');
    $(this).addClass('active');
    applyFilter($(this).data('filter'));
  });

  $scope.off('click.packSelectAll', '#btnSelectAllDelete').on('click.packSelectAll', '#btnSelectAllDelete', function () {
    $picker.find('option[value!=""]').prop('selected', true);
    $picker.trigger('change');
  });

  $scope.off('click.packClearAll', '#btnClearAllDelete').on('click.packClearAll', '#btnClearAllDelete', function () {
    $picker.find('option').prop('selected', false);
    $picker.trigger('change');
  });

  $picker.off('change.packDelete').on('change.packDelete', function () {
    countSelected();
    decorateBadges();
  });

  function refreshPackImagesTab() {
    return $.get(window.location.href, function (html) {
      var $html = $('<div>').html(html);
      var $newTab = $html.find('#pack_images').first();
      var $newMainBlock = $html.find('#packMainImageBlock').first();

      if ($newTab.length) {
        $('#pack_images').html($newTab.html());
      }
      if ($newMainBlock.length) {
        $('#packMainImageBlock').html($newMainBlock.html());
      }
      if (typeof initTooltips === 'function') {
        initTooltips(document);
      }
    });
  }

  $scope.off('submit.packDeleteForm', 'form.js-pack-delete-images-form').on('submit.packDeleteForm', 'form.js-pack-delete-images-form', function (e) {
    e.preventDefault();

    var selected = ($picker.val() || []).filter(function (v) { return v !== ''; });
    if (!selected.length) {
      Swal.fire('Aucune image sélectionnée', 'Sélectionnez au moins une image à supprimer.', 'warning');
      return false;
    }

    var $form = $(this);
    var $submit = $scope.find('#confirmDeleteImagesBtn');

    Swal.fire({
      title: 'Supprimer ces images ?',
      text: 'Cette suppression est définitive.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Oui, supprimer',
      cancelButtonText: 'Annuler',
      reverseButtons: true
    }).then(function (result) {
      if (!result.isConfirmed) {
        return;
      }

      $submit.prop('disabled', true);

      $.ajax({
        url: $form.attr('action'),
        type: 'POST',
        data: $form.serialize(),
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      })
        .done(function (response) {
          refreshPackImagesTab().always(function () {
            var modalEl = document.getElementById('m_modal_ajax');
            if (window.bootstrap && modalEl) {
              var modal = bootstrap.Modal.getInstance(modalEl) || bootstrap.Modal.getOrCreateInstance(modalEl);
              modal.hide();
            } else {
              $('#m_modal_ajax').modal('hide');
            }
            Swal.fire('Supprimées', (response && response.message) || 'Images supprimées avec succès.', 'success');
          });
        })
        .fail(function (xhr) {
          var message = 'Erreur lors de la suppression.';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            message = xhr.responseJSON.message;
          }
          Swal.fire('Erreur', message, 'error');
        })
        .always(function () {
          $submit.prop('disabled', false);
        });
    });

    return false;
  });

  setTimeout(function () {
    countSelected();
    decorateBadges();
    applyFilter('all');
  }, 80);
})();
</script>