@php
    $receipts = \App\Models\StoreDetails::GetSampleReceipts();
    $max_receipt_per_merchant = count($receipts) > 1 ? 1 : null;
@endphp


<div x-data="{ tab: '{{$receipts[0]['images'][0]['label']}}' , expanded: {{ config('stampcard.receipt_selection.is_default_expand_receipt_example') ? 'true' : 'false'}} }">
    <small class="d-block my-2 text-bold cursor-pointer" @click="expanded = ! expanded" >
        <i class="far fa-question-circle"></i>
        <span class="mx-1">{{ __('stampcard.labelReceiptExample') }}</span>
        <i class="fas" :class="expanded ? 'fa-angle-down' : 'fa-angle-right' "></i>
    </small>
    <div class="rounded-lg px-2" style="border: 1px solid #fff5" x-show="expanded" x-collapse>
        <ul class="tabs-list receipt_example">
            @foreach($receipts as $receipt)
                @foreach($receipt['images'] as $idx => $tab)
                    <li :class="{ 'active': tab === '{{$tab['label']}}' }"
                        @click.prevent="tab = '{{$tab['label']}}'">
                        {{ $tab['label'] }}
                    </li>
                    @php
                        if($max_receipt_per_merchant && ($idx + 1) === $max_receipt_per_merchant) {
                            break;
                        }
                    @endphp
                @endforeach
            @endforeach
        </ul>

        @foreach($receipts as $receipt)
            @foreach($receipt['images'] as $idx => $tab)
                <div x-show="tab=== '{{$tab['label'] }}'" x-transition class="tab active help_group-wrap">
                    <img class="w-100 px-3 mx-auto" style="max-width: 350px"
                        src="{{ $tab['img'] }}"/>
                </div>
                @php
                    if($max_receipt_per_merchant && ($idx + 1) === $max_receipt_per_merchant) {
                        break;
                    }
                @endphp
            @endforeach
        @endforeach
    </div>
</div>