@extends('layouts.app')

@section('custom_style')
    <style>
        .card {
            width: 320px;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .card-img-top {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .card-body {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 10px;
            height: 33%;
        }
    </style>
@endsection

@section('content')
    <div class="container mt-4">
        <h2 class="mb-4 text-center custom-text-color">{{ $title }}</h2>
        <div class="row">
            @forelse ($brands as $brand)
                <div class="col-sm-12 col-lg-3 mb-4">
                    <div class="card mx-auto">
                        <a href="{{ Route('brands', $brand->slug) }}">
                            <img src="{{ Asset('uploads/brands/' . $brand->image_logo) }}" class="card-img-top p-3"
                                alt="Error al cargar las iamgen de la marca">
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">{{ $brand->display_name }}</h5>
                            <p class="card-text">Presiona para ver los productos de esta marca</p>
                        </div>
                    </div>
                </div>
            @empty
                <h3 class="text-danger text-center mb-5">No hay productos disponibles</h3>
            @endforelse
        </div>
    </div>
@endsection