@extends('layouts.master')
<style>
    .pointer,
    .minus {
        cursor: pointer;
        color: white;
        font-size: 36px;
    }

    .hide-nav .owl-controls {
        display: none;
    }
</style>
<link rel="stylesheet" href="{{ asset('dist/plugins/magnific-popup/magnific-popup.css') }}">
@section('content')

<!-- 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.Player Detail') }}</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('Player Detail') }}</li> -->
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    @php
    $i=1;
    @endphp
    <section class="content">
        <div id="owl-demo" class="owl-carousel owl-theme">
            @foreach($proofData as $pdata)
            <div class="item">

                <div class="card">
                    <div class="card-header">
                        <div class="pull-right">
                        </div>
                        <h3 class="card-title"> {{$pdata->USERNAME}} {{ trans('helpdesk.Profile Information') }}</h3>
                        <div class="card-primary card-form-1">
                            <div class="card-body">
                                <div class="form-col-1">

                                    <label class="card-title-lable">{{ trans('helpdesk.Username') }}:</label> {{$pdata->USERNAME}}

                                    <br>
                                    <label class="card-title-lable">{{ trans('helpdesk.Gender') }}:</label> {{$pdata->GENDER}}

                                    <br>
                                    <label class="card-title-lable">{{ trans('helpdesk.DateOfBirth') }}:</label> {{$pdata->DATE_OF_BIRTH}}

                                    <br>
                                    <label class="card-title-lable">{{ trans('helpdesk.State') }}:</label> {{$pdata->STATE}}
                                    <br>
                                    <label class="card-title-lable">{{ trans('helpdesk.Address') }}:</label> {{$pdata->ADDRESS}}

                                </div>
                                <form id="kycForm{{$i}}">
                                    @csrf
                                    {{ Form::hidden('id', $pdata->USER_VERIFICATION_ID) }}
                                    {{ Form::hidden('userid',$pdata->USER_ID) }}
                                    <div class="card-primary card-form-1">

                                        <h3 class="card-title">@if($pdata->VERIFICATION == 'PAN Card'){{ trans('helpdesk.PAN Card') }} @else{{ trans('helpdesk.ID Proof') }} @endif</h3>
                                        <div class="card-body">
                                            <div class="form-col-1">
                                                <div id="FRONT_IMAGE">
                                                    <h2 class="card-title">Front Side </h2>
                                                    <a class="image-link" href="{{$pdata->VERIFICATION_PROOF}}"><img id="frontImage" src="{{env('KYC_IMAGE', '') .$pdata->VERIFICATION_PROOF}}" height="200" width="200"></a>
                                                </div>
                                                <br>
                                                <span><button class="btn btn-primary flip-frontimage " id="flip-frontimage">Flip 90 degree</button></span>

                                            </div>
                                            <div class="form-col-1" id="back_image">
                                                <div id="BACK_IMAGE">
                                                    <h2 class="card-title">Back Side </h2>
                                                    <a class="image-link" href="{{$pdata->PROOF_BACKIMAGE}}"><img id="backImage" src="{{env('KYC_IMAGE', '') .$pdata->PROOF_BACKIMAGE}}" height="200" width="200"></a>
                                                </div>
                                                <br>
                                                <span><button class="btn btn-primary" id="flip-backimage">Flip 90 degree</button></span>
                                            </div>
                                            <div class="form-col-1">
                                                <label class="card-title-lable">{{ trans('helpdesk.OCR Status') }}:</label>@if($pdata->STATUS == 1) {{ 'Yes' }} @else {{'No'}} @endif
                                                <br>
                                                @if($pdata->VERIFICATION == 'PAN Card')
                                                <label class="card-title-lable">{{ trans('helpdesk.Document V/F') }}:</label> {{ 'No' }}
                                                <br>
                                                @endif
                                                <label class="card-title-lable">{{ trans('helpdesk.Duplicate Doc') }}:</label> {{ 'Yes' }}
                                                <br><br>

                                                {{ Form::label('DOCUMENTID', trans('helpdesk.Document ID'), ['class' => 'required']) }}
                                                {{ Form::text('DOCUMENTID', $pdata->VERIFICATION_DOC_ID, ['id' => 'DOCUMENTID', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Document ID')]) }}
                                                <span id="DOCUMENTID-error" class="error-help-block"></span>

                                                @if(($pdata->VERIFICATION == 'Adhaar Card') ||($pdata->VERIFICATION == 'Driving Licence')||($pdata->VERIFICATION == 'Voter ID')||($pdata->VERIFICATION == 'Passport'))

                                                {{ Form::label('DOCUMENTTYPE', trans('helpdesk.Document Type'), ['class' => 'required'])}}
                                                {{ Form::text('DOCUMENTTYPE', $pdata->VERIFICATION , ['id' => 'DOCUMENTTYPE', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Document Type')]) }}
                                                <span id="documenttype-error" class="error-help-block"></span>

                                                {{ Form::label('GENDER',  trans('helpdesk.Gender'), ['class' => 'required'])}}
                                                {{ Form::select('GENDER',$gender, $pdata->GENDER, ['class' => 'form-control select2', 'id' => 'GENDER']) }}
                                                <span id="GENDER-error" class="error-help-block"></span>

                                                {{ Form::label('STATE',  trans('helpdesk.State', ['class' => 'required']))}}
                                                {{ Form::select('STATE',$states , $pdata->STATE ,['class' => 'form-control select2', 'id' => 'STATE']) }}
                                                <span id="STATE-error" class="error-help-block"></span>

                                                {{ Form::label('address', trans('helpdesk.Address'), ['class' => 'required']) }}
                                                {{ Form::text('address',$pdata->ADDRESS , ['id' => 'address', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Address')]) }}
                                                <span id="address-error" class="error-help-block"></span>

                                                @endif

                                                @if($pdata->VERIFICATION == 'PAN Card')

                                                {{ Form::label('username', trans('helpdesk.Username'), ['class' => 'required']) }}
                                                {{ Form::text('username', $pdata->USERNAME, ['id' => 'username', 'class' => 'form-control', 'placeholder' => trans('helpdesk.Username')]) }}

                                                {{ Form::label('DOB', trans('helpdesk.DateOfBirth'), ['class' => 'required']) }}
                                                {{ Form::text('DOB', $pdata->DATE_OF_BIRTH, ['id' => 'DOB', 'class' => 'form-control', 'placeholder' => trans('helpdesk.DateOfBirth')]) }}

                                                @endif

                                                <div class="button_sec" id="form-buttons">
                                                    <button class="btn btn-primary" id="acceptUpdate" data="{{$i}}">{{ trans('helpdesk.Update') }}</button>
                                                </div>
                                                <div class="button_sec">
                                                    <button class="btn btn-primary" id="rejectKyc">{{ trans('helpdesk.Reject') }}</button>
                                                </div>
                                            </div>

                                            <div class="button_sec">
                                                <button class="btn btn-default" id="saveAndClose">{{ trans('helpdesk.Save & Close') }}</button>
                                            </div>
                                            <div class="button_sec" id="form-loader" style="display:none">
                                                <img style="height: 65px;width: 65px;" src="{{ asset('img/lg.double-ring-spinner.gif') }}">
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            @php
            $i++;
            @endphp
            @endforeach
        </div>
    </section>

    <div class="modal fade" id="reject-popup" 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">Reason for Rejection </h4>
                </div>
                <div class="modal-body">
                    <!-- <input type="hidden" id="VERIFICATION" /> -->
                    <div class="form-col-1">
                        {{ Form::label('REASON',  trans('helpdesk.Reason'), ['class' => 'required'])}}
                        {{ Form::select('REASON',$rejectionReasons ,'',['class' => 'form-control select2', 'id' => 'REASON', 'placeholder' => 'Select']) }}
                    </div>
                    <span id="reason-error" class="error-help-block"></span>
                    <br>
                    <div id="popup-button">
                        <button class="btn btn-primary" id="reasonSubmit">{{ 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')
<!-- Magnific Popup core JS file -->
<script src="{{ asset('dist/plugins/magnific-popup/jquery.magnific-popup.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var verificationType = "{{$pdata->VERIFICATION}}";
        if (verificationType == 'PAN Card') {
            $("#back_image").hide();
        }
    });
    $('#DOB').daterangepicker({
        singleDatePicker: true,
        maxDate: moment().add(1, 'years'),
        showDropdowns: true,
        locale: {
            format: 'YYYY-MM-DD'
        }
    });

    function showErrorMessage(message) {
        $('.error-help-block').html('');

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

        });
    }

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

        e.preventDefault();
        var formid = $(this).attr('data');
        var formData = new FormData($('#kycForm' + formid)[0]);
        $.ajax({
            type: 'POST',
            url: "{{ route('kycVerifications.update') }}",
            data: formData,
            dataType: 'JSON',
            contentType: false,
            processData: false,
            beforeSend: function() {
                $("#form-buttons").hide();
                $("#form-loader").show();
            },
            success: function(response) {
                var message = response.msg;
                var status = response.status;
                if (status == 422) {
                    showErrorMessage(message);
                    return;
                }
                if (status == 200) {
                    swal(message, {
                        icon: "success",
                    });
                } else {
                    swal(message, {
                        icon: "warning",
                    });
                    return;
                }
                $('.error-help-block').html('');
            },
            error: function() {
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#form-loader").hide();
                $("#form-buttons").show();
            }
        });
    });

    $(document).on('click', '#rejectKyc', function(e) {
        e.preventDefault();
        swal({
                title: " {{ trans('helpdesk.Alert')  }} ",
                text: "{{ trans('helpdesk.Rejectalert') }}",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            .then((reject) => {
                if (reject) {
                    $("#reject-popup").modal({
                        backdrop: 'static',
                        keyboard: false
                    });
                }
            });
    });

    $(document).on('click', '#reasonSubmit', function(e) {
        var verificationId = $('[name="id"]').val();
        var reason = $('#REASON').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('kycVerifications.reject') }}",
            method: "POST",
            dataType: 'json',
            data: {
                id: verificationId,
                reason: 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) {

                    $("#reject-popup").modal("hide");
                    swal("{{ trans('helpdesk.Reject success alert') }}", {
                        icon: "success",
                    });
                } else {
                    swal("{{ trans('layout.Something went wrong') }}", {
                        icon: "warning",
                    });
                }
            },
            error: function() {
                $("#reject-popup").modal('hide');
                swal("{{ trans('layout.Something went wrong') }}", {
                    icon: "warning",
                });
            },
            complete: function() {
                $("#form-loader").hide();
                $("#popup-button").show();
            }
        });
    });

    $(document).on('click', '#saveAndClose', function(e) {
        e.preventDefault();
        win = window.close();

    });

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

    $(document).on('click', '.flip-frontimage', function(e) {
        e.preventDefault();
        var angle = ($('#frontImage').data('angle') + 90) || 90;
        $('#frontImage').css({
            'transform': 'rotate(' + angle + 'deg)'
        });
        $('#frontImage').data('angle', angle);
    });


    $(document).on('click', '#flip-backimage', function(e) {
        e.preventDefault();
        var angle = ($('#backImage').data('angle') + 90) || 90;
        $('#backImage').css({
            'transform': 'rotate(' + angle + 'deg)'
        });
        $('#backImage').data('angle', angle);
    });


    // function zoomin() {
    //     var GFG = document.getElementById("frontImage");
    //     var currHeight = GFG.clientHeight;
    //     GFG.style.height = (currHeight + 80) + "px";
    // }
</script>
<script>
    $(document).ready(function() {

        $("#owl-demo").on('initialized.owl.carousel resized.owl.carousel', function(e) {
            $(e.target).toggleClass('hide-nav', e.item.count <= e.page.size);
        });

        $("#owl-demo").owlCarousel({
            items: 1,
            autoplay: false,
            nav: true,
            singleItem: true,
            dots: false,
        });
    });
</script>
@stop