@extends('layouts.website')
@section('title','Register Application Form')
@section('page_title','')

@section('page_level_css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
<link href="{{asset('assets/vendors/general/toastr/build/toastr.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="kt-grid kt-grid--hor kt-grid--root">
                <div class="main-box-white mt-4">
                    <div class="application-form inner-bg-grey mt-3 radius-15">
                        <div class="row">
                            <div class="offset-lg-2 col-lg-8">
                                <form action="{{getURL('store-register-member')}}" id="userRegisterForm" method="POST" enctype="multipart/form-data">
                                    @csrf

                                    <div class="row">
                                        <div class="col-lg-6 offset-3">
                                            <div class="form-group mb-3">
                                                <h5 class="text-center">LabPair accounts are currently available to US residents only (international expansion coming soon). Applicant must work in research in academia, government, industry, or non-profit sectors.</h5>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-4">
                                        <div class="col-lg-12">
                                            <div class="form-group mb-3">
                                                <h5 class="requiredInstruction">* All Fields Mandatory except where noted.</h5>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group mb-3">
                                                <input type="text" name="name" id="name" placeholder="First Name" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group mb-3">
                                                <input type="text" name="middle_name" id="middle_name" placeholder="Middle Name (Optional)" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="form-group mb-3">
                                                <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="email" name="email" id="email" placeholder="Email Address" class="form-control" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="email" name="re_email" id="re_email" placeholder="Re-email Address" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <div class="checkbox-list custom-singal-state">
                                                    <div class="form-check">
                                                        <label class="form-check-label checkbox">
                                                            Institution
                                                        </label>
                                                    </div>
                                                    <div class="form-check">
                                                        <label class="form-check-label checkbox">
                                                            <input type="checkbox" class="form-check-input" name="country" id="country" require>
                                                            <span></span>
                                                            I work at a United States research entity
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="text" name="research_name" id="research_name" placeholder="Research Institution or Company" class="form-control" required />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="text" name="research_department" id="research_department" placeholder="Department or Division (optional)" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="text" name="research_city" id="research_city" placeholder="Research Institution (City):" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <select class="form-control" name="research_state_id" id="research_state_id">
                                                    <option value="">Research Institution (State):</option>
                                                    @foreach($data['states'] AS $state)
                                                    <option value="{{$state->id}}">{{$state->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-lg-5">
                                            <div class="form-group mb-3">
                                                <label>Add Profile Picture (optional)</label>
                                                <div class="d-flex align-items-center">
                                                    <a href="javascript:;" class="btn btn-wide btn-primary" data-toggle="modal" data-target="#dropZoneUploadPhoto">Upload Photo</a>
                                                    <input type="hidden" name="image" id="image" class="form-control" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-8">
                                            <div class="form-group mb-3 mt-4">
                                                <label>Select your research position.</label>
                                                <p>Please indicate whether you are the head of the laboratory OR you are a laboratory employee/trainee</p>

                                                <label class="mb-4 mt-4">Head of Laboratory / Principal Investigator</label>
                                                <div class="radio-list">
                                                    <div class="form-check">
                                                        <label class="form-check-label radio">
                                                            <input type="radio" class="form-check-input" name="position_id" id="position_id_9" value="9">
                                                            <span></span>I attest that I am the head of the laboratory and I make all the final decisions with regard to the sharing of the resources posted on LabPair or entering potential collaborations.
                                                        </label>
                                                    </div>
                                                </div>

                                                <label class="mb-4 mt-4">Laboratory employee or trainee positions:</label>
                                                <div class="radio-list">

                                                    @foreach($data['position'] AS $key => $position)
                                                    @if($position->type == 'Regular')
                                                    <div class="form-check">
                                                        <label class="form-check-label radio">
                                                            <input type="radio" class="form-check-input" name="position_id" id="position_id_{{$position->id}}" value="{{$position->id}}">
                                                            <span></span>{{$position->name}} {{($position->id == 7) ? '(working under PI)' : ''}}
                                                        </label>

                                                        @if($position->rtype == 'PI')
                                                        <label class="form-check-label ml-5">
                                                            I attest that I am the head of the laboratory and I make all the final decisions with regard to the sharing of the resources posted on LabPair or entering potential collaborations.
                                                        </label>
                                                        @endif
                                                    </div>
                                                    @else
                                                    <div class="form-check d-flex align-items-center ">
                                                        <label class="form-check-label d-flex align-items-center radio">
                                                            <input type="radio" class="form-check-input" name="position_id" id="position_id_{{$position->id}}" value="{{$position->id}}">
                                                            <span class="mt-2"></span>
                                                        </label>
                                                        <input type="text" class="form-control" name="position[other]" id="position_other" placeholder="{{$position->name}}">
                                                    </div>
                                                    @endif
                                                    @endforeach

                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-6 mb-2 mt-4" id="principalInformationBox" style="display: none;">
                                        <label class="small-font mb-3">Please include contact information for the principal investigator or lead scientist that makes decisions for your laboratory.</label>
                                        <span class="small-font mb-3">Your LabPair profile will show you as being a member of their laboratory. We will only contact this person if you create a post on LabPair advertising laboratory resources to be shared, which requires their approval.</span>
                                        <div class="row ml-2 mt-3">
                                            <div class="col-md-12 mb-2">
                                                <input type="text" class="form-control" placeholder="Principal Investigator (First Name)" name="pi_name" id="pi_name">
                                            </div>
                                            <div class="col-md-12 mb-2">
                                                <input type="text" class="form-control" placeholder="Principal Investigator (Middle Name) optional" name="pi_middle_name" id="pi_middle_name">
                                            </div>
                                            <div class="col-md-12 mb-2">
                                                <input type="text" class="form-control" placeholder="Principal Investigator (Last Name)" name="pi_last_name" id="pi_last_name">
                                            </div>
                                            <div class="col-md-12 mb-2">
                                                <input type="text" class="form-control" placeholder="Principal Investigator (Email)" name="pi_email" id="pi_email">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row mt-4">
                                        <div class="col-lg-12">
                                            <div class="form-group mb-3">
                                                <label>What is your field of research? Check all that apply.</label>
                                                <div class="accordion ml-5" id="accordionExample">

                                                    @foreach($data['research'] AS $research)
                                                    <div class="card">
                                                        <div class="card-header collapsed" data-toggle="collapse" data-target="#collapse{{$research->id}}" aria-expanded="true">
                                                            <span class="accicon"><i class="fas fa-angle-down rotate-icon"></i></span>
                                                            <span class="title">{{$research->name}}</span>
                                                        </div>
                                                        <div id="collapse{{$research->id}}" class="collapse" data-parent="#accordionExample">
                                                            <div class="card-body">
                                                                <div class="checkbox-list">

                                                                    @foreach($research->category AS $category)
                                                                    @if($category->type == 'Regular')
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="research_{{$research->id}}_{{$category->id}}" name="research[{{$research->id}}][{{$category->id}}]">
                                                                        <label class="custom-control-label" for="research_{{$research->id}}_{{$category->id}}">{{$category->name}}</label>
                                                                    </div>
                                                                    @else
                                                                    <div class="custom-control custom-checkbox">
                                                                        <input type="checkbox" class="custom-control-input" id="research_{{$research->id}}_{{$category->id}}" name="research[{{$research->id}}][{{$category->id}}][other]">
                                                                        <label class="custom-control-label" for="research_{{$research->id}}_{{$category->id}}">{{$research->name}} Other :</label>
                                                                        <input type="text" class="form-control" placeholder="Other" id="research_value_{{$research->id}}_{{$category->id}}" name="research[{{$research->id}}][{{$category->id}}][value]">
                                                                    </div>
                                                                    @endif
                                                                    @endforeach

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach


                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <label>Enter a short personal bio for your profile</label>
                                                <textarea rows="7" name="short_bio" id="short_bio" class="form-control" placeholder="Enter 25 words or less"></textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-lg-7">
                                            <label>Password</label>
                                            <div class="ml-3">
                                                <p class="font-15 mb-0">Password must contain:</p>
                                                <div class="ml-3">
                                                    <p class="mt-0 mb-0">
                                                        <i class="fa fa-times-circle text-danger 8_character"></i> &nbsp; <b class="font-15">Minimum 8 characters</b>
                                                    </p>
                                                    <p class="mt-0 mb-0">
                                                        <i class="fa fa-times-circle text-danger 1_capital_letter"></i> &nbsp; <b class="font-15">Minimum 1 capital letter</b>
                                                    </p>
                                                    <p class="mt-0">
                                                        <i class="fa fa-times-circle text-danger 2_digit"></i> &nbsp; <b class="font-15">Minimum 2 digits</b>
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="form-group mb-3">
                                                <input type="password" class="form-control" onkeyup="allCases(this.value);" placeholder="Enter Password" name="password" id="password">
                                            </div>
                                            <div class="form-group mb-3">
                                                <input type="password" class="form-control" placeholder="Re-enter Password" name="password_confirmation" id="password_confirmation">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <label class="mb-0">Account auto-approval code (optional)</label>
                                                <p style="font-size: 13px;font-weight:400" class="mt-0">If a LabPair representative gave you a code to auto-approve your account, enter it here:</p>
                                                <input type="text" name="auto_approval_code" id="auto_approval_code" class="form-control" placeholder="Enter code">
                                                <div class="ml-3">
                                                    <p class="mt-0 mb-0">
                                                        <i class="fa fa-times-circle text-danger promo_valid_code"></i> &nbsp; <b class="font-15 auto-approve-text">Invalid Code</b>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="form-group col-md-3">
                                            <img id="captcha_code" src="{{getURL('generate-captcha')}}" />
                                            <img id="btnRefresh" class="btnRefresh" src="{{getURL('assets/media/extra/refresh-icon.png')}}" style="height: 30px; margin-top: 5px; padding-left: 5px; cursor: pointer;" />
                                        </div>

                                        <div class="form-group col-md-4">
                                            <label for="captcha_code" class="sr-only">Captcha Code</label>
                                            <input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="Captcha Code">
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <div class="checkbox-list custom-singal-state">
                                                    <div class="form-check">
                                                        <label class="form-check-label checkbox">
                                                            <input type="checkbox" class="form-check-input" name="agree_privacy_terms" id="agree_privacy_terms" require>
                                                            <span></span>
                                                            By clicking "Submit Request" you, confirm that you have read and agree to LabPair's <a class="agree_privacy_terms" href="{{getURL('terms-of-use')}}" target="_blank">Terms of Use</a> and <a class="agree_privacy_terms" href="{{getURL('privacy-policy')}}" target="_blank">Privacy Policy</a>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4">
                                        <div class="col-lg-7">
                                            <div class="btn-submit">
                                                <input type="submit" class="btn btn-primary" value="Submit Request" id="btnRegister">
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>

<div class="modal fade dropZoneUploadPhoto" id="dropZoneUploadPhoto" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header pt-2 pb-2 d-flex align-items-center">
                <h3 class="mb-0">Profile Photo</h3>
                <button type="button" class="close dropzoneCloseButton" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="form-group mb-0">
                    <div class="col-lg-12">
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="dropzone dropzone-default dropzone-success" id="imageDropZone">
                                <div class="dropzone-msg dz-message needsclick">
                                    <i class="flaticon-upload-1" style="font-size: 72px"></i>
                                    <header>Drag & Drop file here</header>
                                    <span>or</span><br>
                                    <a href="javascript:Void(0)" class="btn btn-outline-success mr-2">Browse File</a>
                                </div>
                                <div class="dz-preview dz-processing dz-image-preview dz-success dz-complete" style="display: none;">
                                    <div class="dz-image">
                                        <img data-dz-thumbnail="" alt="" src="">
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="dropzone_image" id="dropzone_image" class="form-control" />
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer pt-0 custom-photoupload-footer justify-content-between border-top-0">
                <button type="button" class="editImageButton" data-toggle="modal" data-target="#modalCropper" style="display: none;"> <i class="fas fa-camera"></i> Edit Photo</button>
                <button type="button" class="showImageButton btn btn-primary" data-dismiss="modal" aria-label="Close" style="display: none;">Save Photo</button>
                <button type="button" class="deleteImageButton" style="display: none;"> <i class="fas fa-times-circle"></i> Delete Photo</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalCropper" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">Profile Editor</h5>
                <button type="button" class="close closeModalButton" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <div class="row">
                        <div class="col-md-11">
                            <img id="imageEditorField" class="imageEditorField" src="{{getURL('assets/media/bg/sc-home1-bg.png')}}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-wide cropImageButton" id="crop" data-dismiss="modal" aria-label="Close">Crop Profile</button>
                <button type="button" class="btn btn-secondary btn-wide closeModalButton" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<button type="button" data-toggle="modal" data-target="#modalCropper" style="display: none;">Show Editor</button>
@endsection

@section('page_level_js')
<script src="{{asset('assets/vendors/general/toastr/build/toastr.min.js')}}" type="text/javascript"></script>

@include('layouts.message-toastr')

@endsection

@push('footerscript')
<script>
    $("#phone").inputmask("mask", {
        "mask": "999-999-9999"
    });

    $("#userRegisterForm").validate({
        rules: {
            name: {
                required: true,
            },
            last_name: {
                required: true,
            },
            password: {
                required: true,
                regex: /^(?=.{8,}$)(?=(?:.*?[A-Z]){1})(?=(?:.*?[0-9]){2}).*$/
            },
            password_confirmation: {
                required: true,
                equalTo: "#password",
            },
            email: {
                required: true,
                email: true,
            },
            re_email: {
                required: true,
                email: true,
                equalTo: '#email'
            },
            research_name: {
                required: true,
            },
            research_city: {
                required: true,
            },
            research_state_id: {
                required: true,
            },
            country: {
                required: true,
            },
            position_id: {
                required: true,
            },
            short_bio: {
                required: true,
            },
            captcha_code: {
                required: true,
            },
            agree_privacy_terms: {
                required: true,
            }
        },
        messages: {
            re_email: {
                equalTo: "Email addresses do not match",
            },
            country: {
                required: "Please verify that you work at a US based research entity",
            },
            research_name: {
                required: "Please enter your institution's information",
            },
            research_city: {
                required: "Please enter your institution's information",
            },
            research_state_id: {
                required: "Please enter your institution's information",
            },
            position_id: {
                required: "Please select a research position",
            }
        },
        invalidHandler: function(event, validator) {
            var alert = $('#kt_form_1_msg');
            alert.removeClass('kt--hide').show();
            KTUtil.scrollTop();
        },

        submitHandler: function(form) {
            var position = parseInt($("input[name='position_id']:checked").val());
            console.log(position);
            if (position != 9) {
                var pi_name = $("#pi_name").val();
                var pi_last_name = $("#pi_last_name").val();
                var pi_email = $("#pi_email").val();

                console.log(pi_name, pi_last_name, pi_email);
                if (pi_name == '' || pi_last_name == '' || pi_email == '') {
                    console.log('inside wrong validation');
                    return;
                }
                console.log('outside validation');
            }
            console.log('validation done');
            form.submit();
        }
    });

    $(document).on('click', '.btnRefresh', function() {
        var captchaURL = "{{getURL('generate-captcha')}}";
        $.ajax({
            url: captchaURL,
            method: "GET",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            success: function(data) {
                $("#captcha_code").attr('src', captchaURL);
            },
            error: function(errorThrown) {

            }
        });
    });

    /* Disable auto search dropzone class */
    Dropzone.autoDiscover = false;
    /* Disable auto search dropzone class */

    var baseURL = "{{getURL('')}}";
    var uploadDropzone = "{{getURL('dropzone/upload-image')}}";
    var DropZoneVar = new Dropzone('#imageDropZone', {
        url: uploadDropzone,
        type: "POST",
        maxFiles: 1,
        thumbnailWidth: 200,
        thumbnailHeight: 200,
        addRemoveLinks: true,
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}',
        },
        acceptedFiles: 'image/*',
        init: function() {
            this.on("addedfile", function() {
                    if (this.files[1] != null) {
                        this.removeFile(this.files[0]);
                    }
                }),
                this.on("sending", function(file, xhr, formData) {
                    formData.append("old_image", $("#old_image").val());
                }),
                this.on('success', function(file, resp) {
                    $('#image').val(resp.image_name);
                    $('#image').removeClass("intro");
                    file.previewElement.querySelector('[data-dz-name]').innerHTML = resp.image_name;
                    file_name1 = resp.image_name;
                    $('#image').val(file_name1);
                    $('#dropzone_image').val(file_name1);

                    var imageEditor = baseURL + "public/storage/" + file_name1;
                    $('#imageEditorField').attr('src', imageEditor);
                    $('.editImageButton, .showImageButton, .deleteImageButton').show();
                }),
                this.on('error', function(file, response) {
                    $(file.previewElement).find('.dz-error-message').text(response.messageError);
                }),
                this.on('removedfile', function(file) {
                    $('#image').val('');
                    $('.editImageButton, .showImageButton, .deleteImageButton').hide();
                });
        }
    });

    var $modal = $('#modalCropper');
    var image = document.getElementById('imageEditorField');
    var cropper;
    $("body").on("change", ".image", function(e) {
        var files = e.target.files;
        var done = function(url) {
            image.src = url;
            $modal.modal('show');
        };
        var reader;
        var file;
        var url;
        if (files && files.length > 0) {
            file = files[0];
            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                reader = new FileReader();
                reader.onload = function(e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });
    $modal.on('shown.bs.modal', function() {
        cropper = new Cropper(image, {
            aspectRatio: '1',
            viewMode: 3,
            preview: '.preview'
        });
    }).on('hidden.bs.modal', function() {
        cropper.destroy();
        cropper = null;
    });
    $("#crop").click(function() {
        canvas = cropper.getCroppedCanvas({
            width: 160,
            height: 160,
        });
        canvas.toBlob(function(blob) {
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                var base64data = reader.result;
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "crop-image-upload",
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    data: {
                        'image': base64data
                    },
                    success: function(data) {
                        console.log(data);

                        if (data.status == 1) {
                            var croppedImageData = baseURL + "public/storage/" + data.image_name;
                            var mockFile = {
                                name: croppedImageData,
                                size: 12345
                            };
                            Dropzone.forElement("#imageDropZone").removeAllFiles(true);

                            Dropzone.forElement('#imageDropZone').emit("addedfile", mockFile);
                            Dropzone.forElement('#imageDropZone').emit("thumbnail", mockFile, croppedImageData);
                            Dropzone.forElement('#imageDropZone').emit("complete", mockFile);
                            Dropzone.forElement('#imageDropZone').files.push(mockFile);
                            $('#image').val(data.image_name);
                            $('.editImageButton, .showImageButton, .deleteImageButton').show();
                        }
                    }
                });
            }
        });
    });

    $("body").on("click", ".deleteImageButton", function(e) {
        Dropzone.forElement("#imageDropZone").removeAllFiles(true);
    });

    function allCases(string) {

        var flag = true;
        if (string.length < 8) {
            $('.8_character').removeClass('text-success fa-check-circle');
            $('.8_character').addClass('text-danger fa-times-circle');
            flag = false;
        } else {
            $('.8_character').removeClass('text-danger fa-times-circle');
            $('.8_character').addClass('text-success fa-check-circle');
        }
        if ((string.match(/[A-Z]/g) || []).length == 0) {
            $('.1_capital_letter').removeClass('text-success fa-check-circle');
            $('.1_capital_letter').addClass('text-danger fa-times-circle');
            flag = false;
        } else {
            $('.1_capital_letter').addClass('text-success fa-check-circle');
            $('.1_capital_letter').removeClass('text-danger fa-times-circle');
        }
        if ((string.match(/[0-9]/g) || []).length <= 1) {
            $('.2_digit').addClass('text-danger fa-times-circle');
            $('.2_digit').removeClass('text-success fa-check-circle');
            flag = false;
        } else {
            $('.2_digit').removeClass('text-danger fa-times-circle');
            $('.2_digit').addClass('text-success fa-check-circle');
        }

        if (flag) {
            $('#btnRegister').removeAttr('disabled');
        }
        return flag;
    }

    $("#auto_approval_code").on("keyup", function(e) {
        checkPromoValidCode();
    });

    function checkPromoValidCode() {
        var code = $('#auto_approval_code').val();
        $.ajax({
            url: "{{getURL('ajax/check-promo-valid-code')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'code': code,
            },
            success: function(data) {
                if (data.status == 1) {
                    $('.auto-approve-text').html('Valid Code');
                    $('.promo_valid_code').addClass('text-success fa-check-circle').removeClass('text-danger fa-times-circle');
                } else {
                    $('.promo_valid_code').addClass('text-danger fa-times-circle').removeClass('text-success fa-check-circle');
                }
            },
            error: function(errorThrown) {
                $('.promo_valid_code').addClass('text-danger fa-times-circle').removeClass('text-success fa-check-circle');
            }
        });
    }

    $(document).ready(function() {
        $('input:radio[name=position_id]').change(function() {
            checkPrincipalInvestigatorBox();
        });

    });

    function checkPrincipalInvestigatorBox(id = 9) {
        var boxPI = ($('#position_id_' + id).prop('checked') == true);
        if (boxPI) {
            $('#principalInformationBox').hide();
        } else {
            $('#principalInformationBox').show();
        }
    }
</script>
@endpush