@foreach ($data ?? [] as $item)
    @if (!empty($item['button']))
        <div class="container mb-5">
            <button type="button" class="btn gimmick_button_{{ $item['button']['section_module_id'] }}"
                @if (!empty($_COOKIE['gimmickbutton' . $item['button']['section_module_id'] . date('Ymd')])) @if ($_COOKIE['gimmickbutton' . $item['button']['section_module_id'] . date('Ymd')] == date('Ymd'))
                disabled @endif
                @endif
                data-bs-toggle="modal"
                data-bs-target="#button_gimmick{{ $item['button']['section_module_id'] }}"
                id="gimmick_button_{{ $item['button']['section_module_id'] }}">
                {{ $item['button']['text_before_click'] }}
            </button>
        </div>

        <div class="modal fade" id="button_gimmick{{ $item['button']['section_module_id'] }}" tabindex="-1"
            aria-labelledby="button_gimmick{{ $item['button']['section_module_id'] }}Label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content modal_button_gimmick"
                    style="background-color:black; opacity:0.5;color: white;">
                    <div class="modal-body">
                        <p class="text-center mb-0">{{ $item['button']['popup'] }}</p>
                    </div>
                </div>
            </div>
        </div>

        @push('style') 

            <style nonce="{{ csp_nonce() }}">
                .gimmick_button_{{ $item['button']['section_module_id'] }} {
                    background-color: {{ $item['button']['bg_before_click'] }};
                    color: {{ $item['button']['text_color_before_click'] }};
                }

                .gimmick_button_{{ $item['button']['section_module_id'] }}:hover {
                    background-color: {{ $item['button']['bg_before_click'] }};
                    color: {{ $item['button']['text_color_before_click'] }};
                    opacity: 80%;
                }

                .gimmick_button_{{ $item['button']['section_module_id'] }}:disabled {
                    background-color: {{ $item['button']['bg_after_click'] }};
                    color: {{ $item['button']['text_color_after_click'] }};
                }
            </style>
        @endpush

        @push('script')
            <script nonce="{{ csp_nonce() }}">
                document.getElementById("gimmick_button_{{ $item['button']['section_module_id'] }}").addEventListener("click",
                    GimmicButton);

                function GimmicButton() {
                    var x = document.getElementById("gimmick_button_{{ $item['button']['section_module_id'] }}");
                    x.disabled = true;

                    buttonId = "gimmickbutton{{ $item['button']['section_module_id'] }}";

                    const expirationDate = new Date();
                    expirationDate.setDate(expirationDate.getDate() + 1);

                    formattedDate = {{ date('Ymd') }};
                    document.cookie =
                        `${buttonId}${formattedDate}=${formattedDate}; expires=${expirationDate.toUTCString()}; path=/`;

                    document.getElementById("gimmick_button_{{ $item['button']['section_module_id'] }}").innerHTML =
                        "{{ $item['button']['text_after_click'] }}";

 
                }
            </script>
        @endpush
    @endif
@endforeach