@extends('layouts.member-login')
@section('title','Title and Authors')
@section('page_title','TitleAuthor')

@section('page_level_css')
<link href="{{asset('assets/vendors/general/select2/dist/css/select2.css')}}" rel="stylesheet" type="text/css" />
<style>
    .dz-image img {
        position: relative;
        height: 100%;
    }
</style>
@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">

                @include('member.include.user-info-box')

                <div class="mt-4">
                    <div class="">
                        <form action="{{getMURL('post/title-author')}}" method="POST" id="formTitleAuthor">
                            @csrf
                            <input type="hidden" name="post_type" value="{{($postTopbarTitleType == 'Sample') ? 'Sample' : 'Data'}}">
                            <input type="hidden" name="post_origin" value="{{$post_origin}}">
                            @isset($post->id)
                            <input type="hidden" name="post_type" value="{{$post->post_type}}">
                            <input type="hidden" name="id" value="{{$post->id}}">
                            @endisset
                            <div class="row">

                                @include('member.include.create-post-sidebar')


                                <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12">
                                    <div class="grey-bg-wrap">
                                        <div class="post-right-wrapper">
                                            <div class="title-wrapper mb-1">
                                                <h2 class="secondary-title text-capitalize text-white mb-0">{{$postTopbarTitle ?? 'Create Data Post [Title and Authors]'}}</h2>
                                            </div>
                                            <label class="d-block text-right mb-1">* Required fields</label>
                                            <div class="d-block mb-0">
                                                <label class="">&nbsp;</label>
                                                <span class="info-icon ml-2" data-toggle="modal" data-target="#tooltipBoxPostTitleAuthor">
                                                    <img src="{{asset('assets/media/extra/tooltip-info-icon-gray.gif')}}">
                                                </span>
                                            </div>
                                            <label class="d-block mt-4 mb-3">Post Cover*</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="post-sub-content-wrapper">
                                                    <label class="mb-4">The headline and summary are featured on the on the feed. They give a sense of what you are offering and encourage others to click on your post to learn more detailed information.</label>
                                                    <div class="form-group">
                                                        <label class="mb-2">Post headline</label>
                                                        <input type="text" class="form-control" name="title" id="title" placeholder="Required" value="{{(isset($post->id)) ? $post->title : old('title')}}">
                                                    </div>
                                                    <div class="form-group RemainingCharacters">
                                                        <label class="mb-2">Post summary</label>
                                                        <textarea class="textareaShortBio countTextarea form-control mt-0" name="description" id="description" rows="4" maxlength="300" placeholder="Add a general description. Detailed information regarding methods, study design, etc. will be collected later">{{(isset($post->id)) ? $post->description : old('description')}}</textarea>
                                                        <span class="pull-right label label-default countCharacters">{{(300 - strlen((isset($post->id)) ? $post->description : old('description')))}}</span>
                                                        <span class="pull-right label label-default">Amount of characters remaining :&nbsp;</span>
                                                    </div>

                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Principal Investigator*</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="post-sub-content-wrapper">
                                                    <label>Designate a principal investigator (PI) for the items advertised in this post?</label>
                                                    <div class="pragraph-p">
                                                        <p>The Pl "owns" the data or samples and is the primary decision-maker for the research laboratory. The Pl must approve this post before it is made public. Each post has only one PI. If there is more than one PI, designate one as the LabPair contact.</p>
                                                    </div>
                                                    <div class="main-box-white mb-4">

                                                        <div id="PIListDiv">
                                                            @if(isset($post->id))

                                                            @if(count($piList) != 0)
                                                            @if(count($piList) > 1)
                                                            @foreach($piList as $pi)
                                                            <div class="custom-radio-btn-wrap">
                                                                <label class="container">{{(\Auth::user()->role == 'PI' && \Auth::user()->id == $pi->pi->id) ? 'Me' : ($pi->pi->full_name ?? '')}}
                                                                    <input type="radio" name="pi_id" id="pi_id" value="{{$pi->pi->id}}" {{$post->pi_id == $pi->pi_id ? 'checked' : ''}} data-name="{{$pi->pi->full_name}}">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                            </div>
                                                            @endforeach
                                                            @else
                                                            <div class="custom-radio-btn-wrap">
                                                                <label class="container">{{(\Auth::user()->role == 'PI' && \Auth::user()->id == $piList[0]->pi->id) ? 'Me' : ($piList[0]->pi->full_name ?? '')}}
                                                                    <input type="radio" name="pi_id" id="pi_id" value="{{$piList[0]->pi->id}}" checked data-name="{{$piList[0]->pi->full_name}}">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                            </div>
                                                            @endif
                                                            @endif
                                                            @else

                                                            @if(count($piList) != 0)
                                                            @if(count($piList) > 1)
                                                            @foreach($piList as $pi)
                                                            <div class="custom-radio-btn-wrap">
                                                                <label class="container">{{(\Auth::user()->role == 'PI' && \Auth::user()->id == $pi->pi->id) ? 'Me' : ($pi->pi->full_name ?? '')}}
                                                                    <input type="radio" name="pi_id" id="pi_id" value="{{$pi->pi->id}}" data-name="{{$pi->pi->full_name}}">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                            </div>
                                                            @endforeach
                                                            @else
                                                            <div class="custom-radio-btn-wrap">
                                                                <label class="container">{{(\Auth::user()->role == 'PI' && \Auth::user()->id == $piList[0]->pi->id) ? 'Me' : ($piList[0]->pi->full_name ?? '')}}
                                                                    <input type="radio" name="pi_id" id="pi_id" value="{{$piList[0]->pi->id}}" checked data-name="{{$piList[0]->pi->full_name}}">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                            </div>
                                                            @endif
                                                            @endif

                                                            @endif
                                                        </div>
                                                        <div class="btn-wrapper mt-4" id="addNewPIMemberButtonDiv">
                                                            <button type="button" class="d-block text-capitalize primary-btn text-center" id="addNewPIMemberButton" title="Add another PI">Add another PI</button>
                                                            <!--<a href="" title="Add another PI" class="d-block text-capitalize primary-btn text-center">Add another PI</a>-->
                                                        </div>
                                                    </div>
                                                    <div class="principal-investigator" id="addPrincipalInvestigator" style="display: none;">
                                                        <label>Add Principal Investigator</label>
                                                        <div class="row">
                                                            <div class="col-lg-12 col-sm-12">
                                                                <div class="form-group row">
                                                                    <label class="col-form-label mb-0 col-lg-3 text-right">First Name:</label>
                                                                    <div class="col-lg-4">
                                                                        <input type="text" class="form-control addPIMemberFields" name="pi_first_name" id="pi_first_name" placeholder="First Name">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row">
                                                                    <label class="col-form-label mb-0 col-lg-3 text-right">Middle Name:</label>
                                                                    <div class="col-lg-4">
                                                                        <input type="text" class="form-control addPIMemberFields" name="pi_middle_name" id="pi_middle_name" placeholder="Middle Name(Optional)">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row">
                                                                    <label class="col-form-label mb-0 col-lg-3 text-right">Last Name:</label>
                                                                    <div class="col-lg-4">
                                                                        <input type="text" class="form-control addPIMemberFields" name="pi_last_name" id="pi_last_name" placeholder="Last Name">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row">
                                                                    <label class="col-form-label mb-0 col-lg-3 text-right">Email Address:</label>
                                                                    <div class="col-lg-6">
                                                                        <input type="text" class="form-control addPIMemberFields" name="pi_email" id="pi_email" placeholder="Email Address">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row">
                                                                    <label class="col-form-label mb-0 col-lg-3 text-right">Institution:</label>
                                                                    <div class="col-lg-6">
                                                                        <input type="text" class="form-control addPIMemberFields" name="pi_research_name" id="pi_research_name" placeholder="Institution">
                                                                    </div>
                                                                </div>

                                                                <div class="form-group row">
                                                                    <button type="button" class="primary-btn offset-3 mr-2" id="addPIMemberButton">Add PI</button>
                                                                    <button type="button" class="primary-btn" id="cancelPIMemberButton">Cancel</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Authors*</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="author-wrapper">
                                                    <label>Enter authors that will appear on the publication</label>
                                                    <div class="pragraph-p">
                                                        <p>We understand that sometimes 'science takes a village', but collaborators may not want to add a village of co-authors to
                                                            their paper. We suggest keeping the number of authors under three people. If having more is critical, then make this
                                                            known up front to your potential collaborators.</p>
                                                    </div>
                                                </div>
                                                <div class="authorlist-wrapper">

                                                    <div class="row">
                                                        <div class="col-lg-8 col-md-12">
                                                            <div class="input-group searchAuthorDiv">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text">
                                                                        <i class="fas fa-search"></i>
                                                                    </span>
                                                                </div>
                                                                <select class="form-control kt-select2" id="searchAuthor" name="searchAuthor">
                                                                    <option></option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="pragraph-p">
                                                                <p class="mb-1">If the member search does not produce the member record you are looking for, you can manually enter the information in the field(s) below.</p>
                                                                <p class="mb-1">Or:</p>
                                                                <p class="mb-2">Enter author using the fields below:</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-12 col-sm-12">
                                                            <div class="form-group row">
                                                                <label class="col-form-label mb-0 col-lg-3 text-right">First Name:</label>
                                                                <div class="col-lg-4">
                                                                    <input type="text" class="form-control addAuthorFields" name="author_first_name" id="author_first_name" placeholder="First Name">
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-form-label mb-0 col-lg-3 text-right">Middle Name:</label>
                                                                <div class="col-lg-4">
                                                                    <input type="text" class="form-control" name="author_middle_name" id="author_middle_name" placeholder="Middle Name">
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-form-label mb-0 col-lg-3 text-right">Last Name:</label>
                                                                <div class="col-lg-4">
                                                                    <input type="text" class="form-control addAuthorFields" name="author_last_name" id="author_last_name" placeholder="Last Name">
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-form-label mb-0 col-lg-3 text-right">Email Address:</label>
                                                                <div class="col-lg-6">
                                                                    <input type="text" class="form-control addAuthorFields" name="author_email" id="author_email" placeholder="Email Address">
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <button type="button" class="primary-btn offset-3" id="addAuthorButton">Add author</button>
                                                            </div>

                                                            <div class="form-group row AuthorFoundClass" id="AuthorFoundClass" style="display: none;">
                                                                <span class="col-form-label col-lg-12 text-center userExists">This user already exists!</span>
                                                                <div class="col-lg-6 offset-3 row profileDesign">
                                                                    <div class="col-lg-4 profileImageDiv align-items-center">
                                                                        <img class="profileImage" src="{{getImage(\Auth::user()->image) ?? asset('assets/media/extra/neutron-star.png')}}">
                                                                    </div>
                                                                    <div class="col-lg-8 text-left">
                                                                        <label class="detail w-100 userFullName"></label>
                                                                        <label class="detail w-100 userInstitute"></label>
                                                                        <label class="detail w-100 userEmail"></label>
                                                                        <label class="detail w-100 userMobile"></label>
                                                                        <input type="hidden" id="FoundUserFullName" name="FoundUserFullName" value="">
                                                                        <input type="hidden" id="FoundUserId" name="FoundUserId" value="">
                                                                    </div>
                                                                </div>
                                                                <span class="col-form-label col-lg-12 text-center w-100 pro">Would you like to add <span class="userFullName">Kiran J Kanzar</span> as an author?</span>
                                                                <div class="col-lg-6 offset-3 row text-center">
                                                                    <button type="reset" class="primary-btn mr-3" id="CancelAuthorFoundButton">Cancel</button>
                                                                    <button type="button" class="primary-btn" id="AddAuthorFoundButton">Add</button>
                                                                </div>
                                                            </div>

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

                                                <!--<label class="d-block mt-5">Authors Entered:</label>-->
                                                <div class="moveable-wrapper mt-2">
                                                    <div class="main-container">
                                                        <ul class="columns">
                                                            <li class="column to-do-column">
                                                                <!-- <div class="column-header">
                                                                   <h4>To Do</h4>
                                                                   </div> -->
                                                                <ul class="author-list-div" id="authorListDiv">

                                                                    @foreach($authorList as $key => $author)
                                                                    <li class="task" id="authorLIID{{$author->author_id}}">
                                                                        <input type="hidden" name="author_position[]" value="{{$author->author_id}}">
                                                                        <div class="inner-task">
                                                                            <p>{{$author->author->name . ' ' . $author->author->last_name}}</p>
                                                                            <div class="col-btn-wrapperr">
                                                                                <div class="column-button authorMoveableClass">
                                                                                    <button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button>
                                                                                </div>
                                                                                <div class="column-button">
                                                                                    <button type="button" class="button deleteAuthorXButton" @isset($post->id) onclick="deleteAuthorMember({{$author->author_id}}, {{$post->id}})" @endisset>X</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    @endforeach

                                                                    @if(! isset($post->id))
                                                                    <li class="task" id="authorLIID{{Auth::user()->id}}">
                                                                        <input type="hidden" name="author_position[]" value="{{Auth::user()->id}}}}">
                                                                        <div class="inner-task">
                                                                            <p>{{Auth::user()->name . ' ' . Auth::user()->last_name}}</p>
                                                                            <div class="col-btn-wrapperr">
                                                                                <div class="column-button authorMoveableClass">
                                                                                    <button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button>
                                                                                </div>
                                                                                <div class="column-button">
                                                                                    <button type="button" class="button deleteAuthorXButton">X</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </li>

                                                                    @if(count($piList) == 1)
                                                                    @foreach($piList as $key => $pi)
                                                                    @if(Auth::user()->id != $pi->pi_id)
                                                                    <li class="task" id="authorLIID{{$pi->pi_id}}">
                                                                        <input type="hidden" name="author_position[]" value="{{$pi->pi_id}}">
                                                                        <div class="inner-task">
                                                                            <p>{{$pi->pi->name . ' ' . $pi->pi->last_name}}</p>
                                                                            <div class="col-btn-wrapperr">
                                                                                <div class="column-button authorMoveableClass">
                                                                                    <button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button>
                                                                                </div>
                                                                                <div class="column-button">
                                                                                    <button type="button" class="button deleteAuthorXButton" @isset($post->id) onclick="deleteAuthorMember({{$pi->pi_id}}, {{$post->id}})" @endisset>X</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    @endif
                                                                    @endforeach
                                                                    @endif

                                                                    @endif
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                            <label class="d-block mb-3">Keywords*</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="key-word-wrapper">
                                                    <div class="pragraph-p">
                                                        <p>Enter at least one keyword to help others find your post.</p>
                                                    </div>
                                                    <label>Keywords entered:</label>
                                                    <div class="main-container">
                                                        <ul class="columns">
                                                            <li class="column to-do-column">
                                                                <ul class="task-list" id="keywordListBox">

                                                                    @foreach($keywordList as $keyword)
                                                                    <li class="task">
                                                                        <input type="hidden" name="keywords[]" value="{{$keyword->keyword}}">
                                                                        <div class="inner-task-wrap">
                                                                            <p>{{$keyword->keyword}}</p>
                                                                            <div class="column-button">
                                                                                <button type="button" class="button deleteKeywordXButton">X</button>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                    @endforeach

                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="add-task-container">
                                                        <label class="d-block">Keyword:</label>
                                                        <input type="text" class="taskText" id="addNewKeywordText" maxlength="190">
                                                        <button type="button" id="addKeywordButton" class="primary-btn d-block mt-3" onclick="addKeyword()">Add Keyword</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Legal</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="legal-wrapper">
                                                    <div class="pragraph-p">
                                                        <p>Will sharing these data/samples require any of the following?</p>
                                                    </div>
                                                    <div class="main-box-white">

                                                        @foreach($legalList as $key => $legal)
                                                        <div class="custom-checkbox" id="{{$legal->id == 5 ? 'LegalOtherLabel' : ''}}">
                                                            <label class="container">
                                                                <div id="{{$legal->id == 5 ? 'LegalOtherDiv' : ''}}" style="{{($legal->id == 5 && isset($legalOtherSelectedList)) ? 'display: none;' : ''}}">{{$legal->name}}</div>
                                                                <input type="checkbox" name="legal[]" id="{{$legal->id == 5 ? 'LegalOtherCheckbox' : ''}}" value="{{$legal->id}}" {{(isset($legalSelectedList) && in_array($legal->id, $legalSelectedList)) ? 'checked' : ''}}>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                            @if($legal->id == 5)
                                                            <input type="text" class="form-control col-sm-11" id="LegalOtherText" name="legal_other" value="{{$legalOtherSelectedList ?? ''}}" style="{{isset($legalOtherSelectedList) ? '' : 'display: none;'}}">
                                                            @endif
                                                        </div>
                                                        @endforeach

                                                    </div>
                                                </div>
                                            </div>
                                            <!-- <label class="d-block mb-3">Thumbnail(s)</label> -->
                                            <label class="d-block mb-3">Post cover image (optional)</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="thumbnail-wrapper">
                                                    <div class="pragraph-p">
                                                        <p>Feel free to add an image, diagram, or visual abstract that will enhance your post's cover</p>
                                                    </div>
                                                    <div class="main-box-white">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="dropzone dropzone-default dropzone-success" id="uploadPostThumbnail">
                                                                    <div class="dropzone-msg dz-message needsclick">
                                                                        <div class="drop-img-box">
                                                                            <img src="{{asset('assets/media/extra/upload-dropzone-icon.png')}}">
                                                                        </div>
                                                                        <div class="content-box text-left">
                                                                            <div class="d-inline-block text-center">
                                                                                <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>
                                                                    </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>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="imageSection" id="imageSection" style="display: none;"></div>
                                                </div>
                                            </div>

                                            <div class="bottom-btn-wrapper">
                                                <div class="row">
                                                    <!--                                                    <div class="col-lg-4 text-center">
                                                        <div class="btn-wrap">
                                                            <a href="#" title="Back" class="primary-btn formBackButton">Back</a>
                                                        </div>
                                                    </div>-->
                                                    <div class="col-lg-4 text-center offset-8">
                                                        <div class="btn-wrap">
                                                            <button type="submit" title="Next" class="primary-btn formSubmitButton" id="formSubmitButton">
                                                                Next <span class="right-arrow"><i class="fa fa-arrow-right"></i></span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <!-- <div class="col-lg-4 text-center">
                                                        <div class="btn-wrap">
                                                            <a href="{{isset($post->id) ? getMURL('post/human-sample/' . $post->id) : 'javascript:void(0)'}}" title="Next" class="primary-btn formNextButton {{isset($post->id) ? '' : 'disabled'}}" {{isset($post->id) ? '' : 'disabled'}}>
                                                                Next <span class="right-arrow"><i class="fa fa-arrow-right"></i></span>
                                                            </a>
                                                        </div>
                                                    </div> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>
<!-- Modal-->
<div class="modal fade contact_labpair_popup" id="contact_labPair_model" 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">
                <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" id="kt_login">
                    <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 contact-labpair mt-0 mb-0">
                                <div class="kt-login__signin">
                                    <div class="kt-login__head">
                                        <h3 class="kt-login__title">Contact LabPair</h3>
                                    </div>
                                    <form class="kt-form" action="">
                                        <span class="in-form-info">Answer the questions below, enter your message, then click the “Send” button. A LabPair representative will contact you to address your questions or concerns.</span>
                                        <div class="input-group">
                                            <input class="form-control" type="text" placeholder="Your Full Name" name="email" autocomplete="off">
                                        </div>
                                        <div class="input-group d-flex mt-3">
                                            <label class="text-right mt-2 phone-label">Best Phone Number:</label>
                                            <div class="input-phone d-flex">
                                                <input class="form-control phone-small mt-0" type="text">&nbsp;&nbsp;
                                                <input class="form-control phone-small mt-0" type="text">&nbsp;&nbsp;
                                                <input class="form-control mt-0" type="text">
                                            </div>
                                        </div>
                                        <div class="input-group d-flex mt-3">
                                            <label class="text-right mt-2">Institution or company name:</label>
                                            <textarea rows="4" class="form-control mt-0" type="text" placeholder=""></textarea>
                                        </div>
                                        <div class="input-group d-flex mt-3">
                                            <label class="text-right mt-2">Your Question or Comment:</label>
                                            <textarea rows="8" class="form-control mt-0" type="text" placeholder="Hi, I would like to get more information about the costs of using LabPair. I was told that I can use a P-card to pay for my subscription and I have ten researchers on my team. Please call me to discuss further. Thx."></textarea>
                                        </div>
                                        <div class="kt-login__actions">
                                            <button class="btn kt-login__btn-primary btn-pill btn-custom">Send Message</button>&nbsp;&nbsp;
                                            <button id="kt_login_signin_submit" class="btn kt-login__btn-primary btn-pill btn-custom" data-dismiss="modal">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="simpleModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title" id="simpleModalTitle"></h5>
                <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 pb-0">
                <div class="text-left">
                    <p id="simpleModalDescription"></p>
                </div>
                <div class="text-left simpleModalExtraDiv" style="display: none;">
                    <p class="simpleModalExtraDescription"></p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="button" class="btn btn-custom btn-pill font-weight-bold border-radius-50" data-dismiss="modal" id="simpleModalOKButton"></button>
                <button type="button" class="btn btn-custom btn-pill font-weight-bold border-radius-50" data-dismiss="modal" id="simpleModalCancelButton"></button>
            </div>
        </div>
    </div>
