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

@section('page_level_css')
@endsection

@section('content')

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="kt-grid kt-grid--hor kt-grid--root">

                @include('member.include.user-info-box')

                <div class="mt-4">
                    <form action="{{getMURL('post/method')}}" method="POST" id="formMethod">
                        @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 [Methods]'}}</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">Methods*</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="post-sub-content-wrapper">
                                                    <!-- <label class="mb-2">Describe the methods that you used to collect your data/samples. You can paste text below or upload documents.</label> -->
                                                    <label class="mb-2">If you upload documents only, please write in the field below, "See attached files".</label>
                                                    <div class="text-area-wrap fix-area">
                                                        <textarea name="method" id="method" class="form-control" rows="8">{{$post->method}}</textarea>
                                                    </div>
                                                </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="uploadPostMethodFile">
                                                                    <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="uploadPostMethodFile">
                                                                    <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="methodFileList">
                                                        <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 ($methodDocument 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>
                                            <label>Key Reagents</label>
                                            <div class="post-left-wrap mb-5">
                                                <div class="pragraph-p mb-5">
                                                    <p>If there are key reagents, instruments, or products include links to them below.</p>
                                                </div>

                                                <div class="form-group mb-3">
                                                    <label class="mb-3">Link</label>
                                                    <input type="text" class="form-control" id="link_text" placeholder="If there are key reagents, instruments, or products">
                                                </div>
                                                <div class="btn-wrap">
                                                    <button type="button" id="SaveLink" class="primary-btn">Save</button>

                                                    <i class="fa fa-refresh fa-spin ml-3 hide" style="font-size:24px;" id="SaveLinkLoader"></i>
                                                </div>
                                            </div>
                                            <div class="image-map-wrap">
                                                <label>Link List:</label>
                                                <div class="post-left-wrap mb-5" id="linkList">
                                                    <div class="pragraph-p mb-5" id="noLink" style="display: {{$PostKeyReagent->count() > 0 ? 'none' : 'block' }}">
                                                        <p>Link Not Found</p>
                                                    </div>
                                                    @foreach ($PostKeyReagent as $val)
                                                    <div class="row linkList mb-3" id="linkList_{{$val->id}}">
                                                        <div class="col-md-11 col-sm-12 col-12">
                                                            <a href="{{$val->link_url}}" target="_blank">
                                                                <div class="linkURLDiv">
                                                                    <img class="linkURLImageView" src="{{getImage($val->link_image)}}">
                                                                    <!-- <iframe class="linkiFrame" src="{{$val->link_url}}" scrolling="no"></iframe> -->
                                                                </div>
                                                            </a>
                                                        </div>
                                                        <div class="col-md-1 col-sm-12 col-12">
                                                            <div class="close-wrapper">
                                                                <a href="javascript:void(0)" class="d-block closeModal" data-id="{{$val->id}}"><span class="close-i">X</span></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </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/study-design/' . $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/result/' . $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>


@endsection

@section('page_level_js')
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>-->
@endsection

@push('footerscript')
<script type="text/javascript">
    /* Disable auto search dropzone class */
    Dropzone.autoDiscover = false;
    /* Disable auto search dropzone class */

    var uploadDropzoneURL = "{{getMURL('ajax/upload-documents')}}";
    var baseURL = "{{getURL('')}}";
    new Dropzone('#uploadPostMethodFile', {
        url: uploadDropzoneURL,
        type: "POST",
        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", 'method');
                }),
                this.on('success', function(file, resp) {
                    AddDocumentOnList(resp.image, resp.original_file_name);
                }),
                this.on('error', function(file, response) {
                    $(file.previewElement).find('.dz-error-message').text(response.messageError);
                }),
                this.on("queuecomplete", function(file, response) {
                    this.removeAllFiles();
                }),
                this.on('removedfile', function(file) {});
        }
    });

    /** On Page Load Functions */
    function AddNoDocument() {
        if ($("#methodFileList tbody tr").length == 0) {
            $("#methodFileList 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>';

        $("#methodFileList tbody").append(listHtml);
        documentCount++;
        AddNoDocument();
    }

    $("#SaveLink").on("click", function() {
        AddLinkOnList();
        
        $("#SaveLinkLoader").css('display', 'inline-block');
    });

    $("#link_text").on("keyup", function() {
        SaveLinkButton();
    });

    SaveLinkButton();

    function SaveLinkButton() {
        var link_text = $('#link_text').val();
        $("#SaveLinkLoader").css('display', 'none');
        if (!ValidateURL(link_text)) {
            $("#SaveLink").attr('disabled', 'disabled');
            $("#SaveLink").addClass("disabled");
        } else {
            $("#SaveLink").removeAttr('disabled');
            $("#SaveLink").removeClass("disabled");
        }
    }

    function AddLinkOnList() {
        var link_text = $("#link_text").val();
        
        $("#SaveLink").attr('disabled', 'disabled');
        $("#SaveLink").addClass("disabled");

        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            url: "{{getMURL('ajax/save-link')}}",
            data: {
                link: link_text,
                post_id: "{{$post->id}}",
            },
            success: function(data) {
                if (data.status == 1) {
                    var linkCount = data.data.id;
                    var linkURL = data.data.link_url;
                    var linkListHtml = '<div class="row linkList mb-3" id="linkList_' + linkCount + '">' +
                        '<div class="col-md-11 col-sm-12 col-12">' +
                        '<a href="' + linkURL + '" target="_blank">' +
                        '<div class="">' +
                        '<img class="linkURLImageView" src="' + baseURL + 'storage/' + data.data.link_image + '">' +
                        // '<iframe class="linkiFrame" src="' + linkURL + '" scrolling="no"></iframe>' +
                        '</div>' +
                        '</a>' +
                        '</div>' +
                        '<div class="col-md-1 col-sm-12 col-12">' +
                        '<div class="close-wrapper">' +
                        '<a href="javascript:void(0);" class="d-block closeModal" data-id="' + linkCount + '"><span class="close-i">X</span></a>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                        $("#link_text").val('');
                        // $("#SaveLink").removeClass('disabled');
                        // $("#SaveLink").attr('disabled', '');
                        $("#linkList").append(linkListHtml);
                        AddNoLink();
                    }
                SaveLinkButton();
            }
        });
        
    }
    $(document).on("click", ".removeFile", function() {
        var docID = $(this).data('id');
        var filename = $("#file_name_" + docID).val();
        var original_id = $(this).data('original_id');

        if (typeof original_id !== "undefined") {
            deleteFile(original_id)
        }

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

    $(document).on("click", ".closeModal", function() {
        var docID = $(this).data('id');
        $("#document_id").val(docID);
        $("#closeModal").modal("show");
    });

    $("#deleteLink").on("click", function() {
        var docID = $("#document_id").val();;
        $.ajax({
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            url: "{{getMURL('ajax/delete-link')}}",
            data: {
                link_id: docID,
            },
            success: function(data) {
                if (data.status == 0) {
                    $("#linkList_" + docID).remove();
                    AddNoLink();
                }
            }
        });
    })

    function AddNoLink() {
        if ($(".linkList").length == 0) {
            $("#noLink").show();
        } else {
            $("#noLink").hide();
        }
    }

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

    $(function() {
        $("#method").keyup(function() {
            checkMainSaveButton();
        });
    });

    /* Button Enable/Disable Button Event */
    function checkMainSaveButton() {
        var method = $("#method").val();

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

        if (method != undefined && method.length >= 10) {
            $(".formSubmitButton").removeClass("disabled");
            $(".formSubmitButton").removeAttr("disabled");
            return false;
        };
    }
    /* Button Enable/Disable Button Event */

    checkMainSaveButton();
    AddNoDocument();
</script>
@endpush