@extends('layouts.member-login')
@section('title','Human Samples')
@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/human-sample')}}" method="POST" id="formHumanSamples">
                            @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 [Human Samples]'}}</h2>
                                            </div>

                                            @include('member.include.post-title-topbar')

                                            <label class="d-block mt-2 mb-3 text-right">*Required fields</label>
                                            <label class="d-block mb-3">HIPPA Protections*</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="post-sub-content-wrapper">
                                                    <label class="mb-2">Are your data/samples subject to HIPAA protection?</label>
                                                    <div class="main-box-white mb-4 radioHIPPA">
                                                        <div class="custom-radio-btn-wrap">
                                                            <label class="container">{{config("const.hippa_protections.Yes")}}
                                                                <input type="radio" name="hippa_protection" value="Yes" {{($post->hippa_protection) == "Yes" ? 'checked' : ''}}>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        <div class="custom-radio-btn-wrap">
                                                            <label class="container">{{config("const.hippa_protections.No")}}
                                                                <input type="radio" name="hippa_protection" value="No" {{($post->hippa_protection) == "No" ? 'checked' : ''}}>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        <div class="custom-radio-btn-wrap">
                                                            <label class="container">{{config("const.hippa_protections.NotApplicable")}}
                                                                <input type="radio" name="hippa_protection" value="NotApplicable" {{($post->hippa_protection) == "NotApplicable" ? 'checked' : ''}}>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Characterization</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="post-sub-content-wrapper">
                                                    <label>If your data/samples are from a study, how would characterize the study? Check all that apply.</label>
                                                    <div class="main-box-white">
                                                        <ul class="check-list-row two-column-human-sample 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

                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Selection Criteria</label>
                                            <div class="post-left-wrap mb-5">
                                                <label>If applicable, describe the selection criteria for individuals in the study</label>
                                                <textarea class="form-control" placeholder="*Optional" name="selection_criteria" id="selection_criteria" rows="6">{{(isset($post->selection_criteria)) ? $post->selection_criteria : old('selection_criteria')}}</textarea>
                                            </div>
                                            <label class="d-block mb-3">Genes</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="row align-items-center">
                                                    <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
                                                        <label>If specific genes were studied, enter them below.</label>
                                                        <div class="pragraph-p">
                                                            <p>Start typing the HUGO gene symbol to identify a list of matching names. After making your first selection, you can search for and add as many gene names as required. Alternatively you can upload a gene list.</p>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                        <div class="gene-list">
                                                            <button type="button" title="Add Gene List" class="primary-btn text-center d-block" data-toggle="modal" data-target="#addGeneListModal" onclick="$('#GeneListData').html('');$('#geneListTextArea').val('')">Add Gene List</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-lg-8 col-md-12">
                                                        <div class="input-group searchGeneListDiv">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <i class="fas fa-search"></i>
                                                                </span>
                                                            </div>
                                                            <select class="form-control kt-select2" id="searchGeneList" name="searchGeneList">
                                                                <option></option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="h-table">
                                                    <div class="table-responsive">
                                                        <table class="table table-striped">
                                                            <thead>
                                                                <tr>
                                                                    <th scope="col">Symbol</th>
                                                                    <th scope="col">Name</th>
                                                                    <th scope="col"></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="GeneListTableFormatData">

                                                                @foreach($selectGeneList as $gene)
                                                                <tr class="GeneListBox{{$gene->id}}">
                                                                    <td scope="row">{{$gene->gene->symbol ?? ''}}</td>
                                                                    <td>{{$gene->gene->name ?? 'NULL'}}</td>
                                                                    <td class="text-center">
                                                                        <button type="button" class="d-block table-close-btn deleteGeneTableItem" data-id="{{$gene->id}}" data-type="Table" data-toggle="modal" data-target="#GeneTableItemDeleteModal"><i class="fas fa-times-circle fa-2x"></i></button>
                                                                    </td>
                                                                </tr>
                                                                @endforeach

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="watch-demo-video">
                                                <div class="row align-items-center">
                                                    <div class="col-sm-6 col-12">
                                                        <label class="d-block mb-3">Biological Origin*</label>
                                                    </div>
                                                    <div class="col-sm-6 col-12 text-left text-xl-right text-lg-right">
                                                        <strong class="watch-demo-text">Watch Demo</strong>
                                                        <button type="button" class="btn" data-toggle="modal" data-target="#view-videoModalCenter"><img src="{{asset('assets/media/extra/watch-video-image.png')}}" alt="i-video" width="50px" height="auto"></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="post-left-wrap bio-border mb-5">
                                                <div class="pragraph-p">
                                                    <p>Use the table below to detail what was sampled or studied. Examples include data or samples derived from: plasma, tissue biopsies, medical records, biometric data, interviews, etc. If applicable, you can then enter a preservation method and/or a subcellular fraction for each item that was studied.</p>
                                                </div>
                                                <div class="pragraph-p">
                                                    <p>If you have multiple items, enter each item on a separate row. <a class="see-example" data-toggle="modal" data-target="#showSeeExample">See Example</a> Start by clicking the "+" button below.</p>
                                                </div>
                                                <div class="h-table border-table">
                                                    <div class="row">
                                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 text-center">
                                                            <div class="required-input text-white pt-1 pb-2">
                                                                Biological Origin<span class="d-block"><i>(required)</i></span>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 text-center">
                                                            <div class="required-input text-white pt-1 pb-2">
                                                                Preservation<span class="d-block"><i>(optional)</i></span>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 text-center">
                                                            <div class="required-input text-white pt-1 pb-2">
                                                                Subcellular Fraction<span class="d-block"><i>(optional)</i></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <ul class="nav nav-tabs" id="ListingOriginData">
                                                                                                                                @php $key =$index = 0; @endphp
                                                                @isset($selectStudyData['BiologicalOrigin'])
                                                                @foreach($selectStudyData['BiologicalOrigin'] as $key => $BiologicalOrigin)
                                                                @php $index++; @endphp
                                                                <input type="hidden" name="submitBiologicalOriginData" id="submitBiologicalOriginData" value="{{$key}}">
                                                                <li class="counter">{{$key}}.</li>

                                                                <li class="plus-icon">
                                                                    <a>
                                                                        <span class="toggle-text" data-sequence-index={{$index}} data-sequence-id={{$key}} data-type="BiologicalOrigin">
                                                                            {{substr($BiologicalOrigin, 0, 50)}}
                                                                            @if(strlen($BiologicalOrigin) > 50)
                                                                            <span class="clickThreeDot cursor-pointer" data-type="BiologicalOrigin" data-description="{{$BiologicalOrigin}}">...</span>
                                                                            @endif
                                                                        </span>
                                                                        <span class="close-red deleteStudyData cursor-pointer" data-type="BiologicalOrigin" data-sequence-id="{{$key}}">X</span>
                                                                    </a>
                                                                </li>

                                                                <li class="plus-icon">
                                                                    @if(isset($selectStudyData['Preservation'][$key]) && !empty($selectStudyData['Preservation'][$key]))
                                                                    <a>
                                                                        <span class="toggle-text" data-sequence-index={{$index}} data-sequence-id={{$key}} data-type="Preservation">
                                                                            {{substr($selectStudyData['Preservation'][$key], 0, 50)}}
                                                                            @if(strlen($selectStudyData['Preservation'][$key]) > 50)
                                                                            <span class="clickThreeDot cursor-pointer" data-type="Preservation" data-description="{{$selectStudyData['Preservation'][$key]}}">...</span>
                                                                            @endif
                                                                        </span>
                                                                        <span class="close-red deleteStudyData cursor-pointer" data-type="Preservation" data-sequence-id="{{$key}}">X</span>
                                                                    </a>
                                                                    @else
                                                                    <a data-toggle="tab" href="#PreservationInputs"><span class="close-i plus cursor-pointer plusIconSequence" data-type="Preservation" data-sequence-id="{{$key}}">+</span></a>
                                                                    @endif
                                                                </li>

                                                                <li class="plus-icon">
                                                                    @if(isset($selectStudyData['SubcellularFraction'][$key]) && !empty($selectStudyData['SubcellularFraction'][$key]))
                                                                    <a>
                                                                        <span class="toggle-text" data-sequence-index={{$index}} data-sequence-id={{$key}} data-type="SubcellularFraction">
                                                                            {{substr($selectStudyData['SubcellularFraction'][$key], 0, 50)}}
                                                                            @if(strlen($selectStudyData['SubcellularFraction'][$key]) > 50)
                                                                            <span class="clickThreeDot cursor-pointer" data-type="SubcellularFraction" data-description="{{$selectStudyData['SubcellularFraction'][$key]}}">...</span>
                                                                            @endif
                                                                        </span>
                                                                        <span class="close-red deleteStudyData cursor-pointer" data-type="SubcellularFraction" data-sequence-id="{{$key}}">X</span>
                                                                    </a>
                                                                    @else
                                                                    <a data-toggle="tab" href="#SubcellularFractionInputs"><span class="close-i plus cursor-pointer plusIconSequence" data-type="SubcellularFraction" data-sequence-id="{{$key}}">+</span></a>
                                                                    @endif
                                                                </li>
                                                                @endforeach
                                                                @endisset

                                                                <li class="counter"></li>
                                                                <li class="plus-icon"><a data-toggle="tab" href="#BiologicalOriginInputs"><span class="close-i plus cursor-pointer plusIconSequence" data-type="BiologicalOrigin" data-sequence-id="{{$key + 1}}">+</span></a></li>
                                                                <li class="plus-icon disabled"><a data-toggle="tab" href="#PreservationInputs"><span class="close-i plus cursor-pointer plusIconSequence" data-type="Preservation" data-sequence-id="{{$key + 1}}">+</span></a></li>
                                                                <li class="plus-icon disabled"><a data-toggle="tab" href="#SubcellularFractionInputs"><span class="close-i plus cursor-pointer plusIconSequence" data-type="SubcellularFraction" data-sequence-id="{{$key + 1}}">+</span></a></li>
                                                            </ul>

                                                            <div class="tab-content">
                                                                <div id="BiologicalOriginInputs" class="tab-pane">
                                                                    <div class="sub-itmes-wrapper ml-5 pt-5 pb-5">
                                                                        <div class="post-left-wrap">
                                                                            <ul class="tab-down position-relative studyDataClass">
                                                                                <li class="mb-0">
                                                                                    <a class="content" data-toggle="collapse" href="#collapse-1-1" aria-expanded="true" aria-controls="collapse-1-1"><b>Origin</b></a>
                                                                                    <div class="collapse show" id="collapse-1-1">
                                                                                        <div class="pragraph-p">
                                                                                            <p>Check all that apply. Additional descriptions may be entered using the "other" fields</p>
                                                                                        </div>

                                                                                        <div class="main-box-white">
                                                                                            <ul class="check-list-row extraInputbox">

                                                                                                @foreach($biologicalOrigins as $kOne => $eOne)
                                                                                                @if (count($eOne->sub) > 0)
                                                                                                <li @if($eOne->collapse == 'Yes') class="collapsePlusMinus collapsed" data-toggle="collapse" data-target="#collapse{{$eOne->id}}" aria-expanded="false" @endif>
                                                                                                    <label class="container">
                                                                                                        @if($eOne->collapse == 'Yes')<span class="accicon"><i class="fas fa-angle-down rotate-icon"></i></span>@endif
                                                                                                        {{$eOne->name}}
                                                                                                        @if($eOne->is_box == 'Yes')<input type="checkbox" class="biological_origins" name="biological_origins[]" value="{{$eOne->id}}"><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="biological_origins[{{$eOne->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                </li>

                                                                                                <div class="level-check-wrap {{($eOne->collapse == 'Yes') ? 'collapse' : ''}} {{($eOne->name == 'Tissue') ? 'two-column-human-sample' : ''}}" id="collapse{{$eOne->id}}">
                                                                                                    @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" class="biological_origins" name="biological_origins[]" value="{{$eTwo->id}}"><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="biological_origins[{{$eTwo->id}}][other]" class="small-textarea"></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" class="biological_origins" name="biological_origins[]" value="{{$eThree->id}}"><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="biological_origins[{{$eThree->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                        </li>
                                                                                                        @endforeach
                                                                                                    </div>
                                                                                                    @else
                                                                                                    <li>
                                                                                                        <label class="container">{{$eTwo->name}}
                                                                                                            @if($eTwo->is_box == 'Yes')<input type="checkbox" class="biological_origins" name="biological_origins[]" value="{{$eTwo->id}}"><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="biological_origins[{{$eTwo->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                    </li>
                                                                                                    @endif
                                                                                                    @endforeach
                                                                                                </div>
                                                                                                @else
                                                                                                <li>
                                                                                                    <label class="container">{{$eOne->name}}
                                                                                                        @if($eOne->is_box == 'Yes')<input type="checkbox" class="biological_origins" name="biological_origins[]" value="{{$eOne->id}}"><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="biological_origins[{{$eOne->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                </li>
                                                                                                @endif
                                                                                                @endforeach

                                                                                                <div class="row justify-content-center mt-4">
                                                                                                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                                                                        <div class="gene-list">
                                                                                                            <button type="button" title="Save and Continue" class="primary-btn text-center m-auto d-block" id="SaveBiologicalOriginsButton">Save and Continue</button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                                                                        <div class="gene-list">
                                                                                                            <button type="button" title="Cancel" class="primary-btn text-center m-auto d-block" id="CancelBiologicalOriginsButton" data-toggle="collapse" href="#collapse-1-1" aria-expanded="true" aria-controls="collapse-1-1">Cancel</button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </ul>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            </ul>

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

                                                                <div id="PreservationInputs" class="tab-pane fade">
                                                                    <div class="sub-itmes-wrapper ml-5 pt-5 pb-5">
                                                                        <div class="post-left-wrap">
                                                                            <ul class="tab-down position-relative studyDataClass">
                                                                                <li class="mb-0">
                                                                                    <a class="content" data-toggle="collapse" href="#collapse-1-2" aria-expanded="true" aria-controls="collapse-1-2"><b>Preservation</b></a>
                                                                                    <div class="collapse show" id="collapse-1-2">
                                                                                        <div class="pragraph-p">
                                                                                            <p>Check all that apply. Additional descriptions may be entered using the "other" fields</p>
                                                                                        </div>
                                                                                        <div class="main-box-white">
                                                                                            <ul class="check-list-row extraInputbox">

                                                                                                @foreach($preservations as $kOne => $eOne)
                                                                                                @if (count($eOne->sub) > 0)
                                                                                                <li>
                                                                                                    <label class="container">{{$eOne->name}}
                                                                                                        @if($eOne->is_box == 'Yes')<input type="checkbox" class="preservations" name="preservations[]" value="{{$eOne->id}}"><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="preservations[{{$eOne->id}}][other]" class="small-textarea"></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" class="preservations" name="preservations[]" value="{{$eTwo->id}}"><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="preservations[{{$eTwo->id}}][other]" class="small-textarea"></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" class="preservations" name="preservations[]" value="{{$eThree->id}}"><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="preservations[{{$eThree->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                        </li>
                                                                                                        @endforeach
                                                                                                    </div>
                                                                                                    @else
                                                                                                    <li>
                                                                                                        <label class="container">{{$eTwo->name}}
                                                                                                            @if($eTwo->is_box == 'Yes')<input type="checkbox" class="preservations" name="preservations[]" value="{{$eTwo->id}}"><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="preservations[{{$eTwo->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                    </li>
                                                                                                    @endif
                                                                                                    @endforeach
                                                                                                </div>
                                                                                                @else
                                                                                                <li>
                                                                                                    <label class="container">{{$eOne->name}}
                                                                                                        @if($eOne->is_box == 'Yes')<input type="checkbox" class="preservations" name="preservations[]" value="{{$eOne->id}}"><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="preservations[{{$eOne->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                </li>
                                                                                                @endif
                                                                                                @endforeach

                                                                                                <div class="row justify-content-center mt-4">
                                                                                                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                                                                        <div class="gene-list">
                                                                                                            <button type="button" title="Save and Continue" class="primary-btn text-center m-auto d-block" id="SavePreservationsButton">Save and Continue</button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                                                                        <div class="gene-list">
                                                                                                            <button type="button" title="Cancel" class="primary-btn text-center m-auto d-block" id="CancelPreservationsButton" data-toggle="collapse" href="#collapse-1-2" aria-expanded="true" aria-controls="collapse-1-2">Cancel</button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </ul>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div id="SubcellularFractionInputs" class="tab-pane fade">
                                                                    <div class="sub-itmes-wrapper ml-5 pt-5 pb-5">
                                                                        <div class="post-left-wrap">
                                                                            <ul class="tab-down position-relative studyDataClass">
                                                                                <li class="mb-0">
                                                                                    <a class="content" data-toggle="collapse" href="#collapse-1-3" aria-expanded="true" aria-controls="collapse-1-3"><b>Subcellular Fraction</b></a>
                                                                                    <div class="collapse show" id="collapse-1-3">
                                                                                        <div class="pragraph-p">
                                                                                            <p>Check all that apply. Additional descriptions may be entered using the "other" fields</p>
                                                                                        </div>
                                                                                        <div class="main-box-white">
                                                                                            <ul class="check-list-row two-column-human-sample extraInputbox">

                                                                                                @foreach($subcellularFractions as $kOne => $eOne)
                                                                                                @if (count($eOne->sub) > 0)
                                                                                                <li>
                                                                                                    <label class="container">{{$eOne->name}}
                                                                                                        @if($eOne->is_box == 'Yes')<input type="checkbox" class="subcellular_fractions" name="subcellular_fractions[]" value="{{$eOne->id}}"><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="subcellular_fractions[{{$eOne->id}}][other]" class="small-textarea"></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" class="subcellular_fractions" name="subcellular_fractions[]" value="{{$eTwo->id}}"><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="subcellular_fractions[{{$eTwo->id}}][other]" class="small-textarea"></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" class="subcellular_fractions" name="subcellular_fractions[]" value="{{$eThree->id}}"><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="subcellular_fractions[{{$eThree->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                        </li>
                                                                                                        @endforeach
                                                                                                    </div>
                                                                                                    @else
                                                                                                    <li>
                                                                                                        <label class="container">{{$eTwo->name}}
                                                                                                            @if($eTwo->is_box == 'Yes')<input type="checkbox" class="subcellular_fractions" name="subcellular_fractions[]" value="{{$eTwo->id}}"><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="subcellular_fractions[{{$eTwo->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                    </li>
                                                                                                    @endif
                                                                                                    @endforeach
                                                                                                </div>
                                                                                                @else
                                                                                                <li>
                                                                                                    <label class="container">{{$eOne->name}}
                                                                                                        @if($eOne->is_box == 'Yes')<input type="checkbox" class="subcellular_fractions" name="subcellular_fractions[]" value="{{$eOne->id}}"><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="subcellular_fractions[{{$eOne->id}}][other]" class="small-textarea"></textarea></div>@endif
                                                                                                </li>
                                                                                                @endif
                                                                                                @endforeach

                                                                                                <div class="row justify-content-center mt-4">
                                                                                                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                                                                        <div class="gene-list">
                                                                                                            <button type="button" title="Save and Continue" class="primary-btn text-center m-auto d-block" id="SaveSubcellularFractionsButton">Save and Continue</button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                                                                        <div class="gene-list">
                                                                                                            <button type="button" title="Cancel" class="primary-btn text-center m-auto d-block" id="CancelSubcellularFractionsButton" data-toggle="collapse" href="#collapse-1-3" aria-expanded="true" aria-controls="collapse-1-3">Cancel</button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </ul>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </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>
                            </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)
    }
    //
</script>
@endpush