@extends('customer.dashboard.layout')

@section('title', 'My Wallet')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h2 class="mb-1">My Wallet</h2>
                <p class="text-muted">Manage your credits and view transaction history</p>
            </div>
            <a href="{{ route('wallet.topup', $subdomain ?? request()->route('subdomain')) }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Top Up Credits
            </a>
        </div>
    </div>
</div>

<!-- Wallet Balance Card -->
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="content-card text-center h-100 d-flex flex-column justify-content-center" style="background: #6366f1; color: white;">
            <div class="mb-2" style="font-size: 48px;">
                <i class="bi bi-wallet2"></i>
            </div>
            <p class="mb-1" style="opacity: 0.9; font-size: 14px;">Available Balance</p>
            <h1 class="mb-0" style="font-size: 48px; font-weight: 700;">{{ number_format($stats['current_balance'], 0) }}</h1>
            <p class="mb-0" style="opacity: 0.9; font-size: 16px;">credits</p>
        </div>
    </div>

    <div class="col-md-4">
        <div class="content-card text-center h-100 d-flex flex-column justify-content-center">
            <div class="mb-2" style="color: #28a745; font-size: 32px;">
                <i class="bi bi-arrow-down-circle"></i>
            </div>
            <h3 class="h2 mb-1">{{ number_format($stats['total_credits_added'], 0) }}</h3>
            <p class="text-muted mb-0">Total Credits Added</p>
        </div>
    </div>

    <div class="col-md-4">
        <div class="content-card text-center h-100 d-flex flex-column justify-content-center">
            <div class="mb-2" style="color: #dc3545; font-size: 32px;">
                <i class="bi bi-arrow-up-circle"></i>
            </div>
            <h3 class="h2 mb-1">{{ number_format($stats['total_credits_spent'], 0) }}</h3>
            <p class="text-muted mb-0">Total Credits Spent</p>
        </div>
    </div>
</div>

<!-- Transaction History -->
<div class="content-card">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">Transaction History</h2>
        <span class="badge bg-secondary">{{ $stats['total_transactions'] }} transactions</span>
    </div>

    @if($transactions->count() > 0)
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Description</th>
                    <th>Source</th>
                    <th class="text-end">Amount</th>
                    <th class="text-end">Balance After</th>
                    <th>Related</th>
                </tr>
            </thead>
            <tbody>
                @foreach($transactions as $transaction)
                <tr>
                    <td>
                        <div style="font-size: 14px;">{{ $transaction->created_at->format('M d, Y') }}</div>
                        <div style="font-size: 12px; color: #999;">{{ $transaction->created_at->format('g:i A') }}</div>
                    </td>
                    <td>
                        <strong>{{ $transaction->description ?? 'Transaction' }}</strong>
                        @if($transaction->notes)
                        <br><small class="text-muted">{{ $transaction->notes }}</small>
                        @endif
                    </td>
                    <td>
                        <span class="badge bg-{{
                            $transaction->source === 'topup' ? 'success' :
                            ($transaction->source === 'subscription' ? 'primary' :
                            ($transaction->source === 'booking' ? 'info' :
                            ($transaction->source === 'refund' ? 'warning' : 'secondary')))
                        }}">
                            {{ ucfirst($transaction->source) }}
                        </span>
                    </td>
                    <td class="text-end">
                        <strong class="text-{{ $transaction->type === 'credit' ? 'success' : 'danger' }}">
                            {{ $transaction->type === 'credit' ? '+' : '-' }}{{ number_format($transaction->amount, 0) }}
                        </strong>
                    </td>
                    <td class="text-end">
                        <span class="badge bg-light text-dark">{{ number_format($transaction->balance_after, 0) }}</span>
                    </td>
                    <td>
                        @if($transaction->order)
                            <a href="{{ route('customer.orders.show', [$subdomain ?? request()->route('subdomain'), $transaction->order_id]) }}"
                               class="badge bg-primary text-decoration-none">
                                Order #{{ $transaction->order->order_number }}
                            </a>
                        @elseif($transaction->booking)
                            <a href="{{ route('customer.bookings.show', [$subdomain ?? request()->route('subdomain'), $transaction->booking_id]) }}"
                               class="badge bg-info text-decoration-none">
                                Booking #{{ $transaction->booking->booking_reference }}
                            </a>
                        @elseif($transaction->subscription)
                            <a href="{{ route('customer.subscriptions.show', [$subdomain ?? request()->route('subdomain'), $transaction->subscription_id]) }}"
                               class="badge bg-purple text-decoration-none">
                                Subscription
                            </a>
                        @elseif($transaction->credit_package_id)
                            <span class="badge bg-success">Package</span>
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-3">
        {{ $transactions->links() }}
    </div>
    @else
    <div class="text-center py-5">
        <i class="bi bi-receipt text-muted" style="font-size: 48px;"></i>
        <h3 class="mt-3 mb-2">No Transactions Yet</h3>
        <p class="text-muted mb-3">Your wallet transaction history will appear here</p>
        <a href="{{ route('wallet.topup', $subdomain ?? request()->route('subdomain')) }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Top Up Credits
        </a>
    </div>
    @endif
</div>

<!-- Info Card -->
<div class="content-card mt-4" style="background-color: #f8f9ff; border-left: 4px solid #667eea;">
    <div class="row align-items-center">
        <div class="col-md-1 text-center">
            <i class="bi bi-info-circle" style="font-size: 32px; color: #667eea;"></i>
        </div>
        <div class="col-md-11">
            <h5 class="mb-2">How does the wallet work?</h5>
            <p class="mb-1"><strong>Top Up:</strong> Purchase credit packages to add credits to your wallet</p>
            <p class="mb-1"><strong>Use Credits:</strong> Credits can be used for bookings, purchases, and subscriptions</p>
            <p class="mb-0"><strong>Track Everything:</strong> All transactions are recorded and can be viewed anytime</p>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .bg-purple {
        background-color: #764ba2 !important;
    }
</style>
@endpush