@extends('layouts.app')

@section('content')
<main class="listings-main">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <!-- Wallet Card -->
        <div class="card border-0 shadow-sm p-3 mb-4" style="border-radius: 1.5rem;">
          <div class="card-body text-center py-5">
            <h2 class="mb-3 text-dark fw-bold" style="letter-spacing: 1px;">
              <i class="bi bi-wallet2 me-2 text-warning"></i>{{ __('messages.wallet_balance') }}
            </h2>
            <div class="display-3 fw-bold text-warning mb-2" style="font-family: 'Montserrat', sans-serif;">
              {{ $customerBalance['total_balance'] ?? 0 }} {{ $customerBalance['token_currency'] ?? '' }} <span class="fs-5 text-dark">Tokens</span>
            </div>
            <div class="mb-3 text-dark-50" style="font-size: 1.1em;">
              {{ __('messages.wallet_desc', [
                'initial' => 50,
                'per_invite' => 35,
                'invited' => $invitedCount
              ]) }}
              <br>
              <small class="text-secondary">
                {{ __('messages.wallet_formula', [
                  'formula' => '50 + (35 × ' . $invitedCount . ')'
                ]) }}
              </small>
            </div>
            <a href="{{ route('web.customer.invited.users') }}" class="btn btn-outline-primary-custom d-flex align-items-center justify-content-center flex-fill py-3 shadow-sm">
                <i class="bi bi-people me-2 fs-5"></i>
                <span>{{ __('messages.view_invited_users') }}</span>
              </a>
          </div>
        </div>
        <!-- Reward Collection Method Form -->
        <div class="card border-0 shadow-sm p-3" style="border-radius: 1.25rem;">
          <div class="card-body px-4 py-5">
            <h4 class="mb-4 text-warning fw-bold" style="letter-spacing: 0.5px;">{{ __('messages.choose_reward_collection_method') }}</h4>
            <form action="{{ route('web.customer.saveRewardMethod') }}" method="POST">
              @csrf
              <div class="mb-4">
                <div class="form-check mb-3 p-0">
                  <input class="form-check-input" type="radio" name="reward_collection_method" id="collectionMethodFood" value="food" {{ old('reward_collection_method', $user->reward_collection_method) == 'food' ? 'checked' : '' }}>
                  <label class="form-check-label fw-semibold ms-2" for="collectionMethodFood" style="font-size: 1.08em;">
                    <span class="badge rounded-pill bg-warning text-dark me-2" style="font-size: 0.95em;"><i class="bi bi-cup-straw"></i></span>
                    {{ __('messages.use_for_food') }}
                  </label>
                  <div class="form-text text-muted ms-4" style="font-size: 0.97em;">
                    {{ __('messages.use_for_food_desc', ['desc' => 'Use your reward tokens to buy food and drinks directly from our stores.']) }}
                  </div>
                </div>
                <div class="form-check p-0">
                  <input class="form-check-input" type="radio" name="reward_collection_method" id="collectionMethodBlockchain" value="blockchain" {{ old('reward_collection_method', $user->reward_collection_method) == 'blockchain' ? 'checked' : '' }}>
                  <label class="form-check-label fw-semibold ms-2" for="collectionMethodBlockchain" style="font-size: 1.08em;">
                    <span class="badge rounded-pill bg-warning text-dark me-2" style="font-size: 0.95em;"><i class="bi bi-currency-bitcoin"></i></span>
                    {{ __('messages.keep_as_token') }}
                  </label>
                  <div class="form-text text-muted ms-4" style="font-size: 0.97em;">
                    {{ __('messages.keep_as_token_desc', ['desc' => 'Keep your reward tokens and transfer them later to a real blockchain wallet.']) }}
                  </div>
                </div>
              </div>
              <button type="submit" class="btn btn-primary-custom w-100" >{{ __('messages.save_changes') }}</button>
            </form>
          </div>
        </div>
        <!-- End -->
      </div>
    </div>
  </div>
</main>
@endsection