@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" />
@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">
                        @csrf
                        @isset($post->id)
                        <input type="hidden" name="id" value="{{$post->id}}">
                        @endisset
                        
                        <div class="row">
                            
                            @include('member.include.create-post-sidebar')
                            
                            <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12">
                                <div class="grey-bg-wrap">
                                    <div class="post-right-wrapper">
                                        <div class="title-wrapper mb-4">
                                            <h2 class="secondary-title text-capitalize text-white mb-0">Create Data Post [Human Samples]</h2>
                                        </div>
                                        <div class="post-main-type-box">
                                            <div class="main-box-white">
                                                <div class="plasma-human mb-3">
                                                    <div class="plasma-img text-center">
                                                        <img src="{{asset('assets/media/i-human.png')}}" alt="i-human">
                                                    </div>
                                                    <div class="post-title">
                                                        <p class="mb-0">{{$post->title}}</p>
                                                    </div>
                                                </div>
                                                <div class="post-type-wrapper position-relative">
                                                    <div class="row align-items-center">
                                                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                            <div class="post-type-text">
                                                                <div class="post-img">
                                                                    <i class="fa fa-wine-bottle"></i>
                                                                </div>
                                                                <div class="post-content-right ml-2">
                                                                    <label class="mb-0">Post Type:</label>
                                                                    <div class="pragraph-p">
                                                                        <p>{{$post->post_type}}</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                            <div class="post-type-text">
                                                                <div class="post-img">
                                                                    <i class="fa fa-user"></i>
                                                                </div>
                                                                <div class="post-content-right ml-2">
                                                                    <label class="mb-0">Origin:</label>
                                                                    <div class="pragraph-p">
                                                                        <p>{{$post->post_origin}} Subjects</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                            <div class="post-type-text">
                                                                <div class="post-img">
                                                                    <i class="fa fa-pen"></i>
                                                                </div>
                                                                <div class="post-content-right ml-2">
                                                                    <label class="mb-0">Draft:</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="editable-icon-wrapper">
                                                        <i class="fa fa-edit"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <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">
                                                    <div class="cusotm-radio-btn-wrap">
                                                        <label class="container">Yes. My data/samples contain protected health information. It is possible that new collaborators will need to be added to the current IRB protocol.
                                                            <input type="radio" name="hippa_protection" value="Yes" {{($post->hippa_protection) == "Yes" ? 'checked' : ''}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                    <div class="cusotm-radio-btn-wrap">
                                                        <label class="container">No. Protected health information is not involved OR data/samples have been deidentified.
                                                            <input type="radio" name="hippa_protection" value="No" {{($post->hippa_protection) == "No" ? 'checked' : ''}}>
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div>
                                                    <div class="cusotm-radio-btn-wrap">
                                                        <label class="container">Not applicable
                                                            <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">
                                                            
                                                            @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 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"><input type="text" name="characterizations[{{$eOne->id}}][other]" value="{{$selectCharacterizations['other'][$eOne->id] ?? ''}}"></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 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"><input type="text" name="characterizations[{{$eTwo->id}}][other]" value="{{$selectCharacterizations['other'][$eTwo->id] ?? ''}}"></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 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"><input type="text" name="characterizations[{{$eThree->id}}][other]" value="{{$selectCharacterizations['other'][$eThree->id] ?? ''}}"></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 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"><input type="text" name="characterizations[{{$eTwo->id}}][other]" value="{{$selectCharacterizations['other'][$eTwo->id] ?? ''}}"></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 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"><input type="text" name="characterizations[{{$eOne->id}}][other]" value="{{$selectCharacterizations['other'][$eOne->id] ?? ''}}"></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">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>
                                                            
                                                            @foreach($selectGeneList as $gene)
                                                            <tr>
                                                                <td scope="row">{{$gene->gene->symbol ?? ''}}</td>
                                                                <td>{{$gene->gene->name ?? 'NULL'}}</td>
                                                                <td class="text-center">
                                                                    <button class="d-block table-close-btn"><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 href="#" class="see-example">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">
                                                                                                                        @php $key = 0; @endphp
                                                            @isset($selectStudyData['BiologicalOrigin'])
                                                                @foreach($selectStudyData['BiologicalOrigin'] as $key => $BiologicalOrigin)
                                                                <input type="hidden" name="submitBiologicalOriginData" id="submitBiologicalOriginData" value="{{$key}}">
                                                                <li class="counter">{{$key}}.</li>
                                                                <li class="plus-icon">
                                                                    <a>
                                                                        <span class="toggle-text">
                                                                            {{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">
                                                                            {{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">
                                                                            {{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 mb-5 pt-5 pb-5">
                                                                    <div class="post-left-wrap">
                                                                        <ul class="tab-down position-relative">
                                                                            <li class="mb-0">
                                                                                <span class="content"><b>Origin</b></span>
                                                                                <div class="pragraph-p">
                                                                                    <p>Check all that apply. Additional descriptions may be entered using the "other" fields</p>
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                        <div class="main-box-white">
                                                                            <ul class="check-list-row">
                                                                                
                                                                                @foreach($biologicalOrigins as $kOne => $eOne)
                                                                                    @if (count($eOne->sub) > 0)
                                                                                        <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 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"><input type="text" name="biological_origins[{{$eOne->id}}][other]" data-id="{{$eOne->id}}" value=""></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="biological_origins" name="biological_origins[]" value="{{$eTwo->id}}"><span class="checkmark"></span>@endif
                                                                                                        @if(!empty($eTwo->description))<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"><input type="text" name="biological_origins[{{$eTwo->id}}][other]" data-id="{{$eTwo->id}}" value=""></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 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"><input type="text" name="biological_origins[{{$eThree->id}}][other]" data-id="{{$eThree->id}}" value=""></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 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"><input type="text" name="biological_origins[{{$eTwo->id}}][other]" data-id="{{$eTwo->id}}" value=""></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 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"><input type="text" name="biological_origins[{{$eOne->id}}][other]" data-id="{{$eOne->id}}" value=""></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">Cancel</button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            <div id="PreservationInputs" class="tab-pane fade">
                                                                <div class="sub-itmes-wrapper ml-5 mb-5 pt-5 pb-5">
                                                                    <div class="post-left-wrap">
                                                                        <ul class="tab-down position-relative">
                                                                            <li class="mb-0">
                                                                                <span class="content"><b>Preservation</b></span>
                                                                                <div class="pragraph-p">
                                                                                    <p>Check all that apply. Additional descriptions may be entered using the "other" fields</p>
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                        <div class="main-box-white">
                                                                            <ul class="check-list-row">
                                                                                
                                                                                @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 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"><input type="text" name="preservations[{{$eOne->id}}][other]" data-id="{{$eOne->id}}" value=""></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 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"><input type="text" name="preservations[{{$eTwo->id}}][other]" data-id="{{$eTwo->id}}" value=""></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 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"><input type="text" name="preservations[{{$eThree->id}}][other]" data-id="{{$eThree->id}}" value=""></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 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"><input type="text" name="preservations[{{$eTwo->id}}][other]" data-id="{{$eTwo->id}}" value=""></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 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"><input type="text" name="preservations[{{$eOne->id}}][other]" data-id="{{$eOne->id}}" value=""></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">Cancel</button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            <div id="SubcellularFractionInputs" class="tab-pane fade">
                                                                <div class="sub-itmes-wrapper ml-5 mb-5 pt-5 pb-5">
                                                                    <div class="post-left-wrap">
                                                                        <ul class="tab-down position-relative">
                                                                            <li class="mb-0">
                                                                                <span class="content"><b>Subcellular Fraction</b></span>
                                                                                <div class="pragraph-p">
                                                                                    <p>Check all that apply. Additional descriptions may be entered using the "other fields</p>
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                        <div class="main-box-white">
                                                                            <ul class="check-list-row">
                                                                                
                                                                                @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 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"><input type="text" name="subcellular_fractions[{{$eOne->id}}][other]" data-id="{{$eOne->id}}" value=""></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 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"><input type="text" name="subcellular_fractions[{{$eTwo->id}}][other]" data-id="{{$eTwo->id}}" value=""></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 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"><input type="text" name="subcellular_fractions[{{$eThree->id}}][other]" data-id="{{$eThree->id}}" value=""></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 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"><input type="text" name="subcellular_fractions[{{$eTwo->id}}][other]" data-id="{{$eTwo->id}}" value=""></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 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"><input type="text" name="subcellular_fractions[{{$eOne->id}}][other]" data-id="{{$eOne->id}}" value=""></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">Cancel</button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="bottom-btn-wrapper">
                                            <div class="row">
                                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 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-xl-4 col-lg-4 col-md-4 col-sm-6 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-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 text-center">
                                                    <div class="btn-wrap">
                                                        <a href="{{getMURL('post/study-design/' . $post->id)}}" title="Next" class="primary-btn formNextButton">Next <span class="right-arrow"><i class="fa fa-arrow-right"></i></span></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>
<!-- Modal-->
<div class="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-left" data-dismiss="modal" id="AddGeneListItems">Add Gene List</button>
                    <button type="button" class="primary-btn" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="delet-modal">
    <div class="modal fade" id="closeModal" 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">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" data-dismiss="modal">Delete Gene Item</button>
                    <button type="button" class="primary-btn">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 width="100%" height="100%" src="" 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>




@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">
/* Custom Dragula JS */

$("#searchGeneList").select2({
    placeholder: "Search for gene list",
    allowClear: true,
    ajax: {
        url: "{{getMURL('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 data = e.params.data;
    console.log('Selected');
    
        $.ajax({
            url: "{{getMURL('add-gene-single-item')}}",
            method: "POST",
            headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'},
            data: {
                'post_id': "{{$post->id}}",
                'item_id': data.id
            },
            success: function (data) {
                if(data.status == 1) {
//                    document.getElementById("authorListDiv").innerHTML +=
//                    '<li class="task" id="authorLIID' + data.id + '"><input type="hidden" name="author_position[]" value="' + data.id + '"><div class="inner-task"><p>' + data.name + ' ' + data.last_name + '</p><div class="col-btn-wrapperr"><div class="column-button"><button type="button" class="button-direction"><i class="fa fa-arrows-alt"></i></button></div><div class="column-button"><button type="button" class="button deleteAuthorXButton" @isset($post->id) onclick="deleteAuthorMember(' + data.id + ', {{$post->id}})" @endisset>X</button></div></div></div></li>';
                }
            },
            error: function (errorThrown) {

            }
        });
    console.log(data);
}).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', '#addPIMemberButton', function() {
    $.ajax({
        url: "{{getMURL('add-pi-member')}}",
        method: "POST",
        headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'},
        data: {
            'pi_first_name': $('#pi_first_name').val(),
            'pi_last_name':$('#pi_last_name').val(),
            'pi_email':$('#pi_email').val(),
            'pi_research_name':$('#pi_research_name').val()
        },
        success: function (data) {
            if(data.status == 1) {
                window.location.href = "{{getMURL('post/title-author')}}";
            }
        },
        error: function (errorThrown) {

        }
    });
});
$(document).on('click', '#AddGeneListItems', function() {
    $.ajax({
        url: "{{getMURL('add-gene-list')}}",
        method: "POST",
        headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'},
        data: {
            'post_id': "{{$post->id}}",
            'items': $('#geneListTextArea').val()
        },
        success: function (data) {
            if(data.status == 1) {
                //success
            }
        },
        error: function (errorThrown) {

        }
    });
});
$(document).on('click', '.deleteStudyData', function() {
    $.ajax({
        url: "{{getMURL('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 = {};
    $("input:text[name^='" + fetchFieldType + "']").map(function (idx, ele) {
        var boValue = $(ele).val();
        var boId = $(ele).attr('data-id');
        if(boValue != '') {
            BOValOther[boId] = boValue;
        }
    }).get();
    
    $.ajax({
        url: "{{getMURL('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,
        },
        success: function (data) {
            if(data.status == 1) {
                location.reload();
            }
        },
        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() {
    var plusIconButton = $(this).attr('data-type');
    if(plusIconButton == 'BiologicalOrigin') {
        buttonID = 'SaveBiologicalOriginsButton';
    } else if(plusIconButton == 'Preservation') {
        buttonID = 'SavePreservationsButton';
    } else if(plusIconButton == 'SubcellularFraction') {
        buttonID = 'SaveSubcellularFractionsButton';
    }
    
    $('#' + 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();
    
    console.log(hippa);
    console.log(bio);
    $(".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;
    };
}

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

/* Button Enable/Disable Button Event */
/** On Page Load Functions */
checkMainSaveButton();
checkSaveBiologicalOriginsButton();
checkSavePreservationsButton();
checkSaveSubcellularFractionsButton();
/** On Page Load Functions */
</script>
@endpush