@extends('layouts.app')
@section('page-title', 'All Brands')
@section('body-content')
    <main id="main" class="pageNo-5">
        <section class="page-title">
            <div class="auto-container">
                <!-- Icons Box -->
                <div class="icons-box">

                </div>
                <h1>Products <span>Brands</span></h1>

            </div>
        </section>
        <section id="shopByBrand">
            <div class="shopByBrand-wrapper g_in_spacing_block">
                <div class="container">
                    <div class="row">

                        <div class="col-md-12">
                            <div class="shop-brand-menu">
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>All</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>#</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>A</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>B</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>C</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>D</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>E</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>F</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>G</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>H</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>I</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>J</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>K</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>L</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>M</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>N</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>O</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>P</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>Q</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>R</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>S</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>T</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>U</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>V</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>W</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>X</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>Y</span>
                                </a>
                                <a href="javascript:void(0)" class="primarySearchLetter">
                                    <span>Z</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="row">
                                @foreach ($brands as $key => $row)
                                    <div class="col-md-12">
                                        <div class="shop-brand-list" id="shopByBrand-{{ $key }}">
                                            <a href="javascript:void(0)" class="primarySearchLetter">
                                                <span>{{ $key }}</span>
                                            </a>
                                        </div>
                                        <div class="brand-list-box">
                                            <div class="row">
                                                @foreach ($row as $brand)
                                                    <div class="col-lg-3 col-md-4 col-sm-6">
                                                        <a href="/brand/{{ $brand['slug'] }}" class="brandName">
                                                            <span>{{ $brand['name'] }}</span>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="brands-viewMore clear-fix">
                                                <a href="#">View More</a>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection
@section('end-scripts')
    <script src="{{ asset('js/all-brands.js?v=') . config('constants.VERSION') }}"></script>
@endsection