{{-- Extends layout --}}
@extends('layout.public')



{{-- Content --}}
@section('content')


<style>

.circle{ width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  font-size: 28px;
  color: green;
  text-align: center;
  background: lightgreen; }

</style>

<div class="container-fluid">
    <div class="row" id="checkoutdiv">
        <div class="col-xl-12">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            Checkout<span class="float-right">Time left:<div id="countdown" class="circle" ></div></span>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm table-responsive-lg mb-0" style="font-size:90%">
                                    <tr class="btn-reveal-trigger">
                                        <td class="py-2">Date:</td><td class="py-2">{{date('d-m-Y', strtotime($show_date))}}</td>
                                    </tr>
                                    <tr class="btn-reveal-trigger">
                                        <td class="py-2">Centre:</td><td class="py-2">{{$organisation->organisation_name}},&nbsp;{{$organisation->city}}</td>
                                    </tr>
                                    <tr class="btn-reveal-trigger">
                                        <td class="py-2">Tickets:</td><td class="py-2">Adult:{{$adultCount}}&nbsp;Child:{{$childCount}}</td>
                                    </tr>
                                    <tr class="btn-reveal-trigger">
                                        <td class="py-2">Amount Payable:</td><td class="py-2"><i class='fa fa-rupee'></i>&nbsp;{{$amount}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer">
                            <input class="btn btn-primary float-right" id="btnSubmit" type="button" name="checkout" value="Checkout" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var obj = JSON.parse('<?= json_encode($reqMsgDTO); ?>');


</script>

<script type="text/javascript" src="https://www.paynimo.com/Paynimocheckout/server/lib/checkout.js"></script>



<script>
(function(){
  $(document).ready(function() {
    var time = {{$ticket_time_out}}+":00",
      parts = time.split(':'),
      minutes = +parts[0],
      seconds = +parts[1],
      span = $('#countdown');
    
    function correctNum(num) {
      return (num<10)? ("0"+num):num;
    }
  
    var timer = setInterval(function(){
        seconds--;
        if(seconds == -1) {
            seconds = 59;
            minutes--;
          
            if(minutes == -1) {
                          
                
                  sweetAlert("Oops...", "Your time is up !!", "error");
                  clearInterval(timer);
                  location.href="{{ url('tickets')}}";
                  return;
               
            }
        }
        span.text(correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);


    $("#btnSubmit").click(function(e){

        e.preventDefault();

        function handleResponse(res)
        {
            if (typeof res != 'undefined' && typeof res.paymentMethod != 'undefined' && typeof res.paymentMethod.paymentTransaction != 'undefined' && typeof res.paymentMethod.paymentTransaction.statusCode != 'undefined' && res.paymentMethod.paymentTransaction.statusCode == '0300') {
        // success block
            } else if (typeof res != 'undefined' && typeof res.paymentMethod != 'undefined' && typeof res.paymentMethod.paymentTransaction != 'undefined' && typeof res.paymentMethod.paymentTransaction.statusCode != 'undefined' && res.paymentMethod.paymentTransaction.statusCode == '0398') {
        // initiated block
            } else {
        // error block
            }   
        };


        var configJson = 
        {
            'tarCall': false,
            'features': {
                'showPGResponseMsg': true,
                'enableNewWindowFlow': false,
                'enableAbortResponse': true,
                'enableExpressPay': false,
                'enableInstrumentDeRegistration': false,
                'enableMerTxnDetails': true,
                'siDetailsAtMerchantEnd': false,
                'enableSI': false,
                'hideSIDetails': false,
                'enableDebitDay': false,
                'expandSIDetails': false,
                'enableTxnForNonSICards': false,
                'showSIConfirmation': false,
                'showSIResponseMsg': false,
            },
            
            'consumerData': {
                'deviceId': 'WEBSH2',
                //possible values 'WEBSH1', 'WEBSH2' and 'WEBMD5'
                //'debitDay':'10',
                'token': obj['hash'],
                'returnUrl': obj['data'][12],
                /*'redirectOnClose': 'https://www.tekprocess.co.in/MerchantIntegrationClient/MerchantResponsePage.jsp',*/
                'responseHandler': handleResponse,
                'paymentMode': 'all',
                'checkoutElement': '',
                'merchantLogoUrl': 'https://www.paynimo.com/CompanyDocs/company-logo-md.png',  //provided merchant logo will be displayed
                'merchantId': obj['data'][0],
                'currency': obj['data'][15],
                'consumerId': obj['data'][8],  //Your unique consumer identifier to register a eMandate/eNACH
                'consumerMobileNo': obj['data'][9],
                'consumerEmailId': obj['data'][10],
                'txnId': obj['data'][1],   //Unique merchant transaction ID
                'items': [{
                    'itemId': obj['data'][14],
                    'amount': obj['data'][2],
                    'comAmt': '0'
                }],
                'cartDescription': '}{custname:'+obj['data'][13],
                'merRefDetails': [
                    {"name": "Txn. Ref. ID", "value": obj['data'][1]}
                ],
                'customStyle': {
                    'PRIMARY_COLOR_CODE': '#3977b7',   //merchant primary color code
                    'SECONDARY_COLOR_CODE': '#FFFFFF',   //provide merchant's suitable color code
                    'BUTTON_COLOR_CODE_1': '#1969bb',   //merchant's button background color code
                    'BUTTON_COLOR_CODE_2': '#FFFFFF'   //provide merchant's suitable color code for button text
                },
                'accountNo': obj['data'][11],    //Pass this if accountNo is captured at merchant side for eMandate/eNACH
                'accountHolderName': obj['data'][16],  //Pass this if accountHolderName is captured at merchant side for ICICI eMandate & eNACH registration this is mandatory field, if not passed from merchant Customer need to enter in Checkout UI.
                'ifscCode': obj['data'][17],        //Pass this if ifscCode is captured at merchant side.
                'accountType': obj['data'][18],  //Required for eNACH registration this is mandatory field
                'debitStartDate': obj['data'][3],
                'debitEndDate': obj['data'][4],
                'maxAmount': obj['data'][5],
                'amountType': obj['data'][6],
                'frequency': obj['data'][7]  //  Available options DAIL, WEEK, MNTH, QURT, MIAN, YEAR, BIMN and ADHO
            }
        };

        //console.log(configJson);       

        $.pnCheckout(configJson);
        if(configJson.features.enableNewWindowFlow)
        {
            pnCheckoutShared.openNewWindow();
        }

    });


    
  }); 
})()
</script>

@endsection