@extends('layouts.member-login')
@section('title', 'Private Profile - View Posts')
@section('page_title', 'PrivateProfile')

@section('page_level_css')
<link href="{{ asset('assets/vendors/general/select2/dist/css/select2.css') }}" rel="stylesheet" type="text/css" />
<style>
    .dz-image img {
        position: relative;
        height: 100%;
    }
</style>
<link href="{{asset('assets/vendors/general/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@php
$textLength = 250;
@endphp

<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="my-profile-cms-content">
                        <div class="row">
                            <!-- <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12">
                                <div class="grey-bg-wrap h-100">
                                    <div class="post-right-wrapper main-box-white h-100 d-flex flex-column">
                                        <button class="primary-btn btn-add btn-lg" onclick="location.href='{{getMURL("post/title-author")}}';"><i class="fas fa-plus"></i>Create New Post</button>
                                    </div>
                                </div>
                            </div> -->
                            @include('member.include.2026-pn')
                            <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12">
                                <div class="grey-bg-wrap post-section">
                                    <div class="mb-4">
                                        <div class="title-wrapper mb-4">
                                            <h2 class="secondary-title text-capitalize text-white mb-0">@if(isset($search_para) && !empty($search_para)) My Posts: Search Results @else My Posts @endif</h2>
                                        </div>
                                        <div class="main-box-white mb-4">
                                            <div class="mb-4 position-relative">
                                                <form method="post" action="{{Request::url()}}">
                                                    @csrf
                                                    <div class="form-group has-feedback d-flex">
                                                        <input type="text" class="form-control input-search" name="search_q" id="search" placeholder="What are you looking for?" value="@if(isset($search_para) && !empty($search_para)){{$search_para}}@endif">
                                                        <button type="submit" class="primary-btn ml-4">Search </button>
                                                    </div>
                                                </form>
                                                <ul class="filter-ul border mt-3 mb-0 ml-0 mr-0 p-0 mainListingTitleBox">
                                                    <li class="@if(Request::url()==route('member.private.profile','all')) active @endif">
                                                        <a href="{{route('member.private.profile','all')}}" title="filter">
                                                            <div class="filter-li text-center">
                                                                <span class="content">All</span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="@if(Request::url()==route('member.private.profile','data')) active @endif">
                                                        <a href="{{route('member.private.profile','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="@if(Request::url()==route('member.private.profile','samples')) active @endif">
                                                        <a href="{{route('member.private.profile','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="@if(Request::url()==route('member.private.profile','skills')) active @endif">
                                                        <a href="{{route('member.private.profile','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>
                                                    <li class="@if(Request::url()==route('member.private.profile','wishlist')) active @endif">
                                                        <a href="{{route('member.private.profile','wishlist')}}" title="filter">
                                                            <div class="filter-li text-center">
                                                                <img src="{{asset('assets/media/extra/show-wishlist-black-icon.png')}}">
                                                                <span class="content">Wishlist</span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        @foreach ($posts as $wlp)
                                        <div class="main-box-white mb-4" id="postItemID{{$wlp->id}}">
                                            <div class="data-box-wrap">
                                                <div class="row">
                                                    <div class="col-lg-1 text-center">
                                                        <div class="post-type-selector-image feed-redirection" data-post_id="{{$user->id}}" data-action="User" data-url="" style="cursor: pointer">

                                                            <img src="{{getImage($user->image) ?? asset('assets/media/extra/neutron-star.png')}}" alt="Profile Image" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-11 col-sm-12">
                                                        <div class="data-right-content">
                                                            <div class="d-flex justify-content-between align-items-center">
                                                                <div class="title-wrap">
                                                                    <label class="m-0">{{$user->full_name}}</label>
                                                                </div>
                                                                <div class="action wishlistWhoSee">
                                                                    <!-- <a class="mr-2" href="#"><i class="fa fa-lock mr-2"></i>Only Me</a> -->
                                                                    @if($wlp->who_see == 'OnlyMe') <a class="mr-2" href="javascript:void(0);"><i class="fa fa-lock mr-2"></i> Only Me</a>
                                                                    @elseif(in_array($wlp->who_see, ['Colleagues', 'TheirColleagues', 'ColleaguesDays'])) <a class="mr-2" href="javascript:void(0);"><i class="fa fa-lock mr-2"></i> Close Colleagues</a>
                                                                    @endif

                                                                    @if($wlp->type=="Post")
                                                                    <button class="edit" onclick='window.location="{{getMURL('post/title-author/' . $wlp->id)}}"'><i class="fa fa-edit"></i></button>
                                                                    <button type="button" class="delete archivePostItem" data-val="{{$wlp->id}}"><i class="fa fa-times"></i></button>
                                                                    @else
                                                                    <button type="button" class="edit editWishlistItem" data-val="{{$wlp->id}}"><i class="fa fa-edit"></i></button>
                                                                    <button type="button" class="delete archiveWishlistItem" data-val="{{$wlp->id}}"><i class="fa fa-times "></i></button>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="pragraph-p">
                                                                @if($user->role == 'General')
                                                                @php $pi = explode(' ' ,$user->investigator_name); $pi = $pi[1] ?? $pi[0]; @endphp
                                                                <p class="m-0">{{$pi}} Laboratory</p>
                                                                @endif
                                                                <p class="m-0">{{$user->research_name}}</p>
                                                            </div>
                                                            <div class="date">
                                                                <span style="font-size: 13px;">{{\Carbon\Carbon::parse($wlp->approved_time)->format('F j, Y g:i A')}}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mt-2">
                                                    <div class="col-sm-12 col-md-2 text-center feed-redirection" data-post_id="{{$wlp->type=='Wishlist'?$user->id:$wlp->id}}" data-action="{{$wlp->type}}" data-url="" style="cursor: pointer">
                                                        <div class="post-type-selector-image">
                                                            <!-- Type wise image -->
                                                            @if($wlp->type=="Wishlist")
                                                            <img src="{{asset('assets/media/extra/show-wishlist-icon.png')}}">
                                                            @elseif($wlp->post_type == "Data")
                                                            <img src="{{asset('assets/media/extra/data-' . strtolower($wlp->post_origin) . '-subjects-icon.png')}}">
                                                            @elseif($wlp->post_type == "Sample")
                                                            <img src="{{asset('assets/media/extra/samples-' . strtolower($wlp->post_origin) . '-subjects-icon.png')}}">
                                                            @elseif($wlp->post_type == "Skills")
                                                            <img src="{{asset('assets/media/extra/skills-' . strtolower($wlp->post_origin) . '-subjects-icon.png')}}">
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12 col-md-10 col-sm-12">
                                                        <div class="data-right-content">
                                                            <div class="d-flex justify-content-between align-items-center feed-redirection" data-post_id="{{$wlp->type=='Wishlist'?$user->id:$wlp->id}}" data-action="{{$wlp->type}}" data-url="" style="cursor: pointer">
                                                                <h3 class="m-0">{{$wlp->title}}</h3>
                                                            </div>
                                                            <table class="table table-borderless my-post feed-redirection" data-post_id="{{$wlp->type=='Wishlist'?$user->id:$wlp->id}}" data-action="{{$wlp->type}}" data-url="" style="cursor: pointer">
                                                                <tbody>
                                                                    @if($wlp->type == "Wishlist")
                                                                    <tr>
                                                                        <th scope="row">Wants:</th>
                                                                        <td>
                                                                            @foreach($wlp->want as $key => $want) {{$want->type}} @isset($wlp->want[$key + 1]), @endisset @endforeach
                                                                        </td>
                                                                    </tr>
                                                                                                                                                @if($mainPostSpecies != "")
                                                                        <tr>
                                                                            <th scope="row">Species:</th>
                                                                            <td>
                                                                                <i>{{$mainPostSpecies}}</i>
                                                                            </td>
                                                                        </tr>
                                                                        @endif
                                                                    @endif

                                                                    @if($wlp->type == "Post")
                                                                    <tr>
                                                                        <th scope="row">Offering:</th>
                                                                        <td>{{($wlp->post_type == 'Sample') ? 'Samples' : $wlp->post_type}}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th scope="row">Origin:</th>
                                                                        <td>{{config("const.post_type.".$wlp->post_origin)}}</td>
                                                                    </tr>
                                                                                                                                        @if($mainPostSpecies != "")
                                                                    <tr>
                                                                        <th scope="row">Species:</th>
                                                                        <td>
                                                                            <i>{{$mainPostSpecies}}</i>
                                                                        </td>
                                                                    </tr>
                                                                    @endif

                                                                    <tr>
                                                                        <th scope="row">Keywords:</th>
                                                                        <td>
                                                                            @foreach($wlp->PostKeywords as $key => $keyword){{$keyword->keyword}}@isset($wlp->PostKeywords[$key + 1]), @endisset
                                                                            @endforeach
                                                                        </td>
                                                                    </tr>
                                                                    @endif
                                                                </tbody>
                                                            </table>
                                                            <div class="pragraph-p mb-4 postMessageBox">
                                                                @php
                                                                $stringLength = strlen($wlp->description);
                                                                @endphp
                                                                <p class="research-description">
                                                                    {!!nl2br(substr($wlp->description, 0, $textLength))!!}@if($stringLength >= $textLength)<a class="read-more-show bold hide" href="javascript:void(0);" id="NoIdAssign"> See More</a><span class="read-more-content">{!!nl2br(substr($wlp->description, $textLength))!!}<a class="read-more-hide bold hide" href="javascript:void(0);" more-id="NoIdAssign"> See Less</a></span>@endif
                                                                </p>
                                                                @php
                                                                $postImg = App\Models\PostDocument::select('name')->where(['type'=>'Thumbnail','post_id'=>$wlp->id])->first();
                                                                @endphp
                                                                @if(!empty($postImg->name) && Storage::disk('public')->exists($postImg->name))
                                                                <div class="image-box mb-2">
                                                                    <img src="{{ getImage($postImg->name) }}" class="img-fluid">
                                                                </div>
                                                                @endif
                                                                <!-- <a class="text-decoration-underline" href="#">View comments</a> -->
                                                                <!-- <a class="text-decoration-underline ShowHideMessageBox" data-toggle="collapse" href="#viewComments{{$wlp->id}}" role="button" aria-expanded="false" aria-controls="viewComments" data-text="Collapse comments">View {{$wlp->message_count ?? 0}} comments</a> -->

                                                                <a class="text-decoration-underline ShowMessageBox viewCollapseComment" data-toggle="collapse" href="#viewComments{{$wlp->id}}" role="button" aria-expanded="false" aria-controls="viewComments" data-post-id="{{$wlp->id}}" data-current-comment="3" data-total-comment="{{$wlp->message_count ?? 0}}">View {{$wlp->message_count ?? 0}} comments</a>
                                                                <a class="text-decoration-underline HideMessageBox hideCollapseComment" data-toggle="collapse" href="javascript:void(0);" role="button" aria-expanded="false" aria-controls="viewComments" data-post-id="{{$wlp->id}}" style="display: none;" data-current-comment="3" data-total-comment="{{$wlp->message_count ?? 0}}">Collapse comments</a>
                                                                <a class="text-decoration-underline viewMoreMessageBox viewMoreComment" href="javascript:void(0);" role="button" data-total-comment="{{$wlp->message_count ?? 0}}" data-current-comment="3" data-post-id="{{$wlp->id}}" style="display: none;">View More comments</a>

                                                                <!-- View all comments -->
                                                                <div class="row justify-content-center collapse" id="viewComments{{$wlp->id}}">
                                                                    <div class="col-lg-11 offset-1">
                                                                        <div class="comment-form">
                                                                            @foreach($wlp->message as $key => $message)
                                                                            <div class="mainMessage singleMessageClass {{($key >= 3) ? 'hideMessage' : ''}}">
                                                                                <div class="row d-flex">
                                                                                    <div class="col-sm-12 col-md-2">
                                                                                        <div class="post-type-selector-image profile-image">
                                                                                            <img src="{{ getImage($message->user->image) ?? asset('assets/media/extra/neutron-star.png') }}" class="img-fluid">
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-sm-12 col-md-10">
                                                                                        <div class="d-flex justify-content-between align-items-center height-20">
                                                                                            <label class="m-0 userNameClass">{{$message->user->full_name ?? ''}}, {{$message->user->research_name ?? ''}}</label>
                                                                                            <button type="button" class="edit likeMessage" data-id="{{$message->id}}" data-post-id="{{$wlp->id}}" data-action="{{($message->user_count != 0) ? 'Unlike' : 'Like'}}"><i class="{{($message->user_count != 0) ? 'fa' : 'far'}} fa-thumbs-up"></i></button>
                                                                                        </div>
                                                                                        <p class="m-0 height-20 messageClass">{{$message->message}}</p>
                                                                                        <div class="d-flex height-20 comment-history">
                                                                                            <button type="button" class="edit timeStampClass"><span class="date sub-text">{{timeAgoString($message->created_at)}}</span></button>
                                                                                            <button type="button" class="edit likeCountClass"><span class="like sub-text">{{$message->likes_count}} like</span></button>
                                                                                            <button type="button" class="edit replyClass" data-id="{{$message->id}}"><span class="reply sub-text">Reply</span></button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                @foreach($message->reply as $reply)
                                                                                <div class="row d-flex singleMessageClass reply">
                                                                                    <div class="col-sm-12 col-md-2">
                                                                                        <div class="post-type-selector-image profile-image">
                                                                                            <img src="{{ getImage($reply->user->image) ?? asset('assets/media/extra/neutron-star.png') }}" class="img-fluid">
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-sm-12 col-md-10">
                                                                                        <div class="d-flex justify-content-between align-items-center height-20">
                                                                                            <label class="m-0 userNameClass">{{$reply->user->full_name ?? ''}}, {{$reply->user->research_name ?? ''}}</label>
                                                                                            <button type="button" class="edit likeMessage" data-id="{{$reply->id}}" data-post-id="{{$wlp->id}}" data-action="{{($reply->user_count != 0) ? 'Unlike' : 'Like'}}"><i class="{{($reply->user_count != 0) ? 'fa' : 'far'}} fa-thumbs-up"></i></button>
                                                                                        </div>
                                                                                        <p class="m-0 height-20 messageClass">{{$reply->message}}</p>
                                                                                        <div class="d-flex height-20 comment-history">
                                                                                            <button type="button" class="edit timeStampClass"><span class="date sub-text">{{timeAgoString($reply->created_at)}}</span></button>
                                                                                            <button type="button" class="edit likeCountClass"><span class="like sub-text">{{$reply->likes_count}} like</span></button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                @endforeach
                                                                            </div>
                                                                            @endforeach
                                                                            <div class="row d-flex singleMessageClass message">
                                                                                <div class="col-sm-12 col-md-1">
                                                                                    <div class="post-type-selector-image profile-image">
                                                                                        <img src="{{ getImage(\Auth::user()->image) ?? asset('assets/media/extra/neutron-star.png') }}" class="img-fluid">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-sm-12 col-md-9">
                                                                                    <input type="text" class="form-control inputTextMessage" placeholder="Add a comment...">
                                                                                </div>
                                                                                <div class="col-sm-12 col-md-2">
                                                                                    <button type="button" class="primary-btn sendWishlistMessage" data-id="{{$wlp->id}}" data-parent="">Post</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="social-actions d-flex justify-content-end">
                                                                <div class="row m-0 align-items-center wishlistViewCount">
                                                                    <i class="far fa-eye"></i>
                                                                    <span>{{$wlp->view_count ?? rand(1111, 9999)}}</span>
                                                                </div>
                                                                <div class="row m-0 align-items-center wishlistShowSocialCounter wishlistLikeCount" data-id="{{$wlp->id}}" data-type="Like" data-toggle="modal" data-target="#viewWishlistSocialCounter">
                                                                    <i class="far fa-thumbs-up"></i>
                                                                    <span>{{$wlp->like_count ?? rand(1111, 9999)}}</span>
                                                                </div>
                                                                <div class="row m-0 align-items-center wishlistShowSocialCounter wishlistShareCount" data-id="{{$wlp->id}}" data-type="Share" data-toggle="modal" data-target="#viewWishlistSocialCounter">
                                                                    <i class="fas fa-share"></i>
                                                                    <span>{{$wlp->reply_count ?? rand(1111, 9999)}}</span>
                                                                </div>
                                                                <div class="row m-0 align-items-center wishlistShowSocialCounter wishlistReplyCount" data-id="{{$wlp->id}}" data-type="Reply" data-toggle="modal" data-target="#viewWishlistSocialCounter">
                                                                    <i class="far fa-paper-plane"></i>
                                                                    <span>{{$wlp->share_count ?? rand(1111, 9999)}}</span>
                                                                </div>
                                                                <div class="row m-0 align-items-center wishlistShowSocialCounter wishlistSaveCount" data-id="{{$wlp->id}}" data-type="Save" data-toggle="modal" data-target="#viewWishlistSocialCounter">
                                                                    <i class="far fa-bookmark"></i>
                                                                    <span>{{$wlp->save_count ?? rand(1111, 9999)}}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>
