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

@section('page_level_css')
<!--<link type="text/css" href="{{asset('assets/vendors/custom/image-editor/css/tui-color-picker.css')}}" rel="stylesheet"/>
<link type="text/css" href="{{asset('assets/vendors/custom/image-editor/css/tui-image-editor.css')}}" rel="stylesheet"/>-->
@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="title-head register-form-title d-flex align-items-center bg-primary-color p-3 radius-15">
                        <img src="{{asset('assets/media/extra/register-form-white.png')}}" alt="title-icon" />
                        <h3>LabPair Principal Investigator Application Form</h3>
                    </div>

                    <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-pi')}}" id="userRegisterForm" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <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="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="text" name="research_name" id="research_name" placeholder="Research Institution" class="form-control"  />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <div class="radio-list custom-singal-state">
                                                    <div class="form-check">
                                                        <label class="form-check-label radio">
                                                            United States Entity
                                                            <input type="radio" class="form-check-input" name="country" id="country" checked>
                                                            <span></span>
                                                        </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_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">
                                        <div class="col-lg-7">
                                            <p>Currently, LabPair is only acception Beta Testers from withing the United States, but we will be expanding internationally soon! </p>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-5">
                                            <div class="form-group mb-3">
                                                <label>US Phone Number:</label>
                                                <!--<div class="d-flex align-items-center">-->
                                                <input type="text" name="phone" id="phone" placeholder="" class="form-control mr-3" />
                                                <!--</div>-->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-5">
                                            <div class="form-group mb-3">
                                                <label>Upload Profile Picture</label>
                                                <div class="d-flex align-items-center">
                                                    <a href="javascript:;" class="btn btn-primary" data-toggle="modal" data-target="#upload_photo">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">
                                                <label>What is your position?</label>
                                                <div class="radio-list">

                                                    @foreach($data['position'] AS $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" value="{{$position->id}}">
                                                            <span></span>{{$position->name}}
                                                        </label>
                                                    </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" value="{{$position->id}}">
                                                            <span class="mt-2"></span>
                                                        </label>
                                                        <input type="text" class="form-control col-lg-10" name="position[other]" id="position_other" placeholder="{{$position->name}}">
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>

<!--                                    <div class="row">
                                        <div class="col-lg-7">
                                            <p>Principal Investigator Information: As your research is directed by another scientist who 'owns' the data, 
                                                samples or skills, please provide their information here. 
                                                They will only be notified if you choose to create a post for your lab or propose a collaboration.</p>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="text" placeholder="Principal Investigator (Full Name)" name="investigator_name" id="investigator_name" class="form-control">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <input type="text" placeholder="Principal Investigator (Email)" name="investigator_email" id="investigator_email" class="form-control">
                                            </div>
                                        </div>
                                    </div>-->

                                    <div class="row">
                                        <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" 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">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <label>Enter a short personal bio about yourself</label>
                                                <!--<div class="d-flex align-items-center">-->
                                                <input type="text" name="short_bio" id="short_bio" class="form-control" placeholder="Short bio about you">
                                                <!--</div>-->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="form-group mb-3">
                                                <label>Any additional notes or questions?</label>
                                                <!--<div class="d-flex align-items-center">-->
                                                <textarea rows="7" name="notes" id="notes" class="form-control"></textarea>
                                                <!--</div>-->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-7">
                                            <div class="bg-white radius-15 overflow-hidden">
                                                <div class="f-head text-center p-3">
                                                    <h4 class="m-0 text-center">Account Security</h4>
                                                </div>
                                                <div class="f-body p-3">
                                                    <p>As part of your application, you need to provide a temporary password. 
                                                        You will need to remember this password as you will be asked, with the approval of your application, 
                                                        to enter reenter your password, along with 7 digit registration number as part of the approval process. 
                                                        It is at that time you will complete your application and be asked to create a new, permanent, password.</p>
                                                    <div class="form-group mb-3">
                                                        <!--<div class="d-flex align-items-center">-->
                                                        <input type="text" class="form-control" placeholder="Enter Temporary Password" name="temp_password" id="temp_password">
                                                        <!--</div>-->
                                                    </div>
                                                    <div class="form-group mb-3">
                                                        <!--<div class="d-flex align-items-center">-->
                                                        <input type="text" class="form-control" placeholder="Reenter Temporary Password" name="temp_password_confirmation" id="temp_password_confirmation">
                                                        <!--</div>-->
                                                    </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 Requests">
                                            </div>
                                        </div>
                                    </div>

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

<div class="modal fade upload_photo" id="upload_photo" 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">
                <h3>Profile Photo</h3>
                <button type="button" class="close" 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">
                    <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>
                                <!--<img id="img1Preview" src="" alt="pic" style="width: 100px; display: none;"/>-->
                                <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">
                <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">Save Photo</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade imageEditor" id="imageEditor" 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">
                <h3>Image Editor</h3>
                <button type="button" class="close" 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="kt-grid kt-grid--hor kt-grid--root kt-login kt-login--v3  kt-login--signin">
                    <div class="kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
                        <div class="kt-grid__item kt-grid__item--fluid kt-login__wrapper p-0 mt-0 mb-0">
                            <div class="kt-login__container upload_photo_box mt-0 mb-0">

                                <div class="p-4 mt-4 mb-4" id="imageEditorBox">
                                    
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#imageEditor" style="display: none;">Image Editor</button>


@endsection

@section('page_level_js')
<!--<script type="text/javascript" src="{{asset('assets/vendors/custom/image-editor/js/fabric.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendors/custom/image-editor/js/tui-code-snippet.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendors/custom/image-editor/js/tui-color-picker.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendors/custom/image-editor/js/FileSaver.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendors/custom/image-editor/js/tui-image-editor.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendors/custom/image-editor/js/theme/white-theme.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/vendors/custom/image-editor/js/theme/black-theme.js')}}"></script>-->
@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: /^(?=.{10,}$)(?=(?:.*?[A-Z]){2})(?=(?:.*?[0-9]){3}).*$/
            },
            email: {
                required: true,
                email: true,
            },
            research_name: {
                required: true,
            },
            research_name: {
                required: true,
            },
            research_city: {
                required: true,
            },
            research_state_id: {
                required: true,
            },
            phone: {
                required: true,
            },
            position: {
                required: true,
            },
