{# @var cart \Pimcore\Bundle\EcommerceFrameworkBundle\CartManager\CartInterface #}
{# @var product \App\Model\Product\AbstractProduct #}

{% extends 'layouts/layout.html.twig' %}

{% do pimcore_head_script().appendFile(SDKUrl) %}

{% block content %}

    <div class="py-5 bg-light">
        <div class="container">

            <div class="row">

                <div class="col-md-8">
                    <h4 class="mb-3">{{ 'checkout.payment' | trans }}</h4>

                    <div id="paypal-button-container"></div>

                    <!-- Form to submit successful payment result to Pimcore -->
                    <form id="js-submit-payment-result" action="{{ path('shop-checkout-start-payment') }}">
                        <input type="hidden" name="paymentMethod" class="js-payment-method-hidden" value=""/>
                        <input type="hidden" name="paymentId" class="js-payment-id-hidden" value=""/>
                    </form>

                </div>

                <div class="col-md-4 mb-4 mt-5 mt-md-0">
                    {% include 'cart/shared/order_summary.html.twig' %}
                </div>


            </div>

            <div class="row mt-5">

                <div class="col-12">

                    <div class="alert alert-info">

                        <h6>Test Payment Data</h6>

                        <div class="row" style="font-size:10pt">
                            <div class="col-md-4">

                                <strong>Credit Card</strong>
                                <table class="table table-sm">
                                    <tr class="tr">
                                        <th class="th">Type</th>
                                        <th class="th">Field</th>
                                        <th class="th">Value</th>
                                    </tr>
                                    <tr class="tr">
                                        <td class="td">Visa</td>
                                        <td class="td">number</td>
                                        <td class="td"><code>4111111111111111</code></td>
                                    </tr>
                                    <tr class="tr">
                                        <td class="td"></td>
                                        <td class="td">expiryDate</td>
                                        <td class="td"><code>Date in the future</code></td>
                                    </tr>
                                    <tr class="tr">
                                        <td class="td"></td>
                                        <td class="td">cvc</td>
                                        <td class="td"><code>123</code></td>
                                    </tr>
                                    <tr><td colspan="3">&nbsp;</td></tr>
                                    <tr class="tr">
                                        <td class="td">Mastercard</td>
                                        <td class="td">number</td>
                                        <td class="td"><code>5555555555554444</code></td>
                                    </tr>
                                    <tr class="tr">
                                        <td class="td"></td>
                                        <td class="td">expiryDate</td>
                                        <td class="td"><code>Date in the future</code></td>
                                    </tr>
                                    <tr class="tr">
                                        <td class="td"></td>
                                        <td class="td">cvc</td>
                                        <td class="td"><code>123</code></td>
                                    </tr>
                                </table>

                            </div>

                            <div class="col-md-4">
                                <strong>EPS</strong>
                                <table class="table table-sm">
                                    <tr class="tr">
                                        <td class="td">any data works, allows you to decide the payment result</td>
                                    </tr>
                                </table>
                            </div>


                            <div class="col-md-4">
                                <strong>Paypal/Sofort</strong>

                                <table class="table table-sm">
                                    <tr class="tr">
                                        <td class="td">Test Credentials</td>
                                        <td class="td"><a href="https://developer.paypal.com/developer/accounts" target="_blank">here in the sandbox</a></td>
                                    </tr>
                                </table>

                            </div>

                        </div>




                    </div>
                </div>


            </div>


        </div>
    </div>

{% endblock %}

{% do pimcore_inline_script().appendFile(asset('static/js/payment.js')) %}