@extends(ACTIVE_TEMPLATE.'.base')

@section('content')

    <div class="top-banner">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">

                    <div class="text-overlay">
                        <h2>{{ INDEX_BANNER_HEADING_1 }}</h2>
                        <p>{{ INDEX_BANNER_WRITEUP_1 }}</p>
                    </div>

                    <div class="cat-boxes">
                        @if( isset($arrLeftCat) && is_array($arrLeftCat) && count($arrLeftCat) > 3 )
                            @php( $arrCats = array_splice($arrLeftCat, 0, 4) )
                            @foreach( $arrCats as $count => $cat )
                                @php( $categoryImagePath = getCategoryImageUrl($cat['ID']) )
                                <a href="{{ getCategoryPath($cat['ID'], $cat['FILENAME']) }}" class="cat-box">
                                    <div class="img-container">
                                        {!!
                                            $categoryImagePath == '' ? '' :
                                                getImgTag([
                                                    'src'   => getReadFileLink($categoryImagePath),
                                                    'alt'	=> escAttr($cat['TITLE']),
                                                    'title'	=> escAttr($cat['TITLE'])
                                                ])
                                        !!}
                                    </div>
                                    {{ $cat['TITLE'] }}
                                </a>
                            @endforeach
                        @endif
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="container">

        <h2 class="section-heading">{{ FEATURED_PRODUCTS  }}</h2>
        @include(ACTIVE_TEMPLATE.'.prod-boxes', [ 'sectionCode' => 'FP', 'arrProds' => $prodArr ])

    </div>

    <div class="bg-white">
        <div class="container">

            <h2 class="section-heading">{{ POPULAR_PRODUCTS  }}</h2>
            @include(ACTIVE_TEMPLATE.'.prod-boxes', [ 'sectionCode' => 'PP', 'arrProds' => $prodPOP ])

        </div>
    </div>

    <div class="dex-features">
        <div class="container">
            <h2>{{ SCRIPT_COMPANY_SLOGAN }}</h2>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <i class="fa fa-smile-o"></i>
                    <h3>{{ INDEX_BANNER_HEADING_1 }}</h3>
                    <p>{{ INDEX_BANNER_WRITEUP_1 }}</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <i class="fa fa-search"></i>
                    <h3>{{ INDEX_BANNER_HEADING_2 }}</h3>
                    <p>{{ INDEX_BANNER_WRITEUP_2 }}</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <i class="fa fa-thumbs-up"></i>
                    <h3>{{ INDEX_BANNER_HEADING_3 }}</h3>
                    <p>{{ INDEX_BANNER_WRITEUP_3 }}</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <i class="fa fa-shopping-basket"></i>
                    <h3>{{ INDEX_BANNER_HEADING_4 }}</h3>
                    <p>{{ INDEX_BANNER_WRITEUP_4 }}</p>
                </div>
            </div>
        </div>
    </div>

@endsection