@extends('layouts.theme_selector')

@section('content')
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-md-9">

        <div class="card glass-card border-0 shadow-lg mb-4">

          <div class="card-header py-3 border-0 d-flex align-items-center"
            style="background: var(--sp-brand-blue) !important;">
            <a href="{{ route('MarketingMenu') }}"
              class="btn btn-sm glass-brand-red rounded-circle me-3 shadow-sm border-0 d-flex align-items-center justify-content-center"
              style="width: 35px; height: 35px;">
              <i class="bi bi-chevron-left text-white"></i>
            </a>
            <i class="bi bi-ticket-perforated text-white fs-5 me-2"></i>
            <h5 class="mb-0 fw-bold tracking-tight shadow-text text-white">Publicidad Cupones</h5>
          </div>

          <div class="card-body p-4 p-md-5">

            @include('layouts.alerts.success')

            @if ($errors->any())
              <div class="alert alert-danger rounded-3 mb-4">
                <ul class="mb-0 ps-3">
                  @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                  @endforeach
                </ul>
              </div>
            @endif

            {{-- ── FORMULARIO DE CARGA ── --}}
            <form action="{{ route('GuardarPublicidadCupon') }}" method="POST"
              enctype="multipart/form-data" id="formCupon">
              @csrf

              {{-- Drop zone --}}
              <div id="dropZone"
                class="border rounded-3 p-5 text-center mb-1 position-relative"
                style="border: 2px dashed var(--bs-border-color, #dee2e6) !important;
                       cursor: pointer; transition: background .2s, border-color .2s;">

                <input type="file"
                  id="imagenes_cupon"
                  name="imagenes_cupon[]"
                  accept=".jpg,.jpeg"
                  multiple
                  class="position-absolute top-0 start-0 w-100 h-100 opacity-0"
                  style="cursor: pointer;">

                <div id="dropContent">
                  <i class="bi bi-cloud-arrow-up fs-1 text-warning mb-2 d-block"></i>
                  <p class="fw-semibold mb-1 theme-content-title">
                    Hacé clic o arrastrá las imágenes aquí
                  </p>
                  <p class="small text-muted mb-0">
                    <i class="bi bi-exclamation-circle me-1 text-warning"></i>
                    <strong>Solo se aceptan archivos JPG.</strong>
                    Se recomienda una resolución de
                    <strong>300 × 270 px</strong> (relación ≈ 1,1 : 1).
                    Podés subir varios archivos a la vez.
                  </p>
                </div>
              </div>

              {{-- Previews de los archivos seleccionados --}}
              <div id="previewGrid" class="row g-2 mb-3 mt-2"></div>

              <div class="d-flex justify-content-end">
                <button type="submit" id="btnSubir"
                  class="btn btn-warning fw-semibold px-5" disabled>
                  <i class="bi bi-upload me-2"></i>
                  <span id="btnLabel">Cargar imágenes</span>
                </button>
              </div>
            </form>

            {{-- ── GALERÍA ACTUAL ── --}}
            @if (count($imagenes) > 0)
              <hr class="my-4 opacity-25">
              <h6 class="fw-bold theme-content-title mb-3">
                <i class="bi bi-images me-2 text-warning"></i>
                Imágenes actualmente en promo-cupones
                <span class="badge bg-warning text-dark ms-2">{{ count($imagenes) }}</span>
              </h6>
              <div class="row g-3">
                @foreach ($imagenes as $img)
                  <div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 shadow-sm h-100 position-relative" style="overflow:hidden;">

                      {{-- Botón eliminar --}}
                      <form action="{{ route('EliminarPublicidadCupon', $img['nombre']) }}"
                        method="POST"
                        class="form-eliminar-cupon position-absolute top-0 end-0 m-1"
                        style="z-index:2;">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                          class="btn btn-sm btn-danger p-0 rounded-circle d-flex align-items-center justify-content-center shadow"
                          style="width:26px;height:26px;"
                          title="Eliminar {{ $img['nombre'] }}">
                          <i class="bi bi-trash3" style="font-size:.7rem;"></i>
                        </button>
                      </form>

                      <img src="{{ $img['url'] }}"
                        alt="{{ $img['nombre'] }}"
                        class="card-img-top"
                        style="height:120px; object-fit:cover;">
                      <div class="card-body p-2 text-center">
                        <p class="small fw-semibold mb-0 text-truncate" title="{{ $img['nombre'] }}">
                          {{ $img['nombre'] }}
                        </p>
                        <p class="x-small text-muted mb-0">{{ $img['size'] }} KB</p>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>

            @else
              <div class="text-center text-muted small mt-3">
                <i class="bi bi-inbox fs-4 d-block mb-1"></i>
                Todavía no hay imágenes cargadas en la carpeta.
              </div>
            @endif

          </div>{{-- /card-body --}}
        </div>{{-- /card --}}

      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