<!-- Modal-->
<div class="modal post-section" id="viewWishlistSocialCounter">
    <div class="modal-dialog edit-popup">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Responses</h4>
                <button type="button" class="btn-close close" data-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div class="col-12 p-0">
                    <ul class="filter-ul mt-3 mb-0 ml-0 mr-0 p-0 nav nav-tabs" role="tablist">
                        <li class="nav-item active" id="wishlistTabAll">
                            <a class="nav-link wishlistShowSocialCounter" href="#wishlistAllData" title="filter" role="tab" data-toggle="tab" data-id="" data-type="All">
                                <div class="filter-li text-center">
                                    <span class="content">All</span>
                                </div>
                            </a>
                        </li>
                        <li class="nav-item" id="wishlistTabLike">
                            <a class="nav-link wishlistShowSocialCounter" href="#wishlistAllData" title="filter" role="tab" data-toggle="tab" data-id="" data-type="Like">
                                <div class="filter-li text-center">
                                    <i class="fa fa-thumbs-up"><sub class="count">63</sub></i>
                                    <span class="content">Likes</span>
                                </div>
                            </a>
                        </li>
                        <li class="nav-item" id="wishlistTabReply">
                            <a class="nav-link wishlistShowSocialCounter" href="#wishlistAllData" title="filter" role="tab" data-toggle="tab" data-id="" data-type="Reply">
                                <div class="filter-li text-center">
                                    <i class="fa fa-envelope"><sub class="count">85</sub></i>
                                    <span class="content">Replies</span>
                                </div>
                            </a>
                        </li>
                        <li class="nav-item" id="wishlistTabShare">
                            <a class="nav-link wishlistShowSocialCounter" href="#wishlistAllData" title="filter" role="tab" data-toggle="tab" data-id="" data-type="Share">
                                <div class="filter-li text-center">
                                    <i class="fa fa-paper-plane"><sub class="count">42</sub></i>
                                    <span class="content">Shared</span>
                                </div>
                            </a>
                        </li>
                        <li class="nav-item" id="wishlistTabSave">
                            <a class="nav-link wishlistShowSocialCounter" href="#wishlistAllData" title="filter" role="tab" data-toggle="tab" data-id="" data-type="Save">
                                <div class="filter-li text-center">
                                    <i class="fa fa-bookmark"><sub class="count">57</sub></i>
                                    <span class="content">Saved</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="wishlistAllData">
                            <div class="filter-result"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="editWishlistItemPopup">
    <div class="modal-dialog edit-popup">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Edit Wishlist</h4>
                <button type="button" class="btn-close close" data-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div class="p-0">
                    <div class="row wishlist">
                        <div class="col-12">
                            <div class="row my-3 form-group d-flex align-items-center">

                                <div class="col-md-12 row align-items-center">
                                    <div class="col-sm-12 col-md-2">
                                        <div class="btn-add text-center"><img class="img-fluid" src="{{asset('assets/media/extra/show-wishlist-icon.png')}}"></div>
                                    </div>
                                    <div class="col-sm-12 col-md-6">
                                        <label class="labels col-sm-12 new-wishlist-post-title text-left">Edit Wishlist Post</label>
                                    </div>
                                </div>

                                <div class="col-md-10 row mt-4 offset-2">
                                    <div class="row col-md-6">
                                        <label class="labels col-sm-12 add-wishlist-want-title text-left">Select the type of resource(s) you are seeking:</label>
                                        <div class="custom-checkbox col-md-12 ml-3">
                                            <input type="hidden" name="editWishlistPostId" id="editWishlistPostId" value="" />
                                            <label class="col-12">
                                                <input type="checkbox" name="editWishlistWant[]" id="editWishlistData" value="Data" />
                                                <div class="edit-wishlist-want-title">
                                                    <span>Data</span>
                                                    <img class="img-fluid button-post-icon" src="{{asset('assets/media/extra/human-data-post-black-image.png')}}">
                                                </div>
                                            </label>
                                            <label class="col-12">
                                                <input type="checkbox" name="editWishlistWant[]" id="editWishlistSample" value="Sample" />
                                                <div class="edit-wishlist-want-title">
                                                    <span>Samples</span>
                                                    <img class="img-fluid button-post-icon" src="{{asset('assets/media/extra/human-data-sample-black-image.png')}}">
                                                </div>
                                            </label>
                                            <label class="col-12 disabled disabled-field-gray">
                                                <input type="checkbox" name="editWishlistWant[]" id="editWishlistSkills" value="Skills" />
                                                <div class="edit-wishlist-want-title">
                                                    <span>Skills</span>
                                                    <img class="img-fluid button-post-icon" src="{{asset('assets/media/extra/human-data-skills-black-image.png')}}">
                                                </div>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="row col-md-6">
                                        <label class="labels mb-2 mr-2 col-md-12 text-left">Visibility:</label>
                                        <label class="labels col-md-12 add-wishlist-want-title text-left">Who can see this post?</label>
                                        <div class="d-flex ml-3" style="flex-direction: column; align-items: start !important;">
                                            <div class="form-check ml-4 mb-2 d-flex align-items-center">
                                                <input type="radio" name="editWishlistWhoSee" id="editWishlistWhoSeePublic" value="Public">
                                                <label for="editWishlistWhoSeePublic">LabPair Network</label>
                                            </div>
                                            <div class="form-check ml-4 mb-2 d-flex align-items-center disabled disabled-field-gray">
                                                <input type="radio" name="editWishlistWhoSee" id="editWishlistWhoSeeColleagues" value="Colleagues">
                                                <label for="editWishlistWhoSeeColleagues">Close Colleagues</label>
                                            </div>
                                            <div class="form-check ml-4 d-flex align-items-center">
                                                <input type="radio" name="editWishlistWhoSee" id="editWishlistWhoSeeOnlyMe" value="OnlyMe">
                                                <label for="editWishlistWhoSeeOnlyMe">Only Me</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-10 row mt-4 offset-2">
                                <div class="col-md-3">
                                    <label class="labels col-md-12 add-wishlist-want-title">What Species?</label>
                                    <label class="labels col-md-12 add-wishlist-want-title">(Optional)</label>
                                </div>
                                <div class="col-md-9">
                                    <a class="text-decoration-underline" href="#" data-toggle="modal" data-target="#addSpacies">+ Add Species</a>
                                    <div class="list-added col-12 outside-species-list" id="displaySpeciesOutsideList" style="display: none;">
                                        <ul id="listOfWishlistSpeciesOutsideBox"></ul>
                                    </div>
                                    <a class="text-decoration-underline" href="#" data-toggle="modal" data-target="#addSpacies" id="showMoreSpeciesDisplay" style="display: none;">Show more...</a>
                                </div>
                            </div>

                            <div class="form-group mt-2 d-flex align-items-center">
                                <input class="form-control" type="text" placeholder="Add title" name="editWishlistTitle" id="editWishlistTitle">
                            </div>
                            <div class="mb-2">
                                <textarea rows="6" class="form-control" type="text" placeholder="Add Description&#13;&#10;What data, samples, or skills do you need for your next publication?" name="editWishlistDescription" id="editWishlistDescription"></textarea>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex">
                <button type="reset" class="primary-btn" id="resetEditWishlistButton" data-dismiss="modal">Cancel</button>
                <button type="button" class="primary-btn" id="submitEditWishlistButton" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="addSpacies">
    <div class="modal-dialog edit-popup">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Add Species</h4>
                <button type="button" class="btn-close close" data-dismiss="modal"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">

                <div class="p-0">
                    <div class="row mt-2">
                        <div class="col-md-12 mb-2 searchSpeciesDiv">
                            <label class="labels m-0">LabPair uses the integrated taxonomic system (ITIS.gov) for species identification.</label>
                            <select class="form-control w-100 kt-select2" id="searchSpecies" name="searchSpecies">
                                <option></option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12 mb-2">
                            <label class="labels mb-2">Quick ref species</label>
                            <div class="two-row col-12" id="searchWishlistSpeciesCheckBox">
                                @foreach($posts->species as $specie)
                                <div class="form-check ml-4 p-0 d-flex align-items-center justify-content-between">
                                    <input class="wishlistSpeciesCheckbox" type="checkbox" id="wishlist_species_{{$specie->id}}" name="wishlist_species[]" value="{{$specie->id}}" data-val="{{$specie->name}}">
                                    <label for="wishlist_species_{{$specie->id}}">{{$specie->name}}</label>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <label class="labels mb-2">Species Added :</label>
                        <div class="list-added col-12" id="displaySpeciesList" style="display: none;">
                            <ul id="listOfWishlistSpeciesBox"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex">
                <button type="reset" class="primary-btn" id="resetSpeciesButton" data-dismiss="modal">Cancel</button>
                <button type="button" class="primary-btn" id="submitSpeciesButton" data-dismiss="modal">Save</button>
            </div>


        </div>
    </div>
