@once
    @push('script')
        <script async src="https://unpkg.com/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
        <script async src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js"></script>
    @endpush
@endonce
<div class="receipt-eg"
     x-data="{  expanded: 'true' }"

    {{--     x-data="{  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">{{ __('enterprise.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="receipt_example nav nav-fill nav-pills justify-content-around small" role="tablist">
{{--            <li class="nav-item">--}}
{{--                <a class="nav-link active" id="nav-home-tab" data-toggle="pill" href="#nav-home" role="tab" ></a>--}}
{{--            </li>--}}
        </ul>

        <div class="receipt_example_content tab-content">
{{--            <div class="tab-pane fade help_group-wrap show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">--}}
{{--                <img class="w-100 px-3 mx-auto" style="max-width: 350px" src=""/>--}}
{{--            </div>--}}
        </div>

    </div>
</div>

<div style="display: none" id="receipt-templates">
    <li class="nav-item">
        <a class="nav-link active px-1" id="example-tab" data-toggle="pill" href="#example" role="tab" ></a>
    </li>
    <div class="tab-pane fade help_group-wrap show active" id="example" role="tabpanel">
        <img class="w-100 px-3 mx-auto" style="max-width: 350px" src=""/>
    </div>
</div>