@extends('frontend.layouts.app')

@section('title', $data['page']->meta_title)
@section('meta_keywords', $data['page']->meta_keywords)
@section('meta_description', $data['page']->meta_description)

@section('content')


    <!-- Cart Page Start -->
    <div class="pt--5">

        @foreach($data['show_products'] as $key => $products)
        <!-- BLOCK -->
        <div style="background-color:#3579b7;">
            <div class="container">
                <div class="row">
                    <h2 style="color:#FFFFFF!important;" class="text-white pt-3 pl-3">{!! $key !!}</h2><a name="{{ str_slug($key) }}"></a>
                </div>
            </div>
        </div>
        <div class="container show-special">
            <div class="row shop_wrapper mt-3 mb-3">
                @foreach($products as $sku)
                    @php
                        $product = \App\Models\Product::getProductBySKU($sku);
                    @endphp
                    @if($product)
                    {!! \App\Models\Product::productBlock($product, 'product-list', true, 'col-lg-3 col-md-3') !!}
                    @endif
                @endforeach
            </div>
        </div>
        <!-- END BLOCK -->
        @endforeach

    </div>
    @if(!\Jenssegers\Agent\Facades\Agent::isMobile())
    {{--<div class="sidenav">
        @foreach($data['show_products'] as $key => $products)
            <a href="{{ url()->current() . '#'. str_slug($key) }}">{{ $key }}</a>
        @endforeach
    </div>--}}
    @endif
    @push('head-area')
        <style>
            .site-wrapper {
                background-color: #2A62B2;
            }
            header {
                background-color: #FFFFFF;
            }
            .show-special .col-md-3 {
                padding-right: 7px !important;
                padding-left: 7px !important;
            }
            .show-special .pm-product {
                padding: 0px !important;
            }

            .show-special .card-body {
                min-height: 321px !important;
            }


            .sidenav {
                height: 350px;
                width: 150px;
                position: fixed;
                z-index: 1;
                top: 200px;
                right: 0;
                background-color: #111;
                overflow-x: hidden;
                padding-top: 20px;
            }

            .sidenav a {
                padding: 6px 8px 6px 16px;
                text-decoration: none;
                font-size: 14px;
                color: #818181;
                display: block;
            }

            .sidenav a:hover {
                color: #f1f1f1;
            }

            .main {
                margin-left: 160px; /* Same as the width of the sidenav */
                font-size: 28px; /* Increased text to enable scrolling */
                padding: 0px 10px;
            }

            @media screen and (max-height: 450px) {
                .sidenav {padding-top: 15px;}
                .sidenav a {font-size: 18px;}
            }
        </style>
    @endpush

@endsection