@php
  /** @var \App\Models\Comercio|null $comercio */
  $comercio = $comercio ?? null;
@endphp

<form action="{{ $action }}" method="post" enctype="multipart/form-data" class="card p-3 shadow-sm">
  @csrf
  @if(($method ?? '') === 'PUT') @method('PUT') @endif

  {{-- Errores --}}
  @if ($errors->any())
    <div class="alert alert-danger">
      <strong>Corrige los siguientes errores:</strong>
      <ul class="mb-0">
        @foreach ($errors->all() as $e)
          <li>{{ $e }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="row g-3">
    <div class="col-md-6">
      <label class="form-label">Nombre *</label>
      <input type="text" name="nombre" class="form-control" required
             value="{{ old('nombre', $comercio->nombre ?? '') }}">
    </div>

    <div class="col-md-6">
      <label class="form-label">Email</label>
      <input type="email" name="email" class="form-control"
             value="{{ old('email', $comercio->email ?? '') }}">
    </div>

    <div class="col-md-6">
      <label class="form-label">Teléfono</label>
      <input type="text" name="telefono" class="form-control"
             value="{{ old('telefono', $comercio->telefono ?? '') }}">
    </div>

    <div class="col-md-6">
      <label class="form-label">Dirección *</label>
      <input type="text" name="direccion" class="form-control" required
             value="{{ old('direccion', $comercio->direccion ?? '') }}">
    </div>

    <div class="col-md-6">
      <label class="form-label">Ciudad</label>
      <input type="text" name="ciudad" class="form-control"
             value="{{ old('ciudad', $comercio->ciudad ?? '') }}">
    </div>

    <div class="col-md-6">
      <label class="form-label">Región</label>
      <input type="text" name="region" class="form-control"
             value="{{ old('region', $comercio->region ?? '') }}">
    </div>

    {{-- Imagen principal --}}
    <div class="col-md-6">
      <label class="form-label">Imagen principal</label>
      <input type="file" name="imagen" class="form-control" accept="image/*" id="imagenPrincipalInput">
      <small class="text-muted">Formatos: jpg, jpeg, png, webp. Máx 4MB.</small>

      {{-- Preview nueva --}}
      <img id="previewPrincipal" alt="Previsualización imagen principal"
           class="img-fluid mt-2 rounded d-none" style="max-height:160px">

      {{-- Actual --}}
      @if(isset($comercio) && $comercio->imagen_url)
        <div class="mt-2">
          <div class="small text-muted">Imagen actual:</div>
          <img src="{{ $comercio->imagen_url }}" alt="Imagen principal actual" class="img-fluid rounded" style="max-height:160px">
        </div>
      @endif
    </div>

    {{-- Galería (nuevas) --}}
    <div class="col-md-6">
      <label class="form-label">Galería (1 o más imágenes)</label>
      <input type="file" name="galeria[]" class="form-control" accept="image/*" multiple id="galeriaInput">
      <small class="text-muted">Puedes seleccionar múltiples archivos.</small>

      {{-- Previews nuevas --}}
      <div id="previewsGaleria" class="d-flex flex-wrap gap-2 mt-2"></div>
    </div>

    {{-- Galería existente (eliminar) --}}
    @if(isset($comercio) && $comercio->imagenes->count())
      <div class="col-12">
        <label class="form-label">Imágenes existentes (marca para eliminar)</label>
        <div class="d-flex flex-wrap gap-3">
          @foreach($comercio->imagenes as $img)
            <label class="border rounded p-2 text-center" style="width: 150px;">
              <img src="{{ $img->url }}" alt="Imagen existente" class="img-fluid mb-2" style="height:100px;object-fit:cover;width:100%;">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="eliminar_imagenes[]" value="{{ $img->id }}" id="img{{ $img->id }}">
                <label class="form-check-label small" for="img{{ $img->id }}">Eliminar</label>
              </div>
            </label>
          @endforeach
        </div>
      </div>
    @endif

    <div class="col-12 d-flex gap-2">
      <button class="btn btn-primary" type="submit">{{ ($method ?? '') === 'PUT' ? 'Actualizar' : 'Crear' }}</button>
      <a href="{{ route('admin.comercios.index') }}" class="btn btn-outline-secondary">Volver</a>
    </div>
  </div>
</form>

@push('scripts')
<script>
  // Preview imagen principal
  const inputPrincipal = document.getElementById('imagenPrincipalInput');
  const previewPrincipal = document.getElementById('previewPrincipal');
  if (inputPrincipal) {
    inputPrincipal.addEventListener('change', (e) => {
      const [file] = e.target.files || [];
      if (!file) { previewPrincipal.classList.add('d-none'); return; }
      const url = URL.createObjectURL(file);
      previewPrincipal.src = url;
      previewPrincipal.classList.remove('d-none');
    });
  }

  // Previews galería
  const galeriaInput = document.getElementById('galeriaInput');
  const previewsGaleria = document.getElementById('previewsGaleria');
  if (galeriaInput) {
    galeriaInput.addEventListener('change', (e) => {
      previewsGaleria.innerHTML = '';
      const files = Array.from(e.target.files || []);
      files.forEach((f) => {
        const url = URL.createObjectURL(f);
        const wrapper = document.createElement('div');
        wrapper.className = 'border rounded p-1';
        wrapper.style.width = '120px';
        wrapper.innerHTML = `<img src=\"${url}\" alt=\"preview\" class=\"img-fluid\" style=\"height:90px;object-fit:cover;width:100%\">`;
        previewsGaleria.appendChild(wrapper);
      });
    });
  }
</script>
@endpush