@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" />
@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
                            @isset($post->id)
                            <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">
                                                    Create Data Post [Title and Authors]
                                                </h2>
                                            </div>
                                            <label class="d-block text-right mb-5">* Required fields</label>

                                            <label class="d-block mt-4 mb-3">Post Title*</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="post-sub-content-wrapper">
                                                    <div class="form-group">
                                                        <label class="mb-2">Enter a post title.</label> 
                                                        <input type="text" class="form-control" name="title" id="title" placeholder="Required" value="{{(isset($post->id)) ? $post->title : old('title')}}">
                                                    </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="cusotm-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' : ''}}>
                                                                                    <span class="checkmark"></span>
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <div class="cusotm-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>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                        </div>
                                                                    @endif
                                                                @endif
                                                            @else
                                                                
                                                                @if(count($piList) != 0)
                                                                    @if(count($piList) > 1)
                                                                        @foreach($piList as $pi)
                                                                            <div class="cusotm-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}}">
                                                                                    <span class="checkmark"></span>
                                                                                </label>
                                                                            </div>
                                                                        @endforeach
                                                                    @else
                                                                        <div class="cusotm-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>
                                                                                <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>
                                                    <div class="pragraph-p">
                                                        <p>Or:</p>
                                                        <p>Enter author using the fields below:</p>
                                                    </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>
                                                    </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

                                                                </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="main-box-white">
                                                        <div class="pragraph-p">
                                                            <p>Will sharing these data/samples require any of the following?</p>
                                                        </div>
                                                        
                                                        @foreach($legalList as $legal)
                                                        <div class="custom-checkbox">
                                                            <label class="container">{{$legal->name}}
                                                                <input type="checkbox" name="legal[]" value="{{$legal->id}}" {{(isset($legalSelectedList) && in_array($legal->id, $legalSelectedList)) ? 'checked' : ''}}>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        @endforeach
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Thumbnail</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="thumbnail-wrapper">
                                                    <div class="pragraph-p">
                                                        <p>Upload an image that will appear on your post.</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">
                                                                        <!--<i class="flaticon-upload-1" style="font-size: 72px"></i>-->
                                                                        <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-4">
                                                        <div class="btn-wrap">
                                                            <button type="submit" title="Save" class="primary-btn formSubmitButton" id="formSubmitButton">Save</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>




@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">
    
/* Select2 Search With Dynamic Keyword */
$("#searchAuthor").select2({
    placeholder: "Search for author",
    allowClear: true,
    ajax: {
        url: "{{getMURL('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(isset($post->id))
    
        $.ajax({
            url: "{{getMURL('add-post-author')}}",
            method: "POST",
            headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'},
            data: {
                'post_id': "{{$post->id}}",
                'author_id': userData.id
            },
            success: function (data) {
                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>';
                
                    checkMainSaveButton();
                }
            },
            error: function (errorThrown) {

            }
        });
    @else
    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>';
    @endif
}).on('select2:clear', function (e) {
    console.log('Fire Clear Event');
});

function formatRepo(repo) {
    if (repo.loading) return repo.text;
    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'>" + (repo.role == 'PI' ? '(PI) ' : '') + repo.research_name + "</div>" +
        "<div class='author-member-number-div'>" + repo.member_number + "</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").keyup(function() {
    addKeywordButton();
});
$(".addPIMemberFields").keyup(function() {
    addPIMemberButton();
});
$(".addAuthorFields").keyup(function() {
    addAuthorButton();
});
$("#title").keyup(function() {
    checkMainSaveButton();
});
$(document).ready(function() {
    $('input:radio[name=pi_id]').change(function() {
        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() {
    var title = $('#title').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 != '' && 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('post/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('post/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('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="cusotm-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) {

        }
    });
});

$(document).on('click', '#addAuthorButton', function() {
    $.ajax({
        url: "{{getMURL('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) {
            if(data.status == 2) {
                userData = data.data;
                /*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>';*/
                    //'<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>';
                    
                showSimpleModalAlert('Possible Author Match Found', data.message, 'Accept', 'Cancel', userData);
                //$('#author_first_name,#author_last_name,#author_email').val('');
            }
            
            if(jQuery.inArray(data.status, [1, 3]) !== -1) {
                $('#author_first_name,#author_middle_name,#author_last_name,#author_email').val('');
            }
            addAuthorButton();
        },
        error: function (errorThrown) {

        }
    });
});
/* Event AJAX Call */

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

var uploadDropzone = "{{getMURL('post/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('post/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 croppedImageData = baseURL + "public/storage/" + "{{$image->name}}";
        var mockFile = {name: croppedImageData, 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.name + ' ' + ((userData.middle_name != '' && userData.last_name != null) ? (userData.last_name + ' ') : '') + userData.last_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);
}

/** On Page Load Functions */
addPIMemberButton();
addAuthorButton();
addKeywordButton();
checkMainSaveButton();
/** On Page Load Functions */
</script>
@endpush