@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">Descripción</label>
      <textarea name="descripcion" class="form-control" rows="4" required>{{ old('descripcion', $comercio->descripcion ?? '') }}</textarea>
    </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" required
             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>

    {{-- Región / Ciudad (selects dependientes) --}}
    <div class="col-md-6">
      <label class="form-label">Región *</label>
      @php
        $regiones = [
          'Arica y Parinacota',
          'Tarapacá',
          'Antofagasta',
          'Atacama',
          'Coquimbo',
          'Valparaíso',
          'Metropolitana de Santiago',
          "Libertador General Bernardo O'Higgins",
          'Maule',
          'Ñuble',
          'Biobío',
          'La Araucanía',
          'Los Ríos',
          'Los Lagos',
          'Aysén del General Carlos Ibáñez del Campo',
          'Magallanes y de la Antártica Chilena',
        ];
        $regionSeleccionada = old('region', $comercio->region ?? '');
      @endphp
      <select name="region" id="regionSelect" class="form-control" required>
        <option value="">Seleccione una región</option>
        @foreach($regiones as $region)
          <option value="{{ $region }}" {{ $regionSeleccionada === $region ? 'selected' : '' }}>
            {{ $region }}
          </option>
        @endforeach
      </select>
    </div>

    <div class="col-md-6">
      <label class="form-label">Ciudad *</label>
      <select name="ciudad" id="ciudadSelect" class="form-control" required>
        <option value="">Seleccione una ciudad</option>
        {{-- Se poblará por JS según la región --}}
      </select>
    </div>

    {{-- Imagen principal --}}
    <div class="col-md-6">
      <label class="form-label">Imagen principal {{ (($method ?? '') === 'PUT') ? '' : '*' }}</label>
      <input type="file" name="imagen" class="form-control" accept="image/*" id="imagenPrincipalInput" {{ (($method ?? '') === 'PUT') ? '' : 'required' }}>
      <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 ?? null))
        <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>
  // ======= Mapa Región -> Ciudades (sin comunas) =======
  const regionesCiudades = {
    'Arica y Parinacota': ['Arica','Putre','General Lagos','Camarones'],
    'Tarapacá': ['Iquique','Alto Hospicio','Pozo Almonte','Huara','Camiña','Colchane','Pica'],
    'Antofagasta': ['Antofagasta','Calama','Tocopilla','Mejillones','Sierra Gorda','María Elena','Taltal'],
    'Atacama': ['Copiapó','Vallenar','Caldera','Chañaral','Tierra Amarilla','Huasco','Diego de Almagro','Freirina'],
    'Coquimbo': ['La Serena','Coquimbo','Ovalle','Illapel','Vicuña','Andacollo','Combarbalá','Monte Patria','Punitaqui','Los Vilos','Paihuano','Río Hurtado','Salamanca'],
    'Valparaíso': ['Valparaíso','Viña del Mar','Quilpué','Villa Alemana','Quillota','San Antonio','Los Andes','La Calera','San Felipe','Limache','Concón','Quintero','Casablanca'],
    'Metropolitana de Santiago': ['Santiago','Puente Alto','Maipú','La Florida','Las Condes','Providencia','Ñuñoa','La Reina','Vitacura','Lo Barnechea','San Bernardo','Pudahuel','Quilicura','Peñalolén','Macul','Recoleta','Independencia'],
    "Libertador General Bernardo O'Higgins": ['Rancagua','San Fernando','Rengo','Machalí','Graneros','Santa Cruz','Peumo','San Vicente','Pichilemu'],
    'Maule': ['Talca','Curicó','Linares','Cauquenes','Constitución','Maule','Parral','San Javier','Molina','Teno'],
    'Ñuble': ['Chillán','Chillán Viejo','San Carlos','Bulnes','Quirihue','Coihueco','Yungay'],
    'Biobío': ['Concepción','Talcahuano','Hualpén','Chiguayante','San Pedro de la Paz','Los Ángeles','Coronel','Lota','Tomé','Cabrero','Arauco'],
    'La Araucanía': ['Temuco','Padre Las Casas','Angol','Villarrica','Pucón','Lautaro','Nueva Imperial','Victoria','Gorbea','Traiguén'],
    'Los Ríos': ['Valdivia','La Unión','Río Bueno','Panguipulli','Paillaco','Lanco','Futrono','Mariquina'],
    'Los Lagos': ['Puerto Montt','Puerto Varas','Osorno','Castro','Ancud','Quellón','Frutillar','Llanquihue','Calbuco'],
    'Aysén del General Carlos Ibáñez del Campo': ['Coyhaique','Puerto Aysén','Chile Chico','Cochrane','Puerto Cisnes'],
    'Magallanes y de la Antártica Chilena': ['Punta Arenas','Puerto Natales','Porvenir','Cabo de Hornos (Puerto Williams)'],
  };

  const regionSelect = document.getElementById('regionSelect');
  const ciudadSelect = document.getElementById('ciudadSelect');
  const ciudadPrevia = @json(old('ciudad', $comercio->ciudad ?? ''));

  function poblarCiudades(region, ciudadSeleccionada = '') {
    ciudadSelect.innerHTML = '<option value="">Seleccione una ciudad</option>';
    if (!region || !regionesCiudades[region]) {
      ciudadSelect.disabled = true;
      return;
    }

    regionesCiudades[region].forEach(ci => {
      const opt = document.createElement('option');
      opt.value = ci;
      opt.textContent = ci;
      if (ci === ciudadSeleccionada) opt.selected = true;
      ciudadSelect.appendChild(opt);
    });

    ciudadSelect.disabled = false;
  }

  // Inicializar al cargar (edición/old)
  if (regionSelect) {
    poblarCiudades(regionSelect.value, ciudadPrevia);
    regionSelect.addEventListener('change', (e) => poblarCiudades(e.target.value, ''));
  }

  // ======= Previews de imágenes =======
  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');
    });
  }

  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