<?php
defined('BASEPATH') or exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/card-bootstrap.min.css"/>
    <script src="<?php echo base_url(); ?>assets/libs/jquery/jquery.min.js"></script>
    <style type="text/css">
        .panel-title {
            display: inline;
            font-weight: bold;
        }

        .display-table {
            display: table;
        }

        .display-tr {
            display: table-row;
        }

        .display-td {
            display: table-cell;
            vertical-align: middle;
            width: 61%;
        }
        .pull-right {
            float: right!important;
            background: #fff;
            padding: 9px 10px;
            border-radius: 10px;
        }
        .theme_btn {
           color: #fff;
            /*background-color: #d31145;*/
            /*border-color: #d31145;*/
            background-color: #00c46c;
            border-color: #00c46c;
            margin-top: 10px;
            font-size: 16px;
            font-weight: 600;
        }
         .theme_btn:hover {
           color: #fff;
           background: #bf0739;
        }
        .panel-default {
            border-color: #d31145;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0px 0px 20px #f5f5f5;
        }
        .stripe_form .form-control {
            border: 1px solid #ED7D58 !important;
            border-radius: 50px;
            border: none !important;
            box-shadow: 0px 0px 8px -3px #858585 !important;
            border-radius: 6px !important;
        }
        .stripe_form .form-control:focus {
            box-shadow: 0px 0px 8px -3px #d31145  !important;
        }
    </style>
</head>

<body>

<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h3><b>Payment</b></h3>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <div class="container">

                <div class="row align-items-center justify-content-center">
                    <div class="col-md-6">
                        <div class="panel panel-default credit-card-box stripe_form">
                            <div class="panel-heading display-table">
                                <div class="row display-tr">
                                    <h3 class="panel-title display-td">Card Details</h3>
                                    <div class="display-td">
                                        <img class="img-responsive pull-right" src="<?php echo base_url(); ?>assets/images/visa.png">
                                    </div>
                                </div>
                            </div>
                            <div class="panel-body">

                                <?php if($this->session->flashdata('success')) { ?>
                                    <div class="alert alert-success text-center">
                                        <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                                        <p><?php echo $this->session->flashdata('success'); ?></p>
                                    </div>
                                <?php } ?>

                                <form role="form" action="<?php echo base_url('CartController/purchase'); ?>" method="post" class="form-validation" data-cc-on-file="false" data-stripe-publishable-key="<?php echo $this->config->item('stripe_key') ?>" id="payment-form">
                                    <!--<div class='form-row row'>-->
                                        <div class='col-xs-12 form-group required'>
                                            <label class='control-label'>Name on Card</label>
                                            <input class='form-control' size='4' type='text'>
                                        </div>
                                    <!--</div>-->

                                    <!--<div class='form-row row'>-->
                                        <div class='col-xs-12 form-group required'>
                                            <label class='control-label'>Card Number</label>
                                            <input autocomplete='off' class='form-control card-number' size='20' type='text'>
                                        </div>
                                    <!--</div>-->

                                    <!--<div class='form-row row'>-->
                                        <div class='col-xs-12 col-md-4 form-group cvc required'>
                                            <label class='control-label'>CVV</label>
                                            <input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311'
                                                   size='4' type='text'>
                                        </div>
                                        <div class='col-xs-12 col-md-4 form-group expiration required'>
                                            <label class='control-label'>Expiration Month</label>
                                            <input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
                                        </div>
                                        <div class='col-xs-12 col-md-4 form-group expiration required'>
                                            <label class='control-label'>Expiration Year</label>
                                            <input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
                                        </div>
                                    <!--</div>-->

                                    <div class='form-row row'>
                                        <div class='col-md-12 error form-group hide'>
                                            <div class='alert-danger alert'>Error occured.</div>
                                        </div>
                                    </div>

                                    
                                    <input class='id' name="id" value="<?php echo $_GET['id'] ?>" type='hidden'>
                                    <input class='address' name="address" value="<?php echo $_GET['address'] ?>" type='hidden'>
                                    <input class='isDelivery' name="isDelivery" value="<?php echo $_GET['isDelivery'] ?>" type='hidden'>
                                    <input class='name' name="name" value="<?php echo $_GET['name'] ?>" type='hidden'>
                                    <input class='phone' name="phone" value="<?php echo $_GET['phone'] ?>" type='hidden'>
                                    <input class='country' name="country" value="<?php echo $_GET['country'] ?>" type='hidden'>
                                    <input class='total_price' name="total_price" value="<?php echo $_GET['total_price'] ?>" type='hidden'>
                                    <input class='site_id' name="site_id" value="<?php echo $_GET['site_id'] ?>" type='hidden'>
                                    <input class='price' name="price" value="<?php echo $_GET['price'] ?>" type='hidden'>
                                    <input name="package_id" value="<?php echo $_GET['package_id'] ?>" type='hidden'>
                                    <input name="guest_id" value="<?php echo $_GET['guest_id'] ?>" type='hidden'>


                                    <!--<div class="row">-->
                                        <div class="col-md-4 form-group expiration required">
                                            <button class="btn theme_btn btn-lg btn-block " type="submit">Pay ($<?php echo($_GET['total_price']) ?>)</button>
                                        </div>
                                    <!--</div>-->

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

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

<script type="text/javascript">
    $(function () {
        var $stripePg = $(".form-validation");
        $('form.form-validation').bind('submit', function (e) {
            var $stripePg = $(".form-validation"),
                inputSelector = ['input[type=email]', 'input[type=password]',
                    'input[type=text]', 'input[type=file]',
                    'textarea'
                ].join(', '),
                $inputs = $stripePg.find('.required').find(inputSelector),
                $errorMessage = $stripePg.find('div.error'),
                valid = true;
            $errorMessage.addClass('hide');

            $('.has-error').removeClass('has-error');
            $inputs.each(function (i, el) {
                var $input = $(el);
                if ($input.val() === '') {
                    $input.parent().addClass('has-error');
                    $errorMessage.removeClass('hide');
                    e.preventDefault();
                }
            });

            if (!$stripePg.data('cc-on-file')) {
                e.preventDefault();
                Stripe.setPublishableKey($stripePg.data('stripe-publishable-key'));
                Stripe.createToken({
                    number: $('.card-number').val(),
                    cvc: $('.card-cvc').val(),
                    exp_month: $('.card-expiry-month').val(),
                    exp_year: $('.card-expiry-year').val()
                }, handleStripePayment);
            }

        });

        function handleStripePayment(status, res) {
            if (res.error) {
                $('.error')
                    .removeClass('hide')
                    .find('.alert')
                    .text(res.error.message);
            } else {
                var token = res['id'];
                $stripePg.find('input[type=text]').empty();
                $stripePg.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                $stripePg.get(0).submit();
            }
        }

    });
</script>

</html>