@extends('master')

@section('seo_title', $seoTitle . ' | ' . __('messages.ONLINE_STORE'))
@section('seo_keywords', '')
@section('seo_description', '')

@section('content')

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

    @php
        $nameCategoryOrSubOrSuper = null;
        $categoriesBaseUrlComplete = $subcategoryUrl !== null
            ? $categoriesBaseUrl . '/' . $subcategoryUrl
            : $categoriesBaseUrl;

        if (is_null($subCategory) === false) {
            $nameCategoryOrSubOrSuper = $subCategory->name;
        } else if (is_null($category) === false) {
            $nameCategoryOrSubOrSuper = $category->name;
        } else {
            $nameCategoryOrSubOrSuper = $superCategory->name;
        }
    @endphp

    <!-- page title -->
    <section class="product-category-header bg-dark d-flex justify-content-center align-items-center" style="background-image: url({{ $superCategory->image ?? URL::asset('assets/images/category-header_temp.png') }})">
        <div class="product-category-title w-auto text-center">
            <h1 class="text-uppercase">{{ $nameCategoryOrSubOrSuper }}</h1>
            {{-- <p>Donec aliquam mauris ac porta imperdiet. Sed ut accumsan ex.</p> --}}
        </div>
    </section>
    <!-- end page title -->

    <!-- breadcrumbs -->
    @include('layout.breadcrumbs', [
        'page_title' => $nameCategoryOrSubOrSuper,
        'page_before' => $categoriesBaseUrlComplete,
        'filters' => true
    ])
    <!-- end breadcrumbs -->

    <!-- product grid -->
    <section class="product-grid products-page">
        <div class="container-fluid">
            {{-- <div class="container">
                <div class="row align-items-center">
                    <div class="col align-self-end filter_c mb-5 filter-search">
                        <div class="filter-box">
                            <span>@lang('messages.RESULTS_PER_PAGE'):</span>
                            <div class="select_box sel_1">
                                <select class="selbx" id="display-per-page">
                                    <option value="12" {{ $queries['limit'] == 12 ? 'selected' : '' }}>12</option>
                                    <option value="24" {{ $queries['limit'] == 24 ? 'selected' : '' }}>24</option>
                                    <option value="36" {{ $queries['limit'] == 36 ? 'selected' : '' }}>36</option>
                                    <option value="99999" {{ $queries['limit'] == 99999 ? 'selected' : '' }}>@lang('messages.ALL')</option>
                                </select>
                            </div>
                        </div>

                        <div class="filter-box">
                            <span>@lang('messages.ORDER_BY'):</span>
                            <div class="select_box sel_2">
                                <select class="selbx " id="order-by">
                                    <option value="featured" {{ $queries['orderField'] == 'featured' ? 'selected' : '' }}>@lang('messages.HIGHLIGHTS')</option>
                                    <option value="price-asc" {{ $queries['orderField'] == 'price-asc' ? 'selected' : '' }}>@lang('messages.PRICE_LOW_HIGHT')</option>
                                    <option value="price-desc" {{ $queries['orderField'] == 'price-desc' ? 'selected' : '' }}>@lang('messages.PRICE_HIGH_LOW')</option>
                                    <option value="promotion" {{ $queries['orderField'] == 'promocao' ? 'selected' : '' }}>@lang('messages.PROMOTIONS_AND_DEALS')</option>
                                    <option value="new" {{ $queries['orderField'] == 'novo' ? 'selected' : '' }}>@lang('messages.NOVIDADES')</option>
                                </select>
                            </div>
                        </div>

                        @if (count($categoryChildren) > 0)
                            <div class="filter-box">
                                <span>@lang('messages.SUB_CATEGORIES'):</span>
                                <div class="select_box sel_3">
                                    <select class="selbx" id="sub-category">
                                        <option value="">{{ __('messages.SUB_CATEGORIES') }}</option>
                                        @foreach ($categoryChildren as $category)
                                            <option value="{{ $categoriesBaseUrl }}/{{ $category->url_clean }}">
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div> --}}
            <div class="row">
                @if (count($products) > 0)
                    <div class="row">
                        @foreach ($products as $product)
                            <!-- item -->
                                <div class="col-12 col-md-3 col-xl-2 mb-4">
                                    @include('shared.product', [
                                        'product' => $product,
                                        'moreCols' => false,
                                        'smallerFont' => true,
                                    ])
                                </div>
                            <!-- end item -->
                        @endforeach
                    </div>

                    <br clear="all">

                    <center>
                        {{-- Pagination --}}
                        {{ $pagination->links() }}
                    </center>
                @else
                    <div class="alert alert-danger" style="margin-top:70px;">
                        @lang('messages.NO_PRODUCTS_FOUND')
                    </div>
                @endif
            </div>
        </div>
    </section>
    <!-- end product grid -->

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

    @include('products.filters', [
        'brands' => $brands,
        'categoryChildren' => $categoryChildren,
        'queries' => $queries
    ])

@endsection