@extends('layouts.app')

@section('content')
    <div class="container my-4">
        <div class="row">

            <aside class="col-md-3 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        Filtros
                    </div>
                    <div class="card-body">
                        <h6 class="fw-bold">Categorías</h6>
                        <ul class="list-unstyled">
                            <li><a href="#" class="text-decoration-none">Ropa</a></li>
                            <li><a href="#" class="text-decoration-none">Electrónica</a></li>
                            <li><a href="#" class="text-decoration-none">Hogar</a></li>
                            <li><a href="#" class="text-decoration-none">Deportes</a></li>
                        </ul>
                        <hr>
                        <h6 class="fw-bold">Ordenar por</h6>
                        <select class="form-select form-select-sm">
                            <option>Más recientes</option>
                            <option>Mejor calificación</option>
                            <option>Más productos</option>
                        </select>
                    </div>
                </div>
            </aside>
            <main class="col-md-9">
                <h2 class="mb-4">Tiendas disponibles</h2>

                <div class="row g-4">
                    @foreach ($vendors as $vendor)
                        <div class="col-md-4">
                            <div class="card h-100 shadow-sm border-0">
                                <div class="card-body text-center">
                                    <a href="{{ Route('vendorDetails', $vendor->slug) }}">
                                        <img src="{{ Asset('uploads/vendors/' . $vendor->vendor_image) }}"
                                            class="rounded-circle mb-3 border p-1 shadow-sm w-50" alt="Logo">
                                    </a>
                                    <h5 class="card-title mb-1">{{ $vendor->display_name }}</h5>
                                    <p class="text-muted small">{{ $vendor->address->city }}</p>

                                    <p class="small text-muted">+{{ $vendor->products->count() }} productos</p>

                                    <a href="{{ Route('vendorDetails', $vendor->slug) }}"
                                        class="btn btn-outline-primary btn-sm">
                                        Ver tienda
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </main>
        </div>
    </div>
@endsection