@extends('layouts.member-login')
@section('title','A Reaction, Process, or Computational Model')
@section('page_title','A Reaction, Process, or Computational Model')

@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/reaction')}}" method="POST" id="formHumanSamples">
                            @csrf
                            @isset($post->id)
                            <input type="hidden" name="id" id="id" value="{{$post->id}}">
                            @endisset
                            @php $magicBoxLength = 25 @endphp
                            <div class="row">

                                @include('member.include.create-post-sidebar')

                                <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12 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="post-sub-content-wrapper">
                                                <label class="mb-2">What field(s) best describe the origin of the data/sample?</label>
                                                <ul class="ml-5 check-list-row extraInputbox">

                                                    @foreach($reactionOrigins as $kOne => $reactionOrigin)
                                                    <li>
                                                        <label class="container">{{$reactionOrigin->name}}
                                                            @if($reactionOrigin->is_box == 'Yes')<input type="checkbox" @if(isset($selectedReactionOrigin[$reactionOrigin->id])) checked @endif class="reaction_origin" data-val="{{$reactionOrigin->name}}" name="reaction_origin[]" value="{{$reactionOrigin->id}}"><span class="checkmark"></span>@endif
                                                            @if(!empty($reactionOrigin->description))<button type="button" class="tool-hover" data-container="body" data-toggle="popover" data-placement="right" data-content="{{$reactionOrigin->description}}" data-trigger="hover"><span class="information-i">i</span></button>@endif
                                                        </label>
                                                        @if($reactionOrigin->is_other == 'Yes')<div class="others-input makeMeTextarea" id="magicBoxId{{$reactionOrigin->id}}"><textarea data-id="{{$reactionOrigin->id}}" name="reaction_origin_other[{{$reactionOrigin->id}}]" class="small-textarea">@if(isset($selectedReactionOrigin[$reactionOrigin->id])) {!! $selectedReactionOrigin[$reactionOrigin->id]->other !!} @endif</textarea></div>@endif
                                                    </li>
                                                    @endforeach

                                                </ul>
                                            </div>
                                            <div class="modal-footer col-lg-12">

                                            </div>



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

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>
<button id="simpleModalShowButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#simpleModal" style="display: none;"></button>

<button id="showGeneListDataButton" class="btn kt-login__btn-primary btn-pill btn-custom" data-toggle="modal" data-target="#showGeneListData" style="display: none;"></button>



@endsection

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

@push('footerscript')

@endpush