@extends('layouts.master')

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

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

    .rejected,#descReason-error,#changedStatus-error,.error {
        color: red;
    }
    .error {
        margin-left: 8px;
    }

    .approved {
        color: green;
    }

    .pending {
        color: #ff9900;
    }

    .radio-label {
        position: absolute;
        margin: -2px 0px 0px 7px;
        cursor: pointer;
    }
    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.ID 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('ID Verification') }}</li>
                    </ol>
                </div>
                <!-- /.col -->
                <div class="col-sm-12">
                    <button class="btn btn-default pull-right" id="addKYC">Add KYC</button>
                </div>
            </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('FULL_NAME', trans('helpdesk.Full Name')) }}
                            {{ Form::text('FULL_NAME','', ['id' => 'FULL_NAME', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Full Name')]) }}
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('DOCUMENT_ID', trans('helpdesk.Document ID')) }}
                            {{ Form::text('DOCUMENT_ID','', ['id' => 'DOCUMENT_ID', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Document ID')]) }}
                        </div>
                        <div class="form-col-1">
                            {{ Form::label('VERIFICATION_TYPE', trans('helpdesk.Verification Type')) }}
                            {{ Form::select('VERIFICATION_TYPE',$verificationType,'' ,['class' => 'form-control select2','placeholder' => trans('reports.Select option'), 'id' => 'VERIFICATION_TYPE']) }}
                        </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>
                </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: -46px;"><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.Full Name') }}</th>
                            <th class="text-center">{{ trans('helpdesk.ID Type') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Document ID') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Front') }}</th>
                            <th class="text-center">{{ trans('helpdesk.Back') }}</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">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 class="modal fade" id="kyc_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 KYC</h4>
                </div>
                <div class="modal-body">
                    <form id="kycUpdateForm" enctype="multipart/form-data">
                    @csrf
                        <div class="col-sm-10">
                            <label for="idType" class="required">ID Type</label><br>
                            <label><input type="radio" name="idType" value="1" id="panProof"><span class="radio-label">PAN Card</span></label>
                            <label style="margin-left: 75px;"><input type="radio" name="idType" value="2" id="addressProof"><span class="radio-label">Address Proof</span></label>
                        </div>
                        <span id="idType-error" class="error"></span><br>

                        <div class="col-sm-10">
                            {{ Form::label('username', trans('helpdesk.Username'), ['class' => 'required']) }}
                            {{ Form::text('username','', ['id' => 'formUsername', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Username')]) }}
                        </div>
                        <span id="username-error" class="error"></span><br>

                        <div class="col-sm-10 addressProof">
                            {{ Form::label('documentType', 'Document Type', ['class' => 'required']) }}
                            {{ Form::select('documentType',$documentType,'' ,['class' => 'form-control select2','placeholder' => trans('reports.Select option'), 'id' => 'documentType']) }}
                        </div>
                        <span id="documentType-error" class="addressProof error"></span><br>
                        
                        <div class="col-sm-10">
                            {{ Form::label('frontImage', 'Front Image', ['class' => 'required']) }}
                            <input type="file" name="frontImage" id="frontImage" accept="image/*" style="margin-left: 20px;">
                        </div>
                        <span id="frontImage-error" class="error"></span><br>

                        <div class="col-sm-10 addressProof">
                            {{ Form::label('backImage', 'Back Image', ['class' => 'required']) }}
                            <input type="file" name="backImage" id="backImage" accept="image/*" style="margin-left: 20px;">
                        </div>
                        <span id="backImage-error" class="addressProof error"></span><br>

                        <div class="col-sm-10">
                            {{ Form::label('documentId', 'Document ID', ['class' => 'required']) }}
                            {{ Form::text('documentId','', ['id' => 'documentId', 'class' => 'form-control', 'placeholder' => 'Document ID']) }}
                        </div>
                        <span id="documentId-error" class="error"></span><br>                        
                    </form>
                        <span class="error pull-right">*File must be JPG, JPEG, PNG & less than 1MB</span><br>
                    <div id="kycpopup-button">
                        <button class="btn btn-primary" id="kycSubmit">{{ trans('layout.Submit') }}</button>
                        <button class="btn btn-default" data-dismiss="modal">{{ trans('layout.Close') }}</button>
                    </div>
                    <div id="kycform-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">
$(document).ready(function() {
    if (window.location.href.indexOf("?name=") > -1) {
        const urlParams = new URLSearchParams(window.location.search);
        const username = urlParams.get('name');
        $('#USERNAME').val(username);
        $("#selected_date").val('');
        $("#selected_datatime").val('');
        $("#getReport").trigger('click');
    }
});
    var reportTable;
    $("#getReport").click(function() {
        $("#selected_datatime").val($("#selected_date").val());

        $('#report_title').html("ID 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('idVerification.fetch') }}",
        "type": "GET",
          "data": {
            columns: columns, order: order,
            filter_date : $("#selected_datatime").val(),
            filter_username : $("#USERNAME").val(),
            filter_verification_type : $("#VERIFICATION_TYPE").val(),
            filter_verification_status : $("#VERIFICATION_STATUS").val(),
            filter_document_id : $("#DOCUMENT_ID").val(),
           filter_full_name : $("#FULL_NAME").val(),
            pdf_download : 'Yes',
            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]
                },
                {
                    "orderable": false,
                    "targets": [2, 3, 4, 5]
                }
            ],
            dom: 'lBfrtip',
        buttons: [
            {
                extend : 'pdfHtml5',
                title : function() {
                    return "IDVerificationList";
                },
                orientation : 'landscape',
                pageSize : 'LEGAL',
                text : '<i class="fa fa-file-pdf-o"> PDF</i>',
                titleAttr : 'PDF'
            } 
        ],
            "ajax": {
                "url": "{{ route('idVerification.fetch') }}",
                "type": "GET",
                "data": function(d) {
                    d.filter_date = $("#selected_datatime").val();
                    d.filter_username = $("#USERNAME").val();
                    d.filter_verification_type = $("#VERIFICATION_TYPE").val();
                    d.filter_verification_status = $("#VERIFICATION_STATUS").val();
                    d.filter_document_id = $("#DOCUMENT_ID").val();
                    d.filter_full_name = $("#FULL_NAME").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();
                }
            }
        });
    });

    function deleteVerificationProof(verificationId) {

        swal({
                title: " {{ trans('helpdesk.Alert')  }} ",
                text: "{{ trans('helpdesk.Id Delete alert') }}",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            .then((willdelete) => {
                if (willdelete) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: "{{ route('idVerification.deleteVerificationProof') }}",
                        method: "POST",
                        dataType: 'json',
                        data: {
                            id: verificationId,
                        },
                        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;
    }

    function updateIdVerificationStatus(verificationId) {

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

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

        $('#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('idVerification.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();
            }
        });
    });

    function post() {
        const form = document.createElement('form');
        form.method = 'get';
        form.action = "{{ route('idVerification.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_type';
        hiddenField3.value = $("#VERIFICATION_TYPE").val();

        form.appendChild(hiddenField3);

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

        form.appendChild(hiddenField4);

        const hiddenField5 = document.createElement('input');
        hiddenField5.type = 'hidden';
        hiddenField5.name = 'filter_document_id';
        hiddenField5.value = $("#DOCUMENT_ID").val();

        form.appendChild(hiddenField5);

        const hiddenField6 = document.createElement('input');
        hiddenField6.type = 'hidden';
        hiddenField6.name = 'filter_full_name';
        hiddenField6.value = $("#FULL_NAME").val();

        form.appendChild(hiddenField6);

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

    var zoom_percent = "100";
    function zoom(zoom_percent){
        $(".mfp-figure figure").click(function(){
            switch(zoom_percent){
                case "100":
                    $(".mfp-figure figure").attr("title","Click to zoom in image");
                    zoom_percent = "150";
                    break;
                case "150":
                    $(".mfp-figure figure").attr("title","Click to zoom in image");
                    zoom_percent = "200";
                    break;
                case "200":
                    $(".mfp-figure figure").attr("title","Click to zoom in image");
                    zoom_percent = "250";
                    break;
                case "250":
                    $(".mfp-figure figure").attr("title","Click to zoom out image");
                    zoom_percent = "300";
                    $(".mfp-figure figure").css("cursor", "zoom-out");
                    break;
                case "300":
                    $(".mfp-figure figure").attr("title","Click to zoom in image");
                    zoom_percent = "100";
                    $(".mfp-figure figure").css("cursor", "zoom-in");
                    break;
            }
            $(this).css("zoom", zoom_percent+"%");
        });
    }

    $(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');
                }
            },
            callbacks: {
              open: function() {
                  $(".mfp-figure figure").css("cursor", "zoom-in");
                  $(".mfp-figure figure").attr("title","Click to zoom in image");
                  zoom(zoom_percent);
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        }).magnificPopup('open');
    });

    
    $(document).on('click', '#addKYC', function(e) {
        $("#idType-error,#username-error,#documentType-error,#documentId-error,#frontImage-error,#backImage-error").html("");

        $("#panProof").prop('checked', true);
        $("#addressProof").prop('checked', false);

        $("#formUsername,#documentType,#documentId,#frontImage,#backImage").val("");
        
        $('#documentType').select2('destroy');
        $('#documentType').select2({
            placeholder: "Select",
            allowClear: true
        });

        $("input[name='idType']").trigger('change');

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

    $("input[name='idType']").change(function() {
        var type = $("input[name='idType']:checked").val();
        if(type == 1){
            $('.addressProof').hide();
        }else{
            $('.addressProof').show();
        }
    });

    
    $(document).on('click', '#kycSubmit', function(e) {
        $("#idType-error,#username-error,#documentType-error,#documentId-error,#frontImage-error,#backImage-error").html("");
           
        var formData = new FormData($('#kycUpdateForm')[0]);
        $.ajax({
            url: "{{ route('idVerification.uploadKYC') }}",
            method: "POST",
            dataType: 'JSON',
            contentType: false,
            processData: false,
            data: formData,
            beforeSend: function() {
                $("#kycpopup-button").hide();
                $("#kycform-loader").show();
            },
            success: function(response) {
                var message = response.msg;
                var status = response.status;
                if (status == 422) {
                    showErrorMessage(message);
                    return;
                }
                if (response.status == 200) {
                    $('#getReport').trigger('click');
                    $("#kyc_detail").modal("hide");
                    swal("KYC Updated Successfully", {
                        icon: "success",
                    });
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                }
            },
            error: function() {
                $("#kyc_detail").modal('hide');
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#kycform-loader").hide();
                $("#kycpopup-button").show();
            }
        });
    });
    $('#documentId').keyup(function(){
        this.value = this.value.toUpperCase();
    });
</script>
@stop