<?php $__env->startSection('content'); ?>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h5 class="modal-title"><?php echo e(trans('application.pay_invoice')); ?></h5>
            </div>
            <?php echo Form::open(['route' => ['getCheckout']]); ?>

            <div class="modal-body" style="padding-bottom: 0">
                <input type="hidden" name="selected_method" id="selected_method"/>
                <input type="hidden" name="invoice_id" value="<?php echo e($invoice_id); ?>"/>
                <header class="header">
                    <div class="card-type">
                        <?php if($paypal_details['status']){ ?>
                            <a class="card" href="#" id="paypal" onclick="selected_method(this);">
                                <img src="<?php echo e(asset('assets/img/paypal_logo.png')); ?>">
                            </a>
                         <?php } if($stripe_details['status']){ ?>
                        <a class="card" href="#" id="stripe" onclick="selected_method(this);">
                            <img src="<?php echo e(asset('assets/img/stripe_logo.png')); ?>">
                        </a>
                        <?php } ?>
                    </div>
                </header>
            </div>
            <div class="modal-footer">
                <button class="btn button" disabled id="method_btn"><?php echo e(trans('application.complete_payment')); ?></button>
            </div>
            <?php echo Form::close(); ?>

        </div>
    </div>
    <style>
        .header {
            background: #00A6EA;
            padding: 15px;
            text-align: center;
        }
        .modal .header h1 {
            margin: 0 0 15px;
            color: #FFF;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .modal .header .card-type .card {
            position: relative;
            width: 50%;
            min-width: 54px;
            text-align: center;
            -webkit-transition: 0.3s ease;
            -moz-transition: 0.3s ease;
            -o-transition: 0.3s ease;
            transition: 0.3s ease;
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        .modal .header .card-type {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-direction: normal;
            -moz-box-direction: normal;
            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        .modal .header .card-type .card.active {
            -webkit-filter: grayscale(0);
            -moz-filter: grayscale(0);
            filter: grayscale(0);
        }
        .modal .header .card-type .card.active:after {
            display: block;
            bottom: -15px;
        }
        .modal .header .card-type .card:after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: 50%;
            margin: 0 0 0 -10px;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            border-bottom: 10px solid #FFF;
            -webkit-transition: 0.3s ease;
            -moz-transition: 0.3s ease;
            -o-transition: 0.3s ease;
            transition: 0.3s ease;
        }
        .modal .modal-footer .button {
            outline: none;
            display: block;
            background: #5cb85c;
            width: 100%;
            border: 0;
            padding: 20px 30px;
            color: #FFF;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
        }
    </style>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('modal', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>