@extends('layouts.app')

@section('title', 'Pay Request')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-white border-0">
                    <div class="text-center">
                        <h3 class="mb-1">Payment Request</h3>
                        <p class="text-muted mb-0">Review and process the payment request below</p>
                    </div>
                </div>

                <div class="card-body">
                    @if(isset($error))
                        <div class="alert alert-danger text-center">
                            <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                            <h5>{{ $error }}</h5>
                            <p class="mb-0">This payment request cannot be processed.</p>
                            <a href="{{ route('dashboard') }}" class="btn btn-primary mt-3">
                                <i class="fas fa-home me-2"></i>Go to Dashboard
                            </a>
                        </div>
                    @else
                        <!-- Payment Request Details -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <div class="mb-3">
                                            <img src="{{ $paymentRequest->requester->profile_photo_path ?? '/default-avatar.png' }}" 
                                                 alt="{{ $paymentRequest->requester->full_name }}" 
                                                 class="rounded-circle"
                                                 style="width: 60px; height: 60px; object-fit: cover;">
                                        </div>
                                        <h5 class="mb-1">{{ $paymentRequest->requester->full_name }}</h5>
                                        <p class="text-muted mb-0">{{ $paymentRequest->requester->email }}</p>
                                        <div class="mt-3">
                                            <span class="badge bg-info">{{ ucfirst($paymentRequest->status) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Amount Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="text-center">
                                    <h2 class="display-4 text-primary mb-2">₦{{ number_format($paymentRequest->amount, 2) }}</h2>
                                    @if($paymentRequest->description)
                                        <p class="text-muted">{{ $paymentRequest->description }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Request Details -->
                        <div class="row mb-4">
                            <div class="col-sm-6">
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Request Code:</span>
                                    <strong>{{ $paymentRequest->request_code }}</strong>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Created:</span>
                                    <strong>{{ $paymentRequest->created_at->format('M d, Y H:i') }}</strong>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Expires:</span>
                                    <strong class="text-{{ $paymentRequest->isExpired() ? 'danger' : 'success' }}">
                                        {{ $paymentRequest->expires_at ? $paymentRequest->expires_at->format('M d, Y H:i') : 'Never' }}
                                    </strong>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Status:</span>
                                    <strong class="text-{{ $paymentRequest->status === 'pending' ? 'warning' : ($paymentRequest->status === 'paid' ? 'success' : 'danger') }}">
                                        {{ ucfirst($paymentRequest->status) }}
                                    </strong>
                                </div>
                            </div>
                        </div>

                        @if($paymentRequest->status === 'pending' && !$paymentRequest->isExpired())
                            <!-- Payment Form -->
                            <div class="row">
                                <div class="col-12">
                                    <form id="paymentForm" method="POST" action="{{ route('request.pay.process', $paymentRequest->request_code) }}">
                                        @csrf
                                        
                                        <!-- Wallet Selection -->
                                        <div class="mb-3">
                                            <label for="wallet_id" class="form-label">Select Wallet</label>
                                            <select class="form-select @error('wallet_id') is-invalid @enderror" 
                                                    id="wallet_id" 
                                                    name="wallet_id" 
                                                    required>
                                                <option value="">Choose wallet to pay from</option>
                                                @foreach(auth()->user()->wallets()->where('is_active', true)->get() as $wallet)
                                                    <option value="{{ $wallet->id }}" 
                                                            data-balance="{{ $wallet->balance }}"
                                                            data-currency="{{ $wallet->currency }}">
                                                        {{ $wallet->currency }} Wallet - ₦{{ number_format($wallet->balance, 2) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('wallet_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                            <div class="form-text">
                                                <small id="insufficient-balance" class="text-danger" style="display: none;">
                                                    <i class="fas fa-exclamation-triangle"></i> Insufficient balance in selected wallet
                                                </small>
                                            </div>
                                        </div>

                                        <!-- Transaction PIN -->
                                        <div class="mb-4">
                                            <label for="transaction_pin" class="form-label">Transaction PIN</label>
                                            <input type="password" 
                                                   class="form-control @error('transaction_pin') is-invalid @enderror" 
                                                   id="transaction_pin" 
                                                   name="transaction_pin" 
                                                   maxlength="4"
                                                   pattern="[0-9]{4}"
                                                   placeholder="Enter your 4-digit PIN"
                                                   required>
                                            @error('transaction_pin')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Action Buttons -->
                                        <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                                            <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary me-md-2">
                                                <i class="fas fa-times me-2"></i>Cancel
                                            </a>
                                            <button type="submit" class="btn btn-success" id="payButton">
                                                <i class="fas fa-credit-card me-2"></i>Pay ₦{{ number_format($paymentRequest->amount, 2) }}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            </div>

            <!-- Security Notice -->
            <div class="card mt-4 border-warning">
                <div class="card-body">
                    <div class="d-flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-shield-alt text-warning fa-2x"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-warning mb-1">Security Notice</h6>
                            <p class="text-muted mb-0 small">
                                Only pay this request if you recognize the recipient and the purpose. 
                                Once paid, this transaction cannot be reversed.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const walletSelect = document.getElementById('wallet_id');
    const payButton = document.getElementById('payButton');
    const insufficientBalanceMsg = document.getElementById('insufficient-balance');
    const transactionPinInput = document.getElementById('transaction_pin');
    const requestAmount = @json($paymentRequest->amount ?? 0);

    // Restrict PIN input to numbers only
    if (transactionPinInput) {
        transactionPinInput.addEventListener('input', function(e) {
            this.value = this.value.replace(/[^0-9]/g, '');
            if (this.value.length > 4) {
                this.value = this.value.slice(0, 4);
            }
        });
    }

    // Check wallet balance
    if (walletSelect) {
        walletSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            
            if (selectedOption.value) {
                const balance = parseFloat(selectedOption.dataset.balance);
                
                if (balance < requestAmount) {
                    insufficientBalanceMsg.style.display = 'block';
                    payButton.disabled = true;
                } else {
                    insufficientBalanceMsg.style.display = 'none';
                    payButton.disabled = false;
                }
            } else {
                insufficientBalanceMsg.style.display = 'none';
                payButton.disabled = false;
            }
        });
    }

    // Form submission
    const paymentForm = document.getElementById('paymentForm');
    if (paymentForm) {
        paymentForm.addEventListener('submit', function(e) {
            const selectedWallet = walletSelect.options[walletSelect.selectedIndex];
            
            if (selectedWallet.value) {
                const balance = parseFloat(selectedWallet.dataset.balance);
                
                if (balance < requestAmount) {
                    e.preventDefault();
                    alert('Insufficient balance in selected wallet. Please choose a different wallet.');
                    return false;
                }
            }
            
            // Show loading state
            payButton.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
            payButton.disabled = true;
        });
    }
});
</script>
@endsection