</div>

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

@section('page_level_js')
<script src="//cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>
<script src="{{ asset('assets/vendors/general/select2/dist/js/select2.full.js') }}" type="text/javascript"></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">
    /* Select2 Search With Dynamic Keyword */
    $("#searchSpecies").select2({
        placeholder: "Please enter the first 4 characters of the genus or species",
        allowClear: true,
        ajax: {
            url: "{{getMURL('ajax/search-species')}}",
            dataType: 'json',
            delay: 250,
            //type:'POST',
            data: function(params) {
                return {
                    search: params.term,
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 10) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function(markup) {
            return markup;
        }, // let our custom formatter work
        minimumInputLength: 4,
        templateResult: formatRepo, // omitted for brevity, see the source of this page
        templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    }).on('select2:select', function(e) {
        var speciesData = e.params.data;
        // searchWishlistSpeciesCheckBox = Checkbox
        $("#searchWishlistSpeciesCheckBox").append('<div class="form-check ml-4 p-0 d-flex align-items-center justify-content-between ExtraNotDefaultCheckbox SpeciesBoxId' + speciesData.id + '"><input class="wishlistSpeciesCheckbox" type="checkbox" id="wishlist_species_' + speciesData.id + '" name="wishlist_species[]" value="' + speciesData.id + '" data-val="' + speciesData.name + '" checked><label for="wishlist_species_' + speciesData.id + '">' + speciesData.name + '</label></div>');
        // listOfWishlistSpeciesBox = Selected Species Keyword
        var htmlSpecies = '<li class="SpeciesBoxId' + speciesData.id + '"><header><span class="mx-2">' + speciesData.name + '</span><i class="fa fa-times deleteWishlistSpecies" data-val="' + speciesData.id + '"></i></header></li>';
        document.getElementById("listOfWishlistSpeciesBox").innerHTML += htmlSpecies;

        var outsideSpeciesListCount = $('#listOfWishlistSpeciesOutsideBox li').length;
        if (outsideSpeciesListCount < 2) {
            document.getElementById("listOfWishlistSpeciesOutsideBox").innerHTML += htmlSpecies;
        } else {
            document.getElementById("listOfWishlistSpeciesOutsideBox").innerHTML +=
                '<li class="SpeciesBoxId' + speciesData.id + '" style="display:none;"><header><span class="mx-2">' + speciesData.name + '</span><i class="fa fa-times deleteWishlistSpecies" data-val="' + speciesData.id + '"></i></header></li>';
        }


        resetSpeciesListBox();

        // $('#wishlist_species_' + speciesData.id).prop('checked', true);
        //
    }).on('select2:clear', function(e) {
        console.log('Fire Clear Event');
    });

    function formatRepo(repo) {
        if (repo.loading) return repo.text;
        var markup = "<div class='select2-result-repository clearfix main-species-div'>" +
            "<div class='select2-result-repository__meta'>" +
            "<div class='species-code-div'>" + repo.code + "</div>" +
            "<div class='species-name-div'>" + repo.name + "</div>" +
            "<div class='species-type-div'>" + repo.type + "</div>" +
            "</div></div>";
        return markup;
    }

    function formatRepoSelection(repo) {
        return repo.name || repo.text;
    }

    $(document).on('click', '.viewCollapseComment', function() {
        $(this).hide();
        $(this).parents('.postMessageBox').find('.viewMoreComment').show();

        var currentMessageCount = parseInt($(this).attr('data-current-comment'));
        var totalMessageCount = parseInt($(this).attr('data-total-comment'));
        if (currentMessageCount >= totalMessageCount) {
            $(this).parents('.postMessageBox').find('.viewCollapseComment,.viewMoreComment').hide();
            $(this).parents('.postMessageBox').find('.hideCollapseComment').show();
            console.log('Hide show more button and show collapse');
        }
    });
    $(document).on('click', '.hideCollapseComment', function() {
        $(this).hide();
        $(this).parents('.postMessageBox').find('.viewCollapseComment').show();
        $("#viewComments" + $(this).attr('data-post-id')).removeClass('show');
    });

    $(document).on('click', '.viewMoreComment', function() {
        var currentMessageCount = parseInt($(this).attr('data-current-comment'));
        var totalMessageCount = parseInt($(this).attr('data-total-comment'));
        var postId = $(this).attr('data-post-id');

        currentMessageCount += 3;
        if (currentMessageCount >= totalMessageCount) {
            $(this).hide();
            $(this).parents('.postMessageBox').find('.hideCollapseComment').show();
        }
        $(this).parents('.postMessageBox').find('.viewCollapseComment,.hideCollapseComment,.viewMoreComment').attr('data-current-comment', currentMessageCount);
        //viewCollapseComment
        var removeMessageIdentifire = '#viewComments' + postId + ' .mainMessage.singleMessageClass:lt(' + currentMessageCount + ')';
        $(removeMessageIdentifire).removeClass('hideMessage');
    });

    /* Drag & Drop Dragula JS */
    dragula([
        document.getElementById("pronounces"),
    ]);
    /* Drag & Drop Dragula JS */
    console.log('last push code');

    // Hide the extra content initially
    $('.read-more-content').addClass('hide');
    $('.read-more-show, .read-more-hide').removeClass('hide');
    // Set up the toggle effect:
    $(document).on('click', '.read-more-show', function(e) {
        $(this).next('.read-more-content').removeClass('hide');
        $(this).addClass('hide');
        e.preventDefault();
    });
    $(document).on('click', '.read-more-hide', function(e) {
        $(this).parent('.read-more-content').addClass('hide');
        var moreid = $(this).attr("more-id");
        $('.read-more-show#' + moreid).removeClass('hide');
        e.preventDefault();
    });

    //Delete post
    $(document).on('click', '.archivePostItem', function() {
        var id = $(this).attr('data-val');
        let $mainPostBox = $(this);
        $.ajax({
            url: "{{getMURL('ajax/archive-post')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': id
            },
            success: function(data) {
                if (data.status == 1) {
                    var archiveHtml = '<a class="text-decoration-underline" href="javascript:void(0);">Archive</a>';
                    var html = '<div class="pragraph-p"><p class="m-0">Post has been moved to the ' + archiveHtml + '. This post will no longer appear on your profile or anyone\'s home feed. To permanently delete this post, please go to ' + archiveHtml + '.</p></div>';
                    $('#postItemID' + id).find('.data-box-wrap').remove();
                    $('#postItemID' + id).html(html);
                    showToastrSuccess(data.message, 'Post Archive');
                } else {
                    showToastrError(data.message, 'Post Archive');
                }
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', 'Post Archive');
            }
        });
    });
    //Delete wishlist
    $(document).on('click', '.archiveWishlistItem', function() {
        var id = $(this).attr('data-val');
        let $mainWishlistBox = $(this);
        $.ajax({
            url: "{{getMURL('ajax/archive-wishlist')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: {
                'post_id': id
            },
            success: function(data) {
                if (data.status == 1) {
                    var archiveHtml = '<a class="text-decoration-underline" href="javascript:void(0);">Archive</a>';
                    var html = '<div class="pragraph-p"><p class="m-0"><strong>"' + data.data.title + '"</strong> has been moved to the ' + archiveHtml + '. This post will no longer appear on your profile or anyone\'s home feed. To permanently delete this post, please go to ' + archiveHtml + '.</p></div>';
                    $('#wishlistItemID' + data.data.id).find('.data-box-wrap').remove();
                    $('#wishlistItemID' + data.data.id).html(html);
                    showToastrSuccess(data.message, 'Archive Wishlist');
                } else {
                    showToastrError(data.message, 'Archive Wishlist');
                }
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', 'Archive Wishlist');
            }
        });
    });
    //Edit wishlist
    $(document).on('click', '.editWishlistItem', function() {
        var formData = {};
        formData.post_id = $(this).attr('data-val');

        let $mainWishlistBox = $(this);
        $.ajax({
            url: "{{getMURL('ajax/get-wishlist-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            success: function(data) {
                if (data.status == 1) {
                    data = data.data;
                    $('#searchWishlistSpeciesCheckBox .extra-added').remove();
                    $('#listOfWishlistSpeciesBox,#listOfWishlistSpeciesOutsideBox').html('');
                    $('#searchWishlistSpeciesCheckBox .wishlistSpeciesCheckbox').prop('checked', false);
                    $('#showMoreSpeciesDisplay').hide();

                    $('#editWishlistPostId').val(data.id);
                    $('#editWishlistTitle').val(data.title);
                    $('#editWishlistDescription').val(data.description);
                    $('#editWishlistWhoSee' + data.who_see).prop('checked', true);

                    var want = data.want;
                    want.forEach(function(item, index) {
                        $('#editWishlist' + item.type).prop('checked', true);
                    });
                    setTimeout(function() {
                        var species = data.species;
                        species.forEach(function(item, index) {
                            var checkAvailable = $('#wishlist_species_' + item.id).length;
                            if (! checkAvailable) {
                                document.getElementById("searchWishlistSpeciesCheckBox").innerHTML +=
                                '<div class="form-check ml-4 p-0 d-flex align-items-center justify-content-between extra-added"><input class="wishlistSpeciesCheckbox" type="checkbox" id="wishlist_species_' + item.id + '" name="wishlist_species[]" value="' + item.id + '" data-val="' + item.name + '"><label for="wishlist_species_' + item.id + '">' + item.name + '</label></div>';
                            }
                            var htmlSpecies = '<li class="SpeciesBoxId' + item.id + '"><header><span class="mx-2">' + item.name + '</span><i class="fa fa-times deleteWishlistSpecies" data-val="' + item.id + '"></i></header></li>';
                            document.getElementById("listOfWishlistSpeciesBox").innerHTML += htmlSpecies;
                            var outsideSpeciesListCount = $('#listOfWishlistSpeciesOutsideBox li').length;
                            if (outsideSpeciesListCount < 2) {
                                document.getElementById("listOfWishlistSpeciesOutsideBox").innerHTML += htmlSpecies;
                            } else {
                                document.getElementById("listOfWishlistSpeciesOutsideBox").innerHTML +=
                                '<li class="SpeciesBoxId' + item.id + '" style="display:none;"><header><span class="mx-2">' + item.name + '</span><i class="fa fa-times deleteWishlistSpecies" data-val="' + item.id + '"></i></header></li>';
                                $('#showMoreSpeciesDisplay').show();
                            }
                            // console.log($('#wishlist_species_' + item.id).length + ' - ' + $('#wishlist_species_' + item.id).prop('checked'));
                            // $('#wishlist_species_' + item.id).prop('checked', true);
                            // console.log($('#wishlist_species_' + item.id).prop('checked'));
                        });
                        var countSpecies = $('#listOfWishlistSpeciesBox li').length;
                        if (countSpecies >= 1) {
                            $('#displaySpeciesList,#displaySpeciesOutsideList').show();
                        } else {
                            $('#displaySpeciesList,#displaySpeciesOutsideList').hide();
                        }
                        species.forEach(function(item, index) {
                            $('#wishlist_species_' + item.id).prop('checked', true);
                        });
                    }, 1000);
                    
                    $("#editWishlistItemPopup").modal("show");
                    return;
                } else {
                    showToastrError(data.message, 'Edit Wishlist');
                }
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', 'Edit Wishlist');
            }
        });
    });
    //Edit wishlist submit
    $(document).on('click', '#submitEditWishlistButton', function() {
        var formData = {};

        formData.post_id = $('#editWishlistPostId').val();
        formData.title = $('#editWishlistTitle').val();
        formData.description = $('#editWishlistDescription').val();
        formData.who_see = $('input[name=editWishlistWhoSee]:checked').val();

        formData.wants = [];
        $("input:checked[name^='editWishlistWant[]']").map(function(idx, ele) {
            formData.wants.push($(ele).val());
        }).get();
        formData.speciesIds = [];
        $("input:checked[name^='wishlist_species[]']").map(function(idx, ele) {
            formData.speciesIds.push($(ele).val());
        }).get();

        $.ajax({
            url: "{{getMURL('ajax/update-wishlist-item')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            success: function(data) {
                if (data.status == 1) {
                    showToastrSuccess(data.message, 'Edit Wishlist');
                    location.reload();
                    //$('#resetWishlistButton').trigger('click');
                } else {
                    showToastrError(data.message, 'Edit Wishlist');
                }
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', 'Edit Wishlist');
            }
        });
    });
    //Social model
    var baseProfileURL = "{{getURL('public/storage/')}}";
    var noProfileImage = "{{asset('assets/media/extra/neutron-star.png')}}";

    $(document).on('click', '.wishlistShowSocialCounter', function() {
        $('#wishlistAllData .filter-result').html('');
        var formData = {};
        formData.post_id = $(this).attr('data-id');
        formData.type = $(this).attr('data-type');

        $('#wishlistTabAll a,#wishlistTabLike a,#wishlistTabReply a,#wishlistTabShare a,#wishlistTabSave a').attr('data-id', formData.post_id);

        var likeCount = parseInt($(this).parents('.social-actions').find('.wishlistLikeCount span').html());
        var shareCount = parseInt($(this).parents('.social-actions').find('.wishlistShareCount span').html());
        var replyCount = parseInt($(this).parents('.social-actions').find('.wishlistReplyCount span').html());
        var saveCount = parseInt($(this).parents('.social-actions').find('.wishlistSaveCount span').html());

        $('#wishlistTabLike i sub.count').html(likeCount);
        $('#wishlistTabShare i sub.count').html(shareCount);
        $('#wishlistTabReply i sub.count').html(replyCount);
        $('#wishlistTabSave i sub.count').html(saveCount);
        $('#wishlistTabAll i sub.count').html(saveCount);

        $.ajax({
            url: "{{getMURL('ajax/get-wishlist-social-counter')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            success: function(data) {
                if (data.status == 1) {
                    //showToastrSuccess(data.message, 'Add Wishlist');
                    var newData = data.data;

                    var html = '';
                    newData.forEach(function(user, index) {

                        var profileImage = (user.user.image != undefined && user.user.image != '') ? baseProfileURL + user.user.image : noProfileImage;
                        var saveProfile = (user.user.save_profile != undefined && user.user.save_profile == 0) ? 'Save' : 'Unsave';

                        html += '<div class="row mb-4">' +
                            '<div class="col-lg-2 text-center">' +
                            '<div class="wishlist-user-profile-image">' +
                            '<img src="' + profileImage + '" class="img-fluid">' +
                            '</div>' +
                            '</div>' +
                            '<div class="col-lg-10 col-sm-12">' +
                            '<div class="data-right-content pb-2">' +
                            '<div class="d-flex justify-content-between align-items-center">' +
                            '<div class="title-wrap">' +
                            '<div class="pragraph-p">' +
                            '<p class="m-0">' + user.user.full_name + ', ' + user.user.research_name + '</p>' +
                            '</div>' +
                            '<label class="m-0">' + ((user.user.short_bio != undefined && user.user.short_bio != null) ? user.user.short_bio : '') + '</label>' +
                            '</div>' +
                            '<div class="d-flex align-items-center justify-content-between">' +
                            '<div class="saveprofile-icon-wrapper">' +
                            '<button type="button" class="SaveUserProfile" data-id="' + user.user.id + '" data-action="' + saveProfile + '">' + ((saveProfile == 'Save') ? '<i class="far fa-bookmark"></i>' : '<i class="fa fa-bookmark"></i>') + 'Save Profile</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    });

                    $('#wishlistAllData .filter-result').html(html);
                    $('#viewWishlistSocialCounter ul.filter-ul li.nav-item, #viewWishlistSocialCounter ul.filter-ul li.nav-item a.nav-link').removeClass('active');
                    var activeTab = '#wishlistTab' + formData.type;
                    $(activeTab + ',' + activeTab + ' a.nav-link').addClass('active');
                } else {
                    showToastrError(data.message, 'Responses');
                }
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', 'Responses');
            }
        });
    });
    //View comment related
    $(document).on('click', '.ShowHideMessageBox', function() {
        var showText = $(this).attr('data-text'); //78
        var currentText = $(this).html(); //45
        $(this).html(showText);
        $(this).attr('data-text', currentText);
    });
    $(document).on('click', '.replyClass', function() {
        $(this).parents('.comment-form').find('.inputTextMessage').attr('placeholder', 'Add a reply...');
        $(this).parents('.comment-form').find('.sendWishlistMessage').attr('data-parent', $(this).attr('data-id'));
    });

    $(document).on('click', '.sendWishlistMessage', function() {
        let $this = $(this);
        var formData = {};
        formData.message = $this.parents('.message').find('.inputTextMessage').val();
        formData.post_id = $(this).attr('data-id');
        formData.parent_id = $(this).attr('data-parent');

        $.ajax({
            url: "{{getMURL('ajax/send-post-message')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            success: function(data) {
                if (data.status == 1) {
                    showToastrSuccess(data.message, 'Send Message');
                    $this.parents('.message').find('.inputTextMessage').attr('placeholder', 'Add a comment...');
                    $this.attr('data-parent', '');
                } else {
                    showToastrError(data.message, 'Send Message');
                }
                $this.parents('.message').find('.inputTextMessage').val('');
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', 'Send Message');
            }
        });
    });


    $(document).on('click', '.likeMessage', function() {
        let $this = $(this);

        var formData = {};
        formData.message_id = $(this).attr('data-id');
        formData.post_id = $(this).attr('data-post-id');
        formData.action = $(this).attr('data-action');

        $.ajax({
            url: "{{getMURL('ajax/post-message-like')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            success: function(data) {
                $this.attr('data-action', data.raction);
                if (data.raction == 'Like') {
                    $this.find('i').removeClass('fa');
                    $this.find('i').addClass('far');
                } else {
                    $this.find('i').removeClass('far');
                    $this.find('i').addClass('fa');
                }
                if (data.status != 1) {
                    showToastrError(data.message, 'Like Message');
                }
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', 'Like Message');
            }
        });
    });
    $(document).on('click', '.SaveUserProfile', function() {
        var formData = {};
        formData.user_id = $(this).attr('data-id');
        formData.action = $(this).attr('data-action');

        let $this = $(this);

        if (formData.action == 'Save') {
            var title = "Save Profile";
        } else {
            var title = "Unsave Profile";
        }
        $.ajax({
            url: "{{getMURL('ajax/save-user-profile')}}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            success: function(data) {
                if (data.status == 1) {
                    showToastrSuccess(data.message, title);
                    $this.attr('data-action', data.raction);
                    if (data.raction == 'Save') {
                        $this.find('i').removeClass('fa');
                        $this.find('i').addClass('far');
                    } else {
                        $this.find('i').removeClass('far');
                        $this.find('i').addClass('fa');
                    }

                } else {
                    showToastrError(data.message, title);
                }
            },
            error: function(errorThrown) {
                showToastrError('Something went wrong, Please try again later.', title);
            }
        });
    });

    $(document).on('click', '.deleteWishlistSpecies', function() {
        var id = $(this).attr('data-val');
        $('#wishlist_species_' + id).prop('checked', false)
        $('#SpeciesBoxId' + id).remove();
        $('.SpeciesBoxId' + id).remove();
        resetSpeciesListBox();
    });
    // $(document).on('click', '#resetSpeciesButton', function() {
    //     $('#listOfWishlistSpeciesBox,#listOfWishlistSpeciesOutsideBox').html('');
    //     $("#searchSpecies").empty();
    //     $('.ExtraNotDefaultCheckbox').remove();
    //     $("#addSpacies").modal("hide");
    //     resetSpeciesListBox();
    // });

    // $('.wishlistSpeciesCheckbox').change(function() {
    $(document).on('change', '.wishlistSpeciesCheckbox', function() {
        var prBoxValue = $(this).val();
        var prDataValue = $(this).attr('data-val');

        console.log(prDataValue);
        if ($(this).prop('checked') == true) {
            var htmlSpecies = '<li class="SpeciesBoxId' + prBoxValue + '"><header><span class="mx-2">' + prDataValue + '</span><i class="fa fa-times deleteWishlistSpecies" data-val="' + prBoxValue + '"></i></header></li>';
            document.getElementById("listOfWishlistSpeciesBox").innerHTML += htmlSpecies;

            var outsideSpeciesListCount = $('#listOfWishlistSpeciesOutsideBox li').length;
            if (outsideSpeciesListCount < 2) {
                document.getElementById("listOfWishlistSpeciesOutsideBox").innerHTML += htmlSpecies;
            } else {
                document.getElementById("listOfWishlistSpeciesOutsideBox").innerHTML +=
                    '<li class="SpeciesBoxId' + prBoxValue + '" style="display:none;"><header><span class="mx-2">' + prDataValue + '</span><i class="fa fa-times deleteWishlistSpecies" data-val="' + prBoxValue + '"></i></header></li>';
            }
        } else {
            // $('#SpeciesBoxId' + prBoxValue).remove();
            $('.SpeciesBoxId' + prBoxValue).remove();
            console.log(prDataValue);
        }
        resetSpeciesListBox();
    });

    function resetSpeciesListBox() {
        var countSpecies = $('#listOfWishlistSpeciesBox li').length;
        if (countSpecies >= 1) {
            $('#displaySpeciesList,#displaySpeciesOutsideList').show();
        } else {
            $('#displaySpeciesList,#displaySpeciesOutsideList').hide();
        }

        displayTwoOutsideSpecies();
    }

    function displayTwoOutsideSpecies() {
        var outsideSpeciesListCount = $('#listOfWishlistSpeciesOutsideBox li').length;
        if (outsideSpeciesListCount <= 2) {
            $('#showMoreSpeciesDisplay').hide();
        } else {
            $('#showMoreSpeciesDisplay').show();
        }
        $("#listOfWishlistSpeciesOutsideBox li").hide();
        $("#listOfWishlistSpeciesOutsideBox li:nth-child(1),#listOfWishlistSpeciesOutsideBox li:nth-child(2)").show();

        return 1;
    }
</script>
@endpush