<?php $rate = $controller->getConfigValue($data2,"dollarRate"); $charges = $controller->getConfigValue($data2,"cardCharges"); ?>
<div class="page-content header-clear-medium">


    <div class="card card-style">

        <div class="content text-center">
            <img src="../../assets/images/icons/user-verify.png" style="width:100px; height:100px;" />

            <p class="mb-0 font-600 color-highlight">Create Virtual Card </p>
            <h1>Virtual Card </h1>
            
             <?php if (empty($data->sCard)) { ?>
   
          <div class="mt-5">
                <form method="post" enctype="multipart/form-data" class="contactForm the-submit-form">
                   <fieldset> 
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="phone" class="color-theme opacity-80 font-700 font-12">Phone Number</label>
                            <input type="number" name="phone" placeholder="Phone Number"  class="round-small" required />
                        </div>
                        
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="fname" class="color-theme opacity-80 font-700 font-12">First Name</label>
                            <input type="text" name="fname" placeholder="First Nmae"  class="round-small" required />
                        </div>

                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="lname" class="color-theme opacity-80 font-700 font-12">Last Name</label>
                            <input type="text" name="lname" placeholder="Last Name"  class="round-small" required />
                        </div>
                   
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="email" class="color-theme opacity-80 font-700 font-12">Email</label>
                            <input type="email" name="email" placeholder="Email"  class="round-small" required />
                        </div>

                   
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="bvn" class="color-theme opacity-80 font-700 font-12">BVN</label>
                            <input type="number" name="bvn" placeholder="BVN"  class="round-small" required />
                        </div>
                        
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="nin" class="color-theme opacity-80 font-700 font-12">NIN</label>
                            <input type="number" name="nin" placeholder="NIN"  class="round-small" required />
                        </div> 
                        
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="street" class="color-theme opacity-80 font-700 font-12">Street</label>
                            <input type="text" name="street" placeholder="Street"  class="round-small" required />
                        </div>
                        
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="city" class="color-theme opacity-80 font-700 font-12">City</label>
                            <input type="text" name="city" placeholder="City"  class="round-small" required />
                        </div>
                        
                        
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="state" class="color-theme opacity-80 font-700 font-12">State</label>
                            <input type="text" name="state" placeholder="State"  class="round-small" required />
                        </div>
                        
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="postal_code" class="color-theme opacity-80 font-700 font-12">Postal Code</label>
                            <input type="text" name="postal_code" placeholder="Postal Code"  class="round-small" required />
                        </div>
                        
                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="photo" class="color-theme opacity-80 font-700 font-12">Photo</label>
                            <input type="file" name="image" placeholder="Photo"  class="round-small form-control" required />
                        </div>


                        <div class="input-style input-style-always-active has-borders validate-field">
                            <label for="dob" class="color-theme opacity-80 font-700 font-12">Enter Date Of Birth (Month/Day/Year)</label>
                            <input type="date" name="dob" placeholder="Date Of Birth"  class="round-small" required />
                        </div>

                        <div class="form-button">
                            <button type="submit" name="virtual-card-account" style="width: 100%;" class="the-form-btn btn btn-full btn-l font-600 font-15 gradient-highlight mt-4 rounded-s">
                                Create Virtual Card
                            </button>
                        </div>
                    </fieldset>
                </form>
            </div> <?php } else {?>  
            
             <p class="mb-1 font-600 text-success mb-5"> Create New Card. VISA or MASTERCARD</p>
               <form method="post"> 
               
                <!--<div class="input-style input-style-always-active has-borders validate-field">-->
                <!--            <label for="name" class="color-theme opacity-80 font-700 font-12">Card Name</label>-->
                <!--            <input type="text" name="name" placeholder="e.g: Ads Card"  class="round-small" required />-->
                <!-- </div>-->
                        
                <div class="input-style input-style-always-active has-borders mb-4">
               
                        
                <div class="input-style input-style-always-active has-borders mb-4">
                  <label for="cardtype" class="color-theme opacity-80 font-700 font-12">Select Card</label>
                   <select name="cardtype" required/>
                   <option value="" disabled="" selected="">Select Card</option>
                   <option value="VISA" >VISA</option>
                   <option value="MASTERCARD">MASTERCARD</option>
                   </select>
                                
                                <span><i class="fa fa-chevron-down"></i></span>
                                <i class="fa fa-check disabled valid color-green-dark"></i>
                                <i class="fa fa-check disabled invalid color-red-dark"></i>
                                <em></em>
                 </div>
                 
                  <div class="input-style input-style-always-active has-borders validate-field">
                     <label for="name" class="color-theme opacity-80 font-700 font-12">Amount To TopUp</label>
                     <input type="text" name="amount" id="amount" placeholder="Amount To TopUp" onkeyup="calculateDollarToPay()"  class="round-small" required />
                 </div>
                 
                  <div class="input-style input-style-always-active has-borders validate-field">
                     <label for="name" class="color-theme opacity-80 font-700 font-12">Charges</label>
                     <input type="text" value="<?php echo "$". $charges;?> "  class="round-small" disabled />
                    <b class="text-danger"> Rate: $1 / <?php echo $rate;?></b> And <b class="text-success"><b class="text-success" id="amountToPay"></b> </b>
                 </div>
               
              <input type="hidden" value="<?php echo $data->sCard;?>" name="customer_id">
              <input value="" id="amounttopay" name="amounttopay" type="hidden" />
             <button type="submit" name="generate-card" style="width: 100%;" class="the-form-btn btn btn-full btn-l font-600 font-15 gradient-highlight mt-4 rounded-s">
               Generate The Virtual Card
             </button> 
             </form>  <?php  } ?>
            

            
        </div>

    </div>

</div>
</div>

</div>