</div>
<button id="simpleModalShowButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#simpleModal" style="display: none;"></button>

@include('member.include.tooltip-modal-box')


@endsection

@section('page_level_js')
<script src="//cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>
<script src="{{asset('assets/vendors/general/select2/dist/js/select2.full.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script type="text/javascript">
    var jsPostID = "{{$post->id ?? ''}}";

    /* Select2 Search With Dynamic Keyword */
    $("#searchAuthor").select2({
        placeholder: "Search for author",
        allowClear: true,
        ajax: {
            url: "{{getMURL('ajax/search-author')}}",
            dataType: 'json',
            delay: 250,
            //type:'POST',
            data: function(params) {
                return {
                    search: params.term,
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 50) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function(markup) {
            return markup;
        }, // let our custom formatter work
        minimumInputLength: 2,
        templateResult: formatRepo, // omitted for brevity, see the source of this page
        templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    }).on('select2:select', function(e) {
        var userData = e.params.data;
        if ($('#authorListDiv li.task').length <= 2) {
            if (jsPostID != '') {

                $.ajax({
                    url: "{{getMURL('ajax/add-post-author')}}",
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    data: {
                        'post_id': "{{$post->id ?? ''}}",
                        'author_id': userData.id
                    },
                    success: function(data) {
                        console.log(data.status);
                        if (data.status == 1) {
                            document.getElementById("authorListDiv").innerHTML +=
                                '<li class="task" id="authorLIID' + userData.id + '"><input type="hidden" name="author_position[]" value="' + userData.id + '"><div class="inner-task"><p>' + userData.full_name + '</p><div class="col-btn-wrapperr"><div class="column-button authorMoveableClass"><button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button></div><div class="column-button"><button type="button" class="button deleteAuthorXButton" @isset($post->id) onclick="deleteAuthorMember(' + userData.id + ', {{$post->id}})" @endisset>X</button></div></div></div></li>';
                        }
                    },
                    error: function(errorThrown) {}
                });
            } else {
                if ($('#authorListDiv #authorLIID' + userData.id).length == 0) {
                    document.getElementById("authorListDiv").innerHTML +=
                        '<li class="task" id="authorLIID' + userData.id + '"><input type="hidden" name="author_position[]" value="' + userData.id + '"><div class="inner-task"><p>' + userData.full_name + '</p><div class="col-btn-wrapperr"><div class="column-button authorMoveableClass"><button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button></div><div class="column-button"><button type="button" class="button deleteAuthorXButton" @isset($post->id) onclick="deleteAuthorMember(' + userData.id + ', {{$post->id}})" @endisset>X</button></div></div></div></li>';
                }
            }
        } else {
            showToastrError('Please remove some authors, you have already reached your limit.', 'Add Author');
        }

        checkMainSaveButton();
        $("#searchAuthor").empty().trigger('change')
    }).on('select2:clear', function(e) {
        console.log('Fire Clear Event');
    });

    function formatRepo(repo) {
        if (repo.loading) return repo.text;
        var reseachName = '';
        if (repo.research_name != undefined && repo.research_name != '') {
            reseachName = (repo.role == 'PI' ? '(PI) ' : '') + repo.research_name;
        }
        var memberNumber = '';
        if (repo.member_number != undefined && repo.member_number != '') {
            memberNumber = repo.member_number;
        }
        var markup = "<div class='select2-result-repository clearfix main-author-div'>" +
            "<div class='select2-result-repository__meta'>" +
            "<div class='author-title-div'>" + repo.full_name + "</div>" +
            "<div class='author-research-div'>" + reseachName + "</div>" +
            "<div class='author-member-number-div'>" + memberNumber + "</div>" +
            "</div></div>";
        return markup;
    }

    function formatRepoSelection(repo) {
        return repo.full_name || repo.text;
    }
    /* Select2 Search With Dynamic Keyword */

    /* Drag & Drop Dragula JS */
    dragula([
        document.getElementById("authorListDiv"),
    ]);
    /* Drag & Drop Dragula JS */

    /* Vanilla JS Add Task */
    function addKeyword() {
        var inputTask = $("#addNewKeywordText").val();
        if (inputTask != '') {
            document.getElementById("keywordListBox").innerHTML +=
                '<li class="task"><input type="hidden" name="keywords[]" value="' + inputTask + '"><div class="inner-task-wrap"><p>' + inputTask + '</p><div class="column-button"><button type="button" class="button deleteKeywordXButton">X</button></div></div></li>';
            checkMainSaveButton();
        }
        $("#addNewKeywordText").val("");
        addKeywordButton();
    }
    /* Vanilla JS Add Task */

    /* Keyboard/Mouse Events */
    $("#addNewKeywordText").keypress(function(event) {
        if (event.keyCode == 13) {
            var kt = $('#addNewKeywordText').val();
            if (kt.length >= 2) {
                addKeyword();
            }
            event.preventDefault();
            return;
        }
    });
    $("#addNewKeywordText").keyup(function(event) {
        addKeywordButton();
    });
    $(".addPIMemberFields").keyup(function() {
        addPIMemberButton();
    });
    $(".addAuthorFields").keyup(function() {
        addAuthorButton();
    });
    $("#title").keyup(function() {
        checkMainSaveButton();
    });
    $("#description").keyup(function() {
        checkMainSaveButton();
    });
    $(document).ready(function() {
        $('input:radio[name=pi_id]').change(function() {
            if (jsPostID == '') {
                var userId = $(this).val();
                console.log('call on change radio ...', userId);
                $('#authorListDiv .autoPI').remove();
                if ($('#authorLIID' + userId).length == 0) {
                    var userName = $(this).data('name');
                    document.getElementById("authorListDiv").innerHTML +=
                        '<li class="task autoPI" id="authorLIID' + userId + '"><input type="hidden" name="author_position[]" value="' + userId + '"><div class="inner-task"><p>' + userName + '</p><div class="col-btn-wrapperr"><div class="column-button authorMoveableClass"><button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button></div><div class="column-button"><button type="button" class="button deleteAuthorXButton">X</button></div></div></div></li>';
                }
            }
            checkMainSaveButton();
        });
    });
    $(document).on('click', '#simpleModalOKButton', function() {
        $('#author_first_name,#author_middle_name,#author_last_name,#author_email').val('');
    });
    $(function() {
        $(document).on('click', '.deleteAuthorXButton', function() {
            console.log('Call deleteAuthorXButton');
            checkMainSaveButton();
            $(this).closest("li.task").remove();
        });
        $(document).on('click', '.deleteKeywordXButton', function() {
            console.log('Call deleteKeywordXButton');
            checkMainSaveButton();
            $(this).closest("li.task").remove();
        });
    });
    /* Keyboard/Mouse Events */

    /* Button Enable/Disable Button Event */
    function addKeywordButton() {
        var kt = $('#addNewKeywordText').val();

        if (kt.length >= 2) {
            $("#addKeywordButton").removeClass('disabled');
            $("#addKeywordButton").prop('disabled', false);
        } else {
            $("#addKeywordButton").addClass('disabled');
            $("#addKeywordButton").prop('disabled', true);
        }
    }

    function addPIMemberButton() {
        var pifn = $('#pi_first_name').val();
        var piln = $('#pi_last_name').val();
        var pie = $('#pi_email').val();
        var pirn = $('#pi_research_name').val();

        if (pifn.length >= 2 && piln.length >= 2 && isEmailChecker(pie) && pirn.length >= 2) {
            $("#addPIMemberButton").removeClass('disabled');
            $("#addPIMemberButton").prop('disabled', false);
        } else {
            $("#addPIMemberButton").addClass('disabled');
            $("#addPIMemberButton").prop('disabled', true);
        }
    }

    function addAuthorButton() {
        var afn = $('#author_first_name').val();
        var aln = $('#author_last_name').val();
        var ae = $('#author_email').val();
        var checkValidation = afn.length >= 2 && aln.length >= 2 && isEmailChecker(ae);
        //console.log('Call : ' + checkValidation);
        if (checkValidation) {
            $("#addAuthorButton").removeClass('disabled');
            $("#addAuthorButton").prop('disabled', false);
        } else {
            $("#addAuthorButton").addClass('disabled');
            $("#addAuthorButton").prop('disabled', true);
        }
    }

    $(document).on('click', '#addNewPIMemberButton', function() {
        $('#addNewPIMemberButtonDiv').hide();
        $('#addPrincipalInvestigator').show();
    });
    $(document).on('click', '#cancelPIMemberButton', function() {
        $('#addNewPIMemberButtonDiv').show();
        $('#addPrincipalInvestigator').hide();
    });

    function checkMainSaveButton() {

        if (jsPostID == '') {
            var title = $('#title').val();
            var description = $('#description').val();
            var pi = $("input[name='pi_id']:checked").val();
            var author = $("input[name='author_position[]']").length;
            var keyword = $("input[name='keywords[]']").length;

            $(".formSubmitButton").addClass("disabled");
            $(".formSubmitButton").prop("disabled", true);

            if (title.length >= 2 && pi != undefined && pi != '' && description != undefined && description != '' && author >= 1 && keyword >= 1) {
                $(".formSubmitButton").removeClass("disabled");
                $(".formSubmitButton").removeAttr("disabled");
                return false;
            };
        }
    }
    /* Button Enable/Disable Button Event */



    /* Event AJAX Call */
    function deleteAuthorMember(id, postId) {
        $.ajax({
            url: "{{getMURL('ajax/delete-author-member')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'author_id': id,
                'post_id': postId
            },
            success: function(data) {
                if (data.status == 1) {
                    $("#authorLIID" + id).remove();
                    checkMainSaveButton();
                }
            },
            error: function(errorThrown) {
                //
            }
        });
    }

    function deleteKeywordItem(id) {
        $.ajax({
            url: "{{getMURL('ajax/delete-post-keyword')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': id,
            },
            success: function(data) {
                if (data.status == 1) {
                    $("#keywordListBox" + id).remove();
                    checkMainSaveButton();
                }
            },
            error: function(errorThrown) {
                //
            }
        });
    }
    $(document).on('click', '#addPIMemberButton', function() {
        $.ajax({
            url: "{{getMURL('ajax/add-pi-member')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'pi_first_name': $('#pi_first_name').val(),
                'pi_middle_name': $('#pi_middle_name').val(),
                'pi_last_name': $('#pi_last_name').val(),
                'pi_email': $('#pi_email').val(),
                'pi_research_name': $('#pi_research_name').val()
            },
            success: function(data) {
                if (data.status == 1) {
                    data = data.data;
                    document.getElementById("PIListDiv").innerHTML +=
                        '<div class="custom-radio-btn-wrap"><label class="container">' + data.name + ' ' + ((data.middle_name != undefined && data.middle_name != null) ? (data.middle_name + ' ') : '') + data.last_name + '<input type="radio" name="pi_id" id="pi_id" value="' + data.id + '"><span class="checkmark"></span></label></div>';

                    $('#pi_first_name,#pi_middle_name,#pi_last_name,#pi_email,#pi_research_name').val('');
                    addPIMemberButton();

                    //window.location.href = "{{getMURL('post/title-author')}}";
                }
            },
            error: function(errorThrown) {

            }
        });
    });


    var baseProfileURL = "{{getURL('public/storage/')}}";
    $(document).on('click', '#CancelAuthorFoundButton', function() {
        $('.profileImage').attr('src', '');
        $('.userFullName,.userInstitute,.userEmail,.userMobile').html('');
        $('#FoundUserFullName,#FoundUserId').val('');
        $('#author_first_name,#author_middle_name,#author_last_name,#author_email').val('');
        $('#AuthorFoundClass').hide();
    });
    $(document).on('click', '#AddAuthorFoundButton', function() {
        document.getElementById("authorListDiv").innerHTML +=
            '<li class="task" id="authorLIID' + $('#FoundUserId').val() + '"><input type="hidden" name="author_position[]" value="' + $('#FoundUserId').val() + '"><div class="inner-task"><p>' + $('#FoundUserFullName').val() + '</p><div class="col-btn-wrapperr"><div class="column-button authorMoveableClass"><button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button></div><div class="column-button"><button type="button" class="button deleteAuthorXButton" @isset($post->id) onclick="deleteAuthorMember(' + $('#FoundUserId').val() + ', {{$post->id}})" @endisset>X</button></div></div></div></li>';

        $('.profileImage').attr('src', '');
        $('.userFullName,.userInstitute,.userEmail,.userMobile').html('');
        $('#FoundUserFullName,#FoundUserId').val('');
        $('#author_first_name,#author_middle_name,#author_last_name,#author_email').val('');
        $('#AuthorFoundClass').hide();
    });
    $(document).on('click', '#addAuthorButton', function() {
        if (($('#authorListDiv li.task').length) <= 2) {
            $.ajax({
                url: "{{getMURL('ajax/add-author-member')}}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                data: {
                    'author_first_name': $('#author_first_name').val(),
                    'author_middle_name': $('#author_middle_name').val(),
                    'author_last_name': $('#author_last_name').val(),
                    'author_email': $('#author_email').val(),
                },
                success: function(data) {
                    userData = data.data;
                    if (data.status == 2) {
                        //'<li class="task"><div class="inner-task"><p>' + data.name + ' ' + data.last_name + '</p><div class="col-btn-wrapperr"><div class="column-button authorMoveableClass"><button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button></div><div class="column-button"><button type="button" class="button deleteAuthorXButton" onclick="emptyTrash()">X</button></div></div></div></li>';
                        //$('#author_first_name,#author_last_name,#author_email').val('');

                        var imageURL = ((userData.image != null && userData.image != '') ? (baseProfileURL + userData.image) : ("{{asset('assets/media/extra/neutron-star.png')}}"));
                        $('.profileImage').attr('src', imageURL);
                        $('.userFullName').html(userData.full_name);
                        $('.userInstitute').html(userData.research_name);
                        $('.userEmail').html(userData.email);
                        $('.userMobile').html(userData.phone);
                        $('#FoundUserFullName').val(userData.full_name);
                        $('#FoundUserId').val(userData.id);
                        $('#AuthorFoundClass').show();
                        //showSimpleModalAlert('Possible Author Match Found', data.message, 'Accept', 'Cancel', userData);
                    }
                    if (data.status == 3) {
                        document.getElementById("authorListDiv").innerHTML +=
                            '<li class="task" id="authorLIID' + userData.id + '"><input type="hidden" name="author_position[]" value="' + userData.id + '"><div class="inner-task"><p>' + userData.name + ' ' + userData.last_name + '</p><div class="col-btn-wrapperr"><div class="column-button authorMoveableClass"><button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button></div><div class="column-button"><button type="button" class="button deleteAuthorXButton" @isset($post->id) onclick="deleteAuthorMember(' + userData.id + ', {{$post->id}})" @endisset>X</button></div></div></div></li>';
                    }

                    if (jQuery.inArray(data.status, [1, 3]) !== -1) {
                        $('#author_first_name,#author_middle_name,#author_last_name,#author_email').val('');
                    }
                    addAuthorButton();
                },
                error: function(errorThrown) {

                }
            });
        } else {
            showToastrError('Please remove some authors, you have already reached your limit.', 'Add Author');
        }

    });
    /* Event AJAX Call */

    /* DropZone Manage */
    Dropzone.autoDiscover = false;

    var uploadDropzone = "{{getMURL('ajax/upload-documents')}}";
    var baseURL = "{{getURL('')}}";
    new Dropzone('#uploadPostThumbnail', {
        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) {

                }),
                this.on('success', function(file, resp) {
                    file.previewElement.querySelector('[data-dz-name]').innerHTML = resp.image;
                    document.getElementById("imageSection").innerHTML += '<input type="hidden" name="images[]" value="' + resp.image + '">';
                }),
                this.on('error', function(file, response) {
                    $(file.previewElement).find('.dz-error-message').text(response.messageError);
                }),
                this.on('removedfile', function(file) {
                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                        url: "{{getMURL('ajax/delete-documents')}}",
                        data: {
                            file: file.name
                        },
                        sucess: function(data) {
                            console.log('success: ' + data);
                        }
                    });
                    console.log(file);
                });
        }
    });

    @if(isset($imageList) && count($imageList) > 0)
    @foreach($imageList as $image)
    var imageName = "{{$image->name}}";
    var croppedImageData = baseURL + "public/storage/" + imageName;
    var mockFile = {
        name: imageName,
        size: 12345
    };;
    Dropzone.forElement('#uploadPostThumbnail').emit("addedfile", mockFile);
    Dropzone.forElement('#uploadPostThumbnail').emit("thumbnail", mockFile, croppedImageData);
    Dropzone.forElement('#uploadPostThumbnail').emit("complete", mockFile);
    Dropzone.forElement('#uploadPostThumbnail').files.push(mockFile);
    @endforeach
    @endif
    /* DropZone Manage */

    function showSimpleModalAlert(title, description, confirm_btn = '', cancel_btn = 'Cancel', userData = null) {
        $('#simpleModalTitle').html(title);
        $('#simpleModalDescription').html(description);
        if (userData != null) {
            $('.simpleModalExtraDiv').show();
            $('.simpleModalExtraDescription').html(userData.full_name + '<br/>' + userData.email);
        }
        $('#simpleModalOKButton').html(confirm_btn);
        $('#simpleModalCancelButton').html(cancel_btn);
        $("#simpleModalShowButton").trigger("click");
    }

    function isEmailChecker(email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    $(document).ready(function() {
        $('#LegalOtherCheckbox').change(function() {
            if (this.checked) {
                $('#LegalOtherDiv').hide();
                $('#LegalOtherText').show();
                return;
            }
            $('#LegalOtherDiv').show();
            $('#LegalOtherText').hide();

        });
    });
    //LegalOtherLabel
    /** On Page Load Functions */
    addPIMemberButton();
    addAuthorButton();
    addKeywordButton();
    checkMainSaveButton();
    /** On Page Load Functions */

    $(document).on('keyup', '.countTextarea', function() {
        var fieldId = $(this).attr('id');
        var textMaxLength = $(this).attr('maxlength');
        if (fieldId == 'description') {
            checkRemainingCharacters($(this), textMaxLength);
        }
    });

    function checkRemainingCharacters($mainTA, textMaxLength) {
        var textareaCharacters = $mainTA.val().length;
        var remainingCharacters = textMaxLength - textareaCharacters;
        $mainTA.parent('.RemainingCharacters').find('.countCharacters').html(remainingCharacters);
    }
</script>
@endpush