@extends('layouts.user')

@section('title', 'Verification')

@section('content')
    <div class="nk-content ">
        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="components-preview wide-md mx-auto">
                        <div class="nk-block-head nk-block-head-lg wide-sm">
                            <div class="nk-block-head-content">
                                <div class="nk-block-head-sub"><a class="back-to" href="{{ route('account') }}"><em class="icon ni ni-arrow-left"></em><span>Dashboard</span></a></div>
                                <h2 class="nk-block-title fw-normal">KYC Verification</h2>
                                <div class="nk-block-des">
                                    <p class="lead"></p>
                                </div>
                            </div>
                        </div><!-- .nk-block -->
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-6 mb-5">
                                                    @if(session('error'))
                                                        <div class="alert alert-danger" role="alert">
                                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                            <i class="fe fe-alert-triangle air__menuLeft__icon"></i> {{ session('error') }}
                                                        </div>
                                                    @endif
                                                    @if(session('success'))
                                                        <div class="alert alert-success" role="alert">
                                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                            <i class="fe fe-check-square air__menuLeft__icon"></i> {{ session('success') }}
                                                        </div>
                                                    @endif
                                                    <form name="form-validation" method="POST" action="{{ route('updatekyc') }}" enctype="multipart/form-data">
                                                        @csrf
                                                        <p>Upload a government issued identity document</p>
                                                        <button class="btn btn-primary" id="passport" onclick="showBoth()">Upload passport or national ID</button>
                                                        <button class="btn btn-primary" id="license" onclick="showFront()">Upload drivers license</button>
                                                        <div class="form-group" style="display: none" id="front">
                                                            <label class="form-label" for="validation-username">Document front</label>
                                                            <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="id_front"
                                                                required
                                                                value=""
                                                                type="file"
                                                            />
                                                        </div>
                                                        <div class="form-group" style="display: none" id="back">
                                                            <label class="form-label" for="validation-username">Document back</label>
                                                            <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="id_back"

                                                                value=""
                                                                type="file"
                                                            />
                                                        </div>

                                                        <br><br>
                                                        <p>Utility bills (The documents that you provide shouldn’t be older than 3 months)</p>
                                                        <div class="form-group">
                                                            <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="utility_bill"

                                                                value=""
                                                                type="file"
                                                            />
                                                        </div>
                                                        <br>
                                                        <p>Statement of account</p>
                                                        <div class="form-group">
                                                            <input
                                                                id="validation-username"
                                                                class="form-control"
                                                                name="statement_of_account"
                                                                value=""
                                                                type="file"
                                                            />
                                                        </div>

                                                        <div class="form-actions">
                                                            @if($profile['status'] == \App\Constants::FAILED || $profile['status'] == null)
                                                                <button type="submit" class="btn btn-primary mr-2 px-5">Update</button>
                                                            @elseif($profile['status'] == \App\Constants::SUCCESS)
                                                                <div class="alert alert-success" role="alert">
                                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                    <i class="fe fe-check-square air__menuLeft__icon"></i> Your KYC has been verified
                                                                </div>
                                                            @elseif($profile['status'] == \App\Constants::PENDING)
                                                                <div class="alert alert-warning" role="alert">
                                                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                    <i class="fe fe-check-square air__menuLeft__icon"></i> Your KYC verification is pending
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <script>
                                ;(function($) {
                                    'use strict'
                                    $(function() {
                                        $('#form-validation').validate({
                                            submit: {
                                                settings: {
                                                    inputContainer: '.form-group',
                                                    errorListClass: 'form-control-error',
                                                    errorClass: 'has-danger',
                                                },
                                            },
                                        })

                                        $('#form-validation .remove-error').on('click', function() {
                                            $('#form-validation').removeError()
                                        })

                                        $('#form-validation-simple').validate({
                                            submit: {
                                                settings: {
                                                    inputContainer: '.form-group',
                                                    errorListClass: 'form-control-error-list',
                                                    errorClass: 'has-danger',
                                                },
                                            },
                                        })

                                        $('#form-validation-simple .remove-error').on('click', function() {
                                            $('#form-validation-simple').removeError()
                                        })

                                        $('.select2').select2()
                                    })
                                })(jQuery)
                            </script>
                    </div><!-- .components-preview -->
                </div>
            </div>
        </div>
    </div>

    <style>
        #mediaFile {
            position: absolute;
            top: -1000px;
        }

        #profile {
            border-radius: 100%;
            width: 150px;
            height: 150px;
            margin: 0 auto;
            position: relative;
            top: -80px;
            margin-bottom: -80px;
            cursor: pointer;
            background: #f4f4f4;
            display: table;
            background-size: cover;
            background-position: center center;
            box-shadow: 0 5px 8px rgba(0, 0, 0, 0.35);
        }

        #profile.is-invalid {
            border: 4px solid red;
        }
        #profile .dashes {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 100%;
            width: 100%;
            height: 100%;
            border: 4px dashed #ddd;
            opacity: 1;
        }
        #profile label {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            padding: 0 30px;
            color: grey;
            opacity: 1;
        }
        #profile.dragging {
            background-image: none !important;
        }
        #profile.dragging .dashes {
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-name: spin;
            animation-name: spin;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            opacity: 1 !important;
        }
        #profile.dragging label {
            opacity: 0.5 !important;
        }
        #profile.hasImage .dashes, #profile.hasImage label {
            opacity: 0;
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

    </style>

    <script>
        // ----- On render -----
        $(function() {

            $('#profile').addClass('dragging').removeClass('dragging');
        });

        $('#profile').on('dragover', function() {
            $('#profile').addClass('dragging')
        }).on('dragleave', function() {
            $('#profile').removeClass('dragging')
        }).on('drop', function(e) {
            $('#profile').removeClass('dragging hasImage');

            if (e.originalEvent) {
                var file = e.originalEvent.dataTransfer.files[0];
                console.log(file);

                var reader = new FileReader();

                //attach event handlers here...

                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    console.log(reader.result);
                    $('#profile').css('background-image', 'url(' + reader.result + ')').addClass('hasImage');

                }

            }
        })
        $('#profile').on('click', function(e) {
            console.log('clicked')
            $('#mediaFile').click();
        });
        window.addEventListener("dragover", function(e) {
            e = e || event;
            e.preventDefault();
        }, false);
        window.addEventListener("drop", function(e) {
            e = e || event;
            e.preventDefault();
        }, false);
        $('#mediaFile').change(function(e) {

            var input = e.target;
            if (input.files && input.files[0]) {
                var file = input.files[0];

                var reader = new FileReader();

                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    console.log(reader.result);
                    $('#profile').css('background-image', 'url(' + reader.result + ')').addClass('hasImage');
                }
            }
        })
    </script>

    <script>
        function showBoth() {
            $('#front').css('display', 'block')
            $('#back').css('display', 'block')
        }

        function showFront() {
            $('#front').css('display', 'block')
            $('#back').css('display', 'none')
        }
    </script>

@endsection