@extends('web.layouts.app')

@section('title', 'العلامات التجارية')
@section('page_heading', 'العلامات التجارية')

@section('content')
    <div class="content">
        <div class="index-header index-page-layout" style="background-image: url(../assets/images/page-layout-img.jpg);">
            <div class="container">
                <div class="index-header-content">
                    <div class="index-header-content-details">
                        <h1>العلامات التجارية</h1>
                        <span class="pretitle">احصل على أفضل قطع غيار لسيارتك من هنا</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="brand-list-page">
            <div class="container">
                <div class="section-header-center">
                    <div class="section-header-info">
                        <h3>العلامات التجارية</h3>
                        <p>تصفح العديد من العلامات التجارية بما يناسب سيارتك</p>
                    </div>
                </div>

                <div class="brands-container">
                    <div class="row align-items-center justify-content-center">
                        @foreach ($brands as $brand)
                            <div class="col-lg-2 col-md-3 col-sm-6">
                                <a href="{{ route('products.list', ['brand' => [$brand->id]]) }}" class="brand-card">
                                    <div class="img-container">
                                        @if ($brand->logo)
                                            <img src="{{ Storage::url($brand->logo) }}" alt="{{ $brand->name }}">
                                        @else
                                            <img src="{{ asset('assets/images/brands/default-brand.png') }}" alt="{{ $brand->name }}">
                                        @endif
                                    </div>
                                    <h3>{{ $brand->name }}</h3>
                                    <p>{{ $brandProductCounts[$brand->id] ?? 0 }} <span>منتج</span></p>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection