<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Payment</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="<?php echo base_url("/public/css/bootstrap.min.css"); ?>" rel="stylesheet">
        <link href="<?php echo base_url("/public/css/style.css"); ?>" rel="stylesheet" >
        <link rel="icon" href="<?php echo base_url('/public/images/fav.png'); ?>" type="image/png" sizes="16x16"> 
    </head>
    <body>
        <div class="login">
            <div class="loginIn">
                <?php if(!empty($comp_logo)) { ?>
                <div class="login_logo_image_div">
                    <img src="<?php echo $comp_logo; ?>" class="loginLogo" />
                </div>
                <?php } ?>
                <div class="claerfix"></div>
                <div class="lgnWrap">
                    <div class="lgnFrm">
                        <?php if(!empty($payment_status)): ?>
                            <?php if($payment_status != 'SUCCESS') {?> 
                                <div class="alert bg-success text-white d-flex flex-row align-items-center justify-content-start" role="alert">
                                    <svg class="statusIcon animated" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
                                        <path class="statusIconResult" fill="#D8D8D8" d="M35,60 C21.1928813,60 10,48.8071187 10,35 C10,21.1928813 21.1928813,10 35,10 C48.8071187,10 60,21.1928813 60,35 C60,48.8071187 48.8071187,60 35,60 Z M23.6332378,33.2260427 L22.3667622,34.7739573 L34.1433655,44.40936 L47.776114,27.6305926 L46.223886,26.3694074 L33.8566345,41.59064 L23.6332378,33.2260427 Z"/>
                                        <circle class="statusIconCircle" cx="35" cy="35" r="24" stroke="#979797" stroke-width="2" stroke-linecap="round" fill="transparent"/>
                                        <polyline class="statusIconCheck" stroke="#979797" stroke-width="2" points="23 34 34 43 47 27" fill="transparent"/>
                                    </svg>
                                    Thank You! Payment Successfull.
                                </div>
                            <?php } ?>
                            <?php if($payment_status != 'FAILED') {?> 
                                <div class="alert bg-danger text-white d-flex flex-row align-items-center justify-content-start" role="alert">
                                    <svg class="statusIcon animated" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
                                    <circle class="statusIconCircle" cx="35" cy="35" r="24" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" fill="transparent"/>
                                    <g class="statusIconCross" fill="transparent" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <line class="crossLine1" x1="24" y1="24" x2="46" y2="46" />
                                        <line class="crossLine2" x1="46" y1="24" x2="24" y2="46" />
                                    </g>
                                    </svg>
                                    Oops! Payment Failed.
                                </div>
                            <?php } ?>
                        <?php endif; ?>
                        <h3>Order summary </h3>
                        <br/>
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-light d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto fw-bold">Name</div>
                                <div><?php echo $profile_name; ?></div>
                            </li>       
                            <li class="list-group-item list-group-item-light d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto fw-bold">Email Id</div>
                                <div><?php echo maskEmailId($profile_email); ?></div>
                            </li>
                            <li class="list-group-item list-group-item-light d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto fw-bold">Contact No.</div>
                                <div><?php echo maskPhoneNo($profile_contact); ?></div>
                            </li>     
                        </ul>

                        <ul class="list-group mt-2 mb-2">
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto"><div class="fw-bold">Product</div></div>
                                <div><?php echo $product; ?></div>
                            </li>   
                            <?php if(!empty($product_description)) { ?>
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto"><div class="fw-bold">Product Description</div></div>
                                <div><?php echo $product_description; ?></div>
                            </li>  
                            <?php } ?>
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto"><div class="fw-bold">Amount</div></div>
                                <div><?php echo $currency; ?> <?php echo $amount/100; ?> </div>
                            </li>  
                        </ul>
                        <?php if(empty($payment_status) || $payment_status == 'FAILED'): ?>
                        <ul class="mt-3 border-0 px-0 py-0">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <form action="" method="POST" class="checkout-btn-form">
                                    <script    
                                    src="https://checkout.razorpay.com/v1/checkout.js"    
                                    data-key="<?php echo $api_key; ?>"  
                                    data-amount="<?php echo $amount; ?>"  
                                    data-currency="<?php echo $currency; ?>"    
                                    data-order_id="<?php echo $order_id; ?>" 
                                    data-buttontext=" Pay Now "    
                                    data-name="<?php echo $product; ?>"    
                                    data-description="<?php echo $product_description; ?>"    
                                    data-image="<?php echo $comp_logo; ?>"    
                                    data-prefill.name="<?php echo $profile_name; ?>"    
                                    data-prefill.email="<?php echo $profile_email; ?>"    
                                    data-prefill.contact="<?php echo $profile_contact; ?>"    
                                    data-theme.color="#4886ff">
                                    </script> 
                                </form>  
                            </li>
                        </ul>
                        <?php endif; ?>
                    </div> 
                </div>
            </div>
        </div>
        <script src="<?php echo base_url(); ?>/public/js/jquery.min.js"></script> 
        <script src="<?php echo base_url(); ?>/public/js/bootstrap.min.js"></script> 
        <script src="<?php echo base_url(); ?>/public/js/jquery.validate.min.js"></script>  
    </body>
</html>
