<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
 <?php $this->load->view('front/includes/header-script')?>
 <title><?=TITLE?></title>
</head>
<body>
 <header>
  <div class="container">
   <div class="logo d-flex">
    <img src="<?=base_url();?>assets/front/img/logo.jpg" alt=""> 
    <span class="d-flex align-items-center justify-content-center">
     <h1>Registration Payment</h1>
   </span>
 </div>
</div>
</header>
<section>
 <div class="container">
   <?php echo form_open('hosted-payment'); ?>
   <div class="select-payment">
    <h3>Select Payment Type</h3><br>
    <div class="credit d-flex"> 
     <span> <input type="radio" checked name="payment_type" value="card" id="host1" class="radio" required><label for="host1"></label>Credit Card / Debit Card</span> 
     <span> <input type="radio" name="payment_type" value="invoice" id="host2" class="radio"><label for="host2"></label>Invoice Company <font style="font-weight: bold;">(Members Only)</font></span>
   </div>
 </div>
 <div class="select-payment">
   <h3>Company Details</h3>
   <div class="card-detail">
    <span class="d-flex">
      <div class="col-md-4 d-flex no-pad"><label for="">Company Name:*</label><input type="text" id="acvv" name="company_name" required></div>
      <div class="col-md-4 d-flex no-pad"><label for="">Billing Contact:*</label><input type="text" id="acvv" name="billing_contact" required></div>
      <div class="col-md-4 d-flex no-pad"><label for="">Customer ID:</label><input type="text" id="acvv" name="customer_id"></div>
    </span>
    <span class="d-flex"><label for="">Street Address:*</label><input type="text" id="aaddress" name="street_adrs" required></span>   
    <span class="d-flex">
      <div class="col-md-4 d-flex no-pad"><label for="">City:*</label><input type="text" name="city_name" required></div>
      <div class="col-md-4 d-flex no-pad"><label for="">State:*</label>
        <select id="state" class="required" name="state" style="margin-left: 4px;" tabindex="8">
          <option value="">Choose State:</option>
          <option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="col-md-4 d-flex no-pad"><label for="">Postal Code:*</label><input type="text" name="post_code" required></div>
    </span>
    <span class="d-flex">
      <div class="col-md-6 d-flex no-pad"><label for="">Phone Number:*</label><input type="text" class="yourphone" id="aphno" name="phone_no" required></div>
      <div class="col-md-6 d-flex no-pad"><label for="">Fax Number: </label><input type="text" id="afaxno" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" name="fax_no"></div>
    </span>
    <span class="d-flex"><label for="" style="width:180px;">Additional Instructions:</label><textarea class="form-control" rows="5" id="comment"  name="adtnal_instrction"></textarea></span> 
  </div>
</div>
<div class="select-payment">
  <h3>Payment Details</h3>
  <div class="credit comp-detail"> 
    <!--<span class="d-flex"> <input type="checkbox" id="detail" class="check_box" onchange="AsAbove();"><label for="start"></label>Same as above</span>--> 
    <div class="form-group d-flex">
      <span class="chk-abc"><input type="checkbox" value="Yes"  name="details" id="start"  class="chk-date1">
        <label for="start"></label>Same as above</span>
      </div>
      <div class="company-details detail">
        <span class="d-flex"><label for="" class="m-200 align-self-center">Card holder Name:*</label>
          <input type="text" id="acard_holder" name="card_holder_name" required>
        </span>
        <span class="d-flex">
         <div class="col-md-4 d-flex no-pad">
          <label for="" class="m-200 text-center align-self-center">Card Type:*</label>
          <select name="card_type" required>
            <option value="">--Select--</option>
            <option value="Express">American Express</option>
            <option value="Master">Master Card</option>
            <option value="Visa">Visa</option>
            <option value="Discover">Discover Card</option>
          </select>
        </div>
        <div class="col-md-8 d-flex no-pad">
          <label for="" class="m-200 text-center align-self-center">Card Number:*
          </label>
          <input type="text" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" maxlength="16" name="card_number" required>
        </div>
      </span>
      <span class="d-flex cd-sub"> 
        <div class="col-md-4 d-flex no-pad">
          <label for="" class="m-200 text-center align-self-center">Expiration Month:*</label>
          <select  class="col-md-6" name="exp_month" id="aexpmo" required>
           <option selected value=''>--Select Month--</option>
           <option value='Jan'>Janaury</option>
           <option value='Feb'>February</option>
           <option value='Mar'>March</option>
           <option value='Apr'>April</option>
           <option value='May'>May</option>
           <option value='Jun'>June</option>
           <option value='Jul'>July</option>
           <option value='Aug'>August</option>
           <option value='Sep'>September</option>
           <option value='Oct'>October</option>
           <option value='Nov'>November</option>
           <option value='Dec'>December</option>
         </select>
       </div>
       <div class="col-md-4 d-flex no-pad">
        <label for="" class="m-200 text-center align-self-center">Exp Year:*</label>
        <select class="col-md-6" id="aexpyar" name="exp_year" required>
         <option selected value=''>--Select Year--</option>
         <option value='2018'>2018</option>
         <option value='2019'>2019</option>
         <option value='2020'>2020</option>
         <option value='2021'>2021</option>
         <option value='2022'>2022</option>
         <option value='2023'>2023</option>
         <option value='2024'>2024</option>
         <option value='2025'>2025</option>
         <option value='2026'>2026</option>
         <option value='2027'>2027</option>
         <option value='2028'>2028</option>
         <option value='2029'>2029</option>
         <option value='2030'>2030</option>
         <option value='2031'>2031</option>
         <option value='2032'>2032</option>
         <option value='2033'>2033</option>
         <option value='2034'>2034</option>
         <option value='2035'>2035</option>
         <option value='2036'>2036</option>
         <option value='2037'>2037</option>
       </select>
     </div>
     <div class="col-md-4 d-flex no-pad"><label for="" class="m-200 text-right align-self-center">CVV Code:*</label>
      <input type="text" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" id="acvv" name="cvv_code" required>
    </div>
  </span>
</div> 
<!--     <div class="company-expand detail">
      <span class="d-flex"><label for="" class="m-200 align-self-center">Card holder Name:*</label><input type="text" id="bcard_holder" name="c_cardholder_name"> </span>
      <span class="d-flex"><label for="" class="m-200 align-self-center">Street Address*</label><input type="text" id="baddress" name="c_street_adrz"> </span>
      <span class="d-flex cd-sub"> 
       <div class="col-md-4 d-flex no-pad"><label for="" class="m-200 text-right align-self-center">Expiration Month:*</label>
        <select name="c_exp_mnth" id="bexpmo">
         <option selected value=''>--Select Month--</option>
         <option value='Jan'>Janaury</option>
         <option value='Feb'>February</option>
         <option value='Mar'>March</option>
         <option value='Apr'>April</option>
         <option value='May'>May</option>
         <option value='Jun'>June</option>
         <option value='Jul'>July</option>
         <option value='Aug'>August</option>
         <option value='Sep'>September</option>
         <option value='Oct'>October</option>
         <option value='Nov'>November</option>
         <option value='Dec'>December</option>
       </select>
     </div>
     <div class="col-md-4 d-flex no-pad"><label for="" class="m-200 text-right align-self-center">Exp Year:*</label>
       <select id="bexpyar" name="c_exp_year">
        <option selected value=''>--Select Year--</option>
        <option value='2018'>2018</option>
        <option value='2019'>2019</option>
        <option value='2020'>2020</option>
        <option value='2021'>2021</option>
        <option value='2022'>2022</option>
        <option value='2023'>2023</option>
        <option value='2024'>2024</option>
        <option value='2025'>2025</option>
        <option value='2026'>2026</option>
        <option value='2027'>2027</option>
        <option value='2028'>2028</option>
        <option value='2029'>2029</option>
        <option value='2030'>2030</option>
        <option value='2031'>2031</option>
        <option value='2032'>2032</option>
        <option value='2033'>2033</option>
        <option value='2034'>2034</option>
        <option value='2035'>2035</option>
        <option value='2036'>2036</option>
        <option value='2037'>2037</option>
      </select>
    </div>
    <div class="col-md-4 d-flex no-pad"><label for="" class="m-200 text-right align-self-center">CVV Code:*</label>
      <input type="text" id="bcvv" name="c_ccv_code">
    </div>
  </span>
  <span class="d-flex cd-sub"> 
   <div class="col-md-6 d-flex no-pad"><label for="" class="m-200 text-right align-self-center">Phone Number:*</label>
    <input type="text" id="bphno" name="c_phone_no"></div>
    <div class="col-md-6 d-flex no-pad"><label for="" class="m-200 text-right align-self-center">Fax Number:*</label>
      <input type="text" id="bfaxno" name="c_fax_no"></div>
    </span>
  </div> -->
