@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="bi bi-wallet2 me-2 text-primary"></i>Customer Wallet
                    </h1>
                    <p class="text-muted mb-1"><strong>{{ $customer->name }}</strong> ({{ $customer->email }})</p>
                </div>
                <div>
                    <a href="{{ route('customers.show', [$website, $customer]) }}" class="btn btn-outline-secondary me-2">
                        <i class="bi bi-person me-1"></i>View Profile
                    </a>
                    <a href="{{ route('customers.index', $website) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i>Back to Customers
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">
        <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- Wallet Statistics -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm" style="background: #6366f1; color: white;">
                <div class="card-body text-center">
                    <div class="mb-2" style="font-size: 48px;">
                        <i class="bi bi-wallet2"></i>
                    </div>
                    <p class="mb-1" style="opacity: 0.9;">Current Balance</p>
                    <h1 class="mb-0" style="font-size: 42px; font-weight: 700;">{{ number_format($stats['current_balance'], 0) }}</h1>
                    <p class="mb-0" style="opacity: 0.9;">credits</p>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1">Total Credits Added</p>
                            <h4 class="mb-0">{{ number_format($stats['total_credits_added'], 0) }}</h4>
                        </div>
                        <div class="bg-success bg-opacity-10 p-3 rounded">
                            <i class="bi bi-arrow-down-circle text-success" style="font-size: 24px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1">Total Credits Spent</p>
                            <h4 class="mb-0">{{ number_format($stats['total_credits_spent'], 0) }}</h4>
                        </div>
                        <div class="bg-danger bg-opacity-10 p-3 rounded">
                            <i class="bi bi-arrow-up-circle text-danger" style="font-size: 24px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1">Total Transactions</p>
                            <h4 class="mb-0">{{ number_format($stats['total_transactions']) }}</h4>
                        </div>
                        <div class="bg-primary bg-opacity-10 p-3 rounded">
                            <i class="bi bi-receipt text-primary" style="font-size: 24px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Manual Adjustment Card -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white">
            <h5 class="mb-0">
                <i class="bi bi-tools me-2 text-warning"></i>Manual Credit Adjustment
            </h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('customers.wallet.adjust', [$website, $customer]) }}"
                  onsubmit="return confirm('Are you sure you want to adjust this customer\'s wallet balance? This action will be logged.');">
                @csrf
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">Action <span class="text-danger">*</span></label>
                        <select class="form-select @error('action') is-invalid @enderror"
                                name="action" id="adjustmentAction" required>
                            <option value="add">Add Credits</option>
                            <option value="deduct">Deduct Credits</option>
                        </select>
                        @error('action')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Amount <span class="text-danger">*</span></label>
                        <input type="number" class="form-control @error('amount') is-invalid @enderror"
                               name="amount" min="0.01" step="0.01" placeholder="10" required>
                        @error('amount')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Reason <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('reason') is-invalid @enderror"
                               name="reason" placeholder="e.g., Compensation for service issue" maxlength="500" required>
                        @error('reason')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-2">
                        <label class="form-label d-block">&nbsp;</label>
                        <button type="submit" class="btn btn-warning w-100">
                            <i class="bi bi-tools me-1"></i>Adjust
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Transaction History -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white">
            <h5 class="mb-0">
                <i class="bi bi-clock-history me-2"></i>Transaction History
            </h5>
        </div>
        <div class="card-body">
            @if($transactions->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Date/Time</th>
                            <th>Type</th>
                            <th>Source</th>
                            <th>Description</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>
                                <span class="badge bg-{{ $transaction->type === 'credit' ? 'success' : 'danger' }}">
                                    {{ $transaction->type === 'credit' ? 'Credit' : 'Debit' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge bg-{{
                                    $transaction->source === 'topup' ? 'success' :
                                    ($transaction->source === 'subscription' ? 'primary' :
                                    ($transaction->source === 'booking' ? 'info' :
                                    ($transaction->source === 'admin_adjustment' ? 'warning' :
                                    ($transaction->source === 'refund' ? 'secondary' : 'dark'))))
                                }}">
                                    {{ ucfirst(str_replace('_', ' ', $transaction->source)) }}
                                </span>
                            </td>
                            <td>
                                <strong>{{ $transaction->description ?? 'Transaction' }}</strong>
                                @if($transaction->notes)
                                <br><small class="text-muted">{{ $transaction->notes }}</small>
                                @endif
                            </td>
                            <td class="text-end">
                                <strong class="text-{{ $transaction->type === 'credit' ? 'success' : 'danger' }}">
                                    {{ $transaction->type === 'credit' ? '+' : '-' }}{{ number_format($transaction->amount, 2) }}
                                </strong>
                            </td>
                            <td class="text-end">
                                <span class="badge bg-light text-dark">{{ number_format($transaction->balance_after, 2) }}</span>
                            </td>
                            <td>
                                @if($transaction->order)
                                    <a href="{{ route('orders.show', [$website, $transaction->order_id]) }}"
                                       class="badge bg-primary text-decoration-none">
                                        Order #{{ $transaction->order->order_number }}
                                    </a>
                                @elseif($transaction->booking)
                                    <a href="{{ route('booking.show', [$website, $transaction->booking_id]) }}"
                                       class="badge bg-info text-decoration-none">
                                        Booking #{{ $transaction->booking->booking_reference }}
                                    </a>
                                @elseif($transaction->subscription)
                                    <span class="badge bg-purple">Subscription</span>
                                @elseif($transaction->credit_package_id)
                                    <span class="badge bg-success">Package Purchase</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>
                <h5 class="mt-3 mb-2">No Transactions Yet</h5>
                <p class="text-muted">This customer has not made any wallet transactions</p>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

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

@push('scripts')
<script>
    // Update button color based on action selected
    document.getElementById('adjustmentAction')?.addEventListener('change', function() {
        const button = document.querySelector('button[type="submit"]');
        if (this.value === 'add') {
            button.classList.remove('btn-danger');
            button.classList.add('btn-success');
            button.innerHTML = '<i class="bi bi-plus-circle me-1"></i>Add Credits';
        } else {
            button.classList.remove('btn-success');
            button.classList.add('btn-danger');
            button.innerHTML = '<i class="bi bi-dash-circle me-1"></i>Deduct Credits';
        }
    });
</script>
@endpush