@extends('layouts.comercio')
@section('title','Mi comercio')
@section('content')

<div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-3">
  <h1 class="h3 mb-0">Comercios</h1>

  {{-- Mostrar el botón solo si el usuario tiene 0 comercios --}}
  @if($comercios->count() === 0)
    <a href="{{ route('comercios.create') }}" class="btn btn-primary">Nuevo comercio</a>
  @endif
</div>

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

<form method="get" class="row g-2 align-items-end mb-3">
  <div class="col-md-4">
    <label class="form-label">Buscar por nombre</label>
    <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="Ej. Veterinaria...">
  </div>
  <div class="col-md-3">
    <label class="form-label">Ciudad</label>
    <input type="text" name="ciudad" value="{{ request('ciudad') }}" class="form-control">
  </div>
  <div class="col-md-3">
    <label class="form-label">Región</label>
    <input type="text" name="region" value="{{ request('region') }}" class="form-control">
  </div>
  <div class="col-md-2 d-grid">
    <button class="btn btn-outline-secondary">Filtrar</button>
  </div>
</form>

<div class="row g-3">
  @forelse($comercios as $c)
    <div class="col-md-4">
      <div class="card h-100 shadow-sm">
        @if($c->imagen)
          <img src="{{ asset($c->imagen) }}" class="card-img-top" alt="Imagen principal de {{ $c->nombre }}" style="object-fit:cover;height:200px">
        @endif
        <div class="card-body">
          <h2 class="h5 mb-1">{{ $c->nombre }}</h2>
          <div class="small text-muted mb-2">{{ $c->ciudad }}{{ $c->ciudad && $c->region ? ', ' : '' }}{{ $c->region }}</div>
          <div class="small"><i class="bi bi-geo-alt"></i> {{ $c->direccion }}</div>
          @if($c->telefono)
            <div class="small"><i class="bi bi-telephone"></i> {{ $c->telefono }}</div>
          @endif
          @if($c->email)
            <div class="small"><i class="bi bi-envelope"></i> {{ $c->email }}</div>
          @endif
        </div>
        <div class="card-footer d-flex gap-2">
          <a class="btn btn-sm btn-outline-primary" href="{{ route('comercios.edit',$c) }}">Editar</a>
          <form method="post" action="{{ route('comercios.destroy',$c) }}" onsubmit="return confirm('¿Eliminar comercio?')" class="ms-auto">
            @csrf @method('DELETE')
            <button class="btn btn-sm btn-outline-danger">Eliminar</button>
          </form>
        </div>
      </div>
    </div>
  @empty
    <div class="col-12">
      <div class="alert alert-info">No hay comercios registrados.</div>
    </div>
  @endforelse
</div>

<div class="mt-3">
  {{ $comercios->withQueryString()->links() }}
</div>
@endsection