@extends('layouts.default')

@section('content')

<section class="pf-shop shop-pages-l">
    <h1 class="pf-shop-heading">{{ __('common.heading') }}</h1>

    <div class="pf-shop-search">
        <input type="text" id="pfShopSearch" placeholder="{{ __('common.search_placeholder') }}">
        <button type="button" id="pfShopSearchBtn" class="pf-btn">{{ __('common.search') }}</button>
        <button type="button" id="pfShopClearBtn" class="pf-btn pf-btn-gray"
            style="display:none;">{{ __('common.clear') }}</button>
    </div>

    <div class="pf-shop-counter" id="pfCounterTop"></div>

    <div class="pf-shop-grid" id="pfShopGrid">
        @foreach ($products as $product)

        @php
        $genericName = $product->getLocalizedValue('generic_name');
        $brandNames = $product->getLocalizedValue('brand_names');
        $therapeuticClass = $product->getLocalizedValue('therapeutic_class');
        $categoryName = $product->category
        ? $product->category->getLocalizedValue('name')
        : '';

        $json = json_encode(
        array_merge($product->toArray(), [
        'dmf_cep' => $product->dmf_number,
        'generic_name' => $genericName,
        'brand_names' => $brandNames,
        'therapeutic_class' => $therapeuticClass,
        'form' => $product->getLocalizedValue('form'),
        'product_type' => $product->getLocalizedValue('product_type'),
        ]),
        JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT
        );

        $productUrl = url(
        '/product/' . $product->id . '/' .
        \Illuminate\Support\Str::slug($genericName)
        );

        $search = mb_strtolower(implode(' ', array_filter([
        $genericName,
        $brandNames,
        $therapeuticClass,
        $categoryName,
        ])));
        @endphp


        <div class="pf-shop-card" data-search="{{ $search }}" @if ($loop->index >= 16) style="display:none;" @endif>
            <button type="button" class="pf-shop-view pf-shop-open" data-product="{{ $json }}" title="Quick view"
                aria-label="Quick view">
                <svg viewBox="0 0 576 512" aria-hidden="true">
                    <path
                        d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4 142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1-288 0zm144-64c0 35.3-28.7 64-64 64-7.1 0-13.9-1.2-20.3-3.3-5.5-1.8-11.9 1.6-11.7 7.4.3 6.9 1.3 13.8 3.2 20.7 13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1-5.8-.2-9.2 6.1-7.4 11.7 2.1 6.4 3.3 13.2 3.3 20.3z" />
                </svg>
            </button>

           <!-- <a href="{{ $productUrl }}" class="pf-shop-img">
                @if ($product->image)
                <img src="{{ asset('storage/' . ltrim($product->image, '/')) }}" alt="{{ $product->generic_name }}"
                    loading="lazy">
                @else
                <div class="pf-shop-noimg">No image</div>
                @endif
            </a> -->

            <a href="{{ $productUrl }}" class="pf-shop-img">
                @if ($product->image)
                <img src="{{ rtrim(config('app.product_image_base_url'), '/') . '/' . ltrim(basename($product->image), '/') }}"
                    loading="lazy">
                @else
                <div class="pf-shop-noimg">No image</div>
                @endif
            </a>


            <h5 class="pf-shop-title"><a href="{{ $productUrl }}">{{ $product->generic_name }}</a></h5>

            <a href="javascript:void(0);" class="pf-shop-rfq" data-product="{{ $json }}">Request for Quote</a>
        </div>
        @endforeach
    </div>

    <p class="pf-shop-none" id="pfNoResults">No products found.</p>

    <div class="pf-shop-more" id="pfMore">
        <p id="pfCounterBottom"></p>
        <button type="button" id="pfLoadMore" class="pf-btn">Load More</button>
    </div>
</section>

<button type="button" id="pfBackTop" aria-label="Back to top">&uarr;</button>

<script src="{{ asset('js/shop.js') }}"></script>

@stop