(function () {
  const input       = document.getElementById('imagenes_cupon');
  const dropZone    = document.getElementById('dropZone');
  const previewGrid = document.getElementById('previewGrid');
  const btnSubir    = document.getElementById('btnSubir');
  const btnLabel    = document.getElementById('btnLabel');

  // Mantiene el DataTransfer acumulado para poder agregar/quitar archivos
  let dt = new DataTransfer();

  function isJpg(file) {
    const ext = file.name.split('.').pop().toLowerCase();
    return ext === 'jpg' || ext === 'jpeg';
  }

  function addFiles(files) {
    let rechazados = 0;
    Array.from(files).forEach(file => {
      if (!isJpg(file)) { rechazados++; return; }
      dt.items.add(file);
    });

    if (rechazados > 0) {
      alert('⚠️ ' + rechazados + ' archivo(s) ignorado(s): solo se aceptan JPG.');
    }

    input.files = dt.files;
    renderPreviews();
    updateBtn();
  }

  function renderPreviews() {
    previewGrid.innerHTML = '';
    Array.from(dt.files).forEach((file, idx) => {
      const reader = new FileReader();
      reader.onload = function (e) {
        const col = document.createElement('div');
        col.className = 'col-6 col-md-4 col-lg-3';
        col.innerHTML = `
          <div class="card border-0 shadow-sm h-100 position-relative" style="overflow:hidden;">
            <button type="button"
              class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1 p-0 rounded-circle d-flex align-items-center justify-content-center"
              style="width:22px;height:22px;z-index:2;"
              data-idx="${idx}" title="Quitar">
              <i class="bi bi-x" style="font-size:.75rem;"></i>
            </button>
            <img src="${e.target.result}"
              alt="${file.name}"
              style="height:100px;object-fit:cover;">
            <div class="card-body p-2 text-center">
              <p class="small fw-semibold mb-0 text-truncate" title="${file.name}">${file.name}</p>
              <p class="x-small text-muted mb-0">${(file.size/1024).toFixed(1)} KB</p>
            </div>
          </div>`;

        // Quitar archivo individual
        col.querySelector('button[data-idx]').addEventListener('click', function () {
          const i = parseInt(this.dataset.idx);
          const newDt = new DataTransfer();
          Array.from(dt.files).forEach((f, j) => { if (j !== i) newDt.items.add(f); });
          dt = newDt;
          input.files = dt.files;
          renderPreviews();
          updateBtn();
        });

        previewGrid.appendChild(col);
      };
      reader.readAsDataURL(file);
    });
  }

  function updateBtn() {
    const n = dt.files.length;
    btnSubir.disabled = n === 0;
    btnLabel.textContent = n === 0
      ? 'Cargar imágenes'
      : (n === 1 ? 'Cargar 1 imagen' : 'Cargar ' + n + ' imágenes');
  }

  // ── Eventos ──
  input.addEventListener('change', function () {
    addFiles(this.files);
  });

  dropZone.addEventListener('dragover', function (e) {
    e.preventDefault();
    this.style.background    = 'rgba(255,193,7,.08)';
    this.style.borderColor   = '#ffc107';
  });
  dropZone.addEventListener('dragleave', function () {
    this.style.background  = '';
    this.style.borderColor = '';
  });
  dropZone.addEventListener('drop', function (e) {
    e.preventDefault();
    this.style.background  = '';
    this.style.borderColor = '';
    addFiles(e.dataTransfer.files);
  });
})();

// Confirmación antes de eliminar
document.querySelectorAll('.form-eliminar-cupon').forEach(function (form) {
  form.addEventListener('submit', function (e) {
    const nombre = form.querySelector('button[title]').title.replace('Eliminar ', '');
    if (!confirm('¿Confirmás que querés eliminar «' + nombre + '»?\nEsta acción no se puede deshacer.')) {
      e.preventDefault();
    }
  });
});

</script>
@endpush