@if(isset($setting) && isset($setting->cashback_value) && $setting->cashback_value && $account && $account->accounts_show_cashback == '1')
    <div x-data="{ open: false }" class="cashback-component">
        <!-- Vertical Fixed Button -->
        <button 
            @click="open = true" 
            class="cashback-fixed-btn"
            id="cashbackBtn"
            type="button"
            aria-label="{{ __('lang.cashbackBtn', ['value' => $setting->cashback_value]) }}"
        >
            <span>{{ __('lang.cashbackBtn', ['value' => $setting->cashback_value]) }}</span>
        </button>

        <!-- Modal Overlay -->
        <div 
            x-show="open" 
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="cashback-overlay"
            @click="open = false"
            style="display: none;"
        >
            <!-- Modal Content -->
            <div 
                @click.stop 
                x-show="open"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="scale-95 opacity-0 translate-y-4"
                x-transition:enter-end="scale-100 opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="scale-100 opacity-100 translate-y-0"
                x-transition:leave-end="scale-95 opacity-0 translate-y-4"
                class="cashback-modal"
            >
                <button @click="open = false" class="cashback-close-btn" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
                
                <div class="cashback-content text-center">
                    <div class="cashback-icon-wrapper">
                        <i class="fas fa-hand-holding-usd"></i>
                    </div>
                     
                    <h2 class="cashback-title">{{ __('lang.cashbackTitle') }}</h2>
                    {{-- <p class="cashback-desc">{{ __('lang.cashbackDesc') }}</p> --}}
                    
                    <div class="cashback-value-card">
                        <span class="cashback-percentage">{{ $setting->cashback_value }}%</span>
                        {{-- <span class="cashback-label">{{ __('lang.cashbackBtn', ['value' => '']) }}</span> --}}
                    </div>

                    <div class="cashback-policy-box">
                        <p>{{ __('lang.cashbackPolicy') }}</p>
                    </div>
                    
                    <p class="cashback-footer-text">
                        {{ __('lang.cashbackStart', ['accountName' => isset($setting) ?  $setting->accounts_name : $account->accounts_name]) }}
                    </p>
                </div>
            </div>
        </div>
    </div>
@endif

@push('css')
<link rel="stylesheet" href="{{ asset('css/cachback.css') }}">
@endpush