<style type="text/css">
.panel-info>.panel-heading {
    color: #fff;
    background-color: #a67c00;
    border-color: #a67c00;
}
.panel-info {
    border-color: #a67c00;
}
.panel-info>.panel-heading  a{color: #fff;}
.shopping .media .thumbnail {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: block;
    height: 60px;
    line-height: 1.42857;
    margin-bottom: 2px;
    padding: 4px;
    transition: border 0.2s ease-in-out 0s;
    width: 50px;
}

.shopping .media-heading {
    color: #12151a;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 10px 2px 0 8px;
    text-transform: none;
}

.checkout-button {
    background-color: #323232;
    border: 2px solid transparent;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 25px !important;
    transition: all 0.4s ease-in-out 0s;
}

</style>



<div class="sliderSec">
    <div class="container">
        <? $this->load->view('_layout/front/_navigation');?>
    </div>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="<?=i('')?>list.jpg" alt="" style="width:100%;">
                <div class="innerhead">
                    <h3><?=$title?></h3>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clearfix"></div>



<!-- Checkout Cart Section Starts Here -->
<div class="searchSec">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

<!-- Shopping Cart Section Starts Here -->
    <div class="container">
    <div class="checkout-main">
            <div class="row cart-head">
                <div class="container">
                <div class="row">
                    <p></p>
                </div>
                <div class="row">
                    <!-- <div>
                        <span class="step step_complete m-left-17" > <a href="#" class="check-bc">Shopping Cart</a> <span class="step_line step_complete">&nbsp;</span> <span class="step_line backline">&nbsp;</span> </span>
                        <span class="step step_complete"> <a href="#" class="check-bc">Checkout</a> <span class="step_line ">&nbsp;</span> <span class="step_line step_complete">&nbsp;</span> </span>
                        <span class="step_thankyou check-bc step_complete">Thank you</span>
                    </div> -->
                </div>
                <div class="row">
                    <p></p>
                </div>
                </div>
            </div>    
            <div class="row cart-body">
                
                
                <form class="form-horizontal" id='paypal-form' action="<?=l('paypal/paynow_hotpacks')?>" autocomplete="off" >

                    <input type="hidden" name="amount" value="<?=$total_order_amount?>" >
                    <input type="hidden" name="order_id" value="<?=$this->input->get('oid')?>" >

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-md-offset-3 col-sm-offset-3">
                    
                    <!--CREDIT CART PAYMENT-->
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <span><i class="glyphicon glyphicon-lock"></i></span> Secure Payment</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <div class="col-md-12"><strong>Card Type:</strong></div>
                                <div class="col-md-12">
                                    <select id="CreditCardType" required name="card[cardtype]" class="form-control" autocomplete="false" >
                                        <option value="">Select Card</option>
                                        <option value="visa">Visa</option>
                                        <option value="mastercard">MasterCard</option>
                                        <option value="amex">American Express</option>
                                        <option value="jcb">JCB</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-12">
                                    <strong>Your Name</strong>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <input type="text" required class="form-control" name="card[card_fname]" placeholder="First Name" autocomplete="false" >
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <input type="text" required class="form-control" name="card[card_lname]" placeholder="Last Name" autocomplete="false" >
                                </div>
                            </div>


                            <div class="form-group">
                                <div class="col-md-12"><strong>Credit Card Number:</strong></div>
                                <div class="col-md-12"><input type="text" required class="form-control" name="card[card_no]" placeholder='Credit Card Number' autocomplete="false" ></div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12"><strong>Card CVV:</strong></div>
                                <div class="col-md-12"><input type="text" required class="form-control" name="card[card_cvv]" placeholder='Card CVV' autocomplete="false" ></div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <strong>Expiration Date</strong>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <select class="form-control" name="card[card_expiry]" required autocomplete="false" >
                                        <option value=''>Month *(Required)</option>
                                        <option value='1'>January</option>
                                        <option value='2'>February</option>
                                        <option value='3'>March</option>
                                        <option value='4'>April</option>
                                        <option value='5'>May</option>
                                        <option value='6'>June</option>
                                        <option value='7'>July</option>
                                        <option value='8'>August</option>
                                        <option value='9'>September</option>
                                        <option value='10'>October</option>
                                        <option value='11'>November</option>
                                        <option value='12'>December</option>
                                </select>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <select class="form-control" name="card[card_year]" required autocomplete="false" >
                                        <option value="">Year</option>
                                        <?
                                        for ($i=0; $i <= 10; $i++) { 
                                            echo "<option value='".(date('Y')+$i)."'>".(date('Y')+$i)."</option>";
                                        }
                                        ?>
                                </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <span>Pay secure using your credit card.</span>
                                </div>
                                <div class="col-md-12">
                                    <ul class="cards">
                                        <li class="visa hand"><a href="#"><img src="<?=i('')?>visa.png"></a></li>
                                        <li class="mastercard hand"><a href="#"><img src="<?=i('')?>master-card.png"></a></li>
                                        <li class="amex hand"><a href="#"><img src="<?=i('')?>american-ex.png"></a></li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <button type="submit" id='payment-btn' class="btn btn-primary btn-submit-fix">Process Payment</button>

                                    <div id='payment-form_loading' style='display: none'>
                                        <img src="<?=l('assets/global/images/preloader.gif')?>">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--CREDIT CART PAYMENT END-->
                </div>
                
                </form>
            </div>
            <div class="row cart-footer">
        
            </div>
    </div>
    </div>

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





<script type="text/javascript">
$(function() {
    var $form = $('#paypal-form');
    $form.submit(function(event) {
      
      
      // Disable the submit button to prevent repeated clicks:
      $form.find('#payment-btn').prop('disabled', true);
      
      $("#payment-form_loading").show();
      $form.find('#payment-btn').hide();
      var form = $(this).closest('form');
      var url = form.attr('action');
      var data = form.serialize();

      /* NEW SCRIPT START*/
      jQuery.ajax({
        type: "post",
        url: url,
        data: data,
        dataType: "json",
        success: function(s)
        {
          if(s.status)
          {
            console.log(s.status);
            $("#payment-form_loading").hide();
            $form.find('#payment-btn').show();
            $form.find('#payment-btn').prop('disabled', false);

            $form[0].reset();
            window.location.href = "<?=l('cart/success')?>?oid="+s.id;
          }
          else
          {
            Toastr.error(s.desc);
            $form.find('#payment-btn').show();
            $("#payment-form_loading").hide();
            $form.find('#payment-btn').prop('disabled', false);
            window.location.href = "<?=l('cart/error')?>?oid="+s.id;
          }          
        },
        beforeSend: function(msg)
        {
            $form.find('#payment-btn').hide();
            $("#payment-form_loading").show();
            $form.find('#payment-btn').prop('disabled', true);
            
        }
      });     
      return false;
    });
});
</script>