@extends('layouts.app')

@section('title', 'Editar evento')

@push('head')
<style>
  .thumb-img{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: .5rem;
  }
  .bg-preview{
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
    border: 1px solid rgba(255,255,255,.08);
  }
  .card-surface{ background:#12161d; border:1px solid rgba(255,255,255,.06); }

  /* Caja QR */
  .qr-box{
    background:#0b0e13;
    border-radius:.75rem;
    border:1px solid rgba(255,255,255,.12);
    padding:1rem;
  }
  .qr-box canvas{
    width:100%;
    height:auto;
    max-width:220px;
    display:block;
    margin:0 auto;
  }
</style>
@endpush

@section('content')
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h1 class="h4 m-0">Editar: {{ $event->titulo }}</h1>
    <div class="d-flex gap-2">
      @if (Route::has('events.index'))
        <a href="{{ route('events.index') }}" class="btn btn-outline-light">Mis eventos</a>
      @endif
      @if (Route::has('preview.form'))
        <a href="{{ route('preview.form', $event->slug) }}" target="_blank" class="btn btn-outline-light">Ver preview</a>
      @endif
    </div>
  </div>

  @if (session('ok'))
    <div class="alert alert-success">{{ session('ok') }}</div>
  @endif

  {{-- ===================== FORM PRINCIPAL ===================== --}}
  <div class="card card-surface mb-4 rounded-4">
    <div class="card-body">
      <form method="POST" action="{{ route('events.update', $event) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row g-3">
          <div class="col-md-7">
            <div class="mb-3">
              <label class="form-label">Título</label>
              <input type="text" name="titulo" class="form-control @error('titulo') is-invalid @enderror"
                     value="{{ old('titulo', $event->titulo) }}" required>
              @error('titulo') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            <div class="form-check form-switch mb-2">
              <input class="form-check-input" type="checkbox" role="switch" id="prevEnabled"
                     name="is_preview_enabled" value="1"
                     {{ old('is_preview_enabled', $event->is_preview_enabled) ? 'checked' : '' }}>
              <label class="form-check-label" for="prevEnabled">Habilitar página de preview</label>
            </div>

            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" role="switch" id="guestUpload"
                     name="guest_upload_enabled" value="1"
                     {{ old('guest_upload_enabled', $event->guest_upload_enabled) ? 'checked' : '' }}>
              <label class="form-check-label" for="guestUpload">
                Permitir que invitados autenticados suban imágenes al validar el código
              </label>
            </div>

            <div class="mb-3">
              <label class="form-label">Actualizar código de preview (opcional)</label>
              <input type="password" name="preview_code"
                     class="form-control @error('preview_code') is-invalid @enderror"
                     placeholder="Ej: 123456 (deja vacío para no cambiar)">
              @error('preview_code') <div class="invalid-feedback">{{ $message }}</div> @enderror
              <small class="text-muted">Se guarda en hash.</small>
            </div>

            {{-- URL Preview --}}
            <div class="mb-3">
              <label class="form-label">URL de preview</label>
              <div class="input-group">
                <input type="text" class="form-control"
                       value="{{ route('preview.form', $event->slug) }}" readonly>
                <a target="_blank" href="{{ route('preview.form', $event->slug) }}" class="btn btn-outline-light">Abrir</a>
              </div>
              <small class="text-muted">
                Comparte este enlace; los invitados deberán ingresar el código.
              </small>
            </div>

            {{-- ===================== CÓDIGO QR ===================== --}}
            <div class="mb-3">
              <label class="form-label d-flex align-items-center justify-content-between">
                Código QR de la URL de preview
                <span class="badge text-bg-secondary">Escanéalo</span>
              </label>

              <div class="qr-box text-center" id="qrBox">
                <canvas id="qrPreviewCanvas" width="220" height="220"></canvas>

                <div class="d-flex flex-wrap justify-content-center gap-2 mt-3">
                  <button type="button" id="btnQrWhatsapp" class="btn btn-success btn-sm">
                    Compartir por WhatsApp
                  </button>
                  <button type="button" id="btnQrDownload" class="btn btn-outline-light btn-sm">
                    Descargar QR
                  </button>
                </div>

                <small class="text-muted d-block mt-2">
                  Escanea este código para abrir la página de preview, o compártelo con tus invitados.
                </small>
              </div>
            </div>
            {{-- ===================== FIN CÓDIGO QR ===================== --}}

            <div class="mb-3">
              <label class="form-label">Color de fondo (respaldo)</label><br>
              <input type="color" name="bg_color" class="form-control form-control-color"
                     value="{{ old('bg_color', $event->bg_color ?? '#0b0e13') }}">
            </div>
          </div>

          {{-- Imagen de fondo --}}
          <div class="col-md-5">
            <label class="form-label">Fondo personalizado</label>
            <input type="file" name="bg_image" class="form-control @error('bg_image') is-invalid @enderror"
                   accept="image/*" id="bg_input">
            @error('bg_image') <div class="invalid-feedback">{{ $message }}</div> @enderror

            <div class="mt-3">
              <img id="bg_preview"
                   src="{{ $event->bg_image_path ? asset('storage/'.$event->bg_image_path) : '' }}"
                   class="bg-preview"
                   style="{{ $event->bg_image_path ? '' : 'display:none;' }}">
            </div>

            @if ($event->bg_image_path)
              <div class="mt-2">
                <a class="btn btn-sm btn-outline-light"
                   href="{{ route('events.edit', $event) }}?remove_bg=1"
                   onclick="event.preventDefault(); document.getElementById('remove-bg-form').submit();">
                  Quitar fondo
                </a>
              </div>
            @endif
          </div>
        </div>

        <div class="d-flex gap-2 mt-4">
          <button class="btn btn-primary">Guardar cambios</button>

          <button type="button" class="btn btn-danger"
                  onclick="if(confirm('¿Eliminar evento?')) document.getElementById('delete-event-form').submit();">
            Eliminar evento
          </button>
        </div>

      </form>
    </div>
  </div>

  {{-- Form eliminar fondo --}}
  @if ($event->bg_image_path)
    <form id="remove-bg-form" method="POST" action="{{ route('events.update', $event) }}" class="d-none">
      @csrf @method('PUT')
      <input type="hidden" name="remove_bg" value="1">
      <input type="hidden" name="titulo" value="{{ $event->titulo }}">
      <input type="hidden" name="is_preview_enabled" value="{{ $event->is_preview_enabled }}">
      <input type="hidden" name="guest_upload_enabled" value="{{ $event->guest_upload_enabled }}">
      <input type="hidden" name="bg_color" value="{{ $event->bg_color }}">
    </form>
  @endif

  {{-- Form eliminar evento --}}
  <form id="delete-event-form" method="POST" action="{{ route('events.destroy', $event) }}" class="d-none">
    @csrf @method('DELETE')
  </form>

  {{-- ===================== SUBIR IMÁGENES ===================== --}}
  <div class="card card-surface mb-4 rounded-4">
    <div class="card-body">
      <h3 class="h5 mb-3">Subir imágenes</h3>

      <form method="POST" action="{{ route('events.images.store', $event) }}" enctype="multipart/form-data">
        @csrf
        <input type="file" name="images[]" multiple accept="image/*" class="form-control mb-2" required>
        <button class="btn btn-success">Subir</button>
      </form>

      <small class="text-muted d-block mt-2">
        Los invitados podrán subir desde /p/{{ $event->slug }}.
      </small>
    </div>
  </div>

  {{-- ===================== GALERÍA ===================== --}}
  <div class="card card-surface rounded-4">
    <div class="card-body">
      <h3 class="h5 mb-3">Imágenes del evento</h3>

      @if ($event->images->isEmpty())
        <p class="text-muted mb-0">Aún no hay imágenes.</p>
      @else
        @php $pubUrl = fn($p)=>asset(str_starts_with($p,'storage/')?$p:'storage/'.$p); @endphp

        <div class="row g-3">
          @foreach($event->images->sortBy(['order','id']) as $img)
            <div class="col-6 col-md-4 col-lg-3">
              <div class="border rounded-3 p-2 h-100 d-flex flex-column">
                <img src="{{ $pubUrl($img->path) }}" class="thumb-img mb-2">

                <div class="d-flex justify-content-between align-items-center mt-auto">
                  <small class="text-muted text-truncate me-2">{{ $img->original_name }}</small>

                  <form method="POST"
                        action="{{ route('events.images.destroy', [$event, $img]) }}"
                        onsubmit="return confirm('¿Eliminar esta imagen?')">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-danger">Eliminar</button>
                  </form>
                </div>
              </div>
            </div>
          @endforeach
        </div>

      @endif
    </div>
  </div>

@endsection

@push('scripts')
{{-- LIBRERÍA QR (QRIOUS) --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function () {

    /* === Generar QR === */
    const canvas      = document.getElementById('qrPreviewCanvas');
    const qrBox       = document.getElementById('qrBox');
    const previewUrl  = @json(route('preview.form', $event->slug));
    const eventTitle  = @json($event->titulo);
    const prevEnabled = document.getElementById('prevEnabled');

    const qr = new QRious({
      element: canvas,
      value: previewUrl,
      size: 220,
      level: 'H'
    });

    function toggleOpacity() {
      if (!prevEnabled || !qrBox) return;
      if (!prevEnabled.checked) {
        qrBox.classList.add('opacity-50');
      } else {
        qrBox.classList.remove('opacity-50');
      }
    }

    toggleOpacity();
    prevEnabled?.addEventListener('change', toggleOpacity);

    /* === Botón Compartir por WhatsApp === */
    const btnWhatsapp = document.getElementById('btnQrWhatsapp');
    if (btnWhatsapp) {
      btnWhatsapp.addEventListener('click', function () {
        const text = `Te comparto la galería de fotos del evento "${eventTitle}": ${previewUrl} \n\nUsa el código de acceso que te entregaron para entrar 📸`;
        const url  = 'https://wa.me/?text=' + encodeURIComponent(text);
        window.open(url, '_blank');
      });
    }

    /* === Botón Descargar QR === */
    const btnDownload = document.getElementById('btnQrDownload');
    if (btnDownload && canvas) {
      btnDownload.addEventListener('click', function () {
        try {
          const dataUrl = canvas.toDataURL('image/png');
          const link = document.createElement('a');
          link.href = dataUrl;
          link.download = 'qr-{{ $event->slug }}.png';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } catch (e) {
          console.error('No se pudo descargar el QR:', e);
          alert('No se pudo descargar la imagen del QR. Intenta desde un navegador de escritorio.');
        }
      });
    }

    /* === Vista previa de imagen === */
    document.getElementById('bg_input')?.addEventListener('change', function (e) {
      const [file] = e.target.files || [];
      const prev = document.getElementById('bg_preview');
      if (file) {
        prev.src = URL.createObjectURL(file);
        prev.style.display = 'block';
      }
    });

  });
</script>
@endpush