{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_payment_method' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_dashboard'), 'title': 'Home'
    },
    {
        'title': 'Payment Method'
    }
]%}
{% block title %}{{ title }}{% endblock %}
{% block stylesheet %}
    <style>
        body{
            background: #f5f5f5
        }
        .rounded{
            border-radius: 1rem
        }
        .nav-pills .nav-link{
            color: #555
        }
        .nav-pills .nav-link.active{
            color: white
        }
        input[type="radio"]{
            margin-right: 5px
        }
        .bold{
            font-weight:bold
        }
    </style>
{% endblock %}
{% block content %}
<div class="container py-5">
    <!-- For demo purpose -->
    <div class="row mb-4">
        <div class="col-lg-8 mx-auto text-center">
            <h1 class="display-6"> Payment Method</h1>
        </div>
    </div> <!-- End -->
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card ">
                <div class="card-header">
                    <div class="bg-white shadow-sm pt-4 pl-2 pr-2 pb-2">
                        <!-- Credit card form tabs -->
                        <ul role="tablist" class="nav bg-light nav-pills rounded nav-fill mb-3">
                            <li class="nav-item"> <a data-toggle="pill" href="#credit-card" class="nav-link active "> <i class="fas fa-credit-card mr-2"></i> Credit Card </a> </li>
                            <li class="nav-item"> <a data-toggle="pill" href="#sepa" class="nav-link "> <i class="fab fa-sepa mr-2"></i> SEPA </a> </li>
                        </ul>
                    </div> <!-- End -->

                    <!-- Credit card form content -->
                    <div class="tab-content">

                        <!-- credit card info-->
                        <div id="credit-card" class="tab-pane fade show active pt-3">
                            <form id="paymentForm" role="form" method="post" action="{{ path('app_front_payment_method') }}">
                                <input type="hidden" name="paymentMethod" value="credit card">
                                <div class="form-group">
                                    <label for="username">
                                        <h6>Card Owner</h6>
                                    </label>
                                    <input type="text" name="username" placeholder="Card Owner Name" required class="form-control">
                                </div>
                                <div class="form-group mt-3">
                                    <label for="cardNumber">
                                        <h6>Card number</h6>
                                    </label>
                                    <input type="text" id="cardNumber" name="cardNumber" placeholder="Valid card number" class="form-control" required pattern="[0-9]{16}" title="Please enter a 16-digit card number">
                                </div>
                                <div class="row mt-3">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>
                                                <h6>Expiration Date</h6>
                                            </label>
                                            <div class="input-group">
                                                <input type="number" placeholder="MM" name="expirationMonth" class="form-control" required min="1" max="12">
                                                <input type="number" placeholder="YY" name="expirationYear" class="form-control" required min="{{ "now"|date("Y") }}" max="{{ "now"|date("Y") + 10 }}"> </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group mb-4">
                                            <label data-toggle="tooltip" title="Three digit CV code on the back of your card">
                                                <h6>CVV <i class="fa fa-question-circle d-inline"></i></h6>
                                            </label>
                                            <input type="text" name="cvv" required class="form-control" pattern="[0-9]{3}" title="Please enter a 3-digit CVV">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mt-3">
                                    <button id="submitButton" type="submit" class="subscribe btn btn-primary btn-block shadow-sm"> Add Payment Method</button>
                                </div>
                            </form>
                        </div> <!-- End -->
                        <!-- SEPA info -->
                        <div id="sepa" class="tab-pane fade pt-3">
                            <form role="form" method="post" action="{{ path('app_front_payment_method') }}">
                                <input type="hidden" name="paymentMethod" value="sepa">
                                <div class="form-group">
                                    <p class="text-muted">Information about the Direct Debit Mandate, Duration (3-5 business days)</p>
                                    <p class="text-muted">
                                        By providing your IBAN and confirming this payment, you are authorizing Al Growth.de and Stripe, our payment service provider, to send instructions to your bank to debit your account and your bank to debit your account in accordance with those instructions. You are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be clalmed within 8 weeks starting from the date on which your account was debited.</p>
                                </div>
                                <div class="form-group mt-3">
                                    <label for="cardNumber">
                                        <h6>Account Number(IBAN)</h6>
                                    </label>
                                    <input type="text" name="ibanNumber" placeholder="AB00 1234 5678 9012 3456 7890" class="form-control " required>
                                </div>
                                <div class="form-group mt-3">
                                    <button type="submit" class="subscribe btn btn-primary btn-block shadow-sm"> Add Payment Method</button>
                                </div>
                            </form>
                        </div> <!-- End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    <script>
        $(function() {
          $('[data-toggle="tooltip"]').tooltip()
        })

        // document.getElementById('cardNumber').addEventListener('input', function (e) {
        //     var target = e.target,
        //         position = target.selectionEnd,
        //         length = target.value.length;
        //
        //     target.value = target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
        //
        //     // Restore the cursor position after adding space
        //     target.setSelectionRange(position + Math.ceil(position / 5) - (length > 0 && length % 5 == 0 ? 1 : 0), position + Math.ceil(position / 5) - (length > 0 && length % 5 == 0 ? 1 : 0));
        // });
    </script>
{% endblock %}