{{-- resources/views/includes/products-sidebar.blade.php --}}
{{-- Styles: public/css/frontend.css | Scripts: public/js/home.js --}}
{{-- Usage: @include('includes.products-sidebar', ['productCategories' => $productCategories]) --}}

@if (isset($productCategories) && $productCategories->count())

<button type="button" class="pf-side-btn" id="pfSideOpen" aria-label="Open products list">
    Products <i class="fa fa-angle-right" aria-hidden="true"></i>
</button>

<div class="pf-side-overlay" id="pfSideOverlay"></div>

<aside class="pf-side-panel" id="pfSidePanel" aria-label="Products by category">
    <button type="button" class="pf-side-close" id="pfSideClose" aria-label="Close">&times;</button>

    <h2 class="pf-side-title">Products</h2>

    @foreach ($productCategories as $category)
        <h3 class="pf-side-cat">{{ $category['name'] }}</h3>
        <ul class="pf-side-list">
            @foreach ($category['products'] as $product)
                @php
                    $json  = json_encode(array_merge($product->toArray(), ['dmf_cep' => $product->dmf_number]));
                    $brand = $product->brand_names ? ' - ' . $product->brand_names : '';
                    $fs    = trim(($product->form ?? '') . ' ' . ($product->strength ?? ''));
                    $label = $product->generic_name . $brand . ($fs !== '' ? " ({$fs})" : '');
                @endphp
                <li>
                    <a href="javascript:void(0);" class="pf-side-item" data-product="{{ $json }}">{{ $label }}</a>
                </li>
            @endforeach
        </ul>
    @endforeach
</aside>

@endif