@extends('layouts.master')

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

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

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

    .approved {
        color: green;
    }

    .pending {
        color: #ff9900;
    }

    .radio-label {
        position: absolute;
        margin: -2px 0px 0px 7px;
        cursor: pointer;
    }
    #goToVerificationPage{
        background-color: #f56918;
        color: #fff;
    }
    div#table_length {
        display: none;
    }
</style>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="{{ asset('dist/plugins/magnific-popup/magnific-popup.css') }}">

<!-- 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.Pan 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('Pan Verification') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <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('PAN_NUMBER', trans('helpdesk.PAN Number')) }}
                            {{ Form::text('PAN_NUMBER','', ['id' => 'PAN_NUMBER', 'class' => 'form-control', 'placeholder' => trans('helpdesk.PAN Number')]) }}
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('STATUS', trans('helpdesk.Status')) }}
                            {{ Form::select('STATUS',$status,'' ,['class' => 'form-control select2','placeholder' => trans('reports.Select option'), 'id' => 'STATUS']) }}
                        </div>
                        <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>
                </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()"><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">{{ trans('helpdesk.Username') }}</th>
                            <th class="text-center">{{ trans('helpdesk.First Name') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Last Name') }}</th>
                            <th class="text-center">{{ trans('helpdesk.PAN Number') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Proof') }}</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>
                        </tr>
                    </thead>
                </table>
            </div>
            <!-- /.card-body -->
        </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"></h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="USERKYC" />
                    <div class="radio">
                        <label><input type="radio" name="KYCSTATUS" value="2" id="APPROVE" ><span class="radio-label">Approve</span></label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="KYCSTATUS" value="3" id="REJECT"><span class="radio-label">Reject</span></label>
                    </div>
                    <span id="status-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')
<!-- Magnific Popup core JS file -->
<script src="{{ asset('dist/plugins/magnific-popup/jquery.magnific-popup.js') }}"></script>
<script type="text/javascript">
    var reportTable;
    $("#getReport").click(function() {
        $('#report_title').html("KYC Details");
        $('#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('kycVerification.fetch') }}",
        "type": "GET",
          "data": {
            columns: columns, order: order,
            filter_username : $("#USERNAME").val(),
            filter_status : $("#STATUS").val(),
            filter_number : $("#PAN_NUMBER").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": [3, 4, 6, 7]
                },
                {
                    "orderable": false,
                    "targets": [4]
                }
            ],
                             dom: 'lBfrtip',
        buttons: [
            {
                extend : 'pdfHtml5',
                title : function() {
                    return "Kycverification";
                },
                orientation : 'landscape',
                pageSize : 'LEGAL',
                text : '<i class="fa fa-file-pdf-o"> PDF</i>',
                titleAttr : 'PDF'
            } 
        ],
            "ajax": {
                "url": "{{ route('kycVerification.fetch') }}",
                "type": "GET",
                "data": function(d) {
                    d.filter_username = $("#USERNAME").val();
                    d.filter_status = $("#STATUS").val();
                    d.filter_number = $("#PAN_NUMBER").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();
                }
            }
        });
    });

    //Delete Adhaar/PAN/Other Proof
    function deleteKyc(userKycId) {
        swal({
            title: " {{ trans('helpdesk.Alert')  }} ",
            text: "{{ trans('helpdesk.Alertmsg') }}",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willdelete) => {
            if (willdelete) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('kycVerification.deleteKyc') }}",
                    method: "POST",
                    dataType: 'json',
                    data: {
                        userKycId: userKycId,
                    },
                    success: function(response) {
                        if (response.success == true) {
                            $('select[name=table_length]').trigger('change');
                            swal("{{ trans('helpdesk.StatusSuccess') }}", {
                                icon: "success",
                            });
                        } else {
                            swal("{{ trans('layout.Something went wrong') }}", {
                                icon: "warning",
                            });
                        }
                    }
                });
            } else {

            }
        });
    }

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

    //Update status of Adhaar/PAN/Other Proof
    function updateStatus(kycId) {

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

        $("#USERKYC").val(kycId);
        
        $("#APPROVE").prop("checked", false);
        $("#REJECT").prop("checked", false);

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

        $('.modal-title').html("Verify PAN");

        $("#msg_detail").modal({
            backdrop: 'static',
            keyboard: false
        });
    }
    
    $(document).on('click', '#statusSubmit', function (e) {
        $("#status-error").html("");
        $("#descReason-error").html("");

        var desc_reason = $("#COMMENT").val();
        var kycId = $("#USERKYC").val();
        var kycStatus = $('input[name=KYCSTATUS]:checked').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('kycVerification.kycStatusUpdate') }}",
            method: "POST",
            dataType: 'json',
            data: {
                kycId: kycId,
                status: kycStatus,
                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) {
                    $("#msg_detail").modal("hide");
                    $('select[name=table_length]').trigger('change');
                    swal("{{ trans('helpdesk.Status Update Success') }}", {
                        icon: "success",
                    });
                } else if (response.success == false) {
                    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();
            }
        });
    });

    $(document).on('click', '.image-link', function (e) {
        e.preventDefault();
        $(this).magnificPopup({
            type: 'image',
            mainClass: 'mfp-with-zoom',
            zoom: {
                enabled: true, // By default it's false, so don't forget to enable it
                duration: 300, // duration of the effect, in milliseconds
                easing: 'ease-in-out', // CSS transition easing function
                opener: function(openerElement) {
                    return openerElement.is('img') ? openerElement : openerElement.find('img');
                }
            }
        }).magnificPopup('open');
    });
</script>
@stop