@extends('layouts.landing')

@section('title', 'Verify Call to Bar')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-xxl-4 col-xl-4 col-lg-4">
            @include('elements.settings-menu')
        </div>
        <div class="col-12 col-xxl-8 col-xl-8 col-lg-8">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                <div class="card-body p-4">
                    <h5>Year of Call to Bar Verification</h5>
                    <div class="row">
                        <div class="col-12">
                            <form class="pb-4" action="{{route('account.ctb-upload', $user->id)}}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="user_id" value="{{$user->id}}">
                                <input type="hidden" name="ctb" value="{{$user->ctb}}">
                                <input type="hidden" name="ctb_certificate_name" id="ctb-name">
                                <input type="hidden" name="ctb_status" value="pending">
                                <div class="mt-2">
                                    <p class="font-xss text-gray-500">Verify your year of Call to Bar by entering your enrollment number or uploading you Call to Bar certificate</p>
                                    <span class="text-red"><strong>* Please upload a coloured Call to Bar certificate </strong></span>
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="form-group">
                                            <label for="">
                                                Enrollment Number
                                            </label>
                                            <input type="number" name="enrollment_no" id="enrollment_no" class="form-control" value="{{$user->enrollment_no}}" required {{isset($user->enrollment_no) ? 'readonly' : ''}}>
                                        </div>
                                        @if (isset($user->ctb_certificate))
                                            <div class="form-group">
                                                <label for="file-btn" class="cursor-pointer">
                                                    <input type="file" name="ctb_certificate" id="file-btn" accept=".pdf,.doc,.docx" onchange="loadFile(event)" class="hide-input"><br>
                                                    <a class="align-items-center font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i class="font-md text-warning feather-upload me-2"></i><span class="post-icon">Upload CTB certificate</span></a>
                                                </label>
                                            </div>
                                            <div class="my-4">
                                                <a href="{{$user->ctb_certificate}}" target="_blank">
                                                    <span id="show-file" style="display: flex">
                                                        @if($file_ext == 'pdf')
                                                            <img src="{{asset('assets/images/pdf.png')}}" class="h-2 w-2 mr-2" id="show-image" alt="{{$user->ctb_certificate_name}}">
                                                        @elseif($file_ext == 'doc')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" id="show-image" alt="{{$user->ctb_certificate_name}}">
                                                        @elseif($file_ext == 'docx')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" id="show-image" alt="{{$user->ctb_certificate_name}}">
                                                        @else
                                                            <img src="{{asset('assets/images/document.png')}}" class="h-2 w-2 mr-2" id="show-image" alt="{{$user->ctb_certificate_name}}">
                                                        @endif
                                                        <span class="ml-3">
                                                            <p class="text-muted mb-0 mr-3" id="file-name">{{$user->ctb_certificate_name}}</p>
                                                            <small class="small text-muted mb-0 mr-3" id="file-size"></small>
                                                        </span>
                                                    </span>
                                                </a>
                                            </div>
                                        @else
                                            <div class="form-group">
                                                <label for="file-btn" class="cursor-pointer">
                                                    <input type="file" name="ctb_certificate" id="file-btn" accept=".pdf,.doc,.docx" onchange="loadFile(event)" class="hide-input"><br>
                                                    <a class="align-items-center font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i class="font-md text-warning feather-upload me-2"></i><span class="post-icon">Upload CTB certificate</span></a>
                                                </label>
                                            </div>
                                            <div class="my-4">
                                                <span id="show-file" style="display: none">
                                                    <img id="show-image" src="{{asset('assets/images/document.png')}}" style="width: 50px">
                                                    <span class="ml-3">
                                                        <p class="text-muted mb-0 mr-3" id="file-name"></p>
                                                        <small class="small text-muted mb-0 mr-3" id="file-size"></small>
                                                    </span>
                                                </span>
                                            </div>
                                        @endif
                                        @if($user->ctb_status == 'pending')
                                            <p class="mb-4 text-gray-500 text-dark"><i class="feather-check-circle"></i> Verification pending</p>
                                        @elseif($user->ctb_status == 'verified')
                                            <p class="mb-4 text-green"><i class="feather-check-circle"></i> Verified</p>
                                        @elseif($user->ctb_status == 'declined')
                                            <p class="mb-4 text-red"><i class="mdi mdi-close"></i> Invalid Call to Bar certificate</p>
                                        @else
                                            <div class="form-group">
                                                <button type="submit" disabled id="send" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                                    <span class="button__text"> Send for verification</span>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var loadFile = function(event) {
            var output = document.getElementById('file-output');
            var file_size = document.getElementById('file-btn');
            var fsize = file_size.files[0].size;
            file = Math.round((fsize / 1024));
            // alert(file);
            if (file <= 1024) {
                    document.getElementById('file-size').innerHTML = '<b>'
                    + file + '</b> KB';
                } else if (file <= 10240) {
                file = Math.round((file / 1000));
                    document.getElementById('file-size').innerHTML = '<b>'
                    + file + '</b> MB';
                } else if (file <= 102400) {
                    file = Math.round((file / 1000));
                    document.getElementById('file-size').innerHTML = '<b>'
                    + file + '</b> MB';
                } else if (file <= 1024000) {
                    file = Math.round((file / 1000));
                    document.getElementById('file-size').innerHTML = '<b>'
                    + file + '</b> MB';
                }
            output = URL.createObjectURL(event.target.files[0]);
            document.getElementById('show-file').style.display = 'flex';
            document.getElementById('show-image').src = '{{asset("assets/images/document.png")}}';
            document.getElementById('send').disabled = false;
            output.onload = function() {
                URL.revokeObjectURL(output) // free memory
            }
        };

    const actualBtn = document.getElementById('file-btn');
    const fileChosen = document.getElementById('file-name');
    const fileChosen1 = document.getElementById('ctb-name');

    actualBtn.addEventListener('change', function(){
        fileChosen.textContent = this.files[0].name
        fileChosen1.value = this.files[0].name
    });

    function removeFile(e)
    {
        e.parentElement.remove();
    }


    $(function () {
        $('#send').attr('disabled', true);
        $('#enrollment_no').keyup(function () {

            if ($('#enrollment_no').val() != '') {
                $('#send').attr('disabled', false);
            } else {
                $('#send').attr('disabled', true);
            }
        });
    });
    </script>
@endsection