@extends('master')

@section('seo_title', __('messages.BRANDS'))
@section('seo_keywords', '')
@section('seo_description', '')

@section('content')

    <meta name="locale" content="{{ app()->getLocale() }}">

    <section class="brand-list">
        @include('layout.breadcrumbs', ['page_title' => __('messages.BRANDS')])

        {{-- @if (count($highlights) > 0)
            <div class="row">
                <div class="col-xs-12 col-md-12">
                    @include('brands.highlights')
                </div>
            </div>
        @endif --}}

        <!-- contents -->
        <div class="container">
            <h1>@lang('messages.BRANDS')</h1>
            <!-- brand alphabetized list -->
            <div class="brand-wraper position-relative">
                @include('brands.alphabet')
                <div class="brand-table">
                    @php
                        $groupedBrands = [];

                        foreach ($brands as $brand) {
                            $letter = strtoupper(substr($brand->marca, 0, 1));
                            if (in_array($letter, $allowedLetters)) {
                                $groupedBrands[$letter][] = $brand;
                            }
                        }

                        ksort($groupedBrands);
                    @endphp

                    @foreach ($groupedBrands as $letter => $brandsByLetter)
                        <div class="table-header fw-bold" id="{{ $letter }}"><a name="letter{{ $letter }}"></a>{{ $letter }}</div>

                        <ul class="list-unstyled d-flex">
                            @foreach ($brandsByLetter as $brand)
                                <li>
                                    <a href="{{ route('brandView.v2', [
                                            'locale'    => app()->getLocale(),
                                            'urlClean' => $brand->url_clean,
                                        ])}}"
                                    >
                                        {{ $brand->marca }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    @endforeach
                </div>
            </div>
            <!-- end brand alphabetized list -->
        </div>
        <!-- end contents -->

        <!-- back button -->
        <div class="container">
            @include('layout.back-button')
        </div>
        <!-- end back button -->
    </section>

@endsection