@extends('layouts.member-login')
@section('title','Cell Culture')
@section('page_title','CellCulture')

@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/cell-culture')}}" method="POST" id="formHumanSamples">
                            @csrf
                            @isset($post->id)
                            <input type="hidden" name="id" id="id" value="{{$post->id}}">
                            @endisset
                            <input type="hidden" name="sequence_id" id="sequence_id" value="">
                            @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 organism">
                                    <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" style="color: #f70202 !important;">*Required fields</label>

                                            <div class="title"><label class="d-block mb-3 collapsed" id="organismListCollapsed" data-toggle="collapse" data-target="#organismList"><i class="fa mr-2"></i>Organism(s)<span class="star-sign-validation">*</span></label></div>
                                            <div class="collapse collapse-box" id="organismList">
                                                <div class="post-sub-content-wrapper">
                                                    <label class="mb-2">What organism(s) is/are your cells derived from?</label>
                                                    <div class="main-box-white">
                                                        <div class="p-0">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-2 searchSpeciesDiv">
                                                                    <label class="d-block mb-3">Select species</label>
                                                                    <p class="labels m-0 mb-2 research-description">Use the species lookup tool below* or select the quick reference species listed below.</p>
                                                                    <select class="form-control w-100 kt-select2" id="searchSpecies" name="searchSpecies">
                                                                        <option></option>
                                                                    </select>
                                                                    <span style="font-size: 10px;color:#000">*LabPair uses integrated taxonomic system (ITIS.gov) for specific identification</span>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-3">
                                                                <div class="col-md-12 mb-2">
                                                                    <label class="labels mb-2">Quick ref species</label>
                                                                    <div class="two-row col-12" id="searchCellCulterSpeciesCheckBox">

                                                                        @php $html="" @endphp
                                                                        @foreach($species as $specie)
                                                                                                                                                <div class="custom-checkbox">
                                                                            <label class="container">
                                                                                <div>{{$specie->name}}</div>
                                                                                <input class="cellCulterSpeciesCheckbox" {{$checked}} type="checkbox" id="cell_culter_species_{{$specie->id}}" name="cell_culter_species[]" value="{{$specie->id}}" data-val="{{$specie->name}}">
                                                                                <span class="checkmark"></span>
                                                                            </label>
                                                                        </div>
                                                                        @endforeach


                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-3">
                                                                <label class="labels mb-2">Species Added :</label>
                                                                <div class="list-added col-12" id="displaySpeciesList">
                                                                    <ul id="listOfCellCulterSpeciesBox" class="delete-x-icon" style="min-height:50px">
                                                                        {!!$html!!}
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="modal-footer col-lg-12">
                                                        <button type="button" title="Save" id="save_species" class="primary-btn text-center d-block" id="">Next</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="title"><label class="d-block mb-3 collapsed" id="cellLineListCollapse" data-toggle="collapse" data-target="#cellLineListDiv"><i class="fa mr-2"></i>Cell Line</label></div>
                                            <div class=" collapse collapse-box" id="cellLineListDiv">
                                                <div class="post-sub-content-wrapper">
                                                    <div class="main-box-white">
                                                        <div class="p-0">
                                                            <div class="row mt-2">
                                                                <div class="col-md-12 mb-2 searchSpeciesDiv">
                                                                    <label class="d-block mb-3">If there are from transformed or immortalized human/animal cell line, Please enter the cell line bellow </label>
                                                                    <select class="form-control kt-select2" id="searchCellLine" name="searchCellLine">
                                                                        <option></option>
                                                                    </select>
                                                                    <label class="d-block mt-2 ml-3" style="color: #5867dd !important;font-size: 13px !important;">Can't find your cell line?
                                                                        <a href="javascript:void(0)" class="text-decoration" id="addCellLine">Click here to add it.</a>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="form-group row" id="addCellLineForm" style="display: none;">
                                                                <label class="col-form-label col-lg-2 text-right">Cell Line Title:</label>
                                                                <div class="col-lg-4">
                                                                    <input type="text" class="form-control cell_line_add" name="cell_line_title" id="cell_line_title" placeholder="Cell Line Title">
                                                                </div>
                                                                <label class="col-form-label col-lg-2 text-right">Cell Line Type:</label>
                                                                <div class="col-lg-4">
                                                                    <input type="text" class="form-control cell_line_add" name="cell_line_type" id="cell_line_type" placeholder="Cell Line Type">
                                                                </div>
                                                                <div class="modal-footer col-lg-12">
                                                                    <button type="button" class="primary-btn disabled" id="cancelCellLine">Cancel</button>
                                                                    <button type="button" title="Save" class="primary-btn text-center d-block" id="saveCellLine">Add</button>
                                                                </div>
                                                            </div>

                                                            <div class="share-table" id="cellLineList">
                                                                <label class="d-block mb-3">Cell lines entered</label>
                                                                <div class="h-table">
                                                                    <div class="table-responsive">
                                                                        <table class="table table-striped mb-0" style="font-size: 16px;">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th scope="col" style="width:45%;">Cell Lines</th>
                                                                                    <th scope="col" style="width:45%;">Cell Type</th>
                                                                                    <th scope="col" style="width:10%;"></th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($postCellLines as $postCellLine)
                                                                                <tr id="documentList_{{$postCellLine->id}}">
                                                                                    <td scope="row" style="vertical-align: middle;">{{$postCellLine->name}}</td>
                                                                                    <td scope="row" style="vertical-align: middle;">{{$postCellLine->type}}</td>
                                                                                    <td class="text-center" style="vertical-align: middle;">
                                                                                        <a href="javascript:void(0)" class="d-block removeCellLine" data-id="{{$postCellLine->id}}"><span class="close-i">X</span></a>
                                                                                        <input type='hidden' name='cell_line[]' value='{{$postCellLine->id}}'>
                                                                                    </td>
                                                                                </tr>
                                                                                @endforeach

                                                                            </tbody>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer col-lg-12">
                                                        <button type="button" title="Save" id="previous_cell_line" class="primary-btn text-center d-block" id="">Previous</button>
                                                        <button type="button" title="Save" id="save_cell_line" class="primary-btn text-center d-block" id="">Next</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="title"><label class="d-block mb-3 collapsed" id="cellCharacteristicsCollapsed" data-toggle="collapse" data-target="#cellCharacteristicsList"><i class="fa mr-2"></i>Cell Characteristics</label></div>
                                            <div class=" collapse collapse-box" id="cellCharacteristicsList">
                                                <div class="post-sub-content-wrapper">
                                                    <div class="main-box-white ">


                                                        <div class="p-0">

                                                            <div class="row mt-3">
                                                                <div class="col-md-12 mb-2">
                                                                    <label class="d-block mb-3">Describe your cells by checking all that apply </label>
                                                                    <div class="col-12">