{{-- views/themes/default/payment/chipin.blade.php --}}

@extends('themes.default.layout')

@section('title', 'ChipIn Payment - ' . $website->name)

@section('content')
<!-- ChipIn Payment Section -->
<section class="section" style="padding-top: 120px;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                <div class="card">
                    <div class="card-header text-center bg-primary text-white">
                        <h4 class="mb-0"><i class="bi bi-credit-card me-2"></i>ChipIn Payment Gateway</h4>
                    </div>
                    <div class="card-body p-4">
                        <!-- Order Summary -->
                        <div class="bg-light rounded p-3 mb-4">
                            <h6 class="mb-3">Order Summary</h6>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Order Number:</span>
                                <strong>{{ $order->order_number }}</strong>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Customer:</span>
                                <span>{{ $order->customer_name }}</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span>Total Amount:</span>
                                <strong class="text-primary">RM {{ number_format($order->total_amount, 2) }}</strong>
                            </div>
                        </div>

                        <!-- Dummy ChipIn Interface -->
                        <div class="border rounded p-4 mb-4" style="background: linear-gradient(to right, #2948ff, #396afc);">
                            <div class="text-center text-white mb-4">
                                <h5 class="mb-2">
                                    <i class="bi bi-credit-card-2-front me-2"></i>ChipIn Secure Payment
                                </h5>
                                <p class="mb-0 opacity-75">Malaysia's Trusted Payment Gateway</p>
                            </div>

                            <!-- Dummy Payment Form -->
                            <form id="chipin-payment-form">
                                <div class="row g-3">
                                    <div class="col-12">
                                        <label class="form-label text-white">Card Number</label>
                                        <input type="text" class="form-control" placeholder="1234 5678 9012 3456"
                                               maxlength="19" id="card-number" value="4111 1111 1111 1111">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label text-white">Expiry Date</label>
                                        <input type="text" class="form-control" placeholder="MM/YY"
                                               maxlength="5" id="expiry-date" value="12/25">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label text-white">CVV</label>
                                        <input type="text" class="form-control" placeholder="123"
                                               maxlength="3" id="cvv" value="123">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label text-white">Cardholder Name</label>
                                        <input type="text" class="form-control" placeholder="John Doe"
                                               id="cardholder-name" value="{{ $order->customer_name }}">
                                    </div>
                                </div>

                                <!-- Security Features -->
                                <div class="mt-4 text-center">
                                    <div class="d-flex justify-content-center align-items-center text-white">
                                        <i class="bi bi-shield-check me-2"></i>
                                        <small>256-bit SSL Encryption</small>
                                        <span class="mx-2">•</span>
                                        <i class="bi bi-lock me-1"></i>
                                        <small>PCI DSS Compliant</small>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Payment Buttons -->
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-success btn-lg" onclick="processPayment('success')">
                                <i class="bi bi-check-circle me-2"></i>Complete Payment - RM {{ number_format($order->total_amount, 2) }}
                            </button>

                            <div class="row g-2 mt-2">
                                <div class="col-6">
                                    <button type="button" class="btn btn-outline-danger w-100" onclick="processPayment('failed')">
                                        <i class="bi bi-x-circle me-1"></i>Simulate Failed Payment
                                    </button>
                                </div>
                                <div class="col-6">
                                    <a href="/checkout" class="btn btn-outline-secondary w-100">
                                        <i class="bi bi-arrow-left me-1"></i>Back to Checkout
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Demo Notice -->
                        <div class="alert alert-info mt-4 mb-0" role="alert">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Demo Mode:</strong> This is a demonstration of ChipIn payment gateway.
                            No real payment will be processed. Click "Complete Payment" to simulate a successful transaction.
                        </div>

                        <!-- Accepted Cards -->
                        <div class="text-center mt-4">
                            <small class="text-muted mb-2 d-block">We Accept</small>
                            <div class="d-flex justify-content-center gap-2">
                                <i class="bi bi-credit-card-2-front fs-4 text-primary"></i>
                                <i class="bi bi-credit-card-2-back fs-4 text-success"></i>
                                <span class="badge bg-primary">VISA</span>
                                <span class="badge bg-warning">MC</span>
                                <span class="badge bg-info">AMEX</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Security Information -->
                <div class="text-center mt-4">
                    <div class="row">
                        <div class="col-4">
                            <i class="bi bi-shield-check display-6 text-success"></i>
                            <p class="small mb-0">Secure</p>
                        </div>
                        <div class="col-4">
                            <i class="bi bi-lightning display-6 text-warning"></i>
                            <p class="small mb-0">Fast</p>
                        </div>
                        <div class="col-4">
                            <i class="bi bi-check-circle display-6 text-primary"></i>
                            <p class="small mb-0">Reliable</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <h5>Processing Payment...</h5>
                <p class="text-muted mb-0">Please wait while we process your payment securely.</p>
            </div>
        </div>
    </div>
</div>

<script>
// Format card number input
document.getElementById('card-number').addEventListener('input', function (e) {
    let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
    let formattedValue = value.match(/.{1,4}/g)?.join(' ') ?? value;
    e.target.value = formattedValue;
});

// Format expiry date input
document.getElementById('expiry-date').addEventListener('input', function (e) {
    let value = e.target.value.replace(/\D/g, '');
    if (value.length >= 2) {
        value = value.substring(0, 2) + '/' + value.substring(2, 4);
    }
    e.target.value = value;
});

// Only allow numbers for CVV
document.getElementById('cvv').addEventListener('input', function (e) {
    e.target.value = e.target.value.replace(/\D/g, '');
});

function processPayment(status) {
    // Show loading modal
    const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
    loadingModal.show();

    // Simulate payment processing delay
    setTimeout(function() {
        // Redirect to callback with status
        window.location.href = '/payment/chipin/callback/{{ $order->order_number }}?status=' + status;
    }, 3000); // 3 second delay to simulate processing
}

// Prevent form submission
document.getElementById('chipin-payment-form').addEventListener('submit', function(e) {
    e.preventDefault();
});

// Auto-fill demo data for convenience
document.addEventListener('DOMContentLoaded', function() {
    // Card number formatting on load
    const cardNumber = document.getElementById('card-number');
    if (cardNumber.value) {
        cardNumber.dispatchEvent(new Event('input'));
    }
});
</script>
@endsection