//            investigator_name: {
//                required: true,
//            },
//            investigator_email: {
//                required: true,
//            },
            short_bio: {
                required: true,
            },
            notes: {
                required: true,
            },
            temp_password: {
                required: true,
            },
            temp_password_confirmation: {
                equalTo: "#temp_password",
            },
        },
        invalidHandler: function (event, validator) {
            var alert = $('#kt_form_1_msg');
            alert.removeClass('kt--hide').show();
            KTUtil.scrollTop();
        },

        submitHandler: function (form) {
            form.submit();
        }
    });


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

    var uploadDropzone = "{{getURL('dropzone/upload-image')}}";
    new Dropzone('#imageDropZone', {
        url: uploadDropzone,
        type: "POST",
        maxFiles: 1,
        addRemoveLinks: true,
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}',
        },
        acceptedFiles: 'image/*',
        init: function () {
            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);
                    }),
                    this.on('error', function (file, response) {
                        $(file.previewElement).find('.dz-error-message').text(response.messageError);
                    }),
                    this.on('removedfile', function (file) {
                        $('#image').val('');
                    });
        }
    });
    
    
//    var imageEditor = new tui.ImageEditor('#imageEditorBox', {
//        includeUI: {
//            loadImage: {
//                path: "{{getURL('public/storage/')}}" + $('#dropzone_image').val(),
//                name: 'SampleImage',
//            },
//            theme: blackTheme, // or whiteTheme
//            initMenu: 'filter',
//            menuBarPosition: 'bottom',
//        },
//        cssMaxWidth: 700,
//        cssMaxHeight: 500,
//        usageStatistics: false,
//    });
//    window.onresize = function () {
//        imageEditor.ui.resizeEditor();
//    };
</script>
@endpush