@extends('layouts.master')

@section('content')
<style type="text/css">
    .pointer {
        cursor: pointer;
    }

    .comment_area {
        position: relative;
        top: 8px;
        resize: none;
    }

    .rejected,
    #descReason-error,
    #changedStatus-error {
        color: red;
    }

    .approved {
        color: green;
    }

    .pending {
        color: #ff9900;
        cursor: pointer;
    }

    .radio-label {
        position: absolute;
        margin: -2px 0px 0px 7px;
        cursor: pointer;
    }
	#goToVerificationPage{
    background-color: #f56918;
    color: #fff;}
    div#table_length {
    display: none;
}
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">{{ trans('breadcrumbs.Bank Verification') }}</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-3"></div>
                <div class="col-sm-3">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">{{ Breadcrumbs::render('Bank Verification') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <section class="content">
        <div class="card" id="filterDiv">
            <div class="card-header">
                <h3 class="card-title">{{ trans('layout.Filter') }}</h3>
                <div class="col-md-6 card-primary card-form-1">
                    <div class="card-body">
                        <div class="form-col-1">
                            {{ Form::label('USERNAME', trans('helpdesk.Username')) }}
                            {{ Form::text('USERNAME','', ['id' => 'USERNAME', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Username')]) }}
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('ACCOUNTNO', trans('helpdesk.Account Number')) }}
                            {{ Form::text('ACCOUNTNO','', ['id' => 'ACCOUNTNO', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Account Number')]) }}
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('VERIFICATION_STATUS', trans('helpdesk.Verification Status')) }}
                            {{ Form::select('VERIFICATION_STATUS',$verificationStatus,'' ,['class' => 'form-control select2','placeholder' => trans('reports.Select option'), 'id' => 'VERIFICATION_STATUS']) }}
                        </div>

                        <div class="form-col-1">
                            {{ Form::label('DATE_RANGE',trans('layout.Select Date Range')) }}<br>
                            <button type="button" style="width: 100%;" class="btn btn-default" id="daterange-btn">
                                <span class="daterange_span pull-left">{{ trans('layout.Select Date Range') }}</span>
                            </button>
                            <input type="hidden" name="selected_date" id="selected_date">
                            <input type="hidden" name="selected_datatime" id="selected_datatime">
                        </div>
                        <br> <br>
                        <div class="button_sec">
                            <button class="btn btn-primary" id="getReport">{{ trans('layout.Submit') }}</button>
                            <button class="btn btn-default" id="reloadPage">{{ trans('layout.Clear') }}</button>
                        </div>
                        <!-- <div class="button_sec">
                            <button class="btn btn-primary" id="goToVerificationPage" disabled>{{ trans('helpdesk.Go to Verification page') }}</button>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <div class="card" id="report" style="display:none">
            <div class="card-header">
                <h3 class="card-title" id="report_title"></h3>
            </div>
            <div class="card-body">
                <div class="dt-buttons" onClick="post()" style="margin-top: -47px;"><button class="dt-button buttons-excel buttons-html5" tabindex="0" type="button" title="Excel"><span><i class="fa fa-file-excel-o"></i></span></button> </div>
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <!-- <th class="text-center"><input type="checkbox" disabled></th> -->
                            <th class="text-center">{{ trans('helpdesk.Username') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Acc Holder Name') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Type') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Acc Number') }}</th>
                            <th class="text-center">{{ trans('helpdesk.IFSC Code') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Bank Name') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Branch Name') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Comment') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Submitted Date') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Status') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Action') }}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </section>

    <div class="modal fade" id="msg_detail" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Update status</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="VERIFICATION" />
                    <div class="radio">
                        <label><input type="radio" name="IDVERIFICATIONSTATUS" value="2" id="APPROVE"><span class="radio-label">Approve</span></label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="IDVERIFICATIONSTATUS" value="3" id="REJECT"><span class="radio-label">Reject</span></label>
                    </div>
                    <span id="changedStatus-error"></span>

                    <div class="form-col-1">
                        {{ Form::label('COMMENT', trans('helpdesk.Comment'), ['class' => 'required']) }}
                        {{ Form::textarea('COMMENT','', ['id' => 'COMMENT', 'class' => 'comment_area','cols'=>'25', 'rows'=>'5', 'maxlength'=>'200']) }}
                    </div>
                    <span id="descReason-error"></span>
                    <br>
                    <div id="popup-button">
                        <button class="btn btn-primary" id="statusSubmit">{{ trans('layout.Submit') }}</button>
                        <button class="btn btn-default" data-dismiss="modal">{{ trans('layout.Close') }}</button>
                    </div>
                    <div id="form-loader" style="display:none"><img style="height:100px; width: 100px" src="{{ asset('img/lg.double-ring-spinner.gif') }}"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">
    var reportTable;
    $("#getReport").click(function() {
        $("#selected_datatime").val($("#selected_date").val());

        $('#report_title').html("Bank Verification: " + $('.daterange_span').html());
        $('#report').show();
        jQuery.fn.DataTable.Api.register( 'buttons.exportData()', function ( options ) {
            if ( this.context.length ) {
              // make columns for sorting
    var columns = [];
    $.each(this.context[0].aoColumns, function(key, value) {
      columns.push({
        'data' : value.data, 
        'name' : value.name, 
        'searchable' : value.bSearchable,
        'orderable' : value.bSortable
      });
    });
    // make option for sorting
    var order = [];
    $.each(this.context[0].aaSorting, function(key, value) {
      order.push({
        'column' : value[0], 
        'dir' : value[1]
      });
    });
                var jsonResult = $.ajax({
          "url": "{{ route('bankVerification.fetch') }}",
        "type": "GET",
          "data": {
            columns: columns, order: order,
            filter_date : $("#selected_datatime").val(),
            filter_username : $("#USERNAME").val(),
            filter_verification_status : $("#VERIFICATION_STATUS").val(),
              length: -1,
              draw: 1,
            },
             dataType: "json",
                    success: function (result) {
                        //Do nothing
                        // console.log(result)
                    },
                    async: false
                });

             var result = jsonResult.responseJSON.data;
               /* $.each(result,function(index,element){  
                    element.splice(3)
                });*/
                return {body: result, header: $("#table thead tr th").map(function() {
                 return this.innerText;
                  }
                 ).get()};
            }
        } );

        reportTable = $('#table').DataTable({
            "responsive": true,"scrollX": true,
            "pagingType": "numbers",
            "processing": true,
            "bDestroy": true,
            "serverSide": true,
            "searching": false,
            "aaSorting": [],
            "lengthMenu": [
                [20, 50, 100, 200],
                [20, 50, 100, 200]
            ],
            "columnDefs": [{
                    "className": 'text-center',
                    "targets": [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                },
                {
                    "orderable": false,
                    "targets": [9, 10]
                }
            ],
                  dom: 'lBfrtip',
        buttons: [
            {
                extend : 'pdfHtml5',
                title : function() {
                    return "Bankverification";
                },
                orientation : 'landscape',
                pageSize : 'LEGAL',
                text : '<i class="fa fa-file-pdf-o"> PDF</i>',
                titleAttr : 'PDF'
            } 
        ],
            "ajax": {
                "url": "{{ route('bankVerification.fetch') }}",
                "type": "GET",
                "data": function(d) {
                    d.filter_date = $("#selected_datatime").val();
                    d.filter_username = $("#USERNAME").val();
                    d.filter_verification_status = $("#VERIFICATION_STATUS").val();
                    d.filter_account_no =$("#ACCOUNTNO").val();
                },
                "error": function(e) {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                },
            },
            "drawCallback": function(response, settings) {
                var api = this.api();
                var rows = api.rows({
                    page: 'current'
                }).nodes();
                if (rows.length > 0) {
                    $('.dt-buttons').show();
                } else {
                    $('.dt-buttons').hide();
                }
            }
        });
    });

    $(document).on('click', '#checkBox', function() {

        $('#goToVerificationPage').attr("disabled", !this.checked);

    });

    $("#goToVerificationPage").click(function() {

        var limit = 5;
        var count = $("#checkBox:checked").length;

        if (count > limit) {
            $(this).prop("checked", "");
            swal("{{ trans('helpdesk.checkbox Alert') }}", {
                icon: "warning",
            });

            return false;
        }

        var ids = [];
        $('input[type="checkbox"]:checked').each(function() {
            ids.push($(this).val());
        });

        var url = "{{ route('bankVerification') }}/getBankDetails/" + ids;

        win = window.open(url);
    });



    function showErrorMessage(message) {
        $.each(message, function(k, v) {
            $("#" + k + "-error").html(v);
        });
        return;
    }



    function post() {
        const form = document.createElement('form');
        form.method = 'get';
        form.action = "{{ route('bankVerification.download') }}";

        const hiddenField = document.createElement('input');
        hiddenField.type = 'hidden';
        hiddenField.name = 'filter_date';
        hiddenField.value = $("#selected_datatime").val();

        form.appendChild(hiddenField);

        const hiddenField2 = document.createElement('input');
        hiddenField2.type = 'hidden';
        hiddenField2.name = 'filter_username';
        hiddenField2.value = $("#USERNAME").val();

        form.appendChild(hiddenField2);

        const hiddenField3 = document.createElement('input');
        hiddenField3.type = 'hidden';
        hiddenField3.name = 'filter_verification_status';
        hiddenField3.value = $("#VERIFICATION_STATUS").val();

        form.appendChild(hiddenField3);

        const hiddenField4 = document.createElement('input');
        hiddenField4.type = 'hidden';
        hiddenField4.name = 'filter_account_no';
        hiddenField4.value = $("#ACCOUNTNO").val();

        form.appendChild(hiddenField4);

        document.body.appendChild(form);
        form.submit();
    }

    function deleteAccount(id) {
        swal({
                title: " {{ trans('helpdesk.Alert')  }} ",
                text: "{{ trans('helpdesk.Alertdeletemsg') }}",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            .then((willDelete) => {
                if (willDelete) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{ route('bankVerification.delete') }}",
                        method: "GET",
                        dataType: 'json',
                        data: {
                            verficationId: id
        
                        },
                        success: function(response) {
                            if (response.status == 200) {
                                $('select[name=table_length]').trigger('change');
                                swal("{{ trans('helpdesk.DeleteSuccess') }}", {
                                    icon: "success",
                                });
                            } else {
                                swal("{{ trans('layout.Something went wrong') }}", {
                                    icon: "warning",
                                });
                            }
                        },
                        error: function(e) {
                            swal("{{ trans('layout.Something went wrong') }}", {
                                icon: "warning",
                            });
                        },
                    });
                } else {

                }
            });
    }

    
function updateIdVerificationStatus(verificationId) {

    $("#changedStatus-error").html("");
    $("#descReason-error").html("");

    $('#VERIFICATION').val(verificationId);
    $("#REJECT").prop('checked', false);
    $("#APPROVE").prop('checked', false);

    $("#changedStatus-error").html("");
    $("#descReason-error").html("");

    $('#COMMENT').val("");

    $("#msg_detail").modal({
        backdrop: 'static',
        keyboard: false
    });
}

$(document).on('click', '#statusSubmit', function(e) {
    $("#changedStatus-error").html("");
    $("#descReason-error").html("");

    var verificationId = $('#VERIFICATION').val();
    var desc_reason = $("#COMMENT").val();
    var status = $('input[name=IDVERIFICATIONSTATUS]:checked').val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: "{{ route('bankVerification.updateIdVerificationStatus') }}",
        method: "POST",
        dataType: 'json',
        data: {
            verificationId: verificationId,
            changedStatus: status,
            descReason: desc_reason
        },
        beforeSend: function() {
            $("#popup-button").hide();
            $("#form-loader").show();
        },
        success: function(response) {
            var message = response.msg;
            var status = response.status;
            if (status == 422) {
                showErrorMessage(message);
                return;
            }
            if (response.success == true) {
                $('select[name=table_length]').trigger('change');
                $("#msg_detail").modal("hide");
                swal("{{ trans('helpdesk.Id Update Success') }}", {
                    icon: "success",
                });
            } else {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            }
        },
        error: function() {
            $("#msg_detail").modal('hide');
            swal("{{ trans('layout.Something went wrong') }}", {
                icon: "warning",
            });
        },
        complete: function() {
            $("#form-loader").hide();
            $("#popup-button").show();
        }
    });
});

</script>
@stop