@extends('layouts.public')

@section('content')
@php
/**
 * @var array      $user
 * @var int        $total_points   points held across every restaurant wallet
 * @var int        $programs       number of loyalty programs the customer earns with
 * @var int        $claimable_now  rewards already affordable right now
 * @var array|null $top_wallet     highest-balance wallet (or null)
 */
$total_points  = (int) ($total_points ?? 0);
$programs      = (int) ($programs ?? 0);
$claimable_now = (int) ($claimable_now ?? 0);
$top_wallet    = $top_wallet ?? null;
@endphp
<div class="qm-page-head">
    <div class="container-fluid">
        <h1 class="qm-page-title">{{ t_raw('account.perks_rewards_title') }}</h1>
        <nav class="breadcrumb" aria-label="{{ t_raw('common.breadcrumb_aria') }}"><a href="{{ route('home') }}">{{ t_raw('common.home') }}</a><span class="mx-2" aria-hidden="true">/</span><a href="{{ route('account') }}">{{ t_raw('account.crumb') }}</a><span class="mx-2" aria-hidden="true">/</span><span class="active">{{ t_raw('account.perks') }}</span></nav>
    </div>
</div>
@php /* The page's messages belong UNDER its title band, inside the page the reader is
         looking at — not floating above it. getFlashes() consumes, so the layout's own
         call further out finds nothing and does not draw it twice. */
@endphp
<div class="container-fluid">@partial('flash')</div>

<section class="qm-section">
    <div class="container-fluid">
        <div class="row g-4">
            <div class="col-lg-3">@partial('account-nav')</div>
            <div class="col-lg-9">

                <!-- Rewards overview (driven by the real loyalty engine) -->
                <div class="qm-card qm-perks-summary">
                    <div class="qm-perks-head">
                        <div>
                            <span class="qm-eyebrow">{{ t_raw('account.your_rewards_eyebrow') }}</span>
                            <h2 class="mb-0">{!! t_raw('account.points_summary_title', [':points' => '<span class="qm-perks-points">' . number_format($total_points) . '</span>']) !!}</h2>
                        </div>
                        <a href="{{ route('account.loyalty') }}" class="qm-pill qm-pill-amber qm-perks-tier"><i class="fas fa-star" aria-hidden="true"></i> {{ t_raw('account.view_my_rewards_link') }}</a>
                    </div>

                    <div class="qm-perks-stats">
                        <div class="qm-perks-stat">
                            <span class="qm-perks-stat-num">{{ number_format($total_points) }}</span>
                            <span class="qm-perks-stat-label">{{ t_raw('account.stat_points_across_programs') }}</span>
                        </div>
                        <div class="qm-perks-stat">
                            <span class="qm-perks-stat-num">{{ number_format($programs) }}</span>
                            <span class="qm-perks-stat-label">{!! $programs === 1 ? t('account.stat_program_one') : t('account.stat_program_many') !!}</span>
                        </div>
                        <div class="qm-perks-stat">
                            <span class="qm-perks-stat-num">{{ number_format($claimable_now) }}</span>
                            <span class="qm-perks-stat-label">{!! $claimable_now === 1 ? t('account.stat_reward_ready_one') : t('account.stat_reward_ready_many') !!}</span>
                        </div>
                    </div>

                    <p class="qm-perks-earn">
                        <i class="fas fa-info-circle" aria-hidden="true"></i>
                        <span>
                        @if ($programs > 0)
                        {!! t_raw('account.earn_para_with_programs', [':link' => '<a href="' . e(route('account.loyalty')) . '">' . e(t_raw('account.loyalty')) . '</a>']) !!}
                        @else
                        {{ t_raw('account.earn_para_no_programs') }}
                        @endif
                        </span>
                    </p>
                </div>

                @if ($programs > 0 && $top_wallet)
                <!-- Highlight the customer's strongest wallet -->
                <div class="qm-card qm-perks-highlight">
                    <div class="qm-perks-highlight-ico"><i class="fas fa-trophy" aria-hidden="true"></i></div>
                    <div>
                        <h2 class="mb-1">{{ t_raw('account.top_program_title') }}</h2>
                        <p class="mb-0 qm-perks-muted">
                            {!! t_raw('account.top_program_balance_text', [':name' => '<strong>' . (($top_wallet['restaurant_name'] ?? '') !== '' ? e((string) $top_wallet['restaurant_name']) : t('account.a_restaurant_fallback')) . '</strong>']) !!}
                            <a href="{{ route('account.loyalty') }}">{{ t_raw('account.see_redeem_link') }}</a>
                        </p>
                    </div>
                </div>
                @endif

                <!-- How rewards work -->
                <div class="qm-card">
                    <h2>{{ t_raw('account.how_rewards_work_title') }}</h2>
                    <p class="qm-perks-muted qm-perks-lead">{{ t_raw('account.earning_automatic_lead') }}</p>

                    <div class="qm-perks-earn-grid">
                        <div class="qm-perks-earn-item">
                            <div class="qm-perks-earn-ico"><i class="fas fa-utensils" aria-hidden="true"></i></div>
                            <h3>{{ t_raw('account.earn_item1_title') }}</h3>
                            <p>{{ t_raw('account.earn_item1_text') }}</p>
                        </div>
                        <div class="qm-perks-earn-item">
                            <div class="qm-perks-earn-ico"><i class="fas fa-gift" aria-hidden="true"></i></div>
                            <h3>{{ t_raw('account.earn_item2_title') }}</h3>
                            <p>{{ t_raw('account.earn_item2_text') }}</p>
                        </div>
                        <div class="qm-perks-earn-item">
                            <div class="qm-perks-earn-ico"><i class="fas fa-bolt" aria-hidden="true"></i></div>
                            <h3>{{ t_raw('account.earn_item3_title') }}</h3>
                            <p>{{ t_raw('account.earn_item3_text') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('account.loyalty') }}" class="qm-btn qm-btn-outline mt-4"><i class="fas fa-star" aria-hidden="true"></i> {{ t_raw('account.go_to_rewards_btn') }}</a>
                </div>

                <!-- Ways to do more -->
                <div class="qm-card">
                    <h2>{{ t_raw('account.get_more_title') }}</h2>
                    <div class="qm-perks-earn-grid">
                        <div class="qm-perks-earn-item">
                            <div class="qm-perks-earn-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
                            <h3>{{ t_raw('account.more_item1_title') }}</h3>
                            <p>{{ t_raw('account.more_item1_text') }}</p>
                        </div>
                        <div class="qm-perks-earn-item">
                            <div class="qm-perks-earn-ico"><i class="fas fa-bookmark" aria-hidden="true"></i></div>
                            <h3>{{ t_raw('account.more_item2_title') }}</h3>
                            <p>{{ t_raw('account.more_item2_text') }}</p>
                        </div>
                        <div class="qm-perks-earn-item">
                            <div class="qm-perks-earn-ico"><i class="fas fa-redo" aria-hidden="true"></i></div>
                            <h3>{{ t_raw('account.more_item3_title') }}</h3>
                            <p>{{ t_raw('account.more_item3_text') }}</p>
                        </div>
                    </div>
                    <a href="{{ route('account.loyalty') }}" class="qm-btn qm-btn-outline mt-4"><i class="fas fa-star" aria-hidden="true"></i> {{ t_raw('account.view_my_rewards_link') }}</a>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection