@extends('adminlayout.admin')

@section('content')

<style>
    .cursor {
        cursor: pointer;
    }

    .nk-content-fluid {
        margin-top: 65px;
        position: relative;
    }
</style>

<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="nk-block-head nk-block-head-sm">
                <div class="nk-block-between">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">Bill Pay Request</h3>
                        <div class="nk-block-des text-danger" id="errorMsgId">
                            @if($errors->any())
                            {!! implode('', $errors->all('<p>:message</p>')) !!}
                            @endif
                        </div>
                    </div><!-- .nk-block-head-content -->
                    <div class="nk-block-head-content">
                        <img src="assets/images/bbps/BharatBillPay.png" style="max-width: 120px;" alt="">
                    </div>
                </div><!-- .nk-block-between -->
            </div><!-- .nk-block-head -->

        </div>
    </div>

    <div class="row mt-1">

        <div class="col-md-12" id="totalFormDiv">
            <!-- {{ route('billpayreceipt') }} -->
            <form action="{{ route('billpayreceipt') }}" id="idFormId" method="POST">
                @csrf
                <input type="hidden" name="json" value="{{ $json }}">
                <input type="hidden" name="requestId" id="requestId" value="{{ $requestId }}">
                <input type="hidden" name="BbpssBillinfo_id" id="BbpssBillinfo_id" value="{{ $BbpssBillinfo->id }}">
                <div class="form-row">

                    <div class="col-12">
                        <table class="table table-border border-warning">
                            <tr>
                                <td class="border-warning">Biller Name <b style="float: right;"> : </b></td>
                                <td class="border-warning">{{ $BbpssBillinfo->billerName }}</td>
                            </tr>
							
                            @foreach($data->billerResponse as $key => $val)
                            @if($key=='billDate' || $key=='customerName' || $key=='dueDate')
                            @if($key == "billAmount")
                            @php $val = $val/100; @endphp
                            @endif
                            <tr>
                                <td class="border-warning">{{ ucwords(implode(' ',preg_split('/(?=[A-Z])/', $key))) }} <b style="float: right;"> : </b></td>
                                <td class="border-warning">{{ $val }}</td>
                            </tr>
                            @endif
                            @endforeach
							
                            @isset($data->additionalInfo )
                             @isset($data->additionalInfo->info )
							 @foreach($data->additionalInfo->info as $info)
								@if($info->infoName=='Available Balance' || $info->infoName=='status' || (strpos($info->infoName, 'Balance') !== false) || (strpos($info->infoName, 'Model') !== false))
								<tr>
									<td class="border-warning">{{ ucwords(implode(' ',preg_split('/(?=[A-Z])/', $info->infoName))) }} <b style="float: right;"> : </b></td>
									<td class="border-warning">{{ $info->infoValue }}</td>
								</tr>
								@endif
								@endforeach
                              @endisset
                            @endisset
                            <tr>
                                <td class="border-warning">&nbsp;</td>
                                <td class="border-warning">&nbsp;</td>
                            </tr>
                        </table>
                    </div>


                   
                </div>

                <div class="form-row">
                    <div class="col-12">
                        <h4>Changable Field</h4>
                    </div>
                    @php
                    $paymentMode = explode(',', $BbpssBillinfo->billerPaymentModes);
                    @endphp
                    <div class="col-md-4">
                        <div class="card bg-success-dim p-1 m-1 border border-success">
                            <label for="paymentMode">Select Payment Mode</label>
                            <select name="paymentMode" id="paymentMode" class="form-control" required>
                                <option value="">Select Payment Mode</option>
								<option value="Cash">Cash</option>
                                @foreach($paymentMode as $val)
                                <!--<option value="{{ strtoupper(trim($val)) }}">{{ strtoupper(trim($val)) }}</option>-->
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- @php
                        $paymentMode = explode(',', $BbpssBillinfo->billerAmountOptions);
                        @endphp
                        @foreach($paymentMode as $val)
                            @php $trim = trim($val); @endphp
                            @if($trim != '')
                                <div class="col-md-4">
                                    <label for="{{ $val }}">{{ $val }}</label>
                                    <input type="text" name="{{ $val }}" value="" id="{{ $val }}" class="form-control">
                                </div>
                            @endif
                    @endforeach -->
                    @php
                    if ($BbpssBillinfo->billerPaymentExactness == "Exact") {
                    $msg = "You can only pay the same amount as the bill amount, not less or more than the amount.";
                    } elseif ($BbpssBillinfo == "EXACT & ABOVE" || $BbpssBillinfo == "Exact and above") {
                    $msg = "You can pay an amount equal to or more than the bill amount, not less than the amount.";
                    } elseif ($BbpssBillinfo == "Exact and below") {
                    $msg = "You can pay an amount equal to or less than the bill amount, not more than the amount.";
                    } else {
                    $msg = "";
                    }
                    @endphp
                    <div class="col-md-4">
                        <div class="card bg-success-dim p-1 m-1 border border-success">
                            <label for="amount">Pay Amount<small class="text-danger">( *{{ $msg }})</small></label>
                            <input type="text" name="amount" value="{{ $data->billerResponse->billAmount/100 }}" id="amount" class="form-control" required>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card bg-success-dim p-1 m-1 border border-success">
                            <label for="custConvFee">Customer Convenience Fees</label>
                            <input type="text" name="custConvFee" value="0" id="custConvFee" class="form-control" required>
                        </div>
                    </div>
                </div>

                <div class="form-row text-right" id="payButton">
                    <button type="submit" class="btn btn-primary" id="abcd">Pay</button>
                </div>

            </form>
        </div>

    </div>

