<?php include("cn.php");?>
<?php $title = "Checkout";?>
<!DOCTYPE html>
<html lang="en">
<?php include("../admin/head-tag.php");?>
<?php 
       $sql_1 = mysqli_query($connect,"select * from app_users where
        Id = '".$_SESSION["userid"]."' ");
        $data_1 = mysqli_fetch_assoc($sql_1);
?>
<style>
body {
  font-family: Arial;
  font-size: 17px;
  padding: 8px;
}

* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  padding: 7px 0;
  font-size: 36px;
}



a {
  color: #2196F3;
}

hr {
  border: 1px solid lightgrey;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}
</style>

<body>

<div class="inner-wrapper">

<?php include("../admin/pre-loader.php");?>

<?php include("header.php");?>

<?php
$user="";
$sql = mysqli_query($connect, "SELECT rentedcars.*, cars.car_name AS car_title, 
driver.driver_name as driver_name
FROM rentedcars 
INNER JOIN cars ON cars.car_id = rentedcars.car_id
LEFT JOIN driver ON driver.driver_id = rentedcars.driver_id
WHERE `BookingNumber`='".$_GET['id']."'");

$data = mysqli_fetch_assoc($sql);
$user = $data['AppUser'];
    
$sql1 = mysqli_query($connect, "SELECT *FROM app_users 
WHERE `Id`='".$user."'");

$customer = mysqli_fetch_assoc($sql1);

?>
 <div class="page-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-3 col-lg-3 col-md-12 theiaStickySidebar">
                <aside class="sidebar sidebar-user">
                    <div class="card ctm-border-radius shadow-sm">
                        <div class="card-body py-4">
                            <div class="row">
                                <div class="col-md-12 mr-auto text-left">
                                    <div class="custom-search input-group">
                                        <div class="custom-breadcrumb">
                                            <ol class="breadcrumb no-bg-color d-inline-block p-0 m-0 mb-2">
                                                <li class="breadcrumb-item d-inline-block"><a href="index.php" class="text-dark">Home</a></li>
                                                <li class="breadcrumb-item d-inline-block active">Checkout Form</li>
                                            </ol>
                                            <h4 class="text-dark">Checkout Form</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </aside>
            </div>
          <div class="col-xl-9 col-lg-9 col-md-12 ctm-border-radius shadow-sm bg-white card">
              <div class="card-header"><h2>Checkout</h2></div>
<div class="card-body">
   <!--<form role="form" action="Pay/ex_2_create_pay_page.php" method="POST">-->
   <!--<form role="form" action="https://www.vtl.ae/booking/checkout.php" method="POST">-->
   <form role="form" action="https://secure.paytabs.com/payment/request" method="POST" id="payform">
       <input type="hidden" id="cart_id" name="cart_id" value="<?php echo $data['BookingNumber'];?>"/>
       <input type="hidden" id="cart_amount" name="cart_amount" value="<?php echo $data['total_amount'];?>"/>
       <input type="hidden" id="trans_class" name="trans_class" value="ecom"/>
       <input type="hidden" id="cart_currency" name="cart_currency" value="AED"/>
<div class="row">
  <div class="col-75">
    <div class="container">
      <!--<form action="/action_page.php">-->
      
        <div class="row">
          <div class="col-50">
            <h3>Billing Address</h3>
            <label for="fname"><i class="fa fa-user"></i> Full Name</label>
            <input type="text" id="fname" name="firstname" placeholder="John M. Doe" value="<?php echo $customer['Name'];?>"/required>
            <label for="email"><i class="fa fa-envelope"></i> Email</label>
            <input type="text" id="email" name="email" placeholder="john@example.com" value="<?php echo $customer['Email'];?>"/required>
            <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
            <input type="text" id="adr" name="address" placeholder="542 W. 15th Street" value="<?php echo $customer['address'];?>"/required>
            <label for="city"><i class="fa fa-institution"></i> City</label>
            <input type="text" id="city" name="city" placeholder="New York" value="<?php echo $customer['City'];?>"/required>

            <div class="row">
              <div class="col-50">
                <label for="state">State</label>
                <input type="text" id="state" name="state" placeholder="NY" value="<?php echo $customer['State'];?>"/required>
              </div>
              <div class="col-50">
                <label for="zip">Zip</label>
                <input type="text" id="zip" name="zip" placeholder="10001" value="<?php echo $customer['Zip'];?>"/required>
              </div>
            </div>
          </div>

          <div class="col-50">
            <h3>Payment</h3>
            <label for="fname">Accepted Cards</label>
            <div class="icon-container">
              <i class="fa fa-cc-visa" style="color:navy; font-size:36;"></i>
              <i class="fa fa-cc-amex" style="color:blue;"></i>
              <i class="fa fa-cc-mastercard" style="color:red;"></i>
              <i class="fa fa-cc-discover" style="color:orange;"></i>
            </div>
            <label for="cname">Name on Card</label>
            <input type="text" id="cname" name="cardname" placeholder="John More Doe" value="<?php echo $customer['NameCard'];?>"/required>
            <label for="ccnum">Credit card number</label>
            <input type="text" id="ccnum" data-paylib="number" placeholder="1111-2222-3333-4444" value="<?php echo $customer['CardNo'];?>"/required>
            <label for="expmonth">Exp Month</label>
            <input type="text" id="expmonth" data-paylib="expmonth" placeholder="September" value="<?php echo $customer['ExpMon'];?>"/required>
            <div class="row">
              <div class="col-50">
                <label for="expyear">Exp Year</label>
                <input type="text" id="expyear" data-paylib="expyear" placeholder="2018" value="<?php echo $customer['ExpYear'];?>"/required>
              </div>
              <div class="col-50">
                <label for="cvv">CVV</label>
                <input type="text" id="cvv" data-paylib="cvv" placeholder="352" value="<?php echo $customer['CVV'];?>"/required>
              </div>
            </div>
          </div>
          
        </div>
        <!--<label>-->
        <!--  <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing-->
        <!--</label>-->
        <input type="submit" value="Pay Now" class="btn1">
      <!--</form>-->
      
      <script type="text/javascript">
var myform = document.getElementById('payform');
paylib.inlineForm({
  'key': 'C6KMBP-B9PM6D-HVNMV7-2V2GRM',
  'form': myform,
  'autoSubmit': true,
  'callback': function(response) {
    document.getElementById('paymentErrors').innerHTML = '';
    if (response.error) {             
      paylib.handleError(document.getElementById('paymentErrors'), response); 
    }
  }
});
</script>
      
      
      
    </div>
  </div>
  <div class="col-25">
    <div class="container">
      <h4>Booking No. <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b><?php echo $data['BookingNumber'];?></b></span></h4>
      <p><a href="#">Start:</a></br><span class="price"><?php echo $data['StartTime'];?></span></p>
      <p><a href="#">End</a> <span class="price"><?php echo $data['EndTime'];?></span></p>
      <p><a href="#">Charges </a> <span class="price"><?php echo "@ AED. ".$data['fare']."/ ".$data['charge_type'];?></span></p>
      
      <hr>
      <p>Amount <span class="price" style="color:black"><b>AED. <?php echo $data['total_amount'];?></b></span></p>
    </div>
  </div>
</div>
</form>

<script type="text/javascript">
var myform = document.getElementById('payform');
paylib.inlineForm({
  'key': 'C6KMBP-B9PM6D-HVNMV7-2V2GRM',
  'form': myform,
  'autoSubmit': true,
  'callback': function(response) {
    document.getElementById('paymentErrors').innerHTML = '';
    if (response.error) {             
      paylib.handleError(document.getElementById('paymentErrors'), response); 
    }
  }
});
</script>
        
      </div>
</div>
        </div>
    </div>
</div>    	 
    

<?php include("../admin/scripts.php");?>
    
<div class="sidebar-overlay" id="sidebar_overlay"></div>
</div>
</body>
</html>