@extends('front.v2.partials.master')

@section('content')
    @php
        $registerRewardPoints = getField('register_reward_points') ?? 0;
        $registerRewardPoints = $registerRewardPoints > 0 ? $registerRewardPoints : '';
    @endphp
    <div class="container rewards-page">
        <div class="top-banner">
            <div class="action-buttons">
                <a href="{!! route('front.v2.loginform') !!}"><button style="border-radius: 50px 0 0px 50px;">{!! __('v2/front_site.login') !!}</button></a>
                <a href="{!! route('front.v2.registerform') !!}"><button style="border-radius: 0px 50px 50px 0px;">{!! __('v2/front_site.join') !!}</button></a>
            </div>
        </div>
        <div class="how-it-works mt-4">
            <h2>{!! __('v2/front_site.how_it_works') !!}</h2>
            <div class="grid-container mt-4">
                <div class="benefit-card">
                    <img width="64" height="64" src="{!! asset('/assets/images/shopping-cart-loaded.png') !!}" alt="shopping-cart-loaded"/>
                    <div class="tagline mt-4">
                        <h3>{!! __('v2/front_site.purchase') !!}</h3>
                        <p>{!! __('v2/front_site.earn_points') !!}</p>
                    </div>
                </div>
                <div class="benefit-card">
                    <img width="64" height="64" src="{!! asset('/assets/images/external-rewards.png') !!}" alt="external-rewards-home-based-business-flaticons-flat-flat-icons-2"/>
                    <div class="tagline mt-4">
                        <h3>{!! __('v2/front_site.free_products') !!}</h3>
                        <p>{!! __('v2/front_site.redeem_points') !!}</p>
                    </div>
                </div>
                <div class="benefit-card">
                    <img width="64" height="64" src="{!! asset('/assets/images/bullish-gain.png') !!}" alt="bullish"/>
                    <div class="tagline mt-4">
                        <h3>{!! __('v2/front_site.endless_rewards') !!}</h3>
                        <p>{!! __('v2/front_site.unlimited_points') !!}</p>
                    </div>
                </div>
                <!-- Add more benefits as needed -->
            </div>
        </div>
        <div class="mt-4 d-grid">
            <div class="register-rewards">
                <h2>{!! __('v2/front_site.free_points' ,['points' => $registerRewardPoints]) !!}</h2>
                <div class="benefit-card mt-0 pt-0">
                    <div class="tagline mt-4">
                        <p>{!! __('v2/front_site.free_points_description',['points' => $registerRewardPoints]) !!}</p>
                    </div>
                    <div class="app-links">
                        @php $fields = getField(['play_store_url','app_store_url']); @endphp
                        <a href="{!! $fields['play_store_url'] ?? '#' !!}"> <img src="{!! asset('/assets/images/app-store.png') !!}" alt="app store link"></a>
                        <a href="{!! $fields['app_store_url'] ?? '#' !!}"> <img src="{!! asset('/assets/images/google-play.png') !!}" alt="app store link"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="faq mt-5">
            <h2>{!! __('v2/front_site.faq') !!}</h2>
            <div class="list-faq my-4">
                <button class="accordion">What are the reward points?</button>
                <div class="panel">
                    <p>Reward points are a loyalty currency earned by customers for engaging with our business. They can be redeemed for various benefits and rewards.</p>
                </div>
                <button class="accordion">How do I check my points balance?</button>
                <div class="panel">
                    <p>To check your current points balance, simply log in to your account on our website or mobile app. Your points balance will be displayed on your profile page.</p>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // JavaScript code to handle accordion functionality
        const accordions = document.getElementsByClassName('accordion');

        for (let i = 0; i < accordions.length; i++) {
            accordions[i].addEventListener('click', function () {
                this.classList.toggle('active');
                const panel = this.nextElementSibling;
                if (panel.style.display === 'block') {
                    panel.style.display = 'none';
                } else {
                    panel.style.display = 'block';
                }
            });
        }
    </script>
@endsection