<!-- This snippet supports rendering separate standalone buttons 
in different parts of your page with unique payment methods. 
Test EMAIL: sb-cbmre43313068@business.example.com
Test PASSWORD: 9JC?].qM
-->

<?= $this->extend('layout/register_layout') ?>
<?= $this->section('content') ?>

<div class="container d-flex justify-content-center align-items-start" style="min-height: 100vh; padding-top: 80px;">
    <div class="registration-form text-center p-4 rounded-4 shadow"
        style="background-color: white; max-width: 600px; width: 300%;">

        <!-- Logo -->
        <div class="mb-4">
            <a href="<?= base_url('/parent_dashboard') ?>">
                <img src="<?= base_url('assets/images/alrahma_logo.png') ?>" alt="Alrahma Logo"
                    style="width: 180px; height: 120px;">
            </a>
        </div>

        <!-- Page Title -->
        <h3 class="text-success" style="font-family: Arial, sans-serif;">Payment</h3>
        <br>

        <!-- PayPal Button -->
        <div class="d-flex justify-content-center">
            <div id="paypal-button-container"></div>
        </div>
        <p class="text-success">
            <br><strong>Your payment information, including credit card and bank account details, is securely stored only by PayPal and Venmo. </strong>
        </p>
        <p class="text-danger">
            We do not collect or save any financial data on our website.
        </p>
    </div>
</div>

<?= $this->endSection() ?>



<?= $this->section('scripts') ?>
<script src="https://www.paypal.com/sdk/js?client-id=AYsiOekZUvrjgx9C5c554ZeSQ4W6yd0ZX-OHE93_D0fWoa4YXrMmroEeLiAjjdCKkELH8EVZR_yGMLPS&currency=USD&components=buttons,funding-eligibility&enable-funding=venmo&disable-funding=card,paylater">
</script>
<script>
    const parentName = <?= json_encode($parentName) ?>;
    const totalAmount = <?= json_encode(number_format($totalAmount, 2, '.', '')) ?>;
    const schoolId = <?= json_encode($schoolId) ?>;

    paypal.Buttons({
        style: {
            layout: 'vertical',
            color: 'blue',
            shape: 'rect',
            label: 'paypal'
        },
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: totalAmount
                    },
                    custom_id: `${schoolId}`,
                    description: `Payment by ${parentName}`
                }]
            });
        },

        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                alert('Transaction completed by ' + details.payer.name.given_name + ' for <?= esc($parentName) ?>');
            });
        },
        onError: function(err) {
            console.error('An error occurred during the transaction', err);
        }
    }).render('#paypal-button-container');
</script>

<?= $this->endSection() ?>