<?php
session_start();
session_regenerate_id();
require_once('./system/function.php');
require_once('./config.php');
?>
<!DOCTYPE html>
<html lang="en">
<?php require_once('head.php');?>
<body class="sp-background">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg" style="background: linear-gradient(90deg, #085bac, #11c4cb); box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
    <div class="container">
        <a class="navbar-brand text-white font-weight-bold" href="#">
            <i class="fas fa-qrcode mr-2"></i><?php echo $upi_name;?>
        </a>
        <div class="navbar-nav ml-auto">
            <span class="navbar-text text-white">
                <i class="fas fa-rupee-sign"></i> <?php echo $txnAmount;?>
            </span>
        </div>
    </div>
</nav>

<div class="p-3">
<div class="container pl-5 pr-5">	
<?php
if(isset($_POST['txnAmount']) && 
!empty($_POST['txnNote']) && 
!empty($_POST['cust_Mobile']) && 
!empty($_POST['cust_Email'])){
    
$txn_ref_id = 'T'.date('Ymdhis');
//$txn_ref_id = 'T2407131336076509921926';
$txnAmount = $_POST['txnAmount'];
$txnNote = $_POST['txnNote'];
$cust_Mobile = $_POST['cust_Mobile'];
$cust_Email = $_POST['cust_Email'];

if(isset($upi_id) && !empty($upi_id) && isset($upi_name) && !empty($upi_name) && isset($paytm_merchant) && !empty($paytm_merchant)){
$_SESSION['muid'] = $paytm_merchant;
$_SESSION['auth_token'] = "nsjkdfhj";
$_SESSION['txn_ref_id'] = $txn_ref_id;
$_SESSION['upi_id'] = $upi_id;
$_SESSION['client_orderid'] = $txn_ref_id;	
$_SESSION['txnAmount'] = $txnAmount;	
$_SESSION["txnNote"] = $txnNote;
$_SESSION['cust_Mobile'] = $cust_Mobile;
$_SESSION['cust_Email'] = $cust_Email;
echo "<script>
setTimeout(function(){ 
document.getElementById(\"qrcode\").innerHTML = '';
GenerateQR('".$upi_id."', '".$upi_name."', '".$txnAmount."', '".$txn_ref_id."', '".$txnNote."'); 
var upilink = document.getElementById(\"qrcode\").title;
document.getElementById(\"upilink\").href = upilink;
}, 1500);
</script>";	
$html = '
<form id="formSubmit" action="'.$callback_url.'" method="post" style="display:none;">
<input type="hidden" id="status" name="status">
<input type="hidden" id="message" name="message">
<input type="hidden" name="amount" value="'.$txnAmount.'">
<input type="hidden" name="txn_order_id" value="'.$txn_ref_id.'">
<input type="hidden" name="cust_Mobile" value="'.$cust_Mobile.'">
<input type="hidden" name="cust_Email" value="'.$cust_Email.'">
<input type="hidden" id="hash" name="hash">
</form>
<script type="text/javascript" src="./assets/dist/js/paytmTxnStatus.js"></script>
';
echo $html;
	
}}else{
echo '<h2 style="color:white" class="text-center">Parameter Missing<br>Redirect...</h2>';
redirect($callback_url,'2000');		
exit();	
}
?>

<div class="row d-flex justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
    <div class="payment-card shadow-lg" style="border-radius: 20px; border: none; overflow: hidden; background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);">
        <div class="card-header text-center position-relative" style="background: linear-gradient(135deg, #085bac 0%, #11c4cb 100%); padding: 25px 20px; border-radius: 0;">
            <div class="header-decoration" style="position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ffffff20, #ffffff60, #ffffff20);"></div>
            <h4 class="text-white mb-1 font-weight-bold">
                <i class="fas fa-qrcode mr-2" style="font-size: 1.2em;"></i>Secure Payment
            </h4>
            <p class="text-white-50 mb-0 small">Scan QR or Copy UPI ID</p>
        </div>
        <div class="card-body text-center" style="padding: 30px 25px;">
            <div class="merchant-info mb-4">
                <div class="row">
                    <div class="col-7">
                        <div class="text-muted small mb-1">
                            <i class="fas fa-store mr-1"></i>Merchant
                        </div>
                        <div class="text-dark font-weight-bold" style="font-size: 0.95rem;"><?php echo $upi_name;?></div>
                    </div>
                    <div class="col-5 text-right">
                        <div class="text-muted small mb-1">
                            <i class="fas fa-rupee-sign mr-1"></i>Amount
                        </div>
                        <div class="text-success font-weight-bold h5 mb-0">
                            ₹<?php echo $txnAmount;?>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="separator mb-4">
                <hr style="border: none; height: 1px; background: linear-gradient(90deg, transparent, #dee2e6, transparent);">
            </div>
            
            <div class="upi-apps mb-4">
                <div class="text-dark font-weight-bold mb-3" style="font-size: 0.9rem;">
                    <i class="fas fa-mobile-alt mr-2 text-primary"></i>Supported UPI Apps
                </div>
                <div class="d-flex justify-content-center align-items-center flex-wrap" style="gap: 15px;">
                    <div class="app-icon" style="transition: transform 0.2s;">
                        <img src="./assets/img/gpay.png" alt="Google Pay" height="30px" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> 
                    </div>
                    <div class="app-icon" style="transition: transform 0.2s;">
                        <img src="./assets/img/paytm.png" alt="Paytm" height="30px" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    </div>
                    <div class="app-icon" style="transition: transform 0.2s;">
                        <img src="./assets/img/phonepe.png" alt="PhonePe" height="30px" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    </div>
                    <div class="app-icon" style="transition: transform 0.2s;">
                        <img src="./assets/img/bhim_logo.png" alt="BHIM" height="30px" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    </div>
                    <div class="app-icon" style="transition: transform 0.2s;">
                        <img src="./assets/img/amazonpay.png" alt="Amazon Pay" height="30px" style="border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    </div>
                </div>
            </div>
            
            <div class="qr-container mb-4" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 30px; border-radius: 20px; border: 4px solid #085bac; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(8,91,172,0.2); position: relative;">
                <div class="qr-loading-overlay" id="qrLoadingOverlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border-radius: 16px;">
                    <div class="text-center">
                        <img src="./assets/img/loading.cc387905.gif" alt="Loading..." width="60" style="border-radius: 8px;">
                        <div class="mt-2 text-muted small">Generating QR Code...</div>
                    </div>
                </div>
                <div id="qrcode" class="d-flex justify-content-center">
                </div>
            </div>
            
            <input type="hidden" name="upilink" id="upilink">
            
            <div class="action-buttons d-flex justify-content-center flex-wrap mb-4" style="gap: 12px;">
                <button onclick="paymentCencel()" class="btn btn-outline-danger" style="border-radius: 25px; padding: 8px 20px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; border-width: 2px;">
                    <i class="fas fa-times mr-2"></i>Cancel
                </button>
                <button id="downloadBtn" onclick="downloadQR()" class="btn text-white" style="background: linear-gradient(135deg, #085bac, #11c4cb); border: none; border-radius: 25px; padding: 8px 20px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; display: none; box-shadow: 0 4px 8px rgba(8,91,172,0.3);" onmouseover="this.style.background='linear-gradient(135deg, #064785, #0ea8ad)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.background='linear-gradient(135deg, #085bac, #11c4cb)'; this.style.transform='translateY(0)'">
                    <i class="fas fa-download mr-2"></i>Download
                </button>
                <button id="copyUpiBtn" onclick="copyUpiId()" class="btn btn-info" style="border-radius: 25px; padding: 8px 20px; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; display: none; box-shadow: 0 4px 8px rgba(23,162,184,0.3); background: linear-gradient(135deg, #17a2b8, #20c997); border: none;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
                    <i class="fas fa-copy mr-2"></i>Copy UPI ID
                </button>
            </div>
            
            <div class="timer-alert" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); border: 2px solid #2196f3; border-radius: 15px; padding: 15px; text-align: center;">
                <div class="d-flex align-items-center justify-content-center">
                    <i class="fas fa-clock mr-2 text-info" style="font-size: 1.1em;"></i>
                    <span class="text-dark font-weight-500">
                        QR expires in <strong class="text-danger"><span id="upitimer"></span></strong>
                    </span>
                </div>
            </div>
            
            <div class="payment-footer mt-4 text-center">
                <div class="d-flex align-items-center justify-content-center text-muted" style="font-size: 0.85rem;">
                    <i class="fas fa-shield-alt mr-2 text-success"></i>
                    <span>Secure UPI Payment Gateway</span>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

    <!-- If you prefer jQuery these are the required scripts -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="./assets/dist/js/vendor.js"></script>
    <script src="./assets/dist/js/adminx.js"></script>
	<script src="./assets/dist/js/custom-new.js?<?=time()?>"></script>
	<script src="./assets/dist/js/qrcode.min.js"></script>	
	<script>upiCountdown("upitimer",00<?php echo $qr_timer;?>,00,'');
            function timeOut(){ 
                swal ( "Oops" ,  "Transaction Timeout!" ,  "error" );
                setTimeout(function(){ 
                    document.getElementById("status").value = "FAILED";
                    document.getElementById("message").value = "Transactions Timeout!";
                    document.getElementById("formSubmit").submit();
                }, 2000);
            }
            function paymentCencel(){ 
                swal ( "Alert!" ,  "Transactions Canceled!" ,  "warning" );
                setTimeout(function(){ 
                    document.getElementById("status").value = "CANCEL";
                    document.getElementById("message").value = "Transactions Cancel By User!";
                    document.getElementById("formSubmit").submit();
                }, 2000);
            }
    </script>
	
  </body>
</html> 