</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    // jQuery.noConflict();
    // $('#abcd').click( function(){
    //     alert();
    // });

    $("#idFormId").submit(function(event) {
        event.preventDefault();
        var formData = new FormData(this);
        $('#payButton').html('Please wait . . .');
		$('#errorMsgId').html('');
        var url = "{{ route('billpayreceipt') }}";
        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            type: "POST",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            context: this,
            success: function(response) {
                // alert(response);
                console.log(response);
                var jsonString = JSON.parse(response);
                var data = jsonString.message;
                var data2 = jsonString.message2;
                if (jsonString.status == 'success') {
                    var html = `<div class="row mt-1">
                                    <div class="col-md-12">
                                        <h4>Transaction {{ ucwords(` + jsonString.status + `) }}!</h4>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Transaction Status
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.responseReason + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Biller Name
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data2.billerName + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Biller Id
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data2.billerId + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Transaction Id
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.txnRefId + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Transaction Response Type
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.txnRespType + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Customer Name
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.RespCustomerName + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Bill Amount
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.RespAmount / 100 + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                    Customer Convenience Fees
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.CustConvFee + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Total Amount
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.RespAmount / 100 + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Txn Date & Time
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.RespBillDate + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Init Channel
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; AGT
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Payment Mode
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data2.paymentMode + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Approval Number
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.approvalRefNumber + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Response Bill Number
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.RespBillNumber + `
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-5">
                                                Response Bill Period
                                            </div>
                                            <div class="col-7">
                                                : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.RespBillPeriod + `
                                            </div>
                                        </div>
                                                    
                                        <hr>
                                        <div class="row">
                                            <div class="col-12 text-center">
                                                <p class="text-dark">Thank you!</p>
                                            </div>
                                        </div>
                                                    
                                        <hr>
                                        <div class="row">
                                            <div class="col-12 text-center">
                                                <a href="{{ route('bbpscategory') }}">Go Back</a>
                                                <a href="{{ route('dashboard') }}">Go To Home Page</a>
                                                <a href="#" onclick="printDiv('totalFormDiv')" >Print</a>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>`;
                    $('#totalFormDiv').html(html);
                } else {
                    if (jsonString.errorStatus == 1) {
                        var html = `<div class="row mt-1">
                                        <div class="col-md-12">
                                            <h4>Transaction {{ ucwords(` + jsonString.status + `) }}!</h4>
                                            <hr>
                                            <div class="row">
                                                <div class="col-5">
                                                    Transaction Status
                                                </div>
                                                <div class="col-7">
                                                    : &nbsp; &nbsp; &nbsp; &nbsp; ` + data.responseReason + `
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-5">
                                                    Biller Name
                                                </div>
                                                <div class="col-7">
                                                    : &nbsp; &nbsp; &nbsp; &nbsp; ` + data2.billerName + `
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-5">
                                                    Biller Id
                                                </div>
                                                <div class="col-7">
                                                    : &nbsp; &nbsp; &nbsp; &nbsp; ` + data2.billerId + `
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col-5">
                                                    Error Message
                                                </div>
                                                <div class="col-7">
                                                    : &nbsp; &nbsp; &nbsp; &nbsp; ` + jsonString.errormessage + `
                                                </div>
                                            </div>
                    
                                            <hr>
                                            <div class="row">
                                                <div class="col-12 text-center">
                                                    <p class="text-dark">Thank you!</p>
                                                </div>
                                            </div>
                                                        
                                            <hr>
                                            <div class="row">
                                                <div class="col-12 text-center">
                                                    <a href="{{ route('bbpscategory') }}" class="btn btn-success">Go Back</a>
                                                    <a href="{{ route('dashboard') }}" class="btn btn-success">Go To Home Page</a>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>`;
                        $('#totalFormDiv').html(html);
                    } else {
                        
                        $('#errorMsgId').html(jsonString.message);
						$('#payButton').html('<button type="submit" class="btn btn-primary" id="abcd">Pay</button>');
                    }
                }

            },
            error: function(error) {
                console.log(error.responseText);
            }
        });
    });

    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        
        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    }
</script>

@endsection