@extends('layouts.app')

@section('title', 'Vehicle Brands')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Vehicle Brands & Manufacturers</h1>
        <div class="page-subtitle">Manage luxury car makes (Porsche, Ferrari, Lamborghini, Rolls-Royce, Mercedes-AMG).</div>
    </div>
</div>

<div class="content-card">
    <div class="content-card-header">
        <h5 class="content-card-title"><i class="bi bi-shield-shaded"></i> Showroom Brands List</h5>
    </div>
    <div class="content-card-body">
        <div class="row g-3">
            @forelse($brands as $brand)
            <div class="col-md-3">
                <div class="p-3 border rounded-3 text-center shadow-sm">
                    <i class="bi bi-award-fill text-danger mb-2" style="font-size:1.8rem; color:var(--accent-red) !important;"></i>
                    <div class="fw-bold text-dark" style="font-size:0.95rem;">{{ $brand }}</div>
                    <div class="text-muted" style="font-size:0.75rem;">Certified Manufacturer</div>
                </div>
            </div>
            @empty
            <div class="col-12 text-muted">No brands found.</div>
            @endforelse
        </div>
    </div>
</div>
@endsection