</div>
</div>
<div class="select-payment">
  <h3>Sale Information</h3>
  <div class="credit d-flex sale-in">
   <div class="p-2">Total Sale Amount:</div>
   <div class="ml-auto p-2">$ <?=$this->session->userdata('granttotal');?>.00</div>
 </div>
</div>
<div class="select-payment">
  <h3>Notifications / Receipts</h3>
  <div class="credit d-flex"> 
   <span class="align-self-center"> <input type="checkbox" id="host5" class="check_box"><label for="host5"></label>Email me a receipt</span> 
   <span class="d-flex"> <label class="align-self-center m-200">Email Address:</label><input type="email" name="emai_id"></span>
 </div>
</div>
<div class="d-flex justify-content-center bd-highlight mb-3">
  <div class="p-2 bd-highlight"><button type="reset" class="btn clear-btn">Clear</button></div>
  <div class="p-2 bd-highlight"><button type="submit" class="btn process-btn">Process</button></div>
</div>
<?php echo form_close(); ?>
<div class="abc-img d-flex flex-wrap justify-content-center align-items-center"> 
  <img src="<?=base_url();?>assets/front/img/visa.png" alt="">
  <img src="<?=base_url();?>assets/front/img/img.ssl.png" alt="">
  <img src="<?=base_url();?>assets/front/img/data.png" alt="">
  <img src="<?=base_url();?>assets/front/img/abc.png" alt="">
</div>
</div>
</section>
<?php $this->load->view('front/includes/footer-script')?>
<script type="text/javascript">
 $(document).ready(function(){
  $('input[type="checkbox"]').click(function(){
   var inputValue = $(this).attr("id");
   $("." + inputValue).toggle();
 });
});
</script>
<!-- <script type="text/javascript">
  function AsAbove() {
   var cb = document.getElementById('detail');
   var acdhd = document.getElementById('acard_holder');
   var bcdhd = document.getElementById('bcard_holder');
   var aadrs = document.getElementById('aaddress');
   var badrs = document.getElementById('baddress');
   var aexpm = document.getElementById('aexpmo');
   var bexpm = document.getElementById('bexpmo');
   var aexpy = document.getElementById('aexpyar');
   var bexpy = document.getElementById('bexpyar');
   var acvv = document.getElementById('acvv');
   var bcvv = document.getElementById('bcvv');
   var aphn = document.getElementById('aphno');
   var bphn = document.getElementById('bphno');
   var afaxno = document.getElementById('afaxno');
   var bfaxno = document.getElementById('bfaxno');
   if (cb.checked) {
    bcdhd.value = acdhd.value;
    badrs.value = aadrs.value;
    bexpm.value = aexpm.value;
    bexpy.value = aexpy.value;
    bcvv.value = acvv.value;
    bphn.value = aphn.value;
    bfaxno.value = afaxno.value;
  } else {
    bcdhd.value = '';
    badrs.value = '';
    bexpm.value = '';
    bexpy.value = '';
    bcvv.value = '';
    bphn.value = '';
    bfaxno.value = '';
  }
}
</script> -->
</body>
</html>