@extends('layouts.app')

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

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- Header -->
            <div class="card shadow mb-4">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0 text-white">
                                <i class="fas fa-plus-circle me-2"></i>Fund Your Wallet
                            </h3>
                            <p class="mb-0 text-light">Choose your preferred funding method</p>
                        </div>
                        <div class="col-auto">
                            <a href="{{ route('wallet.index') }}" class="btn btn-light">
                                <i class="fas fa-arrow-left me-2"></i>Back to Wallet
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="d-flex align-items-center justify-content-center">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-wallet text-primary fa-2x"></i>
                                </div>
                                <div class="flex-grow-1 ms-3 text-start">
                                    <h6 class="mb-0">Current Balance</h6>
                                    <h4 class="mb-0 text-primary">₦{{ number_format($wallet->balance ?? 0, 2) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex align-items-center justify-content-center">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-lock text-warning fa-2x"></i>
                                </div>
                                <div class="flex-grow-1 ms-3 text-start">
                                    <h6 class="mb-0">Available Balance</h6>
                                    <h4 class="mb-0 text-warning">₦{{ number_format($wallet->available_balance ?? 0, 2) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex align-items-center justify-content-center">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-chart-line text-success fa-2x"></i>
                                </div>
                                <div class="flex-grow-1 ms-3 text-start">
                                    <h6 class="mb-0">Daily Limit</h6>
                                    <h4 class="mb-0 text-success">₦{{ number_format($wallet->remaining_daily_limit ?? 0, 2) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Funding Options -->
            <div class="row g-4">
                <!-- Paystack -->
                <div class="col-lg-6">
                    <div class="card h-100 shadow-hover">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="bg-primary bg-opacity-10 rounded-circle p-3 d-inline-flex">
                                    <i class="fas fa-credit-card text-primary fa-2x"></i>
                                </div>
                            </div>
                            <h5 class="card-title">Card Payment</h5>
                            <p class="text-muted">Fund with your debit card via Paystack. Instant and secure.</p>
                            <ul class="list-unstyled text-start">
                                <li><i class="fas fa-check text-success me-2"></i>Instant funding</li>
                                <li><i class="fas fa-check text-success me-2"></i>All Nigerian banks</li>
                                <li><i class="fas fa-check text-success me-2"></i>Secure payment</li>
                                <li><i class="fas fa-check text-success me-2"></i>₦100 - ₦500,000</li>
                            </ul>
                            <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#paystackModal">
                                <i class="fas fa-credit-card me-2"></i>Fund with Card
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Flutterwave -->
                <div class="col-lg-6">
                    <div class="card h-100 shadow-hover">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="bg-warning bg-opacity-10 rounded-circle p-3 d-inline-flex">
                                    <i class="fas fa-university text-warning fa-2x"></i>
                                </div>
                            </div>
                            <h5 class="card-title">Bank Transfer</h5>
                            <p class="text-muted">Fund via bank transfer using Flutterwave. Multiple payment options.</p>
                            <ul class="list-unstyled text-start">
                                <li><i class="fas fa-check text-success me-2"></i>Bank transfer</li>
                                <li><i class="fas fa-check text-success me-2"></i>USSD payment</li>
                                <li><i class="fas fa-check text-success me-2"></i>Multiple currencies</li>
                                <li><i class="fas fa-check text-success me-2"></i>₦100 - ₦1,000,000</li>
                            </ul>
                            <button type="button" class="btn btn-warning w-100" data-bs-toggle="modal" data-bs-target="#flutterwaveModal">
                                <i class="fas fa-university me-2"></i>Fund via Transfer
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Virtual Account -->
                <div class="col-lg-6">
                    <div class="card h-100 shadow-hover">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="bg-success bg-opacity-10 rounded-circle p-3 d-inline-flex">
                                    <i class="fas fa-piggy-bank text-success fa-2x"></i>
                                </div>
                            </div>
                            <h5 class="card-title">Virtual Account</h5>
                            <p class="text-muted">Transfer to your dedicated virtual account number.</p>
                            @if($virtualAccount)
                                <div class="bg-light p-3 rounded mb-3">
                                    <h6 class="mb-1">{{ $virtualAccount->bank_name }}</h6>
                                    <h5 class="mb-1 font-weight-bold">{{ $virtualAccount->account_number }}</h5>
                                    <small class="text-muted">{{ $virtualAccount->account_name }}</small>
                                </div>
                                <button type="button" class="btn btn-success w-100" onclick="copyAccountNumber('{{ $virtualAccount->account_number }}')">
                                    <i class="fas fa-copy me-2"></i>Copy Account Number
                                </button>
                            @else
                                <p class="text-warning">Virtual account not available</p>
                                <a href="{{ route('virtual-account.create') }}" class="btn btn-outline-success w-100">
                                    <i class="fas fa-plus me-2"></i>Create Virtual Account
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- QR Code -->
                <div class="col-lg-6">
                    <div class="card h-100 shadow-hover">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <div class="bg-info bg-opacity-10 rounded-circle p-3 d-inline-flex">
                                    <i class="fas fa-qrcode text-info fa-2x"></i>
                                </div>
                            </div>
                            <h5 class="card-title">QR Code Payment</h5>
                            <p class="text-muted">Show your QR code for someone to send you money.</p>
                            <ul class="list-unstyled text-start">
                                <li><i class="fas fa-check text-success me-2"></i>Instant transfer</li>
                                <li><i class="fas fa-check text-success me-2"></i>No fees</li>
                                <li><i class="fas fa-check text-success me-2"></i>Easy to use</li>
                                <li><i class="fas fa-check text-success me-2"></i>Secure</li>
                            </ul>
                            <a href="{{ route('scan.generate') }}" class="btn btn-info w-100">
                                <i class="fas fa-qrcode me-2"></i>Generate QR Code
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Request from User -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card shadow">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <div class="bg-purple bg-opacity-10 rounded-circle p-3">
                                                <i class="fas fa-hand-holding-usd text-purple fa-2x"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h5 class="mb-1">Request Money from Someone</h5>
                                            <p class="text-muted mb-0">Send a payment request to another user and they can fund your wallet directly.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 text-end">
                                    <a href="{{ route('request.index') }}" class="btn btn-purple">
                                        <i class="fas fa-paper-plane me-2"></i>Send Request
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Paystack Modal -->
<div class="modal fade" id="paystackModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Fund with Card</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('wallet.fund.paystack') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="paystack_amount" class="form-label">Amount (₦)</label>
                        <input type="number" class="form-control" id="paystack_amount" name="amount" 
                               min="100" max="500000" step="1" placeholder="Enter amount" required>
                        <div class="form-text">Minimum: ₦100, Maximum: ₦500,000</div>
                    </div>
                    
                    <!-- Quick Amount Buttons -->
                    <div class="mb-3">
                        <label class="form-label">Quick amounts:</label>
                        <div class="row g-2">
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('paystack_amount', 1000)" class="btn btn-outline-primary btn-sm w-100">₦1K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('paystack_amount', 5000)" class="btn btn-outline-primary btn-sm w-100">₦5K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('paystack_amount', 10000)" class="btn btn-outline-primary btn-sm w-100">₦10K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('paystack_amount', 20000)" class="btn btn-outline-primary btn-sm w-100">₦20K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('paystack_amount', 50000)" class="btn btn-outline-primary btn-sm w-100">₦50K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('paystack_amount', 100000)" class="btn btn-outline-primary btn-sm w-100">₦100K</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-credit-card me-2"></i>Continue to Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Flutterwave Modal -->
<div class="modal fade" id="flutterwaveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Fund via Bank Transfer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('wallet.fund.flutterwave') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="flutterwave_amount" class="form-label">Amount (₦)</label>
                        <input type="number" class="form-control" id="flutterwave_amount" name="amount" 
                               min="100" max="1000000" step="1" placeholder="Enter amount" required>
                        <div class="form-text">Minimum: ₦100, Maximum: ₦1,000,000</div>
                    </div>
                    
                    <!-- Quick Amount Buttons -->
                    <div class="mb-3">
                        <label class="form-label">Quick amounts:</label>
                        <div class="row g-2">
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('flutterwave_amount', 1000)" class="btn btn-outline-warning btn-sm w-100">₦1K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('flutterwave_amount', 5000)" class="btn btn-outline-warning btn-sm w-100">₦5K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('flutterwave_amount', 10000)" class="btn btn-outline-warning btn-sm w-100">₦10K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('flutterwave_amount', 20000)" class="btn btn-outline-warning btn-sm w-100">₦20K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('flutterwave_amount', 50000)" class="btn btn-outline-warning btn-sm w-100">₦50K</button>
                            </div>
                            <div class="col-4">
                                <button type="button" onclick="setFundAmount('flutterwave_amount', 100000)" class="btn btn-outline-warning btn-sm w-100">₦100K</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-university me-2"></i>Continue to Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function setFundAmount(inputId, amount) {
    document.getElementById(inputId).value = amount;
}

function copyAccountNumber(accountNumber) {
    navigator.clipboard.writeText(accountNumber).then(function() {
        // Show toast or alert
        alert('Account number copied to clipboard: ' + accountNumber);
    }, function(err) {
        console.error('Could not copy text: ', err);
    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
        navigator.clipboard.writeText(accountNumber).then(function() {
            // Show toast or alert
            alert('Account number copied to clipboard: ' + accountNumber);
        }, function(err) {
            console.error('Could not copy text: ', err);
            // Fallback for older browsers
            const textArea = document.createElement('textarea');
            textArea.value = accountNumber;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            alert('Account number copied to clipboard: ' + accountNumber);
        });
    } else {
        // Fallback for browsers that do not support navigator.clipboard
        const textArea = document.createElement('textarea');
        textArea.value = accountNumber;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        alert('Account number copied to clipboard: ' + accountNumber);
    });
}
</script>

<style>
.shadow-hover {
    transition: box-shadow 0.15s ease-in-out;
}

.shadow-hover:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.bg-purple {
    background-color: #6f42c1;
}

.text-purple {
    color: #6f42c1;
}

.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}

.btn-purple:hover {
    background-color: #5a2c91;
    border-color: #5a2c91;
    color: white;
}
</style>
@endsection