{{-- resources/views/storefront/wallet.blade.php --}}
@extends('storefront.layout')

@section('title', trans_key('storefront.pageTitles.wallet').' - '.config('app.name', 'FreshMart'))

@section('content')
@php
    $balance = (float) ($wallet?->balance ?? 0);
    $holdBalance = (float) ($wallet?->hold_balance ?? 0);
    $transactions = $wallet?->transactions ?? collect();
@endphp

<style>
.fm-wallet {
    padding: 12px 0 80px;
}

.fm-wallet-header {
    margin-bottom: 16px;
}

.fm-wallet-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text, #1a1a2e);
    margin: 0 0 2px;
}

.fm-wallet-header p {
    font-size: 13px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 0;
}

.fm-wallet-balance {
    background: linear-gradient(135deg, var(--fm-primary, #2daa37), var(--fm-primary-dark, #1e8a2a));
    border-radius: var(--fm-radius, 10px);
    padding: 20px 24px;
    color: white;
    margin-bottom: 16px;
}

.fm-wallet-balance small {
    font-size: 12px;
    opacity: 0.8;
    display: block;
}

.fm-wallet-balance strong {
    font-size: 32px;
    font-weight: 800;
    display: block;
    margin: 4px 0 0;
}

.fm-wallet-balance .fm-wallet-hold {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 8px;
}

.fm-wallet-transaction {
    background: var(--fm-card-bg, #ffffff);
    border-radius: var(--fm-radius, 10px);
    padding: 12px 16px;
    box-shadow: var(--fm-shadow, 0 2px 8px rgba(0,0,0,0.06));
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fm-wallet-transaction .fm-tx-info {
    flex: 1;
}

.fm-wallet-transaction .fm-tx-info strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-text, #1a1a2e);
    display: block;
}

.fm-wallet-transaction .fm-tx-info p {
    font-size: 12px;
    color: var(--fm-text-secondary, #6b7280);
    margin: 0;
}

.fm-wallet-transaction .fm-tx-amount {
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.fm-wallet-transaction .fm-tx-amount.is-credit {
    color: var(--fm-primary, #2daa37);
}

.fm-wallet-transaction .fm-tx-amount.is-debit {
    color: #ef4444;
}
</style>

<div class="fm-wallet">
    <div class="fm-wallet-header">
        <h1>Wallet</h1>
        <p>Use wallet balance during checkout whenever enabled.</p>
    </div>

    <div class="fm-wallet-balance">
        <small>Available Balance</small>
        <strong>{{ \App\Support\StorefrontPresenter::money($balance) }}</strong>
        @if($holdBalance > 0)
            <div class="fm-wallet-hold">On hold: {{ \App\Support\StorefrontPresenter::money($holdBalance) }}</div>
        @endif
    </div>

    <h2 style="font-size:16px;font-weight:700;margin:0 0 10px;">Transactions</h2>

    @if($transactions->count())
        @foreach($transactions as $transaction)
            @php
                $isCredit = (float) $transaction->amount >= 0;
                $amountClass = $isCredit ? 'is-credit' : 'is-debit';
                $amountPrefix = $isCredit ? '+' : '';
            @endphp
            <div class="fm-wallet-transaction">
                <div class="fm-tx-info">
                    <strong>{{ $transaction->description ?: \Illuminate\Support\Str::headline($transaction->type) }}</strong>
                    <p>{{ optional($transaction->created_at)->format('d M Y, h:i A') }}</p>
                </div>
                <span class="fm-tx-amount {{ $amountClass }}">{{ $amountPrefix }}{{ \App\Support\StorefrontPresenter::money(abs((float) $transaction->amount)) }}</span>
            </div>
        @endforeach
    @else
        <div style="text-align:center;padding:40px 0;background:var(--fm-card-bg,#ffffff);border-radius:var(--fm-radius,10px);box-shadow:var(--fm-shadow,0 2px 8px rgba(0,0,0,0.06));">
            <h3 style="font-size:16px;font-weight:700;margin:0;color:var(--fm-text,#1a1a2e);">No transactions yet</h3>
            <p style="font-size:13px;color:var(--fm-text-secondary,#6b7280);margin:4px 0 0;">Your wallet history will appear here.</p>
        </div>
    @endif
</div>
@endsection