@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: 320px;
        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">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">Single Year
                                                                <input type="radio" {{(empty($post->final_sample_end)) ? 'checked="checked"' : ''}} name="radio" value="0">
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        <div class="year-input">
                                                            <input type="text" class="form-control datePicker" name="single_final_sample_start" id="single_final_sample_start" {{(!empty($post->final_sample_end)) ? 'disabled="disabled"' : ''}} autocomplete="off" value="{{(empty($post->final_sample_end)) ? $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" {{(!empty($post->final_sample_end)) ? 'checked="checked"' : ''}} name="radio" value="1">
                                                                <span class="checkmark"></span>
                                                            </label>
                                                        </div>
                                                        <div class="start-year mt-4">
                                                            <div class="year-input">
                                                                <input type="text" {{(empty($post->final_sample_end)) ? 'disabled="disabled"' : ''}} class="form-control datePicker between" name="final_sample_start" id="final_sample_start" autocomplete="off" value="{{(!empty($post->final_sample_end)) ? $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="text" {{(empty($post->final_sample_end)) ? 'disabled="disabled"' : ''}} class="form-control datePicker between" name="final_sample_end" id="final_sample_end" autocomplete="off" value="{{(!empty($post->final_sample_end)) ? $post->final_sample_endjjj : ''}}">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <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.</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="#" 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">Independent 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="fa {{$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>
                                            <label class="d-block mb-3">Additional Endpoints</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" class="form-control" rows="6">{{$post->additional_endpoint}}</textarea>
                                                </div>
                                            </div>
                                            <div class="post-left-wrap mb-5">
                                                <div class="thumbnail-wrapper">
                                                    <div class="pragraph-p">
                                                        <label class="mb-2">File Upload</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>
                                                        </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-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 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-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/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>
                    </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>
<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="https://www.youtube.com/embed/x4r7af2Lcmw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>




@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('post/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 {
                        alert(resp.message)
                    }
                }),
                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 + image + '" 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('post/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=radio]').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 checkInteractionButn() {
        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;
        }
        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) {
        checkInteractionButn()

    });

    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('post/add-interaction')}}",
            data: {
                independent_variables_id: independentVal,
                dependent_variables_id: dependentVal,
                effect_id: effectVal,
                post_id
            },
            success: function(data) {
                console.log('success: ');
                console.log(data);
                addInteractionHtml(data.data);
                $('.selector-item_radio').prop('checked', false);
            }
        });
    }

    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('post/delete-interaction')}}",
            data: {
                interaction_id: inter_id
            },
            success: function(data) {
                if (data.status == 1)
                    $(".interaction_id_" + inter_id).remove();
                else
                    alert("Something went wrong, Please try again latter.");
            }

        });

    });
</script>
@endpush