<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap-min.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap-formhelpers-min.css') ?>" media="screen">
<link rel="stylesheet" href="<?= base_url('assets/css/bootstrapValidator-min.css') ?>" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap-side-notes.css') ?>" />
<style type="text/css">
.col-centered {
    display: inline-block;
    float: none;
    text-align: left;
    margin-right: -4px;
}

.row-centered {
    margin-left: 9px;
    margin-right: 9px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="h-100 new-bg py-5">
    <div class="container">
        <form action="<?=base_url('site/process')?>" method="POST" id="paymentForm">
            <div class="row row-centered">

                <div class="col-md-12 mx-auto">
                    <div class="page-header">
                        <h2 class="best-mobile2-title gdfg">
                            Secure Payment Form
                        </h2>
                    </div>

                    <noscript>
                        <div class="bs-callout bs-callout-danger">
                            <h4>JavaScript is not enabled!</h4>
                            <p>This payment form requires your browser to have JavaScript enabled. Please activate JavaScript and reload this page. Check <a href="http://enable-javascript.com" target="_blank">enable-javascript.com</a> for more informations.</p>
                        </div>
                    </noscript>

                    <fieldset>

                        <h5 class="productDetails-title">Shipping Details</h5>


                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">Address</label>
                                    <input type="text" name="address" placeholder="Address" class="address form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">City</label>
                                    <input type="text" name="city" placeholder="City" class="city form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">State</label>
                                    <input type="text" name="state" maxlength="65" placeholder="State" class="state form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">Postal Code</label>
                                    <input type="text" name="zip" maxlength="9" placeholder="Postal Code" class="zip form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">Country</label>
                                    <input type="text" name="country" placeholder="Country" class="country form-control" required>
                                    <!-- <div class="country bfh-selectbox bfh-countries" name="country" placeholder="Select Country" data-flags="true" data-filter="true"></div> -->
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">Email</label>
                                    <input type="email" name="email" maxlength="65" placeholder="Email" class="email form-control" required>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group text-center mt-5">
                            <ul class="list-inline">
                                <li class="list-inline-item"><i class="text-muted fa fa-cc-visa fa-2x"></i></li>
                                <li class="list-inline-item"><i class="fa fa-cc-mastercard fa-2x"></i></li>
                                <li class="list-inline-item"><i class="fa fa-cc-amex fa-2x"></i></li>
                                <li class="list-inline-item"><i class="fa fa-cc-discover fa-2x"></i></li>
                            </ul>
                        </div>
                        <h5 class="productDetails-title">Card Details</h5>


                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">Card Holder's Name</label>
                                    <input type="text" id="custName" name="custName" maxlength="70" placeholder="Card Holder Name" class="card-holder-name form-control">
                                    <div class="invalid-feedback">Please enter the name on card</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">Card Number</label>
                                    <input type="text" id="cardNumber" name="cardNumber" maxlength="19" placeholder="Card Number" class="card-number form-control">
                                    <div class="invalid-feedback">Please enter the card number</div>

                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">Card Expiry Date</label>
                                    <div class="form-inline">
                                        <select id="cardExpMonth" name="cardExpMonth" class="card-expiry-month stripe-sensitive required form-control">
                                            <option value="01" selected="selected">01</option>
                                            <option value="02">02</option>
                                            <option value="03">03</option>
                                            <option value="04">04</option>
                                            <option value="05">05</option>
                                            <option value="06">06</option>
                                            <option value="07">07</option>
                                            <option value="08">08</option>
                                            <option value="09">09</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                        </select>
                                        <span> / </span>
                                        <select id="cardExpYear" name="cardExpYear" data-stripe="exp-year" class="card-expiry-year stripe-sensitive required form-control">
                                        </select>
                                        <script type="text/javascript">
                                        var select = $(".card-expiry-year"),
                                            year = new Date().getFullYear();

                                        for (var i = 0; i < 12; i++) {
                                            select.append($("<option value='" + (i + year) + "' " + (i === 0 ? "selected" : "") + ">" + (i + year) + "</option>"))
                                        }
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="m-3">
                                    <label class="form-label" for="textinput">CVV/CVV2</label>
                                    <input type="text" id="cardCVC" name="cardCVC" placeholder="CVV" maxlength="4" class="card-cvc form-control">
                                </div>
                            </div>
                        </div>

                </div>
                <div class="col-12">
                    <div class="form-group m-3">
                        <!-- <div class="panel panel-success">
                            <div class="panel-heading">
                                <h3 class="panel-title">Important notice</h3>
                            </div>
                            <div class="panel-body">
                                <p class="best-mobile2-para">Your card will be charged 30€ after submit.</p>
                                <p class="best-mobile2-para">Your account statement will show the following booking text:
                                    XXXXXXX </p>
                            </div>
                        </div> -->
                        <div class="control-group" id="error" style="display: none;">
                            <div class="controls">
                                <center id="message" style="color: red;"></center>
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <center>
                                    <button type="submit" id="makePayment" class="read-more-btn send-msg" onclick="stripePay(event)">Pay $<?=$totalPrice?></button>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>
                </fieldset>
        </form>
    </div>
</section>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script>
Stripe.setPublishableKey('<?=$this->config->item('stripe_key')?>');

function stripePay(event) {
    event.preventDefault();
    $('#error').hide();
    $('#makePayment').attr('disabled', 'disabled');
    $('#makePayment').text('...Processing...');
    Stripe.createToken({
        number: $('#cardNumber').val(),
        cvc: $('#cardCVC').val(),
        exp_month: $('#cardExpMonth').val(),
        exp_year: $('#cardExpYear').val()
    }, stripeResponseHandler);
}

function stripeResponseHandler(status, response) {
    if (response.error) {
        $('#makePayment').attr('disabled', false);
        $('#message').html(response.error.message).show();
        $('#error').show();
    } else {
        var stripeToken = response['id'];
        // console.log(stripeToken);
        $('#paymentForm').append("<input type='hidden' name='stripeToken' value='" + stripeToken + "' />");

        $('#paymentForm').submit();
    }
}
</script>