@extends('layouts.member-login')
@section('title','Results')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/general/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css')}}" rel="stylesheet" type="text/css" />
<style>
    .selector-item {
        position: relative;
        flex-basis: calc(70% / 3);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .selector-item_radio {
        appearance: none;
        display: none;
    }

    .selector-item_label {
        padding: 15px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        border-radius: 7px;
    }

    label.selector-item_label {
        font-size: 14px !important;
        color: white !important;
    }

    .h50 {
        height: 50px;
    }

    .selector-item_radio:checked+.selector-item_label {
        background-color: #214794;
        color: var(--white);

    }

    .gray-bg {
        border-radius: 7px;
    }

    .main-box-white-ul {
        height: 335px;
        overflow: auto;
    }
</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">
                    <form action="{{getMURL('post/result')}}" method="POST" id="formResult">
                        @csrf
                        @isset($post->id)
                        <input type="hidden" name="id" id="id" value="{{$post->id}}">
                        @endisset
                        <div class="">
                            <div class="row">

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

                                <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12">
                                    <div class="grey-bg-wrap">
                                        <div class="post-right-wrapper">
                                            <div class="title-wrapper mb-4">
                                                <h2 class="secondary-title text-capitalize text-white mb-0">{{$postTopbarTitle ?? 'Create Data Post [Results]'}}</h2>
                                            </div>

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

                                            <label class="d-block mt-2 mb-3 text-right">*Required fields</label>
                                            <label class="d-block mb-3">Final Sample Size *</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="post-sub-content-wrapper">
                                                    <label class="mb-2">What was the final sample size? Enter the number of independent experiments or test subjects (not technical replicates).</label>
                                                    <div class="single-year-wrpper">
                                                        <div class="custom-radio-btn-wrap">
                                                            <label class="container mb-0">Exactly:
                                                                <input type="radio" name="final_sample_date" value="0" {{(isset($post->id) && $post->final_sample_end == null) ? 'checked' : ''}}>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        <div class="year-input">
                                                            <input type="number" class="form-control datePicker" name="single_final_sample_start" id="single_final_sample_start" {{(!empty($post->final_sample_end)) ? 'disabled="disabled"' : ''}} autocomplete="off" value="{{(isset($post->id) && $post->final_sample_start != null && $post->final_sample_end == null) ? $post->final_sample_start : ''}}">
                                                        </div>
                                                    </div>
                                                    <div class="between-wrapper position-relative">
                                                        <div class="custom-radio-btn-wrap">
                                                            <label class="container">Between:
                                                                <input type="radio" name="final_sample_date" value="1" {{(isset($post->id) && $post->final_sample_start != null && $post->final_sample_end != null) ? 'checked' : ''}}>
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        <div class="start-year mt-4">
                                                            <div class="year-input">
                                                                <input type="number" {{(empty($post->final_sample_end)) ? 'disabled="disabled"' : ''}} class="form-control datePicker between" name="final_sample_start" id="final_sample_start" autocomplete="off" value="{{(isset($post->id) && $post->final_sample_start != null && $post->final_sample_end != null) ? $post->final_sample_start : ''}}">
                                                            </div>
                                                        </div>
                                                        <label class="d-block and-lable">And</label>
                                                        <div class="start-year mt-4">
                                                            <div class="year-input">
                                                                <input type="number" {{(empty($post->final_sample_end)) ? 'disabled="disabled"' : ''}} class="form-control datePicker between" name="final_sample_end" id="final_sample_end" autocomplete="off" value="{{(isset($post->id) && $post->final_sample_start != null && $post->final_sample_end != null) ? $post->final_sample_end : ''}}">
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div style="{{$post->experiment_perform_key == 'No' ? 'display: none' : ''}}">
                                                <label class="d-block mb-3">Findings</label>
                                                <div class="post-left-wrap mb-5">
                                                    <label>
                                                        Using the variables entered under study design, enter your experimental findings.
                                                        <span class="ml-2 info-icon" data-toggle="modal" data-target="#tooltipBoxPostResult">
                                                            <img src="{{asset('assets/media/extra/tooltip-info-icon-gray.gif')}}">
                                                        </span>
                                                    </label>
                                                    <div class="pragraph-p">
                                                        <p>Choose an independent variable from the column on the left, a dependent variable from the center column, and a description of how the independent variable affects the dependent variable from the column on the right, then click "Add". You can enter as many findings as you wish.</p>
                                                        <div class="variable-add-link text-right w-100 mb-4">
                                                            <a href="{{getMURL('post/study-design/' . $post->id)}}" title="variable-add">Add variables</a>
                                                        </div>
                                                    </div>
                                                    <div class="finding-bg mb-4">
                                                        <div class="row">
                                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                <div class="row h50">
                                                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                                                        <span class="img-variable d-block">
                                                                            <img src="{{url('assets/media/extra/i-v.png')}}" alt="variable" class="w-100">
                                                                        </span>
                                                                    </div>
                                                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                                                                        <h2 class="text-white text-capitalize">Independent Variables</h2>
                                                                    </div>
                                                                </div>
                                                                <div class="main-box-white p-3 mt-4">
                                                                    <ul class="main-box-white-ul">
                                                                        @foreach ($independentVariable as $key=>$val)
                                                                        <div class="mb-3 text-white gray-bg">
                                                                            <input type="radio" id="independent{{$key}}" name="independent" value="{{$val->id}}" class="selector-item_radio">
                                                                            <label for="independent{{$key}}" class="selector-item_label">{{$val->keyword}}</label>
                                                                        </div>
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                <div class="row h50">
                                                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                                                        <span class="img-variable d-block">
                                                                            <img src="{{url('assets/media/extra/d-v.png')}}" alt="variable" class="w-100">
                                                                        </span>
                                                                    </div>
                                                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                                                                        <h2 class="text-white text-capitalize">Dependent Variables</h2>
                                                                    </div>
                                                                </div>
                                                                <div class="main-box-white p-3 mt-4">
                                                                    <ul class="main-box-white-ul">
                                                                        @foreach ($dependentVariable as $key => $val)
                                                                        <div class="mb-3 text-white gray-bg">
                                                                            <input type="radio" id="dependent{{$key}}" name="dependent" value="{{$val->id}}" class="selector-item_radio">
                                                                            <label for="dependent{{$key}}" class="selector-item_label">{{$val->keyword}}</label>
                                                                        </div>
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                <div class="row h50">
                                                                    <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
                                                                    </div>
                                                                    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
                                                                        <h2 class="text-white text-capitalize">Effect On Dependent Variables</h2>
                                                                    </div>
                                                                </div>
                                                                <div class="main-box-white p-3 mt-4">
                                                                    <ul class="main-box-white-ul">
                                                                        @php
                                                                        $iconArray = [];
                                                                        @endphp
                                                                        @foreach (config("const.effect_on_dependent_variable") as $key => $val)
                                                                        <div class="mb-3 text-white gray-bg">
                                                                            @php
                                                                            $iconArray[$val['id']] = $val['icon'];
                                                                            @endphp
                                                                            <input type="radio" id="effect_on{{$key}}" name="effect_on" value="{{$val['id']}}" class="selector-item_radio">
                                                                            <label for="effect_on{{$key}}" class="selector-item_label">{{$val['title']}}<span class="icon-li"><i class="{{$val['icon']}}"></i></span></label>
                                                                        </div>
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mb-4">
                                                        <div class="col-md-12">
                                                            <div class="btn-wrap">
                                                                <button type="button" class="primary-btn d-block text-center disabled" id="interaction_btn" disabled="disabled">Add Interaction</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <label class="d-block mt-5">Findings Table</label>
                                                    <div class="f-table-wrap">
                                                        <div class="row">
                                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                <div class="row">
                                                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                                                        <span class="img-variable d-block">
                                                                            <img src="{{url('assets/media/extra/i-v.png')}}" alt="variable" class="w-100">
                                                                        </span>
                                                                    </div>
                                                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                                                                        <h2 class="text-white text-capitalize">Independent Variables</h2>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                <div class="row">
                                                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                                                        <span class="img-variable d-block">
                                                                            <img src="{{url('assets/media/extra/d-v.png')}}" alt="variable" class="w-100">
                                                                        </span>
                                                                    </div>
                                                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                                                                        <h2 class="text-white text-capitalize">Dependent Variables</h2>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                <div class="row">
                                                                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                                                    </div>
                                                                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                                                                        <h2 class="text-white text-capitalize">Effect on Dependent Variable</h2>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="f-row-wrap">
                                                            <div class="row mt-3">

                                                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                    <ul id="independent_ul">
                                                                                                                                                @foreach ($postInteractions as $val)
                                                                        @if($val->IndependentVariable && $val->DependentVariable)
                                                                        <li class="interaction_id_{{$val->id}}">{{$val->IndependentVariable->keyword}}</li>
                                                                                                                                                @endif
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                    <ul class="custom-ml" id="dependent_ul">
                                                                        {!!$independentHtml!!}
                                                                    </ul>
                                                                </div>
                                                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                                                                    <ul class="custom-ml" id="effect_ul">
                                                                        {!!$effectHtml!!}
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Additional Endpoints (Optional)</label>
                                            <div class="post-left-wrap mb-5">
                                                <label>Are there other endpoints associated with the data/samples that you would be willing to share with collaborators?</label>
                                                <div class="text-area-wrap">
                                                    <textarea placeholder="Optional" name="additional_endpoint_detail" class="form-control" rows="6">{{$post->additional_endpoint_detail}}</textarea>
                                                </div>
                                            </div>
                                            <label class="d-block mb-3">Supporting Documentation (Optional)</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="thumbnail-wrapper">
                                                    <div class="pragraph-p">
                                                        <!-- <label class="mb-2">Please describe any additional details about your results below. Include information that you think collaborators will want to know. Please do NOT include raw data.</label> -->
                                                        <label class="mb-2">Please feel free to include any additional supporting documents that can help summarize or convey your findings. Include information that you think collaborators will want to know. Please do NOT include raw data.</label>
                                                    </div>
                                                    <div class="main-box-white">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <!--                                                                <div class="dropzone dropzone-default dropzone-success" id="uploadPostResultFile">
                                                                    <div class="dropzone-msg dz-message needsclick">
                                                                        <i class="flaticon-upload-1" style="font-size: 72px"></i>
                                                                        <header>Drag & Drop file here</header>
                                                                        <span>or</span><br>
                                                                        <a href="javascript:Void(0)" class="btn btn-outline-success mr-2">Browse File</a>
                                                                    </div>
                                                                    <div class="dz-preview dz-processing dz-image-preview dz-success dz-complete" style="display: none;">
                                                                        <div class="dz-image">
                                                                            <img data-dz-thumbnail="" alt="" src="">
                                                                        </div>
                                                                    </div>
                                                                </div>-->

                                                                <div class="dropzone dropzone-default dropzone-success" id="uploadPostResultFile">
                                                                    <div class="dropzone-msg dz-message needsclick">
                                                                        <div class="drop-img-box">
                                                                            <img src="{{asset('assets/media/extra/upload-dropzone-icon.png')}}">
                                                                        </div>
                                                                        <div class="content-box text-left">
                                                                            <div class="d-inline-block text-center">
                                                                                <header>Drag & Drop file here</header>
                                                                                <span>or</span><br>
                                                                                <a href="javascript:Void(0)" class="btn btn-outline-success mr-2">Browse File</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="dz-preview dz-processing dz-image-preview dz-success dz-complete" style="display: none;">
                                                                        <div class="dz-image">
                                                                            <img data-dz-thumbnail="" alt="" src="">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="share-table pt-5" id="resultFileList">
                                                        <div class="h-table">
                                                            <div class="table-responsive">
                                                                <table class="table table-striped mb-0">
                                                                    <thead>
                                                                        <tr>
                                                                            <th scope="col">Uploaded Files</th>
                                                                            <th scope="col"></th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        @php
                                                                        $DocCount=0;
                                                                        @endphp
                                                                        @foreach ($resultDocument as $key=>$val )
                                                                        @php
                                                                        $DocCount=($key+1);
                                                                        @endphp
                                                                        <tr id="documentList_{{$DocCount}}">
                                                                            <td scope="row" style="vertical-align: middle;"><a href="{{url('storage/'.$val->name)}}" target="_black" class="underline-text d-block p-0">{{$val->original_name}}</a></td>
                                                                            <td class="text-center" style="vertical-align: middle;">
                                                                                <input type='hidden' id='file_name_{{$DocCount}}' value='{{$val->name}}'>
                                                                                <a href="javascript:void(0);" class="d-block removeFile" data-id="{{$DocCount}}" data-original_id="{{$val->id}}"><span class="close-i">X</span></a>
                                                                            </td>
                                                                        </tr>
                                                                        @endforeach
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="bottom-btn-wrapper">
                                                <div class="row">
                                                    <div class="col-lg-4 text-center">
                                                        <div class="btn-wrap">
                                                            <a href="{{getMURL('post/method/' . $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 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 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>
                                                            <!-- <a href="{{getMURL('post/setting/' . $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>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>
<!-- Modal-->
<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 Kit Link</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <input type="hidden" id="document_id">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p>Provide confirmation you wish to delete the Kit Link.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn" data-dismiss="modal" id="deleteLink">Yes, Delete Link</button>
                    <button type="button" class="primary-btn" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

@include('member.include.tooltip-modal-box')

@endsection

@section('page_level_js')
<script src="//cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>
<script src="{{asset('assets/vendors/general/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/js/vendors/bootstrap-datepicker.init.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script type="text/javascript">
    /* Disable auto search dropzone class */
    Dropzone.autoDiscover = false;
    /* Disable auto search dropzone class */
    var iconArray = null;
    var uploadDropzone = "{{getMURL('ajax/upload-documents')}}";
    var baseURL = "{{getURL('')}}";
    new Dropzone('#uploadPostResultFile', {
        url: uploadDropzone,
        type: "POST",
        //maxFiles: -1,
        addRemoveLinks: true,
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
        },
        acceptedFiles: 'image/*',
        acceptedFiles: "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.ppt,.pptx",

        init: function() {
            this.on("sending", function(file, xhr, formData) {
                    formData.append("type", 'result');
                }),
                this.on('success', function(file, resp) {
                    // file.previewElement.parentNode.removeChild(file.previewElement);
                    if (resp.status == 1) {
                        AddDocumentOnList(resp.image, resp.original_file_name);
                    } else {
                        showToastrError(resp.message, "Error");
                    }
                }),
                this.on('error', function(file, response) {
                    $(file.previewElement).find('.dz-error-message').text(response.messageError);
                }),
                this.on("queuecomplete", function(file, response) {
                    // this.previewElement.remove(); 
                    this.removeAllFiles();

                }),

                this.on('removedfile', function(file) {

                });
        }
    });

    /** On Page Load Functions */
    $(document).ready(function() {
        AddNoDocument();
    })

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

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

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

        var original_id = $(this).data('original_id');
        if (typeof original_id !== "undefined") {
            deleteFile(original_id)
        }

        $("#documentList_" + docID).remove();
        AddNoDocument()
    })

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

    //    $(".datePicker").datepicker({
    //        format: "yyyy",
    //        viewMode: "years",
    //        minViewMode: "years",
    //        autoclose: true //to close picker once year is selected
    //    });

    $('input[type=radio][name=final_sample_date]').change(function() {
        $(".datePicker").val("");
        if (this.value == '1') {
            $("#single_final_sample_start").attr("disabled", "disabled");
            $(".between").removeAttr("disabled");
        } else if (this.value == '0') {
            $(".between").attr("disabled", "disabled");
            $("#single_final_sample_start").removeAttr("disabled");
        }
    });
    var addInteraction = [];
    $("#interaction_btn").on("click", function(e) {
        addInteractionFun();
    })



    function checkInteractionButton() {
        var IndVal = $("input[name='independent']:checked").val();
        var DepVal = $("input[name='dependent']:checked").val();
        var EoVal = $("input[name='effect_on']:checked").val();

        if (IndVal != undefined && IndVal != '' && DepVal != undefined && DepVal != '' && EoVal != undefined && EoVal != '') {
            $("#interaction_btn").removeAttr("disabled");
            $("#interaction_btn").removeClass("disabled");
        } else {
            $("#interaction_btn").attr("disabled", "disabled");
            $("#interaction_btn").addClass("disabled");
        }
    }
    //    function checkInteractionButton() {
    //        setTimeout(function() {}, 1000);
    //        var independentVal = $("input[name='independent']:checked").val();
    //        var dependentVal = $("input[name='dependent']:checked").val();
    //        var effectVal = $("input[name='effect_on']:checked").val();
    //        var interactionBtnflag = true;
    //        if (typeof independentVal === "undefined" || independentVal == '') {
    //            interactionBtnflag = false;
    //        }
    //        if (typeof dependentVal === "undefined" || dependentVal == '') {
    //            interactionBtnflag = false;
    //        }
    //        if (typeof effectVal === "undefined" || effectVal == '') {
    //            interactionBtnflag = false;
    //        }
    //        
    //        console.log(interactionBtnflag);
    //        if (interactionBtnflag) {
    //            $("#interaction_btn").removeAttr("disabled");
    //            $("#interaction_btn").removeClass("disabled");
    //        } else if (this.value == '0') {
    //            $("#interaction_btn").attr("disabled", "disabled");
    //            $("#interaction_btn").addClass("disabled");
    //        }
    //        console.log("interactionBtnflag", interactionBtnflag);
    //    }
    $(".selector-item_radio").on("click", function(e) {
        checkInteractionButton();
    });

    function addInteractionFun() {
        var independentVal = $("input[name='independent']:checked").val();
        var dependentVal = $("input[name='dependent']:checked").val();
        var effectVal = $("input[name='effect_on']:checked").val();
        var post_id = "{{$post->id}}";

        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            url: "{{getMURL('ajax/add-interaction')}}",
            data: {
                independent_variables_id: independentVal,
                dependent_variables_id: dependentVal,
                effect_id: effectVal,
                post_id
            },
            success: function(data) {
                addInteractionHtml(data.data);
                $('.selector-item_radio').prop('checked', false);

                checkInteractionButton();
            }
        });
    }

    function addInteractionHtml(data) {
        var interaction_id = data.id;
        var icon = iconArray[data.effect_id];
        var effectHtml = '<li class="d-flex justify-content-between align-items-center interaction_id_' + interaction_id + '">' +
            '<span class="icon-li"><i class="fa ' + icon + '"></i></span>' +
            '<div class="h-close">' +
            '<a href="javascript:void(0)" data-val="' + interaction_id + '" class="d-block p-0 delete_interaction"><span class="close-i">X</span></a>' +
            '</div>' +
            '</li>';
        $("#independent_ul").append("<li class='interaction_id_" + interaction_id + "'>" + data.independent_variable.keyword + "</li>");
        $("#dependent_ul").append("<li class='interaction_id_" + interaction_id + "'>" + data.dependent_variable.keyword + "</li>");
        $("#effect_ul").append(effectHtml);

    }
    $(document).on("click", ".delete_interaction", function() {
        var inter_id = $(this).data("val");
        console.log("inter_id", inter_id);

        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            url: "{{getMURL('ajax/delete-interaction')}}",
            data: {
                interaction_id: inter_id
            },
            success: function(data) {
                if (data.status == 1)
                    $(".interaction_id_" + inter_id).remove();
                else
                    showToastrError("Something went wrong, Please try again latter.", "Error");
            }

        });

    });

    $('#single_final_sample_start,#final_sample_start,#final_sample_end').change(function() {
        checkMainSaveButton();
    });

    /* Button Enable/Disable Button Event */
    function checkMainSaveButton() {
        var fsDate = $("input[name='final_sample_date']:checked").val();

        var sDate = '',
            bsDate = '',
            beDate = '';
        if (fsDate == '0') {
            sDate = $('#single_final_sample_start').val();
        } else if (fsDate == '1') {
            bsDate = $('#final_sample_start').val();
            beDate = $('#final_sample_end').val();
        }

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

        if (
            (
                (fsDate == '0' && sDate != undefined && sDate != '') ||
                (fsDate == '1' && bsDate != undefined && bsDate != '' && beDate != undefined && beDate != '')
            )
        ) {
            $(".formSubmitButton").removeClass("disabled");
            $(".formSubmitButton").removeAttr("disabled");
            return false;
        };
    }
    /* Button Enable/Disable Button Event */
    checkMainSaveButton();
</script>
@endpush