@extends('layouts.member-login')
@section('title','My Post Listing')
@section('page_title','MyPostListing')

@section('page_level_css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/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">
                    <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 mb-4 position-relative">
                                    <!-- <div class="post-slider-wrap mainListingTitleBox">
                                        <div class="post-left-btn mr-2">
                                            <a href="javascript:void(0);">
                                                <i class="fas fa-play"></i>
                                            </a>
                                        </div>
                                        <div class="post-box text-center d-flex align-items-center justify-content-center">
                                            <img src="{{asset('assets/media/extra/post-blue.png')}}">
                                            <h2 class="mb-0 index-title">&nbsp; Posts</h2>
                                        </div>
                                        <div class="post-right-btn ml-2">
                                            <a href="javascript:void(0);">
                                                <i class="fas fa-play"></i>
                                            </a>
                                        </div>
                                    </div> -->

                                    <ul class="filter-ul mb-0 ml-0 mr-0 p-0 mainListingTitleBox">
                                        <li class="{{(Request::segment(1) === 'posts' && !in_array(Request::segment(2), ['data', 'samples', 'skills']) ) ? 'active' : ''}}">
                                            <a href="{{getMURL('posts')}}" title="filter">
                                                <div class="filter-li text-center">
                                                    <span class="content">No filter</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="{{(Request::segment(1) === 'posts' && Request::segment(2) == 'data') ? 'active' : ''}}">
                                            <a href="{{getMURL('posts/data')}}" title="filter">
                                                <div class="filter-li text-center">
                                                    <img src="{{asset('assets/media/extra/human-data-post-black-image.png')}}">
                                                    <span class="content">Data</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="{{(Request::segment(1) === 'posts' && Request::segment(2) == 'samples') ? 'active' : ''}}">
                                            <a href="{{getMURL('posts/samples')}}" title="filter">
                                                <div class="filter-li text-center">
                                                    <img src="{{asset('assets/media/extra/human-data-sample-black-image.png')}}">
                                                    <span class="content">Samples</span>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="{{(Request::segment(1) === 'posts' && Request::segment(2) == 'skills') ? 'active' : ''}}">
                                            <a href="{{getMURL('posts/skills')}}" title="filter">
                                                <div class="filter-li text-center">
                                                    <img src="{{asset('assets/media/extra/human-data-skills-black-image.png')}}">
                                                    <span class="content">Skills</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="grey-bg-wrap">
                                    <div class="post-right-wrapper mb-4">
                                        <div class="title-wrapper mb-4">
                                            <h2 class="secondary-title text-capitalize text-white mb-0">Post Manager</h2>
                                        </div>

                                        <div class="pragraph-p">
                                            <!-- <p>Select a post below to enable post options in the left panel.</p> -->
                                            <p class="post-index-info-line">
                                                Below is a list of all your data, samples, and skills posts.
                                                <span class="info-icon ml-2" data-toggle="modal" data-target="#tooltipBoxPostIndexListing">
                                                    <img src="{{asset('assets/media/extra/tooltip-info-icon-gray.gif')}}">
                                                </span>
                                            </p>
                                        </div>

                                        <div class="post-table-wrapper mt-4" style="overflow: inherit !important;">
                                            <div class="table-responsive">
                                                <table class="table mb-0" id="dataTableList">
                                                    <thead class="post-listing-header">
                                                        <tr>
                                                            <th>Type</th>
                                                            <th style="min-width: 40%; max-width: 40%;">Title</th>
                                                            <th>ID</th>
                                                            <th class="text-center">PI Approval</th>
                                                            <th>Status</th>
                                                            <th>Options</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="post-listing-body">

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->


</div>
<div class="">
    <div class="modal fade" id="CopyPostModal" role="dialog" aria-labelledby="unpublishPostModal" 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" id="GeneModalTitle">Copy Post</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p>You are about to make a copy of the existing post. To continue, click the "Copy" button below.</p>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="primary-btn RestoreConfirmButton" id="CopyConfirmButton" data-dismiss="modal">Copy</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="postArchivedModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header custom-blue-header">
                <h5 class="modal-title">Post Archived</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
            <div class="modal-body pb-0">
                <div class="text-center">
                    <p>Your post was moved to the archive. You can reactivate it at any time by visiting the archive and changing the post settings.</p>
                </div>
            </div>
            <div class="modal-footer border-top-0 d-flex">
                <button type="button" class="btn btn-custom btn-pill font-weight-bold border-radius-50" data-dismiss="modal" id="PostArchiveConfirmButton">OK</button>
            </div>
        </div>
    </div>
</div>
<div class="add-gene-list-modal">
    <div class="modal fade" id="sharePostModal" tabindex="-1" role="dialog" aria-labelledby="closeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document" style="min-width:0px !important">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-white text-capitalize text-left">Share Post</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="post-sub-content-wrapper">
                        <p>Enter email addresses of individuals to send << item >> to (One per line).</p>
                        <div class="row mb-3">
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                <textarea class="check_value_share_post form-control" name="multiple_email" id="multiple_email" rows="6"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn disabled" data-dismiss="modal" id="AddGeneListCloseButton">Cancel</button>
                    <button type="button" title="Save" id="sendRequestSharePost" class="primary-btn text-center d-block disabled" disabled="disabled">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="">
    <div class="modal fade" id="PostDeleteModal" role="dialog" aria-labelledby="PostDeleteModal" 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" id="GeneModalTitle">Deletion Notice</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this post? This will permanently delete it from the system.</p>
                    <span>If you want to save it for later. try archiving it instead.</span>
                </div>
                <div class="modal-footer">
                    <div class="btn-wrap">
                        <button type="button" class="primary-btn" id="DeleteConfirmButton" data-dismiss="modal">Delete</button>
                    </div>
                    <div class="btn-wrap">
                        <button type="button" class="primary-btn" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="">
    <div class="modal fade" id="PostLinkUnlinkModal" role="dialog" aria-labelledby="PostLinkUnlinkModal" 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" id="GeneModalTitle">Link Posts</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>If you have two posts that are related you can let potential collaborators know by linking them. You may want to link posts that originated from the same source, samples, experiment, study, or data set.</p>
                    <p>To link other posts with this post, select the other post(s) from the list below.</p>
                    <div class="row white-box">
                        <div class="col-12">
                            <div class=" col-lg-5">
                                <label>
                                    <input type="checkbox" name="linkPostIds[]" value="None">
                                    Unlink from all posts
                                </label>
                            </div>
                        </div>
                        <div class="row dynamicManageAddLinked" id="dynamicManageAddLinked"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn" id="LinkUnlinkConfirmButton" data-dismiss="modal">Okay</button>
                    <button type="button" class="primary-btn" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>
<button type="button" data-toggle="modal" data-target="#PostLinkUnlinkModal" id="ShowLinkPostModalButton" style="display: none;">Show Link Post</button>


<div class="">
    <div class="modal fade" id="PostLinkUnlinkShowModal" role="dialog" aria-labelledby="PostLinkUnlinkShowModal" 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">Linked Posts</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>This post is linked to the following posts.</p>
                    <p>Linked posts are related. They often originate from the same source, samples, experiment, study, or dataset.</p>
                    <div class="row white-box">
                        <div class="dynamicManageShowLinked" id="dynamicManageShowLinked"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="primary-btn" data-dismiss="modal">Okay</button>
                </div>
            </div>
        </div>
    </div>
</div>
<button type="button" data-toggle="modal" data-target="#PostLinkUnlinkShowModal" id="PostLinkUnlinkShowModalButton" style="display: none;">Show Link Post</button>

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

@endsection

@section('page_level_js')
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/paginations.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script type="text/javascript">
    var $table = $('#dataTableList');
    $table.dataTable({
        responsive: true,
        pagingType: 'full_numbers',
        order: [
            [2, 'desc']
        ],
        lengthMenu: [
            [20, 50, 100, 500, -1],
            [20, 50, 100, 500, "All"]
        ],
        pageLength: 50,
        bPaginate: false,
        processing: true,
        serverSide: true,

        paging: true,
        searching: false,
        info: false,
        lengthChange: false,

        ajax: {
            'url': "{{getMURL('posts/getall')}}",
            'type': 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                filter: "{{$filter ?? ''}}"
            }
        },
        columns: [{
                data: 'post_type',
                sorting: false,
                orderable: false
            },
            {
                data: 'title'
            },
            {
                data: 'post_number'
            },
            {
                data: 'pi_approval',
                sorting: false,
                orderable: false
            },
            {
                data: 'status'
            },
            {
                data: 'options',
                sorting: false,
                orderable: false
            },
        ],
        "columnDefs": [{
                className: "postOptionViewTROption",
                "targets": [0, 1, 2, 3, 4]
            },
            {
                className: "text-center",
                "targets": [3, 4, 5]
            },
            {
                "width": "40%",
                "targets": 1
            }
        ],
        createdRow: function(row, data, dataIndex, cells) {
            $(row).attr('data-id', data.id);
        },
        fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            //console.log(iDisplayIndex);
            if (iDisplayIndex == 0) {
                $('#dataTableList thead th').removeClass('postOptionViewTROption');
            }
        }
    });
    $(document).ready(function() {
        setTimeout(function() {
            $('#dataTableList thead th').removeClass('postOptionViewTROption');
        }, 1500)
    });

    var post_id = '';
    $(document).on("click", ".postOptionCopyOption", function() {
        post_id = $(this).data("id");
        $("#CopyPostModal").modal("show");
    });
    $(document).on("click", ".postOptionViewOption", function() {
        window.location.href = "{{getMURL('post/view/')}}" + $(this).attr("data-id");
    });
    $(document).on("click", ".postOptionViewTROption", function() {
        window.location.href = "{{getMURL('post/view/')}}" + $(this).parents('tr').attr("data-id");
    });
    $(document).on("click", ".postOptionEditOption", function() {
        window.location.href = "{{getMURL('post/title-author/')}}" + $(this).attr("data-id");
    });
    $(document).on("click", ".postOptionSettingOption", function() {
        window.location.href = "{{getMURL('post/setting/')}}" + $(this).attr("data-id");
    });

    $(document).on("click", "#CopyConfirmButton", function() {
        window.location.href = "{{getMURL('ajax/post-copy/')}}" + post_id;
    });

    $(document).on("click", ".postOptionShareOption", function() {
        $('#sendRequestSharePost').attr('data-id', $(this).attr("data-id"));
        $("#sharePostModal").modal("show");
    });

    $(document).on("click", ".postOptionDeleteOption", function() {
        $('#DeleteConfirmButton').attr('data-id', $(this).attr("data-id"));
        $("#PostDeleteModal").modal("show");
    });

    $(document).on("click", ".postOptionArchiveOption", function() {
        $('#PostArchiveConfirmButton').attr('data-id', $(this).attr("data-id"));
        $("#postArchivedModal").modal("show");
    });

    $("#multiple_email").on("keyup", function() {
        var link_text = $(this).val();
        var flag = true
        if (link_text == "") {
            flag = false;
        }
        if (flag) {
            var array = link_text.split(/\r?\n/);
            $.each(array, function(i) {
                if (!ValidateEmail($.trim(array[i])) && array[i] != "") {
                    flag = false;
                }
            });
        }
        checkSharePostButton(flag);
    });

    function checkSharePostButton(flag) {
        if (flag) {
            $("#sendRequestSharePost").removeAttr('disabled');
            $("#sendRequestSharePost").removeClass("disabled");
        } else {
            $("#sendRequestSharePost").attr('disabled', 'disabled');
            $("#sendRequestSharePost").addClass("disabled");
        }
    }

    $("#sendRequestSharePost").on("click", function(e) {
        var postID = $(this).attr('data-id');
        $.ajax({
            url: "{{getMURL('ajax/share-my-post')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': postID,
                'multiple_email': $("#multiple_email").val(),
                'split_by_enter': 1
            },
            success: function(data) {
                if (data.status == 1) {
                    $("#sharePostModal").modal("toggle");
                    $("#multiple_email").val('');
                    checkSharePostButton(false);
                } else {
                    showToastrError(data.message, "Error");
                }
            },
            error: function(errorThrown) {

            }
        });
    });

    $("#DeleteConfirmButton").on("click", function(e) {
        var postID = $(this).attr('data-id');

        $.ajax({
            url: "{{getMURL('ajax/delete-post')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': postID
            },
            success: function(data) {
                if (data.status == 1) {
                    showToastrSuccess(data.message);
                    window.location.reload();
                } else {
                    showToastrError(data.message, "Error");
                }
            },
            error: function(errorThrown) {
                showToastrError("Something was wrong", "Error");
            }
        });
    });

    $("#PostArchiveConfirmButton").on("click", function(e) {
        var postID = $(this).attr('data-id');

        $.ajax({
            url: "{{getMURL('ajax/archive-post')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': postID
            },
            success: function(data) {
                if (data.status == 1) {
                    $('#dataTableList').DataTable().ajax.reload()
                    showToastrSuccess(data.message)
                } else {
                    showToastrError(data.message, "Error");
                }
            },
            error: function(errorThrown) {
                showToastrError("Something was wrong", "Error");
            }
        });
    });


    //$(".postOptionLinkUnlinkOption").on("click", function (e) {
    $(document).on("click", ".postOptionLinkUnlinkOption", function() {
        var postID = $(this).attr('data-id');

        $.ajax({
            url: "{{getMURL('ajax/link-unlink-post-list/')}}" + postID,
            method: "GET",

            success: function(data) {
                if (data.status == 1) {

                    //add html here
                    var selected = data.data.selected;
                    data = data.data.posts;
                    var html = '';
                    $.each(data, function(key, singleItem) {
                        var checkORNot = '';
                        if (jQuery.inArray(singleItem.id, selected) != -1) {
                            checkORNot = 'checked';
                        }
                        html += '<div class="col-12">\n\
                                <div class="form-group row">\n\
                                    <label class="col-form-label mb-0 col-lg-3 text-left"><input type="checkbox" name="linkPostIds[]" value="' + singleItem.id + '" ' + checkORNot + '>' + ((singleItem.post_type == 'Sample') ? 'Samples' : singleItem.post_type) + '</label>\n\
                                    <label class="col-form-label mb-0 col-lg-9">' + singleItem.title + '</label>\n\
                                </div>\n\
                            </div>';
                    });
                    //document.getElementById("dynamicManageAddLinked").innerHTML += html;

                    $('#dynamicManageAddLinked').html(html);
                    $('#LinkUnlinkConfirmButton').attr('data-id', postID);
                    $('#ShowLinkPostModalButton').trigger("click");

                } else {
                    showToastrError(data.message, "Error");
                }
            },
            error: function(errorThrown) {

            }
        });
    });

    $(document).on("click", "#LinkUnlinkConfirmButton", function() {
        var postID = $(this).attr('data-id');
        console.log(postID);
        var OtherCheckedBox = $("input:checked[name^='linkPostIds']").map(function(idx, ele) {
            return $(ele).val();
        }).get();

        $.ajax({
            url: "{{getMURL('ajax/linking-post-data')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': postID,
                'linkPostIds': OtherCheckedBox
            },
            success: function(data) {
                console.log(data);
                if (data.status == 1) {
                    //add html here
                    data = data.data;
                    var html = '';
                    if (data.length != 0) {
                        html += '<ul>';
                        $.each(data, function(key, singleItem) {
                            html += '<li><span>' + singleItem.post_type + ' : </span>' + singleItem.title + '</li>';
                        });
                        html += '</ul>';
                    } else {
                        html += '<div class="col-12"><div class="col-lg-12 text-center"><label>Unlinked All Other Posts.</label></div></div>';
                    }

                    $('#dynamicManageShowLinked').html(html);
                    $('#PostLinkUnlinkShowModalButton').trigger("click");
                    showToastrSuccess(data.message);
                } else {
                    showToastrError(data.message, "Error");
                }
            },
            error: function(errorThrown) {

            }
        });
    });


    checkSharePostButton(false);
</script>
@endpush