@extends('layouts.member-login')
@section('title','Vectors & Plasmids')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/general/select2/dist/css/select2.css')}}" rel="stylesheet" type="text/css" />
<style>
    .without-name {
        background: #f7b2b2 !important;
    }

    .without-name td {
        color: #d60808 !important;
    }
</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/vectors')}}" method="POST" id="formVectorsPlasmids">
                            @csrf
                            @isset($post->id)
                            <input type="hidden" name="id" value="{{$post->id}}">
                            @endisset

                            @php $magicBoxLength = 25 @endphp
                            <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-4">
                                                <h2 class="secondary-title text-capitalize text-white mb-0">{{$postTopbarTitle ?? 'Create Data Post [Vectors & Plasmids]'}}</h2>
                                            </div>

                                            @include('member.include.post-title-topbar')
                                            <div class="row mt-4 mb-5">
                                                <label class="col-lg-9 d-block">Click on the blue arrows and fill out the required information in each section below.</label>
                                                <label class="col-lg-3 d-block text-right">*Required fields</label>
                                            </div>

                                            <div class="title">
                                                <label class="d-block mb-2 collapsed" id="GeneralInformationCollapsed" data-toggle="collapse" data-target="#GeneralInformation"><i class="fa mr-2"></i>
                                                    I. General Information
                                                </label>
                                            </div>
                                            <div class="collapse collapse-box ml-5 mr-5" id="GeneralInformation">
                                                <div class="post-sub-content-wrapper">
                                                    <div class="col-lg-12">
                                                        <div class="p-0">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-2">
                                                                    <label class="d-block mb-3">If your materials are deposited on Addgene or another resource sharing site, please include the link here:</label>
                                                                    <input class="form-control col-md-12 ml-3" type="text" name="materials_deposited" id="materials_deposited" value="{{$otherVectors->materials_deposited ?? ''}}" placeholder="Optional">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-12">
                                                        <div class="p-0">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-2">
                                                                    <label class="d-block mb-3">What would you like in exchange for sharing your material?*</label>
                                                                    <div class="mb-4 ml-3">
                                                                        <div class="custom-radio-btn-wrap">
                                                                            <label class="container not-bold">{{config("const.vectors_sharing_material.ResultingPublication")}}
                                                                                <input type="radio" name="sharing_materials" value="ResultingPublication" {{(isset($otherVectors->sharing_materials) && $otherVectors->sharing_materials == "ResultingPublication") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                        </div>
                                                                        <div class="custom-radio-btn-wrap">
                                                                            <label class="container not-bold">{{config("const.vectors_sharing_material.Acknowledged")}}
                                                                                <input type="radio" name="sharing_materials" value="Acknowledged" {{(isset($otherVectors->sharing_materials) && $otherVectors->sharing_materials == "Acknowledged") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                        </div>
                                                                        <div class="custom-radio-btn-wrap">
                                                                            <label class="container not-bold">{{config("const.vectors_sharing_material.MyMaterials")}}
                                                                                <input type="radio" name="sharing_materials" value="MyMaterials" {{(isset($otherVectors->sharing_materials) && $otherVectors->sharing_materials == "MyMaterials") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-12">
                                                        <div class="p-0">
                                                            <!-- <label class="d-block mb-3">Characterization</label> -->
                                                            <div class="mb-5">
                                                                <div class="post-sub-content-wrapper">
                                                                    <label>How would you categorize your vector? Check at least one keyword.*</label>
                                                                    <div class="ml-3">
                                                                        <ul class="check-list-row extraInputbox">

                                                                            @foreach($characterizations as $kOne => $eOne)
                                                                            @if (count($eOne->sub) > 0)
                                                                            <li>
                                                                                <label class="container">{{$eOne->name}}
                                                                                    @if($eOne->is_box == 'Yes')<input type="checkbox" name="characterizations[]" value="{{$eOne->id}}" {{(isset($selectCharacterizations) && in_array($eOne->id, $selectCharacterizations)) ? 'checked' : ''}}><span class="checkmark"></span>@endif
                                                                                    @if(!empty($eOne->description))<button type="button" class="tool-hover" data-container="body" data-toggle="popover" data-placement="right" data-content="{{$eOne->description}}" data-trigger="hover"><span class="information-i">i</span></button>@endif
                                                                                </label>
                                                                                @if($eOne->is_other == 'Yes')<div class="others-input makeMeTextarea" id="magicBoxId{{$eOne->id}}"><textarea data-id="{{$eOne->id}}" name="characterizations[{{$eOne->id}}][other]" class="{{(isset($selectCharacterizations['other'][$eOne->id]) && strlen($selectCharacterizations['other'][$eOne->id]) > $magicBoxLength ) ? 'big-textarea' : 'small-textarea'}}">{{$selectCharacterizations['other'][$eOne->id] ?? ''}}</textarea></div>@endif
                                                                            </li>

                                                                            <div class="level-check-wrap">
                                                                                @foreach ($eOne->sub as $oTwo => $eTwo)
                                                                                @if (count($eTwo->sub) > 0)
                                                                                <li>
                                                                                    <label class="container">{{$eTwo->name}}
                                                                                        @if($eTwo->is_box == 'Yes')<input type="checkbox" name="characterizations[]" value="{{$eTwo->id}}" {{(isset($selectCharacterizations) && in_array($eTwo->id, $selectCharacterizations)) ? 'checked' : ''}}><span class="checkmark"></span>@endif
                                                                                        @if(!empty($eTwo->description))<button type="button" class="tool-hover" data-container="body" data-toggle="popover" data-placement="right" data-content="{{$eTwo->description}}" data-trigger="hover"><span class="information-i">i</span></button>@endif
                                                                                    </label>
                                                                                    @if($eTwo->is_other == 'Yes')<div class="others-input makeMeTextarea" id="magicBoxId{{$eTwo->id}}"><textarea data-id="{{$eTwo->id}}" name="characterizations[{{$eTwo->id}}][other]" class="{{(isset($selectCharacterizations['other'][$eTwo->id]) && strlen($selectCharacterizations['other'][$eTwo->id]) > $magicBoxLength ) ? 'big-textarea' : 'small-textarea'}}">{{$selectCharacterizations['other'][$eTwo->id] ?? ''}}</textarea></div>@endif
                                                                                </li>
                                                                                <div class="level-check-wrap">
                                                                                    @foreach ($eTwo->sub as $oThree => $eThree)
                                                                                    <li>
                                                                                        <label class="container">{{$eThree->name}}
                                                                                            @if($eThree->is_box == 'Yes')<input type="checkbox" name="characterizations[]" value="{{$eThree->id}}" {{(isset($selectCharacterizations) && in_array($eThree->id, $selectCharacterizations)) ? 'checked' : ''}}><span class="checkmark"></span>@endif
                                                                                            @if(!empty($eThree->description))<button type="button" class="tool-hover" data-container="body" data-toggle="popover" data-placement="right" data-content="{{$eThree->description}}" data-trigger="hover"><span class="information-i">i</span></button>@endif
                                                                                        </label>
                                                                                        @if($eThree->is_other == 'Yes')<div class="others-input makeMeTextarea" id="magicBoxId{{$eThree->id}}"><textarea data-id="{{$eThree->id}}" name="characterizations[{{$eThree->id}}][other]" class="{{(isset($selectCharacterizations['other'][$eThree->id]) && strlen($selectCharacterizations['other'][$eThree->id]) > $magicBoxLength ) ? 'big-textarea' : 'small-textarea'}}">{{$selectCharacterizations['other'][$eThree->id] ?? ''}}</textarea></div>@endif
                                                                                    </li>
                                                                                    @endforeach
                                                                                </div>
                                                                                @else
                                                                                <li>
                                                                                    <label class="container">{{$eTwo->name}}
                                                                                        @if($eTwo->is_box == 'Yes')<input type="checkbox" name="characterizations[]" value="{{$eTwo->id}}" {{(isset($selectCharacterizations) && in_array($eTwo->id, $selectCharacterizations)) ? 'checked' : ''}}><span class="checkmark"></span>@endif
                                                                                        @if(!empty($eTwo->description))<button type="button" class="tool-hover" data-container="body" data-toggle="popover" data-placement="right" data-id="{{$eOne->id}}" data-content="{{$eTwo->description}}" data-trigger="hover"><span class="information-i">i</span></button>@endif
                                                                                    </label>
                                                                                    @if($eTwo->is_other == 'Yes')<div class="others-input makeMeTextarea" id="magicBoxId{{$eTwo->id}}"><textarea data-id="{{$eTwo->id}}" name="characterizations[{{$eTwo->id}}][other]" class="{{(isset($selectCharacterizations['other'][$eTwo->id]) && strlen($selectCharacterizations['other'][$eTwo->id]) > $magicBoxLength ) ? 'big-textarea' : 'small-textarea'}}">{{$selectCharacterizations['other'][$eTwo->id] ?? ''}}</textarea></div>@endif
                                                                                </li>
                                                                                @endif
                                                                                @endforeach
                                                                            </div>
                                                                            @else
                                                                            <li>
                                                                                <label class="container">{{$eOne->name}}
                                                                                    @if($eOne->is_box == 'Yes')<input type="checkbox" name="characterizations[]" value="{{$eOne->id}}" {{(isset($selectCharacterizations) && in_array($eOne->id, $selectCharacterizations)) ? 'checked' : ''}}><span class="checkmark"></span>@endif
                                                                                    @if(!empty($eOne->description))<button type="button" class="tool-hover" data-container="body" data-toggle="popover" data-placement="right" data-content="{{$eOne->description}}" data-trigger="hover"><span class="information-i">i</span></button>@endif
                                                                                </label>
                                                                                @if($eOne->is_other == 'Yes')<div class="others-input makeMeTextarea" id="magicBoxId{{$eOne->id}}"><textarea data-id="{{$eOne->id}}" name="characterizations[{{$eOne->id}}][other]" class="{{(isset($selectCharacterizations['other'][$eOne->id]) && strlen($selectCharacterizations['other'][$eOne->id]) > $magicBoxLength ) ? 'big-textarea' : 'small-textarea'}}">{{$selectCharacterizations['other'][$eOne->id] ?? ''}}</textarea></div>@endif
                                                                            </li>
                                                                            @endif
                                                                            @endforeach


                                                                            @foreach($userCharacterizations as $kOne => $eOne)
                                                                            <li>
                                                                                <label class="container">{{$eOne->name}}
                                                                                    @if($eOne->is_box == 'Yes')<input type="checkbox" name="characterizations[]" value="{{$eOne->id}}" {{(isset($selectCharacterizations) && in_array($eOne->id, $selectCharacterizations)) ? 'checked' : ''}}><span class="checkmark"></span>@endif
                                                                                </label>
                                                                                @if($eOne->is_other == 'Yes')<div class="others-input makeMeTextarea" id="magicBoxId{{$eOne->id}}"><textarea data-id="{{$eOne->id}}" name="characterizations[{{$eOne->id}}][other]" class="{{(isset($selectCharacterizations['other'][$eOne->id]) && strlen($selectCharacterizations['other'][$eOne->id]) > $magicBoxLength ) ? 'big-textarea' : 'small-textarea'}}">{{$selectCharacterizations['other'][$eOne->id] ?? ''}}</textarea></div>@endif
                                                                            </li>
                                                                            @endforeach

                                                                        </ul>
                                                                    </div>


                                                                    <label class="mt-5">Not on our list? Add it <span id="AddNewCustomVectorsButton">here</span></label>
                                                                    <div class="row ml-3" id="extraAddVectorsDiv" style="display:none;">
                                                                        <div class="col-md-6">
                                                                            <input class="form-control col-md-12" type="text" id="vectorNewText">
                                                                        </div>
                                                                        <div class="col-md-3">
                                                                            <button type="button" title="Cancel" id="VectorsCustomItemsCancelButton" class="primary-btn disabled text-center d-block mb-2">Cancel</button>
                                                                            <button type="button" title="Save" id="VectorsCustomItemsSaveButton" class="primary-btn text-center d-block">Save</button>
                                                                        </div>
                                                                        <div class="col-md-12 mt-3">
                                                                            <label class="labels mb-2">Keywords Added:</label>
                                                                            <div class="list-added col-12" id="displayTissueOrgansList">
                                                                                <ul id="listOfExtraVectorsAddedBox" class="delete-x-icon" style="min-height:100px">

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

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

                                                    <div class="modal-footer col-lg-12">
                                                        <button type="submit" title="Save" name="VectorsOtherItemsButton" value="VectorsOtherItems" id="VectorsOtherItemsButton" class="primary-btn text-center d-block">Save</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="title">
                                                <label class="d-block mb-2 collapsed" id="PlasmidsInformationCollapsed" data-toggle="collapse" data-target="#PlasmidsInformation"><i class="fa mr-2"></i>
                                                    II. Plasmids Information
                                                </label>
                                            </div>
                                            <div class="collapse collapse-box ml-5 mr-5" id="PlasmidsInformation">
                                                <div class="post-sub-content-wrapper">
                                                    <label class="d-block mb-3 not-bold">Below are a variety of fields often used to characterize vectors and plasmids, but not all may apply to your particular construct. <b>Only fields in bold are required.</b></label>
                                                    <div class="col-lg-12 mt-4">
                                                        <label class="d-block mb-3 title">Backbone</label>
                                                        <div class="pl-4">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Vector Backbone*</label>
                                                                    <input class="form-control col-md-12" type="text" name="vector_backbone" id="vector_backbone" value="{{$otherVectors->vector_backbone ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Backbone Size (bp)* </label>
                                                                    <input class="form-control col-md-12" type="text" name="backbone_size" id="backbone_size" value="{{$otherVectors->backbone_size ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Promoter*</label>
                                                                    <input class="form-control col-md-12" type="text" name="promoter" id="promoter" value="{{$otherVectors->promoter ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block not-bold">Gen Bank or Other Database ID</label>
                                                                    <input class="form-control col-md-12" type="text" name="backbone_gen_bank" id="backbone_gen_bank" value="{{$otherVectors->backbone_gen_bank ?? ''}}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12 mt-4">
                                                        <label class="d-block mb-3 title">Gene/Insert</label>
                                                        <div class="pl-4">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Gene/Insert Name* If no insert, write "None."</label>
                                                                    <input class="form-control col-md-12" type="text" name="gene_insert_name" id="gene_insert_name" value="{{$otherVectors->gene_insert_name ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block not-bold">Gen Bank or Other Database ID</label>
                                                                    <input class="form-control col-md-12" type="text" name="gene_gen_bank" id="gene_gen_bank" value="{{$otherVectors->gene_gen_bank ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block not-bold">Reporter</label>
                                                                    <input class="form-control col-md-12" type="text" name="reporter" id="reporter" value="{{$otherVectors->reporter ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block not-bold">Tag/Fusion Protein</label>
                                                                    <input class="form-control col-md-12" type="text" name="tag_fusion_protein" id="tag_fusion_protein" value="{{$otherVectors->tag_fusion_protein ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block not-bold">Selectable Markers</label>
                                                                    <input class="form-control col-md-12" type="text" name="selectable_markers" id="selectable_markers" value="{{$otherVectors->selectable_markers ?? ''}}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12 mt-4">
                                                        <label class="d-block mb-3 title">Growth in Bacteria</label>
                                                        <div class="pl-4">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Bacterial Resistance(s)*</label>
                                                                    <input class="form-control col-md-12" type="text" name="bacterial_resistance" id="bacterial_resistance" value="{{$otherVectors->bacterial_resistance ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Growth Temperature*</label>
                                                                    <input class="form-control col-md-12" type="text" name="growth_temperature" id="growth_temperature" value="{{$otherVectors->growth_temperature ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Growth Strain*</label>
                                                                    <input class="form-control col-md-12" type="text" name="growth_strain" id="growth_strain" value="{{$otherVectors->growth_strain ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Copy Number*</label>
                                                                    <input class="form-control col-md-12" type="text" name="copy_number" id="copy_number" value="{{$otherVectors->copy_number ?? ''}}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-12 mt-4">
                                                        <label class="d-block mb-3 title">Cloning Information</label>
                                                        <div class="pl-4">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block">Cloning Technique</label>
                                                                    <input class="form-control col-md-12" type="text" name="cloning_technique" id="cloning_technique" value="{{$otherVectors->cloning_technique ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block not-bold">Cloning Sites</label>
                                                                    <input class="form-control col-md-12" type="text" name="cloning_sites" id="cloning_sites" value="{{$otherVectors->cloning_sites ?? ''}}">
                                                                </div>
                                                                <div class="col-md-12 mb-3">
                                                                    <label class="d-block not-bold">Sequencing Primers / Sites</label>
                                                                    <input class="form-control col-md-12" type="text" name="sequencing_primers_sites" id="sequencing_primers_sites" value="{{$otherVectors->sequencing_primers_sites ?? ''}}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-12">
                                                        <div class="p-0">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-2">
                                                                    <label class="d-block mb-3">Sample Format</label>
                                                                    <div class="mb-4 ml-3">
                                                                        <label class="d-block mb-3">If you are sharing samples, what format?</label>
                                                                        <div class="custom-radio-btn-wrap vectors_sample_format">
                                                                            <label class="container not-bold">{{config("const.vectors_sample_format.AgarStab")}}
                                                                                <input type="radio" name="sample_format" value="AgarStab" {{(isset($otherVectors->sample_format) && $otherVectors->sample_format == "AgarStab") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                            <label class="container not-bold">{{config("const.vectors_sample_format.GlycerolStocks")}}
                                                                                <input type="radio" name="sample_format" value="GlycerolStocks" {{(isset($otherVectors->sample_format) && $otherVectors->sample_format == "GlycerolStocks") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                            <label class="container not-bold">{{config("const.vectors_sample_format.DNA")}}
                                                                                <input type="radio" name="sample_format" value="DNA" {{(isset($otherVectors->sample_format) && $otherVectors->sample_format == "DNA") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                            <label class="container not-bold">{{config("const.vectors_sample_format.Other")}}
                                                                                <input type="radio" name="sample_format" value="Other" {{(isset($otherVectors->sample_format) && $otherVectors->sample_format == "Other") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                                <input class="form-control col-md-8 ml-3" type="text" name="sample_format_other" id="sample_format_other" value="{{$otherVectors->sample_format_other ?? ''}}" style="display: inline;">
                                                                            </label>
                                                                            <label class="container not-bold">{{config("const.vectors_sample_format.NotApplicable")}}
                                                                                <input type="radio" name="sample_format" value="NotApplicable" {{(isset($otherVectors->sample_format) && $otherVectors->sample_format == "NotApplicable") ? 'checked' : ''}}>
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                        </div>

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

                                                    <div class="modal-footer col-lg-12">
                                                        <button type="submit" title="Save" name="VectorsOtherItemsButton" value="VectorsOtherItems" id="VectorsOtherItemsButton" class="primary-btn text-center d-block">Save</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="title">
                                                <label class="d-block mb-2 collapsed" id="VectorsMapCollapsed" data-toggle="collapse" data-target="#VectorsMap"><i class="fa mr-2"></i>
                                                    III. Map
                                                </label>
                                            </div>
                                            <div class="collapse collapse-box ml-5 mr-5" id="VectorsMap">
                                                <div class="post-sub-content-wrapper">
                                                    <label class="d-block mb-3">Upload a map of your vector. Image files only (PDF, JPEG, PNG, TIFF, BMP, SVG, AI)</label>
                                                    <div class="mb-5">
                                                        <div class="thumbnail-wrapper">
                                                            <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="modal-footer col-lg-12">
                                                        <button type="submit" title="Save" name="VectorsOtherItemsButton" value="VectorsOtherItems" id="VectorsOtherItemsButton" class="primary-btn text-center d-block">Save</button>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="title">
                                                <label class="d-block mb-2 collapsed" id="AdditionalResourcesCollapsed" data-toggle="collapse" data-target="#AdditionalResources"><i class="fa mr-2"></i>
                                                    IV. Additional Resources (Optional)
                                                </label>
                                            </div>
                                            <div class="collapse collapse-box ml-5 mr-5" id="AdditionalResources">
                                                <div class="post-sub-content-wrapper">

                                                    <div class="post-left-wrap mb-5">
                                                        <div class="thumbnail-wrapper">
                                                            <div class="pragraph-p">
                                                                <label class="mb-2">File Upload</label>
                                                            </div>
                                                            <div class="main-box-white">
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <div class="dropzone dropzone-default dropzone-success" id="uploadPostMethodFile">
                                                                            <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="share-table pt-5" id="methodFileList">
                                                                <div class="h-table">
                                                                    <div class="table-responsive">
                                                                        <table class="table table-striped mb-0">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th scope="col">Uploaded Files</th>
                                                                                    <th scope="col"></th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @php
                                                                                $DocCount=0;
                                                                                @endphp
                                                                                @foreach ($vectorsAdditionalResources as $key=>$val )
                                                                                @php
                                                                                $DocCount=($key+1);
                                                                                @endphp
                                                                                <tr id="documentList_{{$DocCount}}">
                                                                                    <td scope="row" style="vertical-align: middle;"><a href="{{url('storage/'.$val->name)}}" target="_black" class="underline-text d-block p-0">{{$val->original_name}}</a></td>
                                                                                    <td class="text-center" style="vertical-align: middle;">
                                                                                        <input type='hidden' id='file_name_{{$DocCount}}' value='{{$val->name}}'>
                                                                                        <a href="javascript:void(0)" class="d-block removeFile" data-id="{{$DocCount}}" data-original_id="{{$val->id}}"><span class="close-i">X</span></a>
                                                                                    </td>
                                                                                </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="modal-footer col-lg-12">
                                                        <button type="submit" title="Save" name="VectorsOtherItemsButton" value="VectorsOtherItems" id="VectorsOtherItemsButton" class="primary-btn text-center d-block">Save</button>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="bottom-btn-wrapper">
                                            <div class="row">
                                                <div class="col-lg-4 col-12 text-center">
                                                    <div class="btn-wrap">
                                                        <a href="{{getMURL('post/title-author/' . $post->id)}}" title="Back" class="primary-btn formBackButton"><span class="left-arrow"><i class="fa fa-arrow-left"></i></span>Back</a>
                                                    </div>
                                                </div>
                                                <!-- <div class="col-lg-4 col-12 text-center">
                                                    <div class="btn-wrap">
                                                        <button type="submit" title="Save" class="primary-btn formSubmitButton" id="formSubmitButton">Save</button>
                                                    </div>
                                                </div> -->
                                                <div class="col-lg-4 col-12 text-center offset-4">
                                                    <div class="btn-wrap">
                                                        <!-- <input type="hidden" name="formNextButtonHidden" id="formNextButtonHidden" value="NextSave"> -->
                                                        <button type="submit" title="Next" value="NextSave" class="primary-btn formNextButton" id="formNextButton">
                                                            Next <span class="right-arrow"><i class="fa fa-arrow-right"></i></span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>
<!-- Modal-->
<div class="add-gene-list-modal">
    <div class="modal fade" id="addGeneListModal" tabindex="-1" role="dialog" aria-labelledby="closeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-white text-capitalize text-left">Add Gene List</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p>
                        In the text field below, enter as many gene names as needed for your list.
                        After you enter each name, or if you are adding a text list, make sure you used the carriage to separate the names of each gene.
                        This field does not recognize comma's or semicolon's as name separators.
                    </p>
                    <div class="row align-items-center">
                        <div class="col-lg-12">
                            <div class="kt-input-icon kt-input-icon--left">
                                <textarea class="form-control" placeholder="Add Gene Name List" id="geneListTextArea" rows="10"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn text-center" id="AddGeneListItems">Add Gene List</button>
                    <button type="button" class="primary-btn" data-dismiss="modal" id="AddGeneListCloseButton">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="delet-modal">
    <div class="modal fade" id="GeneTableItemDeleteModal" role="dialog" aria-labelledby="GeneTableItemDeleteModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-white text-capitalize text-left" id="GeneModalTitle">Delete Item</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p>Once you delete this item, it cannot be recovered. If you clicked this button by accident, cancel this deletion. Ifyou want to continue with the deletion, click the delete button.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn" id="GeneTableItemModalConfirmButton" data-dismiss="modal">Delete Gene Item</button>
                    <button type="button" class="primary-btn" id="GeneTableItemModalCancelButton" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="delet-modal">
    <div class="modal fade" id="GeneSingleItemDeleteModal" role="dialog" aria-labelledby="closeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-white text-capitalize text-left" id="GeneModalTitle">Delete Item</h5>
                    <button type="button" class="close showAgainGeneListModal" aria-label="Close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p>Once you delete this item, it cannot be recovered. If you clicked this button by accident, cancel this deletion. Ifyou want to continue with the deletion, click the delete button.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn showAgainGeneListModal" id="GeneModalConfirmButton">Delete Gene Item</button>
                    <button type="button" class="primary-btn showAgainGeneListModal" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="delet-modal">
    <div class="modal fade" id="GeneListDeleteModal" role="dialog" aria-labelledby="closeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-white text-capitalize text-left">Delete Gene List</h5>
                    <button type="button" class="close showAgainGeneListModal" aria-label="Close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p>Once you delete this item, it cannot be recovered. If you clicked this button by accident, cancel this deletion. Ifyou want to continue with the deletion, click the delete button.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn" id="GeneListModalConfirmButton" data-dismiss="modal">Delete Gene List</button>
                    <button type="button" class="primary-btn showAgainGeneListModal" id="GeneListModalCancelButton" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="view-videoModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body p-0 m-0">
                <div class="frame-wrapper">
                    <iframe id="iframe" width="100%" height="100%" src="https://www.youtube.com/embed/SUSSl5vO27k?version=3&enablejsapi=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </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-center">
                    <p id="simpleModalDescription">
                    </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>
            </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>

<div class="modal fade" id="showSeeExample" tabindex="-1" role="dialog" aria-labelledby="showSeeExample" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title">Biological Origin Sample Table</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 p-0 m-0">
                <div class="h-table">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Biological Origin</th>
                                    <th>Preservation (if applicable)</th>
                                    <th>Subcellular Fraction (if applicable)</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Plasma, EDTA</td>
                                    <td>Frozen -80c</td>
                                    <td>Extracelluar vesicles, RNA</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Blood, leukocytes</td>
                                    <td>Frozen, buffer;RIPA</td>
                                    <td>Protein</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Tissue, breast, cancer</td>
                                    <td>Fixed and paraffin embedded; mounted on slides</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Biometric data, medical records, interview</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="primary-btn" data-dismiss="modal">Close</button>
                <button type="button" class="primary-btn" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showGeneListData" tabindex="-1" role="dialog" aria-labelledby="showGeneListData" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title">Gene List</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 p-0 m-0">
                <div class="h-table">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Input</th>
                                    <th>Name</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody id="GeneListData"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="primary-btn" data-toggle="modal" data-dismiss="modal" data-target="#GeneListDeleteModal" id="DeleteGeneListData" data-sequence="">Delete Gene List</button>
                <button type="button" class="primary-btn" data-dismiss="modal" id="showGeneListDataCloseButton">Accept & Close</button>
            </div>
        </div>
    </div>
</div>
<button id="showGeneListDataButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#showGeneListData" style="display: none;"></button>



@endsection

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

@push('footerscript')
<script type="text/javascript">
    var lastViewSequenceId = "";
    $(document).on('click', '#deleteGeneListButton', function() {
        var GeneSequence = $(this).attr('data-sequence');
        $.ajax({
            url: "{{getMURL('ajax/delete-gene-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'sequence': GeneSequence,
                'type': 'List'
            },
            success: function(data) {
                if (data.status == 1) {
                    //
                }
            },
            error: function(errorThrown) {

            }
        });
    });

    /* Custom Dragula JS */
    $("#searchGeneList").select2({
        placeholder: "Search for gene list",
        allowClear: true,
        ajax: {
            url: "{{getMURL('ajax/search-gene-list')}}",
            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 geneData = e.params.data;
        console.log('Selected');

        $.ajax({
            url: "{{getMURL('ajax/add-gene-single-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'item_id': geneData.id
            },
            success: function(data) {
                if (data.status == 1) {
                    document.getElementById("GeneListTableFormatData").innerHTML +=
                        '<tr class="GeneListBox' + data.data.id + '"><td scope="row">' + geneData.symbol + '</td><td>' + geneData.name + '</td><td class="text-center"><button type="button" class="d-block table-close-btn deleteGeneTableItem" data-id="' + data.data.id + '" data-type="Table" data-toggle="modal" data-target="#GeneTableItemDeleteModal"><i class="fas fa-times-circle fa-2x"></i></button></td></tr>';
                }
            },
            error: function(errorThrown) {

            }
        });
        $("#searchGeneList").empty().trigger('change')
        console.log(geneData);
    }).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-gene-div'>" +
            "<div class='select2-result-repository__meta'>" +
            "<div class='gene-title-div'>" + repo.symbol + (repo.name ? (" ; " + repo.name) : "") + "</div>" +
            "</div></div>";
        return markup;
    }

    function formatRepoSelection(repo) {
        return repo.symbol || repo.text;
    }
    $(document).on('click', '#AddGeneListItems', function() {
        console.log("asdada");
        $("#AddGeneListItems").addClass('disabled');
        $("#AddGeneListItems").prop('disabled', true);


        //#AddGeneListItems
        $.ajax({
            url: "{{getMURL('ajax/add-gene-list')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'items': $('#geneListTextArea').val()
            },
            success: function(data) {
                $("#AddGeneListCloseButton").trigger("click");
                if (data.status == 1) {
                    var sequence = data.sequence;
                    data = data.data;
                    var html = '';
                    var mainHtml = '';
                    $.each(data, function(key, singleItem) {
                        var nameClass = '';
                        if (singleItem.gene.name == '' || singleItem.gene.name == null) {
                            nameClass = 'without-name';
                            singleItem.gene.name = 'NULL';
                        }
                        html += '<tr class="' + nameClass + ' GeneListBox' + singleItem.id + ' sequence' + singleItem.sequence + '"><td>' + singleItem.gene.symbol + '</td><td>' + singleItem.gene.name + '</td><td><button type="button" class="d-block table-close-btn deleteGeneListSingleItem" data-id="' + singleItem.id + '" data-toggle="modal" data-target="#GeneSingleItemDeleteModal"><i class="fas fa-times-circle fa-2x"></i></button></td></tr>';
                        mainHtml += '<tr class=" GeneListBox' + singleItem.id + ' sequence' + singleItem.sequence + '"><td>' + singleItem.gene.symbol + '</td><td>' + singleItem.gene.name + '</td><td><button type="button" class="d-block table-close-btn deleteGeneTableItem" data-id="' + singleItem.id + '" data-toggle="modal" data-target="#GeneTableItemDeleteModal"><i class="fas fa-times-circle fa-2x"></i></button></td></tr>';
                    });
                    $("#DeleteGeneListData").removeClass('disabled');
                    $("#DeleteGeneListData").prop('disabled', false);
                    $("#showGeneListDataCloseButton").removeClass('disabled');
                    $("#showGeneListDataCloseButton").prop('disabled', false);
                    document.getElementById("GeneListData").innerHTML += html;
                    $("#GeneListTableFormatData").append(mainHtml);
                    $('#GeneListModalConfirmButton,#DeleteGeneListData').attr('data-sequence', sequence);
                    $("#showGeneListDataButton").trigger("click");
                }
                $("#AddGeneListItems").removeClass('disabled');
                $("#AddGeneListItems").prop('disabled', false);
            },
            error: function(errorThrown) {
                $("#AddGeneListItems").removeClass('disabled');
                $("#AddGeneListItems").prop('disabled', false);
            }
        });


    });

    $(document).on('click', '.deleteStudyData', function() {
        $.ajax({
            url: "{{getMURL('ajax/delete-study-data-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'type': $(this).attr('data-type'),
                'sequence': $(this).attr('data-sequence-id'),
            },
            success: function(data) {
                if (data.status == 1) {
                    location.reload();
                }
            },
            error: function(errorThrown) {

            }
        });
    });

    $(document).on('click', '#SaveBiologicalOriginsButton,#SavePreservationsButton,#SaveSubcellularFractionsButton', function() {

        var buttonID = $(this).attr('id');
        var stydyType = '';
        var fetchFieldType = '';
        if (buttonID == 'SaveBiologicalOriginsButton') {
            stydyType = 'BiologicalOrigin';
            fetchFieldType = 'biological_origins';
        } else if (buttonID == 'SavePreservationsButton') {
            stydyType = 'Preservation';
            fetchFieldType = 'preservations';
        } else if (buttonID == 'SaveSubcellularFractionsButton') {
            stydyType = 'SubcellularFraction';
            fetchFieldType = 'subcellular_fractions';
        }
        var sequence = $(this).attr('data-sequence-id');


        var BOCheckedBox = $("input:checked[name^='" + fetchFieldType + "']").map(function(idx, ele) {
            return $(ele).val();
        }).get();
        var BOValOther = [];
        $("textarea[name^='" + fetchFieldType + "']").map(function(idx, ele) {
            var boValue = $(ele).val();
            var boId = $(ele).attr('data-id');
            if (boValue != '') {
                BOValOther[boId] = boValue;
            }
        }).get();
        //        console.log(BOCheckedBox);
        //        console.log(BOValOther);

        $.ajax({
            url: "{{getMURL('ajax/add-study-data-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'type': stydyType,
                'items': BOCheckedBox,
                'itemsOther': BOValOther,
                'sequence': sequence,
                // 'formNextButton': $('#formNextButton').val()
            },
            success: function(data) {
                if (data.status == 1) {
                    //                    if(stydyType == 'BiologicalOrigin') {
                    //                        document.getElementById("ListingOriginData").innerHTML +=
                    //                            '<input type="hidden" name="submitBiologicalOriginData" id="submitBiologicalOriginData" value="' + sequence + '">';
                    //                    }
                    //checkMainSaveButton();
                    //$("#CancelBiologicalOriginsButton,#CancelPreservationsButton,#CancelSubcellularFractionsButton").trigger("click");
                    // location.reload();
                    $('#formNextButtonHidden').val('SaveStudyData');
                    document.getElementById('formHumanSamples').submit();
                }
            },
            error: function(errorThrown) {

            }
        });
    });

    function showSimpleModalAlert(title, description, confirm_btn = '') {
        $('#simpleModalTitle').html(title);
        $('#simpleModalDescription').html(description);
        $('#simpleModalOKButton').html(confirm_btn);
        $("#simpleModalShowButton").trigger("click");
    }

    $(function() {
        $(".clickThreeDot").click(function() {
            var type = $(this).attr('data-type');
            var title = "";
            if (type == "BiologicalOrigin") {
                title = "Biological Origin Sample Table";
            } else if (type == "Preservation") {
                title = "Preservation Sample Table";
            } else if (type == "SubcellularFraction") {
                title = "Subcellular Fraction Sample Table";
            }
            var data = $(this).attr('data-description');
            showSimpleModalAlert(title, data, "Close");
        });
    });

    $(document).on('click', '.plusIconSequence', function() {
        lastViewSequenceId = "";
        var plusIconButton = $(this).attr('data-type');
        if (plusIconButton == 'BiologicalOrigin') {
            buttonID = 'SaveBiologicalOriginsButton';
        } else if (plusIconButton == 'Preservation') {
            buttonID = 'SavePreservationsButton';
        } else if (plusIconButton == 'SubcellularFraction') {
            buttonID = 'SaveSubcellularFractionsButton';
        }
        uncheckedAllCheckBox();
        $('#' + buttonID).attr('data-sequence-id', $(this).attr('data-sequence-id'));
    });

    $(function() {
        $('[data-toggle="popover"]').popover()
    });

    /* Button Enable/Disable Button Event */
    function checkMainSaveButton() {
        var hippa = $("input[name='hippa_protection']:checked").val();
        var bio = $('#submitBiologicalOriginData').val();

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

        if (hippa != undefined && hippa != '' && bio != undefined && bio != '') {
            $(".formSubmitButton").removeClass("disabled");
            $(".formSubmitButton").removeAttr("disabled");
            return false;
        };
    }

    function checkSavePreservationsButton() {
        $("#SavePreservationsButton").addClass("disabled");
        $("#SavePreservationsButton").prop("disabled", true);

        var pCount = $('.preservations:checkbox:checked').length;

        if (pCount != 0) {
            $("#SavePreservationsButton").removeClass("disabled");
            $("#SavePreservationsButton").removeAttr("disabled");
            return false;
        };
    }

    function checkSaveSubcellularFractionsButton() {
        $("#SaveSubcellularFractionsButton").addClass("disabled");
        $("#SaveSubcellularFractionsButton").prop("disabled", true);

        var sfCount = $('.subcellular_fractions:checkbox:checked').length;

        if (sfCount != 0) {
            $("#SaveSubcellularFractionsButton").removeClass("disabled");
            $("#SaveSubcellularFractionsButton").removeAttr("disabled");
            return false;
        };
    }

    function checkSaveBiologicalOriginsButton() {
        $("#SaveBiologicalOriginsButton").addClass("disabled");
        $("#SaveBiologicalOriginsButton").prop("disabled", true);

        var boCount = $('.biological_origins:checkbox:checked').length;

        if (boCount != 0) {
            $("#SaveBiologicalOriginsButton").removeClass("disabled");
            $("#SaveBiologicalOriginsButton").removeAttr("disabled");
            return false;
        };
    }

    /** PHP Table Data Delete */
    $(document).on('click', '.deleteGeneTableItem', function() {
        $('#GeneTableItemModalConfirmButton').attr('data-id', $(this).attr('data-id'));
    });

    $(document).on('click', '#GeneTableItemModalConfirmButton', function() {
        var GeneID = $(this).attr('data-id');
        $.ajax({
            url: "{{getMURL('ajax/delete-gene-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'gene_id': GeneID,
                'type': 'Single'
            },
            success: function(data) {
                if (data.status == 1) {
                    $('.GeneListBox' + GeneID).remove();
                }
            },
            error: function(errorThrown) {

            }
        });
    });
    /** PHP Table Data Delete */

    /** AJAX Single Data Delete */
    $(document).on('click', '.deleteGeneListSingleItem', function() {
        $('#GeneModalConfirmButton').attr('data-id', $(this).attr('data-id'));
        $("#showGeneListData").modal('hide');
        // $("#showGeneListDataCloseButton").trigger("click");
    });

    $(document).on('click', '#GeneModalConfirmButton', function() {
        var GeneID = $(this).attr('data-id');
        $.ajax({
            url: "{{getMURL('ajax/delete-gene-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'gene_id': GeneID,
                'type': 'Single'
            },
            success: function(data) {
                if (data.status == 1) {
                    $('.GeneListBox' + GeneID).remove();
                    if ($("#GeneListData tr").length == 0) {
                        $("#DeleteGeneListData").addClass('disabled');
                        $("#DeleteGeneListData").prop('disabled', true);
                        $("#showGeneListDataCloseButton").addClass('disabled');
                        $("#showGeneListDataCloseButton").prop('disabled', true);
                        $('#showGeneListData').modal('hide');
                    }
                    $('#GeneSingleItemDeleteModal').modal('hide');
                }
            },
            error: function(errorThrown) {

            }
        });
    });
    /** AJAX Single Data Delete */

    /** AJAX All List Data Delete */
    $(document).on('click', '#DeleteGeneListData', function() {
        // $("#showGeneListDataCloseButton").trigger("click");
    });
    /** AJAX All List Data Delete */

    $(document).on('click', '.showAgainGeneListModal', function() {
        // $("#showGeneListDataButton").trigger("click");
        $("#showGeneListData").modal('show');
    });

    $(document).on('click', '#GeneListModalConfirmButton', function() {
        var GeneIDSequence = $(this).attr('data-sequence');
        $.ajax({
            url: "{{getMURL('ajax/delete-gene-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': "{{$post->id}}",
                'sequence': GeneIDSequence,
                'type': 'List'
            },
            success: function(data) {
                if (data.status == 1) {
                    $('.sequence' + GeneIDSequence).remove();
                    document.getElementById("GeneListData").innerHTML += '';
                }
            },
            error: function(errorThrown) {

            }
        });
    });



    $(document).ready(function() {
        $('.biological_origins').change(function() {
            checkSaveBiologicalOriginsButton();
        });
        $('.preservations').change(function() {
            checkSavePreservationsButton();
        });
        $('.subcellular_fractions').change(function() {
            checkSaveSubcellularFractionsButton();
        });

        $('input[type=radio][name=hippa_protection]').change(function() {
            checkMainSaveButton();
        });
    });

    /* Button Enable/Disable Button Event */
    /** On Page Load Functions */
    checkMainSaveButton();
    checkSaveBiologicalOriginsButton();
    checkSavePreservationsButton();
    checkSaveSubcellularFractionsButton();
    /** On Page Load Functions */

    $(document).on('keyup', '.makeMeTextarea textarea', function() {
        var fieldText = $(this).val();
        var fieldRows = $(this).attr('rows');
        var magicBoxLength = "{{$magicBoxLength}}";

        if (fieldText.length > magicBoxLength) {
            if (fieldRows != 3) {
                $(this).attr('rows', 3);
                $(this).removeClass('small-textarea');
                $(this).addClass('big-textarea');
            }
        } else {
            if (fieldRows != 1) {
                $(this).attr('rows', 1);
                $(this).removeClass('big-textarea');
                $(this).addClass('small-textarea');
            }
        }
    });
    $('#view-videoModalCenter').on('hidden.bs.modal', function() {
        var url = $("#iframe").attr("src");
        $("#iframe").attr("src", '');
        $("#iframe").attr("src", url);
    })
    $(document).on("click", ".toggle-text", function() {
        var type = $(this).attr('data-type');
        var sequence_id = $(this).attr('data-sequence-id');
        $("#row_count").html($(this).attr('data-sequence-index'));
        $("#sequence_id").val(sequence_id);
        editSourceTable(sequence_id, type);
    });

    function editSourceTable(sequence_id, plusIconButton) {
        if (lastViewSequenceId != sequence_id) {
            lastViewSequenceId = sequence_id;
            $.ajax({
                url: "{{getMURL('ajax/get-selected-study-data')}}",
                method: "POST",
                async: false,
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                data: {
                    'post_id': "{{$post->id}}",
                    'sequence': sequence_id,
                },
                success: function(data) {
                    if (data.status == 1) {
                        // location.reload();
                        uncheckedAllCheckBox();
                        $.each(data.data, function(key, val) {
                            $("input[name='biological_origins[]'][value='" + val.sd_id + "']").prop('checked', true)
                            $("input[name='preservations[]'][value='" + val.sd_id + "']").prop('checked', true)
                            $("input[name='subcellular_fractions[]'][value='" + val.sd_id + "']").prop('checked', true)
                            $("textarea[name='biological_origins[" + val.sd_id + "][other]']").val(val.other)
                            $("textarea[name='preservations[" + val.sd_id + "][other]']").val(val.other)
                            $("textarea[name='subcellular_fractions[" + val.sd_id + "][other]']").val(val.other)
                        });
                        checkSaveBiologicalOriginsButton();
                        checkSavePreservationsButton();
                        checkSaveSubcellularFractionsButton();
                    }
                },
                error: function(errorThrown) {

                }
            });
        }
        $(".tab-content .tab-pane").removeClass("active");
        $(".tab-content .tab-pane").addClass("fade");
        if (plusIconButton == 'BiologicalOrigin') {
            buttonID = 'SaveBiologicalOriginsButton';
            $("#BiologicalOriginInputs").addClass("active");
            $("#BiologicalOriginInputs").removeClass("fade");
        } else if (plusIconButton == 'Preservation') {
            buttonID = 'SavePreservationsButton';
            $("#PreservationInputs").addClass("active");
            $("#PreservationInputs").removeClass("fade");
        } else if (plusIconButton == 'SubcellularFraction') {
            buttonID = 'SaveSubcellularFractionsButton';
            $("#SubcellularFractionInputs").addClass("active");
            $("#SubcellularFractionInputs").removeClass("fade");
        }

        $('#' + buttonID).attr('data-sequence-id', sequence_id);

    }

    function uncheckedAllCheckBox() {
        $("input[name='biological_origins[]']").prop('checked', false)
        $("input[name='preservations[]']").prop('checked', false)
        $("input[name='subcellular_fractions[]']").prop('checked', false)
    }

    function AddNoDocument() {
        if ($("#methodFileList tbody tr").length == 0) {
            $("#methodFileList tbody").html("<tr id='noDocument'><td colspan='2'> Document not uploaded</td></tr>")
        } else {
            $("#noDocument").remove();
        }
    }
    var documentCount = 0;

    function AddDocumentOnList(image, original_file_name) {
        var hiddenData = "<input type='hidden' name='additional_resources[]' id='file_name_" + documentCount + "' value='" + image + "'> <input type='hidden' name='original_file_name[]' value='" + original_file_name + "'>";
        var listHtml = '<tr id="documentList_' + documentCount + '"><td scope="row" style="vertical-align: middle;"><a href="' + baseURL + 'storage/' + image + '" target="_black" class="underline-text d-block p-0">' + original_file_name + '</a></td><td class="text-center" style="vertical-align: middle;"><a href="javascript:void(0)" class="d-block removeFile" data-id="' + documentCount + '"><span class="close-i" >X</span></a></td>' + hiddenData + '</tr>';

        $("#methodFileList tbody").append(listHtml);
        documentCount++;
        AddNoDocument();
    }

    function deleteFile(file_id) {
        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            url: "{{getMURL('ajax/delete-documents-byid')}}",
            data: {
                file_id: file_id
            },
            sucess: function(data) {
                console.log('success: ' + data);
            }
        });
    }

    $(document).on("click", ".removeFile", function() {
        var docID = $(this).data('id');
        var filename = $("#file_name_" + docID).val();
        var original_id = $(this).data('original_id');

        if (typeof original_id !== "undefined") {
            deleteFile(original_id)
        }

        $("#documentList_" + docID).remove();
        AddNoDocument();
    });
    /* 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="vectors_map[]" 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);
                });
        }
    });

    new Dropzone('#uploadPostMethodFile', {
        url: uploadDropzone,
        type: "POST",
        addRemoveLinks: true,
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
        },
        acceptedFiles: 'image/*',
        acceptedFiles: "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.ppt,.pptx",
        init: function() {
            this.on("sending", function(file, xhr, formData) {
                    formData.append("type", 'method');
                }),
                this.on('success', function(file, resp) {
                    AddDocumentOnList(resp.image, resp.original_file_name);
                }),
                this.on('error', function(file, response) {
                    $(file.previewElement).find('.dz-error-message').text(response.messageError);
                }),
                this.on("queuecomplete", function(file, response) {
                    this.removeAllFiles();
                }),
                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);
                        }
                    });
                });
        }
    });

    @if(isset($vectorsMap) && count($vectorsMap) > 0)
    @foreach($vectorsMap 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 */

    $(document).on("click", "#VectorsCustomItemsCancelButton", function() {
        $('#vectorNewText').val('');
        $('#extraAddVectorsDiv').hide();
    });
    $(document).on("click", "#AddNewCustomVectorsButton", function() {
        $('#vectorNewText').val('');
        $('#extraAddVectorsDiv').show();
    });
    $(document).on("click", "#VectorsCustomItemsSaveButton", function() {
        var newCustomStudyData = $('#vectorNewText').val();
        $('#vectorNewText').val('');
        if (newCustomStudyData != '') {
            $.ajax({
                url: "{{getMURL('ajax/save-custom-study-data')}}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                data: {
                    'post_id': "{{$post->id}}",
                    'name': newCustomStudyData,
                    'type': 'VectorsCharacterization'
                },
                success: function(data) {
                    if (data.status == 1) {
                        data = data.data;
                        var hiddenData = "<input type='hidden' name='characterizations[]' value='" + data.id + "' checked>";

                        document.getElementById("listOfExtraVectorsAddedBox").innerHTML +=
                            '<li class="font-weight-600" id="CharacterizationsBoxId' + data.id + '"><header><span class="mx-2">' + data.name + '</span><i class="fa fa-times deleteExtraVectors" data-val="' + data.id + '"></i></header>' + hiddenData + '</li>';
                    }
                },
                error: function(errorThrown) {

                }
            });
        }
    });

    $(document).on('click', '.deleteExtraVectors', function() {
        var id = $(this).data("val");
        $('#CharacterizationsBoxId' + id).remove();
        $('.CharacterizationsBoxId' + id).remove();
    });
</script>
@endpush