@extends('layouts.portal')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-credit-card me-2"></i>Trust Payment
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Trust Summary -->
                    <div class="alert alert-info mb-4">
                        <h6><strong>Payment Summary</strong></h6>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <p><strong>Trust Name:</strong> {{ $trust->trust_name }}</p>
                                <p><strong>Package:</strong> {{ $package['name'] }}</p>
                            </div>
                            <div class="col-md-6 text-end">
                                <h4 class="text-primary">
                                    <strong>RM {{ number_format($package['price'], 2) }}</strong>
                                </h4>
                                <p class="text-muted">Total Amount Due</p>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Form -->
                    <form action="{{ route('client.trust.payment.process', $trust) }}" method="POST">
                        @csrf

                        <!-- Payment Method Selection -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label class="form-label"><strong>Select Payment Method <span class="text-danger">*</span></strong></label>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="form-check mb-3 p-3 border rounded">
                                    <input class="form-check-input" type="radio" name="payment_method" 
                                        value="credit_card" id="payment_credit_card" 
                                        {{ old('payment_method') == 'credit_card' ? 'checked' : '' }} required>
                                    <label class="form-check-label" for="payment_credit_card">
                                        <i class="fas fa-credit-card me-2 text-primary"></i>
                                        <strong>Credit/Debit Card</strong>
                                        <p class="text-muted ms-4 mt-1">Visa, MasterCard, American Express</p>
                                    </label>
                                </div>

                                <div class="form-check mb-3 p-3 border rounded">
                                    <input class="form-check-input" type="radio" name="payment_method" 
                                        value="bank_transfer" id="payment_bank_transfer"
                                        {{ old('payment_method') == 'bank_transfer' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="payment_bank_transfer">
                                        <i class="fas fa-university me-2 text-success"></i>
                                        <strong>Bank Transfer</strong>
                                        <p class="text-muted ms-4 mt-1">Direct bank transfer to our account</p>
                                    </label>
                                </div>

                                <div class="form-check mb-3 p-3 border rounded">
                                    <input class="form-check-input" type="radio" name="payment_method" 
                                        value="paypal" id="payment_paypal"
                                        {{ old('payment_method') == 'paypal' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="payment_paypal">
                                        <i class="fab fa-paypal me-2" style="color: #003087;"></i>
                                        <strong>PayPal</strong>
                                        <p class="text-muted ms-4 mt-1">Pay securely using your PayPal account</p>
                                    </label>
                                </div>
                            </div>
                        </div>

                        @error('payment_method')
                            <div class="alert alert-danger mb-3">{{ $message }}</div>
                        @enderror

                        <!-- Payment Amount -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label for="amount" class="form-label"><strong>Payment Amount (RM) <span class="text-danger">*</span></strong></label>
                                <div class="input-group">
                                    <span class="input-group-text">RM</span>
                                    <input type="number" class="form-control @error('amount') is-invalid @enderror" 
                                        id="amount" name="amount" step="0.01" min="0"
                                        value="{{ old('amount', $package['price']) }}" readonly>
                                </div>
                                @error('amount')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Payment Details by Method -->
                        <div id="payment-details">
                            <!-- Credit Card Details -->
                            <div id="credit-card-details" class="payment-method-details d-none">
                                <div class="card bg-light mb-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">Credit/Debit Card Information</h6>
                                    </div>
                                    <div class="card-body">
                                        <p class="text-muted">You will be redirected to our secure payment gateway to enter your card details.</p>
                                        <div class="alert alert-info">
                                            <i class="fas fa-lock me-2"></i>
                                            <strong>Secure Payment:</strong> Your payment information is encrypted and secure.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Bank Transfer Details -->
                            <div id="bank-transfer-details" class="payment-method-details d-none">
                                <div class="card bg-light mb-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">Bank Transfer Instructions</h6>
                                    </div>
                                    <div class="card-body">
                                        <p><strong>Bank Name:</strong> Maybank</p>
                                        <p><strong>Account Number:</strong> 123456789</p>
                                        <p><strong>Account Holder:</strong> Will FWG Sdn Bhd</p>
                                        <p><strong>Reference:</strong> TRUST-{{ $trust->id }}</p>
                                        <div class="alert alert-warning">
                                            <i class="fas fa-info-circle me-2"></i>
                                            <strong>Important:</strong> Please use the reference code above when making your transfer.
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- PayPal Details -->
                            <div id="paypal-details" class="payment-method-details d-none">
                                <div class="card bg-light mb-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">PayPal Payment</h6>
                                    </div>
                                    <div class="card-body">
                                        <p class="text-muted">You will be redirected to PayPal to complete your payment.</p>
                                        <div class="alert alert-info">
                                            <i class="fas fa-lock me-2"></i>
                                            <strong>Secure Payment:</strong> PayPal provides secure payment processing.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Terms and Conditions -->
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="agree_terms" name="agree_terms" required>
                                    <label class="form-check-label" for="agree_terms">
                                        I agree to the terms and conditions and authorize this payment of RM {{ number_format($package['price'], 2) }}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-success btn-lg" id="submit-payment">
                                    <i class="fas fa-check me-2"></i>Proceed to Payment
                                </button>
                                <a href="{{ route('client.trust.view', $trust) }}" class="btn btn-outline-secondary btn-lg">
                                    <i class="fas fa-times me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const paymentMethods = document.querySelectorAll('input[name="payment_method"]');
    
    function updatePaymentDetails() {
        const selected = document.querySelector('input[name="payment_method"]:checked');
        if (!selected) return;

        document.querySelectorAll('.payment-method-details').forEach(el => {
            el.classList.add('d-none');
        });

        switch(selected.value) {
            case 'credit_card':
                document.getElementById('credit-card-details').classList.remove('d-none');
                break;
            case 'bank_transfer':
                document.getElementById('bank-transfer-details').classList.remove('d-none');
                break;
            case 'paypal':
                document.getElementById('paypal-details').classList.remove('d-none');
                break;
        }
    }

    paymentMethods.forEach(method => {
        method.addEventListener('change', updatePaymentDetails);
    });

    // Initialize on load
    updatePaymentDetails();

    // Form validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const agreeTerms = document.getElementById('agree_terms');
        if (!agreeTerms.checked) {
            e.preventDefault();
            alert('Please agree to the terms and conditions');
            return false;
        }
    });
});
</script>
@endsection