@extends('layouts.index')
@section('title')
Verify Activity
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/quill/dist/quill.snow.css" />
<link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.css" />
<link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/daterangepicker/daterangepicker.css" />

<style>
    label.error {
        color: #F94687;
        font-size: 13px;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 5px;
        padding: 0;
    }

    input.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    textarea.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    select.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    .dz-image img {
        width: 130px !important;
        height: 130px !important;
        object-fit: cover !important;
    }

    .lobilists .lobilist-item {
        cursor: pointer !important;
    }

    button.active {
        background-color: #15435A !important;
        color: #fff !important;
    }

    button.normal {
        background-color: #ddebff !important;
        color: #15435A !important;
    }

    /* #reportSummary:hover {
        background: #f2f2f2;
    } */

    /* #actionPlan:hover {
        background: #f2f2f2;
    } */

    /* #titleModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    /* #startDateModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    /* #endDateModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    /* #labelModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    }

    #reviewerModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    .lobilist-item-description {
        font-style: normal;
        display: inline-block;
        padding: 6px 13px;
        font-size: .65rem !important;
        font-weight: 100;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        color: #ffffff !important;
        border-radius: 6px;
        background-color: #15435A !important;
    }

    .lobilist-item .text-muted {
        color: #ffffff !important;
    }

    .download-dropzone {
        font-size: 14px;
        text-align: center;
        display: block;
        cursor: pointer;
        margin-top: -17px !important;
        border: none;
    }

    .download-dropzone:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    .css-1s4q3yq {
        display: flex;
        margin-top: 6px;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .css-1bh36ul {
        display: flex;
        color: #42526E;
    }

    .css-1bh36ul+.css-1bh36ul::before {
        display: inline-block;
        width: 16px;
        color: #42526E;
        content: "·";
        text-align: center;
        vertical-align: middle;
    }

    .css-1gd7hga {
        opacity: 1;
        transition: opacity 0.3s ease 0s;
        margin: 0px;
        -webkit-box-flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="{{ url('home') }}" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Verify Activity
                    </li>
                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Verify Activity</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<!-- Container fluid  -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <form id="filterActivity">
                        <input type="hidden" name="status_activity" id="statusActivity" value="done">
                        <div class="row">
                            <div class="col-sm-4 d-flex flex-column">
                                <label>Employee Name</label>
                                <select name="pegawai_id" class="form-select" id="pegawai_id">
                                    <option value="">Choose Employee</option>
                                    @foreach($pegawai as $data)
                                    <option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-sm-3 d-flex flex-column">
                                <label for="search">Activity Title</label>
                                <input type="search" class="form-control" name="activity_name" id="activity_name"
                                    placeholder="Search activity title ...">
                            </div>
                            <div class="col-sm-3 d-flex flex-column">
                                <label for="search">Overdue Date</label>
                                <input type="hidden" name="date_range" id="date_range" value="">
                                <div class="input-group mb-3">
                                    <input type="text" id="date_range_plugin" class="form-control daterange"
                                        value="" />

                                    <span class="input-group-text">
                                        <i data-feather="calendar" class="feather-sm"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-sm-2 d-flex align-items-center">
                                <button class="btn btn-primary
                                    font-weight-medium
                                    rounded-pill
                                    px-4" type="button" onclick="filterActivity()">
                                    <i class="fa fa-search"></i> <span
                                        style="margin-left: 8px !important;">Filter</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Column -->
        <div class="col-lg-12 col-xl-12 col-md-12">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-pills p-3 bg-white border mb-3 align-items-center">
                        <li class="nav-item">
                            <a href="javascript:void(0)" class="
                              nav-link
                              rounded-pill
                              note-link
                              d-flex
                              align-items-center
                              justify-content-center
                              active
                              px-3 px-md-3
                              me-0 me-md-2
                            " id="fixed-asset-part">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="feather feather-list feather-sm fill-white me-0 me-md-1">
                                    <line x1="8" y1="6" x2="21" y2="6"></line>
                                    <line x1="8" y1="12" x2="21" y2="12"></line>
                                    <line x1="8" y1="18" x2="21" y2="18"></line>
                                    <line x1="3" y1="6" x2="3" y2="6"></line>
                                    <line x1="3" y1="12" x2="3" y2="12"></line>
                                    <line x1="3" y1="18" x2="3" y2="18"></line>
                                </svg><span class="d-none d-md-block font-weight-medium"
                                    onclick="activityDone()">Activity List</span></a>
                        </li>

                        <li class="nav-item">
                            <a href="javascript:void(0)" class="
                              nav-link
                              rounded-pill
                              note-link
                              d-flex
                              align-items-center
                              justify-content-center
                              px-3 px-md-3
                              me-0 me-md-2
                            " id="consumable-part">
                            <i class="bi bi-patch-check"></i><span class="d-none d-md-block font-weight-medium"
                                    onclick="activityVerified()">Verified</span></a>
                        </li>

                    </ul>

                    <div class="tab-content">
                        <div id="note-full-container" class="note-has-grid row">
                            <div class="col-md-12 single-note-item fixed-asset-part">
                                <div class="row" id="doneActivityWrap">

                                </div>
                                <div id="doneActivityEmpty" style="display: none;">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4>data is not available yet.</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 consumable-part" style="display: none;">
                                <div class="row" id="verifiedActivityWrap">

                                </div>

                                <div id="verifiedActivityEmpty" style="display: none;">
                                    <div class="card">
                                        <div class="card-body">
                                            <h4>data is not available yet.</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Column -->
    </div>
    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>

<div class="modal fade" id="create_kanban" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <form id="createForm" action="{{ route('activity.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="statusValidation" value="true">
                <div class="modal-header d-flex align-items-center">
                    <h3 class="modal-title" id="createModalLabel">
                        <i class="ti-marker-alt me-2"></i> Activity
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="
            padding-left: 25px;
            padding-right: 25px;
        ">
                    <input type="hidden" name="status" id="status_val" value="">

                    <div class="form-group mb-4">
                        <label for="">Title <label for="" class="text-danger">*</label></label>
                        <input type="text" class="form-control" name="title" id="title" placeholder="Title">
                    </div>

                    <div class="form-group mb-4">
                        <label for="">Description <label for="" class="text-danger">*</label></label>
                        <textarea name="description" class="form-control" id="description" cols="30" rows="5"
                            placeholder="What needs to be done?"></textarea>
                    </div>

                    <div class="form-group row mb-4">
                        <div class="col-sm-6">
                            <label for="">Start Date <label for="" class="text-danger">*</label></label>
                            <input type="date" class="form-control" name="start_date" id="start_date">
                        </div>
                        <div class="col-sm-6">
                            <label for="">End Date <label for="" class="text-danger">*</label></label>
                            <input type="date" class="form-control" name="end_date" id="end_date">
                        </div>
                    </div>
                    <div class="form-group mb-4">
                        <label for="formFile" class="form-label">Summary Report</label>
                        <textarea name="summary_report" class="form-control" id="summary_report" cols="30" rows="5"
                            placeholder="You can fill up the summary report here..."></textarea>
                    </div>

                    <div class="form-group mb-4">
                        <label for="formFile" class="form-label">Attachment</label>
                        <div class="needsclick dropzone add-dropzone" id="document-dropzone">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="">Reviewer <label for="" class="text-danger">*</label></label>
                        <select name="reviewer_id" class="form-select" id="reviewer_id">
                            <option value="">-Choose Reviewer-</option>
                            @foreach ($pegawai as $data)
                            <option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary mt-4 mb-2" id="saveButton">Save</button>
                    <button type="button" class="btn btn-sm btn-light mt-4 mb-2" data-bs-dismiss="modal">Cancel</button>

                </div>

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

<div class="modal fade" id="detail_kanban" tabindex="-1" role="dialog" aria-labelledby="createModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <form id="detailKanbanForm" enctype="multipart/form-data">
                @csrf

                <input type="hidden" name="edit_activity_id" id="editActivityId" value="1">

                <input type="hidden" id="log_object_val" value="">

                <input type="hidden" id="statusValidation" value="true">

                <input type="hidden" id="activity_tab_status" value="comment">

                <input type="hidden" id="activity_tab_order" value="latest">

                <div class="modal-header d-flex align-items-center" style="
                padding-left: 40px;
                padding-right: 40px;
            ">
                    <h3 class="modal-title" id="createModalLabel">Activity
                    </h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="
            padding-left: 40px;
            padding-right: 40px;
        ">
                    <p style="font-size: 24px!important; color: #000000;display: none;" id="titleModal"
                        >
                        Project Management Unit - Project
                        Management Systems
                        and Policy</p>

                    <p style="font-size: 24px!important; color: #000000;display: none;" id="titleModalTeam">
                        Project Management Unit - Project
                        Management Systems
                        and Policy</p>

                    <input type="text" name="edit_title" class="form-control" id="titleEditor" style="display: none;">
                    <div id="button-title-wrap" style="display: none;">
                        <button type="button" class="btn btn-sm btn-primary mt-3" onclick="saveTitle()">Save</button>
                        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                            onclick="cancelTitle()">Cancel</button>
                    </div>
                    <h5 class="mt-3">Description</h5>
                    <p style="cursor: pointer; display: none;" id="actionPlan">- 2 to 3
                        Technical skills improvement needs identified
                        <br>
                        Description

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

                    <p style="display: none;" id="actionPlanTeam">- 2 to 3 Technical skills improvement needs identified
                        <br>
                        Description

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

                    <textarea name="edit_description" class="form-control" cols="30" rows="5" id="actionPlanEditor"
                        style="display: none;">2 to 3 Technical skills improvement needs identified Description Change label Sign In to Log In Delete helper text Insert username & Password Footer change to United in Diversity Log in with Google Button</textarea>
                    <div id="button-action-plan-wrap" style="display: none;">
                        <button type="button" class="btn btn-sm btn-primary mt-3"
                            onclick="saveDescription()">Save</button>
                        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                            onclick="cancelActionPlan()">Cancel</button>
                    </div>

                    <h5 class="mt-3">Link</h5>
                    <p style="display: none;" id="linkWrap">
                    </p>

                    <p style="display: none;" id="linkTeam">
                    </p>

                    <input type="date" name="edit_link" class="form-control" id="linkEditor"
                                style="display: none;">
                   
                    <div id="button-link-wrap" style="display: none;">
                        <button type="button" class="btn btn-sm btn-primary mt-3"
                            onclick="saveLink()">Save</button>
                        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                            onclick="cancelLink()">Cancel</button>
                    </div>

                    <div class="row mt-3">
                        <div class="col-sm-6">
                            <h5>Start Date :</h5>
                            <p id="startDateModal" style="display: none;">01-01-2022</p>
                            <p id="startDateModalTeam" style="display: none;">01-01-2022</p>
                            <input type="date" name="edit_start_date" class="form-control" id="startDateEditor"
                                style="display: none;">
                            <div id="button-start-date-wrap" style="display: none;">
                                <button type="button" class="btn btn-sm btn-primary mt-3"
                                    onclick="saveStartDate()">Save</button>
                                <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                                    onclick="cancelStartDate()">Cancel</button>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <h5>End Date :</h5>
                            <p id="endDateModal" style="display: none;">30-01-2022</p>
                            <p id="endDateModalTeam" style="display: none;">30-01-2022</p>
                            <input type="date" name="edit_end_date" class="form-control" id="endDateEditor"
                                style="display: none;">
                            <div id="button-end-date-wrap" style="display: none;">
                                <button type="button" class="btn btn-sm btn-primary mt-3"
                                    onclick="saveEndDate()">Save</button>
                                <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                                    onclick="cancelEndDate()">Cancel</button>
                            </div>
                        </div>
                    </div>
                    <h5 style="margin-top: 20px;">Report Summary</h5>
                    <p id="reportSummary">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt odio exercitationem facere.
                        Velit sit beatae porro nisi placeat quod saepe facilis. Exercitationem recusandae nulla sunt
                        iure sint assumenda libero quidem.
                    </p>
                    <textarea name="edit_report_summary" class="form-control" cols="30" rows="5"
                        id="reportSummaryEditor" style="display: none;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt odio exercitationem facere. Velit sit beatae porro nisi placeat quod saepe facilis. Exercitationem recusandae nulla sunt iure sint assumenda libero quidem.
                    </textarea>
                    <div id="button-summary-wrap" style="display: none;">
                        <button type="button" class="btn btn-sm btn-primary mt-3 mb-4" id="reportSummarySave"
                            onclick="saveSummaryReport()">Save</button>
                        <button type="button" class="btn btn-sm btn-light mt-3 mb-4" style="margin-left: 5px;"
                            id="reportSummaryCancel" onclick="cancelSummary()">Cancel</button>
                    </div>



                    <div class="form-group mb-1">
                        <h5 for="formFile" class="form-label">Attachment</h5>
                        <div class="needsclick dropzone add-dropzone" id="document-edit-dropzone">
                        </div>
                    </div>

                    {{-- <div class="form-group" style="margin-top: 20px;">
                        <h5 for="formFile" class="form-label">Label</h5>
                        <div id="labelModal" onclick="labelInput()"
                            style="padding-top: 10px !important; padding-bottom: 10px !important;  position: relative;">
                            <span
                                class="
                        mb-1
                        badge
                        rounded-pill
                        font-weight-medium
                        bg-light-primary
                        text-primary
                      ">PERSONAL</span>
                        </div>
                        <input type="text" name="edit_label" class="form-control" id="labelEditor"
                            style="display: none;">
                        <div id="button-label-wrap" style="display: none;">
                            <button type="button" class="btn btn-sm btn-primary mt-3"
                                onclick="saveLabel()">Save</button>
                            <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                                onclick="cancelLabel()">Cancel</button>
                        </div>
                    </div> --}}

                    <h5 style="margin-top: 20px !important;" id="asigneeLabel">Assignee</h5>
                    <div class="row" id="asigneeWrap">
                        {{-- <div class="col-sm-1 mt-1">
                            <img src="{{ asset('back') }}/images/users/2.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"
                        alt="flexy">
                    </div>
                    <div class="col-sm-11 mt-2">

                        <p style="margin-left: -15px;font-size: 15px;" class="text-dark" id="asigneeModal">
                            >Muhamad Iqbal Rivaldi</p>

                    </div> --}}
                </div>

                <h5 style="margin-top: 20px;" id="reviewerTitle">Reviewer</h5>
                <div class="row" style="display: none;" onclick="reviewerInput()" id="reviewerModal">
                    <div class="col-sm-1 mt-1">
                        <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;" alt="flexy">
                    </div>
                    <div class="col-sm-11 mt-2">

                        <p style="margin-left: -15px;font-size: 15px;" class="text-dark">
                            Nandang Koswara</p>
                    </div>
                </div>
                <div class="row" style="display: none;" id="reviewerModalTeam">
                    <div class="col-sm-1 mt-1">
                        <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;" alt="flexy">
                    </div>
                    <div class="col-sm-11 mt-2">

                        <p style="margin-left: -15px;font-size: 15px;" class="text-dark">
                            Nandang Koswara</p>
                    </div>
                </div>
                <select name="edit_reviewer" id="reviewerEditor" class="form-select" style="display: none;">
                    <option value="">Choose Reviewer</option>
                    @foreach ($pegawai as $data)
                    <option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>
                    @endforeach
                </select>
                <div id="button-reviewer-wrap" style="display: none;">
                    <button type="button" class="btn btn-sm btn-primary mt-3" onclick="saveReviewer()">Save</button>
                    <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                        onclick="cancelReviewer()">Cancel</button>
                </div>
                <h5 style="margin-top: 20px;">Activity</h5>
                <div class="row mt-3">
                    <div class="col-sm-8">
                        <small>Show: </small>
                        {{-- <a type="button"
                                class="
                                btn btn-xs btn-light-info
                                text-info
                                font-weight-medium
                                rounded-pill
                                px-4 activity-choose
                              "
                                style="margin-left: 20px !important;font-size: 12px;" onclick="allActivity(this)">
                                All
                            </a> --}}
                        <a type="button" class="
                                btn btn-xs btn-info
                                text-white
                                font-weight-medium
                                rounded-pill
                                px-4 activity-choose
                              " style="margin-left: 10px !important;font-size: 12px;" id="commentButtonTrigger"
                            onclick="commentActivity(this)">
                            Comments
                        </a>
                        <a type="button" class="
                                btn btn-xs btn-light-info
                                text-info
                                font-weight-medium
                                rounded-pill
                                px-4 activity-choose
                              " style="margin-left: 10px !important;font-size: 12px;" onclick="historyActivity(this)">
                            History
                        </a>
                    </div>
                    <div class="col-sm-4 d-flex justify-content-end">
                        <a type="button" class="
                                btn btn-xs btn-primary
                                text-white
                                font-weight-medium
                                rounded-pill
                                px-4
                              " onclick="newestOrder()" id="newestFirst"
                            style="margin-left: 10px !important;font-size: 12px;display:none;">
                            Newest First <i class="bi bi-sort-down"></i>
                        </a>
                        <a type="button" class="
                                btn btn-xs btn-primary
                                text-white
                                font-weight-medium
                                rounded-pill
                                px-4
                              " onclick="oldestOrder()" id="oldestFirst"
                            style="margin-left: 10px !important;font-size: 12px;">
                            Oldest First <i class="bi bi-sort-down"></i>
                        </a>
                    </div>
                </div>
                <div class="row" id="allWrap" style="display: none;">
                    <div class="col-sm-1 mt-4">
                        <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;" alt="flexy">
                    </div>
                    <div class="col-sm-11">
                        <div class="row">
                            <div class="col-sm-12 d-flex">
                                <h6 class="mt-4" style="margin-left: -15px;">Muhamad Iqbal Rivaldi </h6>
                                <p class="mt-4" style="margin-left: 7px;font-size: 13px;">added an Attachment
                                </p>
                                <p class="mt-4" style="margin-left: 10px;font-size: 13px;">2 hours ago</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <p style="margin-left: -15px;font-size: 13px;font-weight: bold !important;">Annual
                                    Program Timeline 2022.xlsx</p>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-1 mt-4">
                        <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;" alt="flexy">
                    </div>
                    <div class="col-sm-11">
                        <div class="row">
                            <div class="col-sm-12 d-flex">
                                <h6 class="mt-4" style="margin-left: -15px;">Ikbal Malik Ramadhan</h6>
                                <p class="mt-4" style="margin-left: 10px;font-size: 13px;">3 hours ago</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <p style="margin-left: -15px;font-size: 13px;">Please correct the data.</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row" id="commentWrap">
                    {{-- <div class="col-sm-1 mt-4">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"
                    alt="flexy">
                </div>
                <div class="col-sm-11">
                    <input type="text" class="form-control mt-4" placeholder="Add a comment..."
                        style="margin-left: -18px;" onclick="addComment()">
                    <textarea class="form-control mt-3" cols="30" rows="5"
                        style="margin-left: -18px !important;display: none;" id="textEditorComment">
                            </textarea>
                    <div id="button-comment-wrap" style="display: none;">
                        <button type="button" class="btn btn-sm btn-primary mt-3" style="margin-left: -18px;"
                            onclick="saveComment()">Save</button>
                        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                            onclick="cancelComment()">Cancel</button>
                    </div>
                </div> --}}
                {{-- <div class="col-sm-1 mt-4">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"
                alt="flexy">
        </div>
        <div class="col-sm-11">
            <div class="row">
                <div class="col-sm-12 d-flex">
                    <h6 class="mt-4" style="margin-left: -15px;">Ikbal Malik Ramadhan</h6>
                    <p class="mt-4" style="margin-left: 10px;font-size: 13px;">3 hours ago</p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <p style="margin-left: -15px;font-size: 13px;">Please correct the data.</p>
                </div>
            </div>

        </div> --}}
    </div>
    <div class="row" id="historyWrap" style="display: none;">
        {{-- <div class="col-sm-1 mt-4">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"
        alt="flexy">
    </div>
    <div class="col-sm-11">
        <div class="row">
            <div class="col-sm-12 d-flex">
                <h6 class="mt-4" style="margin-left: -15px;">Muhamad Iqbal Rivaldi</h6>
                <p class="mt-4" style="margin-left: 7px;font-size: 13px;">added an
                    <b>Attachment</b>
                </p>
                <p class="mt-4" style="margin-left: 10px;font-size: 13px;">2 hours ago</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <p style="margin-left: -15px;font-size: 13px;font-weight: bold !important;">Annual
                    Program Timeline 2022.xlsx</p>
            </div>
        </div>

    </div> --}}
</div>

</div>

<br>
<br>
<br>
<br>

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

{{-- <div class="offcanvas offcanvas-end" id="verifyCanvas" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">
            Approve Program
        </h5>
        <hr>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>

            <div class="card">
                <div class="card-body">
                    <form class="form" action="{{ route('program-formulation.approve') }}" method="POST"
id="approveProgramForm">
@csrf

<input type="hidden" name="program_formulation_id" value="{{ $program_formulation->id }}">

<div class="mb-2">
    <label for="example-text-input" class="col-form-label">Notes</label>
    <textarea name="approval_notes" id="approval_notes" cols="30" rows="5" class="form-control"
        placeholder="Notes"></textarea>
</div>

<div class="form-actions">
    <div class="card-body border-top">
        <button type="button" class="
                                            btn btn-outline-secondary
                                            rounded-pill
                                            px-4
                                            ms-2
                                        " data-bs-dismiss="offcanvas">
            Cancel
        </button>

        <button type="submit" class="btn btn-primary rounded-pill px-4" id="saveApproveButton">
            <div class="d-flex align-items-center">
                Submit
            </div>
        </button>
    </div>
</div>
</form>
</div>
</div>
</div>
</div>
</div> --}}

<div class="offcanvas offcanvas-end" id="rejectCanvas" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">
            Reject Activity
        </h5>
        <hr>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>

            <div class="card">
                <div class="card-body">
                    <form class="form" action="{{ route('verify-activity.reject') }}" method="POST"
                        id="rejectProgramForm">
                        @csrf

                        <input type="hidden" name="activity_id" id="activityIdCanvas" value="">

                        <div class="mb-2">
                            <label for="example-text-input" class="col-form-label">Notes</label>
                            <textarea name="rejection_notes" id="rejection_notes" cols="30" rows="5"
                                class="form-control" placeholder="Notes" required></textarea>
                        </div>

                        <div class="form-actions">
                            <div class="card-body border-top">
                                <button type="button" class="
                                            btn btn-outline-secondary
                                            rounded-pill
                                            px-4
                                            ms-2
                                        " data-bs-dismiss="offcanvas">
                                    Cancel
                                </button>

                                <button type="submit" class="btn btn-primary rounded-pill px-4" id="saveRejectButton">
                                    <div class="d-flex align-items-center">
                                        Submit
                                    </div>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<!--This page plugins -->
<script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>
<script src="{{ asset('back') }}/js/pages/notes/notes.js"></script>
<script src="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('back') }}/libs/moment/moment.js"></script>
<script src="{{ asset('back') }}/libs/daterangepicker/daterangepicker.js"></script>

<script>
    function verify(activity_id) {
        Swal.fire({
            title: "Verify Activity?",
            text: `Are you sure to verify this activity?`,
            icon: "warning",
            showCancelButton: !0,
            confirmButtonColor: "rgb(11, 42, 151)",
            cancelButtonColor: "rgb(209, 207, 207)",
            confirmButtonText: "Yes, Verify it!",
            cancelButtonText: "Cancel"
        }).then(function (t) {
            if (t.value) {
                $.ajax({
                    url: "{{ route('verify-activity.verify') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        activity_id: activity_id
                    },
                    success: function (data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Done',
                            text: 'Activity has been verified successfully!',
                        }).then(function () {
                            location.href = "{{ route('verify-activity.index') }}";
                        });
                    }
                });
            }
        })
    }

    function reject(activity_id) {
        $("#activityIdCanvas").val(activity_id);
        var offCanvasReject = document.getElementById("rejectCanvas");
        var canvasReject = new bootstrap.Offcanvas(offCanvasReject, {
            backdrop: true
        });

        canvasReject.show()
    }
</script>
<script>
    function activityList() {
        $("#statusActivity").val('done');
    }

    function activityVerified() {
        $("#statusActivity").val('verified');
    }
</script>
<script>
    $(".daterange").daterangepicker({
        autoUpdateInput: false,
    });
    $('.daterange').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        $("#date_range").val($("#date_range_plugin").val());
    });

    $('.daterange').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });
</script>

<script>
    function detailActivityDone(activity_id) {
        $.ajax({
            url: "{{ route('verify-activity.get-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                activity_id: activity_id
            },
            success: function (result) {

                var kanbanWrap = JSON.parse(result);

                console.log(kanbanWrap[0]["summary-report"]);

                var generateAsignee = "";
                generateAsignee += '<div class="col-sm-1 mt-1">';
                generateAsignee += '    <img src="' + kanbanWrap[0]["reviewer-photo"] +
                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                generateAsignee += '       alt="flexy">';
                generateAsignee += '</div>';
                generateAsignee += '<div class="col-sm-11 mt-2">';
                generateAsignee +=
                    '    <p style="margin-left: -15px;font-size: 15px;" class="text-dark">';
                generateAsignee += kanbanWrap[0]["reviewer"] + '</p>';
                generateAsignee += ' </div>';

                if (kanbanWrap[0]["label"] == 'Personal') {
                    $('#titleModal').html("");

                    $('#titleModal').html(kanbanWrap[0]["title-modal"]);
                    $("#titleModal").css("cssText",
                        "display: block !important;font-size: 24px !important; color: #000000;");
                    $("#titleModalTeam").css("cssText", "display: none !important;");

                    $('#actionPlan').html("");

                    $('#actionPlan').html(kanbanWrap[0]["description"]);
                    $("#actionPlan").css("cssText", "display: block !important;");
                    $("#actionPlanTeam").css("cssText", "display: none !important;");

                    $('#linkWrap').html("");

                    $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                    $("#linkWrap").css("cssText", "display: block !important;");
                    $("#linkTeam").css("cssText", "display: none !important;");

                    $('#startDateModal').html("");

                    $('#startDateModal').html(kanbanWrap[0]["start-date"]);
                    $("#startDateModal").css("cssText", "display: block !important;");
                    $("#startDateModalTeam").css("cssText", "display: none !important;");

                    $('#endDateModal').html("");

                    $('#endDateModal').html(kanbanWrap[0]["end-date"]);
                    $("#endDateModal").css("cssText", "display: block !important;");
                    $("#endDateModalTeam").css("cssText", "display: none !important;");

                    $("#reviewerTitle").css("cssText", "display: none !important;");

                    $('#reviewerModal').html("");

                    $('#reviewerModal').html(generateAsignee);
                    $("#reviewerModal").css("cssText", "display: none !important;");
                    $("#reviewerModalTeam").css("cssText", "display: none !important;");
                } else {
                    $('#titleModalTeam').html("");

                    $('#titleModalTeam').html(kanbanWrap[0]["title-modal"]);
                    $("#titleModalTeam").css("cssText",
                        "display: block !important;font-size: 24px !important; color: #000000;");
                    $("#titleModal").css("cssText", "display: none !important;");

                    $('#actionPlanTeam').html("");

                    $('#actionPlanTeam').html(kanbanWrap[0]["description"]);
                    $("#actionPlanTeam").css("cssText", "display: block !important;");
                    $("#actionPlan").css("cssText", "display: none !important;");

                    $('#linkWrap').html("");

                    $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                    $("#linkWrap").css("cssText", "display: block !important;");
                    $("#linkTeam").css("cssText", "display: none !important;");

                    $('#startDateModalTeam').html("");

                    $('#startDateModalTeam').html(kanbanWrap[0]["start-date"]);
                    $("#startDateModalTeam").css("cssText", "display: block !important;");
                    $("#startDateModal").css("cssText", "display: none !important;");

                    $('#endDateModalTeam').html("");

                    $('#endDateModalTeam').html(kanbanWrap[0]["end-date"]);
                    $("#endDateModalTeam").css("cssText", "display: block !important;");
                    $("#endDateModal").css("cssText", "display: none !important;");

                    $("#reviewerTitle").css("cssText", "display: block !important;margin-top: 20px;");

                    $('#reviewerModalTeam').html("");

                    $('#reviewerModalTeam').html(generateAsignee);
                    $("#reviewerModalTeam").css("cssText", "display: flex !important;");
                    $("#reviewerModal").css("cssText", "display: none !important;");
                }

                $("#commentWrap").html("");
                $("#historyWrap").html("");

                // if(element.getAttribute('data-status') == '')
                // console.log();
                $('#statusTask').val(kanbanWrap[0]["id"]);

                $('#titleEditor').val(kanbanWrap[0]["title-modal"]);
                $('#endDateEditor').val(kanbanWrap[0]["end-date-modal"]);
                $('#asigneeModal').html(kanbanWrap[0]["asignee"]);



                $('#reviewerEditor').val(kanbanWrap[0]["reviewer-id"]);


                $('#actionPlanEditor').html(kanbanWrap[0]["description"]);

                $('#startDateEditor').val(kanbanWrap[0]["start-date"]);


                $('#labelModal').html(kanbanWrap[0]["label"]);
                $('#labelEditor').val(kanbanWrap[0]["label"]);
                $('#endDateEditor').val(kanbanWrap[0]["end-date"]);

                $('#reportSummary').html(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0]["summary-report"] : '-');

                $('#reportSummaryEditor').val(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0][
                    "summary-report"
                ] : '-');

                $('#editActivityId').val(kanbanWrap[0]["activity-id"]);
                $('#detail_kanban').modal('show');


                if (kanbanWrap[0]["label"] != "Personal") {


                    $("#asigneeLabel").css("cssText",
                        "display: block !important;margin-top: 20px !important;");
                    $("#asigneeWrap").css("cssText", "display: flex !important;");

                    var assigned_object = JSON.parse(kanbanWrap[0]["assigned-encode"]);

                    var members_object = JSON.parse(kanbanWrap[0]["members-encode"]);

                    $("#asigneeWrap").html("");

                    for (const [key, value] of Object.entries(assigned_object)) {
                        var html = "";
                        html += '<div class="col-sm-1 mt-1">';
                        html += '<img src="' + value +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += ' alt="flexy">';
                        html += '</div>';
                        html += '<div class="col-sm-11 mt-2">';
                        html +=
                            ' <p style="margin-left: -15px;font-size: 15px;" class="text-dark" id="asigneeModal">';
                        html += members_object[key] + '</p>';
                        html += '</div>';

                        $("#asigneeWrap").prepend(html);
                    }
                } else {

                    $("#asigneeLabel").css("cssText", "display: none !important;");
                    $("#asigneeWrap").css("cssText", "display: none !important;");
                }

                if (kanbanWrap[0]["comment-wrap"]) {
                    var comment_object = JSON.parse(kanbanWrap[0]["comment-wrap"]);

                    for (const [key, value] of Object.entries(comment_object)) {
                        console.log(value);

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by + '</h6>';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html +=
                            '               <div class="row" id="descriptionWrapEdit' +
                            value.id + '">';
                        html += '                   <div class="col-sm-12">';
                        html +=
                            '                      <p style="margin-left: -15px;font-size: 13px;">' +
                            value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                      
                        html +=
                            '    <textarea class="form-control mt-3" cols="30" rows="5"';
                        html +=
                            '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                            value.id + '" placeholder="Add your comment here...">';
                        html += value.description + '</textarea>';
                        html +=
                            '    <div id="button-edit-comment-wrap' + value.id +
                            '" style="display: none;">';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                        html +=
                            '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                            value.id + '`)">Save</button>';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                        html +=
                            '             onclick="cancelEditComment(`' + value.id +
                            '`)">Cancel</button>';
                        html += '          </div>';

                        $("#commentWrap").append(html);
                    }
                }


                if (kanbanWrap[0]["log-wrap"] != null) {

                    $("#log_object_val").val(kanbanWrap[0]["log-wrap"]);

                    var log_object = JSON.parse(kanbanWrap[0]["log-wrap"]);

                    for (const [key, value] of Object.entries(log_object)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' +
                            value.type + ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value
                                .new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#historyWrap").prepend(html);
                    }
                }

            }
        });
    }

    function detailActivityVerified(activity_id) {
        $.ajax({
            url: "{{ route('verify-activity.get-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                activity_id: activity_id
            },
            success: function (result) {

                var kanbanWrap = JSON.parse(result);

                console.log(kanbanWrap[0]["summary-report"]);

                var generateAsignee = "";
                generateAsignee += '<div class="col-sm-1 mt-1">';
                generateAsignee += '    <img src="' + kanbanWrap[0]["reviewer-photo"] +
                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                generateAsignee += '       alt="flexy">';
                generateAsignee += '</div>';
                generateAsignee += '<div class="col-sm-11 mt-2">';
                generateAsignee +=
                    '    <p style="margin-left: -15px;font-size: 15px;" class="text-dark">';
                generateAsignee += kanbanWrap[0]["reviewer"] + '</p>';
                generateAsignee += ' </div>';

                if (kanbanWrap[0]["label"] == 'Personal') {
                    $('#titleModal').html("");

                    $('#titleModal').html(kanbanWrap[0]["title-modal"]);
                    $("#titleModal").css("cssText",
                        "display: block !important;font-size: 24px !important; color: #000000;");
                    $("#titleModalTeam").css("cssText", "display: none !important;");

                    $('#actionPlan').html("");

                    $('#actionPlan').html(kanbanWrap[0]["description"]);
                    $("#actionPlan").css("cssText", "display: block !important;");
                    $("#actionPlanTeam").css("cssText", "display: none !important;");

                    $('#linkWrap').html("");

                    $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                    $("#linkWrap").css("cssText", "display: block !important;");
                    $("#linkTeam").css("cssText", "display: none !important;");

                    $('#startDateModal').html("");

                    $('#startDateModal').html(kanbanWrap[0]["start-date"]);
                    $("#startDateModal").css("cssText", "display: block !important;");
                    $("#startDateModalTeam").css("cssText", "display: none !important;");

                    $('#endDateModal').html("");

                    $('#endDateModal').html(kanbanWrap[0]["end-date"]);
                    $("#endDateModal").css("cssText", "display: block !important;");
                    $("#endDateModalTeam").css("cssText", "display: none !important;");

                    $("#reviewerTitle").css("cssText", "display: none !important;");

                    $('#reviewerModal').html("");

                    $('#reviewerModal').html(generateAsignee);
                    $("#reviewerModal").css("cssText", "display: none !important;");
                    $("#reviewerModalTeam").css("cssText", "display: none !important;");
                } else {
                    $('#titleModalTeam').html("");

                    $('#titleModalTeam').html(kanbanWrap[0]["title-modal"]);
                    $("#titleModalTeam").css("cssText",
                        "display: block !important;font-size: 24px !important; color: #000000;");
                    $("#titleModal").css("cssText", "display: none !important;");

                    $('#actionPlanTeam').html("");

                    $('#actionPlanTeam').html(kanbanWrap[0]["description"]);
                    $("#actionPlanTeam").css("cssText", "display: block !important;");
                    $("#actionPlan").css("cssText", "display: none !important;");

                    $('#linkWrap').html("");

                    $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                    $("#linkWrap").css("cssText", "display: block !important;");
                    $("#linkTeam").css("cssText", "display: none !important;");

                    $('#startDateModalTeam').html("");

                    $('#startDateModalTeam').html(kanbanWrap[0]["start-date"]);
                    $("#startDateModalTeam").css("cssText", "display: block !important;");
                    $("#startDateModal").css("cssText", "display: none !important;");

                    $('#endDateModalTeam').html("");

                    $('#endDateModalTeam').html(kanbanWrap[0]["end-date"]);
                    $("#endDateModalTeam").css("cssText", "display: block !important;");
                    $("#endDateModal").css("cssText", "display: none !important;");

                    $("#reviewerTitle").css("cssText", "display: block !important;margin-top: 20px;");

                    $('#reviewerModalTeam').html("");

                    $('#reviewerModalTeam').html(generateAsignee);
                    $("#reviewerModalTeam").css("cssText", "display: flex !important;");
                    $("#reviewerModal").css("cssText", "display: none !important;");
                }

                $("#commentWrap").html("");
                $("#historyWrap").html("");

                // if(element.getAttribute('data-status') == '')
                // console.log();
                $('#statusTask').val(kanbanWrap[0]["id"]);

                $('#titleEditor').val(kanbanWrap[0]["title-modal"]);
                $('#endDateEditor').val(kanbanWrap[0]["end-date-modal"]);
                $('#asigneeModal').html(kanbanWrap[0]["asignee"]);



                $('#reviewerEditor').val(kanbanWrap[0]["reviewer-id"]);


                $('#actionPlanEditor').html(kanbanWrap[0]["description"]);

                $('#startDateEditor').val(kanbanWrap[0]["start-date"]);


                $('#labelModal').html(kanbanWrap[0]["label"]);
                $('#labelEditor').val(kanbanWrap[0]["label"]);
                $('#endDateEditor').val(kanbanWrap[0]["end-date"]);

                $('#reportSummary').html(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0]["summary-report"] : '-');

                $('#reportSummaryEditor').val(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0][
                    "summary-report"
                ] : '-');

                $('#editActivityId').val(kanbanWrap[0]["activity-id"]);
                $('#detail_kanban').modal('show');


                if (kanbanWrap[0]["label"] != "Personal") {


                    $("#asigneeLabel").css("cssText",
                        "display: block !important;margin-top: 20px !important;");
                    $("#asigneeWrap").css("cssText", "display: flex !important;");

                    var assigned_object = JSON.parse(kanbanWrap[0]["assigned-encode"]);

                    var members_object = JSON.parse(kanbanWrap[0]["members-encode"]);

                    $("#asigneeWrap").html("");

                    for (const [key, value] of Object.entries(assigned_object)) {
                        var html = "";
                        html += '<div class="col-sm-1 mt-1">';
                        html += '<img src="' + value +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += ' alt="flexy">';
                        html += '</div>';
                        html += '<div class="col-sm-11 mt-2">';
                        html +=
                            ' <p style="margin-left: -15px;font-size: 15px;" class="text-dark" id="asigneeModal">';
                        html += members_object[key] + '</p>';
                        html += '</div>';

                        $("#asigneeWrap").prepend(html);
                    }
                } else {

                    $("#asigneeLabel").css("cssText", "display: none !important;");
                    $("#asigneeWrap").css("cssText", "display: none !important;");
                }

                if (kanbanWrap[0]["comment-wrap"]) {
                    var comment_object = JSON.parse(kanbanWrap[0]["comment-wrap"]);

                    for (const [key, value] of Object.entries(comment_object)) {
                        console.log(value);

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by + '</h6>';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html +=
                            '               <div class="row" id="descriptionWrapEdit' +
                            value.id + '">';
                        html += '                   <div class="col-sm-12">';
                        html +=
                            '                      <p style="margin-left: -15px;font-size: 13px;">' +
                            value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                      
                        html +=
                            '    <textarea class="form-control mt-3" cols="30" rows="5"';
                        html +=
                            '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                            value.id + '" placeholder="Add your comment here...">';
                        html += value.description + '</textarea>';
                        html +=
                            '    <div id="button-edit-comment-wrap' + value.id +
                            '" style="display: none;">';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                        html +=
                            '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                            value.id + '`)">Save</button>';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                        html +=
                            '             onclick="cancelEditComment(`' + value.id +
                            '`)">Cancel</button>';
                        html += '          </div>';

                        $("#commentWrap").append(html);
                    }
                }


                if (kanbanWrap[0]["log-wrap"] != null) {

                    $("#log_object_val").val(kanbanWrap[0]["log-wrap"]);

                    var log_object = JSON.parse(kanbanWrap[0]["log-wrap"]);

                    for (const [key, value] of Object.entries(log_object)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' +
                            value.type + ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value
                                .new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#historyWrap").prepend(html);
                    }
                }

            }
        });
    }
</script>

<script>
    function activityDone() {
        
        $.ajax({
            url: "{{ route('verify-activity.get-kanban-done') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                pegawai_id: $('#pegawai_id').val(),
                activity_name: $('#activity_name').val(),
                date_range: $('#date_range').val(),
                status_activity: "done"
            },
            success: function (result) {

                var decode = JSON.parse(result);

                if(decode.item == "") {
                    console.log('true');
                    $("#doneActivityEmpty").css("cssText", "display: block !important;");
                    $("#doneActivityWrap").css("cssText", "display: none !important;");
                } else {
                    $("#doneActivityEmpty").css("cssText", "display: none !important;");
                    $("#doneActivityWrap").css("cssText", "display: flex !important;");

                    $("#doneActivityWrap").html("");

                    for (const [key, value] of Object.entries(decode.item)) {
                        var html = '';

                        html += '<div class="col-sm-6">';
                        html += '                    <div class="card">';
                        html += '                        <div class="card-body">';

                        html +=
                            '<div class="row border-bottom pb-4 mb-4" style="cursor: pointer !important;" onclick="detailActivityDone(`' +
                            value["activity-id"] + '`)">';
                        html += '                                        <div class="col-sm-2">';
                        html +=
                            '                                            <img src="{{ asset("back/images/users/3.jpg")}}" class="img-fluid" alt="">';
                        html += '                                        </div>';
                        html += '                                       <div class="col-sm-10">';
                        html += '                                            <div class="d-flex gap-2"> <h4>' +
                            value.title +
                            '</h4><span class="mb-1 badge rounded-pill bg-light-primary text-primary font-weight-medium">' +
                            value["badge-text"] + '</span></div>';
                        html +=
                            '<h6 class="mt-2">Start Date : ' + value["start-date-readable"] +
                            '</h6><h6>End Date : ' + value["end-date-readable"] +
                            '</h6>';
                        html += '                                       </div>';
                        html += '                                   </div>';
                        html += '                                   <div class="row">';
                        html += '                                       <div class="col-sm-6">';
                        html +=
                            '                                           <button class="btn btn-sm btn-outline-warning w-100 button-reject" type="button" onclick="reject(`' +
                            value["activity-id"] + '`)">Reject</button>';
                        html += '                                       </div>';
                        html += '                                       <div class="col-sm-6">';
                        html +=
                            '                                           <button class="btn btn-sm btn-outline-primary w-100 button-verify" type="button" onclick="verify(`' +
                            value["activity-id"] + '`)">Verify</button>';
                        html += '                                       </div>';
                        html += '                                 </div>';

                        html += '</div>';
                        html += '                   </div>';
                        html += '                </div>';

                        $("#doneActivityWrap").append(html);
                    }
                }
            }
        });
    }

    activityDone();
</script>

<script>
    function activityVerified() {
        $.ajax({
            url: "{{ route('verify-activity.get-kanban-verified') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                pegawai_id: $('#pegawai_id').val(),
                activity_name: $('#activity_name').val(),
                date_range: $('#date_range').val(),
                status_activity: "verified"
            },
            success: function (result) {

                var decode = JSON.parse(result);

                console.log(decode.item[0]);
                if(decode.item == "") {
                    $("#verifiedActivityEmpty").css("cssText", "display: block !important;");
                    $("#verifiedActivityWrap").css("cssText", "display: none !important;");
                } else {
                    $("#verifiedActivityEmpty").css("cssText", "display: none !important;");
                    $("#verifiedActivityWrap").css("cssText", "display: flex !important;");

                    $("#verifiedActivityWrap").html("");

                    for (const [key, value] of Object.entries(decode.item)) {
                        var html = '';

                        html += '<div class="col-sm-6">';
                        html += '                    <div class="card">';
                        html += '                        <div class="card-body">';

                        html +=
                            '<div class="row border-bottom pb-4 mb-4" style="cursor: pointer !important;" onclick="detailActivityVerified(`' +
                            value["activity-id"] + '`)">';
                        html += '                                        <div class="col-sm-2">';
                        html +=
                            '                                            <img src="{{ asset("back/images/users/3.jpg")}}" class="img-fluid" alt="">';
                        html += '                                        </div>';
                        html += '                                       <div class="col-sm-10">';
                        html += '                                            <div class="d-flex gap-2"> <h4>' +
                            value.title +
                            '</h4><span class="mb-1 badge rounded-pill bg-light-primary text-primary font-weight-medium">' +
                            value["badge-text"] + '</span></div>';
                        html +=
                            '<h6 class="mt-2">Start Date : ' + value["start-date-readable"] +
                            '</h6><h6>End Date : ' + value["end-date-readable"] +
                            '</h6>';
                        html += '                                       </div>';
                        html += '                                   </div>';
                        html += '                                   <div class="row">';
                        html += '                                       <div class="col-sm-12">';
                        html +=
                            '                                           <button class="btn btn-sm btn-outline-warning w-100 button-reject" type="button" onclick="reject(`' +
                            value["activity-id"] + '`)">Reject</button>';
                        html += '                                       </div>';
                        // html += '                                       <div class="col-sm-6">';
                        // html +=
                        //     '                                           <button class="btn btn-sm btn-outline-primary w-100 button-verify" type="button" onclick="verify(`' +
                        //     value["activity-id"] + '`)">Verify</button>';
                        // html += '                                       </div>';
                        html += '                                 </div>';

                        html += '</div>';
                        html += '                   </div>';
                        html += '                </div>';

                        $("#verifiedActivityWrap").append(html);
                    }
                }
                
                
            }
        });
    }

    activityVerified();
</script>

<script>
    function filterActivity() {
        activityDone();
        activityVerified();
    }
</script>

<script>
    function statusChange(value) {
        $.ajax({
            url: "{{ route('activity.edit-status-card') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                id_edit: $('#frameWrap').contents().find("#idKanban").val(),
                status: value
            },
            success: function (result) {

                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";

                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }
</script>
<script>
    $('#detail_kanban').on('shown.bs.modal', function () {
        $(document).on('keydown', function (event) {
            if (event.which == 77) { // Check if the key pressed is "m"
                addComment(); // Call your function here
                $("#textEditorComment").html("");
            }
        });
    });

    $('#detail_kanban').on('hidden.bs.modal', function () {
        $(document).off('keydown');
    });
</script>
<script>
    function editStatusKanban() {
        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                id_edit: $('#frameWrap').contents().find("#idKanban").val(),
                status: $('#frameWrap').contents().find("#statusWrap").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);
                console.log(wrap);

                if (wrap.false_reviewer == 1) {
                    Swal.fire({
                        title: 'Alert',
                        text: "You don't have authority to drag the card!",
                        icon: 'warning',
                    });

                    $('#frameWrap').contents().find("#firstElement").remove();
                    $('#frameWrap').contents().find(".kanban-wrapper").remove();

                    var html = "";

                    html += '<div class="row" id="firstElement">';
                    html += '</div>';

                    $('#frameWrap').contents().find(".app-kanban").append(html);
                    $('#frameWrap').contents().find("#firstElement").after(
                        '<div class="kanban-wrapper"></div>');
                    document.getElementById('frameWrap').contentWindow.initKanban();
                }
            }
        });
    }
</script>
<script>
    function deleteAlert() {
        Swal.fire({
            title: 'Done',
            text: "Activity has been deleted successfully!",
            icon: 'success',
        });
    }
</script>

<script>
    function editComment(id) {

        $("#optionComment" + id).css("cssText", "display: none !important;");
        $("#editTextCommentValue" + id).css("cssText", "display: initial !important;");
        $("#descriptionWrapEdit" + id).css("cssText", "display: none !important;");

        $("#editTextCommentValue" + id).focus();
        $("#editTextCommentValue" + id).css("cssText", "margin-left: -18px !important;");
        $("#button-edit-comment-wrap" + id).css("cssText", "display: initial !important;");
    }

    function saveComment() {
        $("#commentInputButton").css("cssText", "display: block !important;");
        $("#button-comment-wrap").css("cssText", "display: none !important;");
        $("#textEditorComment").css("cssText", "display: none !important;");
        $("#commentWrap").html("");

        $.ajax({
            url: "{{ route('activity.save-comment') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                activity_id: $("#editActivityId").val(),
                description: $("#textEditorComment").val()
            },
            success: function (result) {
                $("#textEditorComment").val("");
                var wrap = JSON.parse(result);

                for (const [key, value] of Object.entries(wrap)) {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + value.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        value.commented_by + '</h6>';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        value.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html +=
                        '               <div class="row" id="descriptionWrapEdit' +
                        value.id + '">';
                    html += '                   <div class="col-sm-12">';
                    html +=
                        '                      <p style="margin-left: -15px;font-size: 13px;">' +
                        value.description + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html +=
                        '    <textarea class="form-control mt-3" cols="30" rows="5"';
                    html +=
                        '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                        value.id + '" placeholder="Add your comment here...">';
                    html += value.description + '</textarea>';
                    html +=
                        '    <div id="button-edit-comment-wrap' + value.id +
                        '" style="display: none;">';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                    html +=
                        '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                        value.id + '`)">Save</button>';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                    html +=
                        '             onclick="cancelEditComment(`' + value.id +
                        '`)">Cancel</button>';
                    html += '          </div>';

                    $("#commentWrap").append(html);
                }


                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";

                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveEditComment(id) {
        $("#optionComment" + id).css("cssText", "display: flex !important;");
        $("#button-edit-comment-wrap" + id).css("cssText", "display: none !important;");
        $("#editTextCommentValue" + id).css("cssText", "display: none !important;");
        $("#descriptionWrapEdit" + id).css("cssText", "display: flex !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_comment_id: id,
                edit_description_comment: $("#editTextCommentValue" + id).val()
            },
            success: function (result) {
                $("#textEditorComment").val("");
                var wrap = JSON.parse(result);
                $("#commentWrap").html("");

                for (const [key, value] of Object.entries(wrap.comment)) {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + value.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        value.commented_by + '</h6>';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        value.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html +=
                        '               <div class="row" id="descriptionWrapEdit' +
                        value.id + '">';
                    html += '                   <div class="col-sm-12">';
                    html +=
                        '                      <p style="margin-left: -15px;font-size: 13px;">' +
                        value.description + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html +=
                        '    <textarea class="form-control mt-3" cols="30" rows="5"';
                    html +=
                        '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                        value.id + '" placeholder="Add your comment here...">';
                    html += value.description + '</textarea>';
                    html +=
                        '    <div id="button-edit-comment-wrap' + value.id +
                        '" style="display: none;">';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                    html +=
                        '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                        value.id + '`)">Save</button>';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                    html +=
                        '             onclick="cancelEditComment(`' + value.id +
                        '`)">Cancel</button>';
                    html += '          </div>';

                    $("#commentWrap").append(html);
                }


                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";

                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveTitle() {
        $("#titleModal").css('display', 'block');
        $("#button-title-wrap").css("cssText", "display: none !important;");
        $("#titleEditor").css("cssText", "display: none !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_title: $("#titleEditor").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);

                $("#titleModal").html(wrap.activity.title);

                // modal history value 
                if (wrap.status_log == 'true') {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + wrap.activity_log.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        wrap.activity_log.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' + wrap.activity_log
                        .title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + wrap
                        .activity_log.type + ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        wrap.activity_log.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (wrap.activity_log.old_name != "" && wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.old_name + ' &#8594 ' + wrap.activity_log
                            .new_name;
                    } else if (wrap.activity_log.old_name != "") {
                        var description_log = wrap.old_name;
                    } else if (wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").prepend(html);
                }
                // reinit kanban
                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";


                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveStartDate() {
        $("#startDateModal").css('display', 'block');
        $("#button-start-date-wrap").css("cssText", "display: none !important;");
        $("#startDateEditor").css("cssText", "display: none !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_start_date: $("#startDateEditor").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);

                $("#startDateModal").html(wrap.activity.start_date);

                // modal history value 
                if (wrap.status_log == 'true') {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + wrap.activity_log.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        wrap.activity_log.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' + wrap.activity_log
                        .title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + wrap
                        .activity_log.type + ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        wrap.activity_log.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (wrap.activity_log.old_name != "" && wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.old_name + ' &#8594 ' + wrap.activity_log
                            .new_name;
                    } else if (wrap.activity_log.old_name != "") {
                        var description_log = wrap.old_name;
                    } else if (wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").prepend(html);
                }
                // reinit kanban
                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";


                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveEndDate() {
        $("#endDateModal").css('display', 'block');
        $("#button-end-date-wrap").css("cssText", "display: none !important;");
        $("#endDateEditor").css("cssText", "display: none !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_end_date: $("#endDateEditor").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);

                $("#endDateModal").html(wrap.activity.end_date);

                // modal history value 

                if (wrap.status_log == 'true') {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + wrap.activity_log.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        wrap.activity_log.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' + wrap.activity_log
                        .title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + wrap
                        .activity_log.type + ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        wrap.activity_log.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (wrap.activity_log.old_name != "" && wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.old_name + ' &#8594 ' + wrap.activity_log
                            .new_name;
                    } else if (wrap.activity_log.old_name != "") {
                        var description_log = wrap.old_name;
                    } else if (wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").prepend(html);
                }
                // reinit kanban
                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";


                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveLabel() {
        $("#labelModal").css('display', 'block');
        $("#button-label-wrap").css("cssText", "display: none !important;");
        $("#labelEditor").css("cssText", "display: none !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_label: $("#labelEditor").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);

                $("#labelModal").html(wrap.activity.label);

                // modal history value 
                if (wrap.status_log == 'true') {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + wrap.activity_log.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        wrap.activity_log.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' + wrap.activity_log
                        .title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + wrap
                        .activity_log.type + ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        wrap.activity_log.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (wrap.activity_log.old_name != "" && wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.old_name + ' &#8594 ' + wrap.activity_log
                            .new_name;
                    } else if (wrap.activity_log.old_name != "") {
                        var description_log = wrap.old_name;
                    } else if (wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").prepend(html);
                }
                // reinit kanban
                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";


                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveReviewer() {
        $("#reviewerModal").css('display', 'flex');
        $("#button-reviewer-wrap").css("cssText", "display: none !important;");
        $("#reviewerEditor").css("cssText", "display: none !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_reviewer_id: $("#reviewerEditor").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);

                var reviewer = "";
                reviewer += ' <div class="col-sm-1 mt-1">';
                reviewer += '            <img src="' + wrap.user_photo_reviewer +
                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                reviewer += '                alt="flexy">';
                reviewer += '        </div>';
                reviewer += '        <div class="col-sm-11 mt-2">';
                reviewer +=
                    '            <p style="margin-left: -15px;font-size: 15px;" class="text-dark" id="reviewerModal">';
                reviewer += wrap.user_name_reviewer + '</p>';
                reviewer += '        </div>';
                $("#reviewerModal").html(reviewer);

                // modal history value 
                if (wrap.status_log == 'true') {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + wrap.activity_log.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        wrap.activity_log.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' + wrap.activity_log
                        .title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + wrap
                        .activity_log.type + ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        wrap.activity_log.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (wrap.activity_log.old_name != "" && wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.old_name + ' &#8594 ' + wrap.activity_log
                            .new_name;
                    } else if (wrap.activity_log.old_name != "") {
                        var description_log = wrap.old_name;
                    } else if (wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").prepend(html);
                }
                // reinit kanban
                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";


                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveDescription() {
        $("#actionPlan").css('display', 'block');
        $("#button-action-plan-wrap").css("cssText", "display: none !important;");
        $("#actionPlanEditor").css("cssText", "display: none !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_description: $("#actionPlanEditor").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);

                $("#actionPlan").html(wrap.activity.description);

                // modal history value 
                if (wrap.status_log == 'true') {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + wrap.activity_log.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        wrap.activity_log.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' + wrap.activity_log
                        .title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + wrap
                        .activity_log.type + ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        wrap.activity_log.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (wrap.activity_log.old_name != "" && wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.old_name + ' &#8594 ' + wrap.activity_log
                            .new_name;
                    } else if (wrap.activity_log.old_name != "") {
                        var description_log = wrap.old_name;
                    } else if (wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").prepend(html);
                }
                // reinit kanban
                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";


                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }

    function saveSummaryReport() {

        $("#reportSummary").css('display', 'block');
        $("#button-summary-wrap").css("cssText", "display: none !important;");
        $("#reportSummaryEditor").css("cssText", "display: none !important;");

        $.ajax({
            url: "{{ route('activity.edit-kanban') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                edit_activity_id: $("#editActivityId").val(),
                edit_report_summary: $("#reportSummaryEditor").val()
            },
            success: function (result) {
                var wrap = JSON.parse(result);

                $("#reportSummary").html(wrap.activity.summary_report);

                // modal history value 
                if (wrap.status_log == 'true') {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + wrap.activity_log.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        wrap.activity_log.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' + wrap.activity_log
                        .title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + wrap
                        .activity_log.type + ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        wrap.activity_log.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (wrap.activity_log.old_name != "" && wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.old_name + ' &#8594 ' + wrap.activity_log
                            .new_name;
                    } else if (wrap.activity_log.old_name != "") {
                        var description_log = wrap.old_name;
                    } else if (wrap.activity_log.new_name != "") {
                        var description_log = wrap.activity_log.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").prepend(html);
                }
                $('#frameWrap').contents().find("#firstElement").remove();
                $('#frameWrap').contents().find(".kanban-wrapper").remove();

                var html = "";


                html += '<div class="row" id="firstElement">';
                html += '</div>';

                $('#frameWrap').contents().find(".app-kanban").append(html);
                $('#frameWrap').contents().find("#firstElement").after(
                    '<div class="kanban-wrapper"></div>');
                document.getElementById('frameWrap').contentWindow.initKanban();
            }
        });
    }
</script>

<script>
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }
        });
        $("#createForm").validate({
            rules: {
                title: {
                    required: true,
                },
                description: {
                    required: true,
                },
                start_date: {
                    required: true,
                },
                end_date: {
                    required: true,
                },
                reviewer_id: {
                    required: true,
                }
            },
            messages: {
                title: {
                    required: "Title is required"
                },
                description: {
                    required: "Description is required"
                },
                start_date: {
                    required: "Start Date is required"
                },
                end_date: {
                    required: "End Date is required"
                },
                reviewer_id: {
                    required: "Reviewer is required"
                }
            },
            submitHandler: function (form) {
                // $("#saveButton").prop('disabled', true);
                // form.submit();
            }
        });
    });
</script>

<script>
    var uploadedDocumentMap = {}
    Dropzone.options.documentDropzone = {
        url: '{{ url('activity.store ') }}',
        maxFilesize: 1000000, // MB
        clickable: false,
        addRemoveLinks: false,
        autoProcessQueue: false,
        parallelUploads: 10,
        autoDiscover: false,
        uploadMultiple: true,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
        processData: false,
        contentType: false,
        dictDefaultMessage: "No attachment yet.",
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function (file, response) {

            Swal.fire({
                title: 'Done',
                text: "Activity has been added successfully!",
                icon: 'success',
                confirmButtonColor: '#7066e0',
                confirmButtonText: 'Ok'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#frameWrap').contents().find("#firstElement").remove();
                    $('#frameWrap').contents().find(".kanban-wrapper").remove();

                    var html = "";


                    html += '<div class="row" id="firstElement">';
                    html += '</div>';

                    $('#frameWrap').contents().find(".app-kanban").append(html);
                    $('#frameWrap').contents().find("#firstElement").after(
                        '<div class="kanban-wrapper"></div>');
                    document.getElementById('frameWrap').contentWindow.initKanban();
                }
            })
        },
        init: function () {
            var myDropzone = this;


            $("#saveButton").click(function () {
                // if (myDropzone.getQueuedFiles().length > 0) {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                //     $(".errorAddImage").css("cssText", "display: none !important;");
                // } else {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #f1556c !important; color: #f1556c !important;");
                //     $(".errorAddImage").css("cssText",
                //         "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                //     );
                // }

                if (myDropzone.getQueuedFiles().length > 0 && $('#createForm').valid()) {

                    myDropzone.processQueue();
                    $("#create_kanban").modal('hide');

                } else if (myDropzone.getQueuedFiles().length <= 0 && $('#createForm').valid()) {
                    $("#create_kanban").modal('hide');

                    $.ajax({
                        url: "{{ route('activity.store') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            title: $("#title").val(),
                            description: $("#description").val(),
                            start_date: $("#start_date").val(),
                            end_date: $("#end_date").val(),
                            summary_report: $("#summary_report").val(),
                            reviewer_id: $("#reviewer_id").val(),
                            label: $("#label_value").val(),
                            status: $("#status_val").val()

                        },
                        success: function (result) {

                            Swal.fire({
                                title: 'Done',
                                text: "Activity has been added successfully!",
                                icon: 'success',
                                confirmButtonColor: '#7066e0',
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('#frameWrap').contents().find("#firstElement")
                                        .remove();
                                    $('#frameWrap').contents().find(
                                        ".kanban-wrapper").remove();

                                    var html = "";

                                    html += '<div class="row" id="firstElement">';
                                    html += '</div>';

                                    $('#frameWrap').contents().find(".app-kanban")
                                        .append(html);
                                    $('#frameWrap').contents().find("#firstElement")
                                        .after(
                                            '<div class="kanban-wrapper"></div>');
                                    document.getElementById('frameWrap')
                                        .contentWindow.initKanban();
                                }
                            })
                        }
                    });


                } else {
                    $("#saveButton").prop('disabled', false);
                }
            });

            this.on("addedfiles", function (files) {
                $("#saveButton").click(function (e) {
                    if (!$('#createForm').valid()) {
                        // $("#saveButton").prop('disabled', false);
                    } else {
                        // $("#saveButton").prop('disabled', true);
                        myDropzone.processQueue();
                    }
                });

                // if (myDropzone.getQueuedFiles().length > 0) {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                //     $(".errorAddImage").css("cssText", "display: none !important;");
                // } else {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #f1556c !important; color: #f1556c !important;");
                //     $(".errorAddImage").css("cssText",
                //         "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                //     );
                // }

            });

            this.on('sendingmultiple', function (file, xhr, formData) {
                // Append all form inputs to the formData Dropzone will POST
                var data = $('#createForm').serializeArray();

                $.each(data, function (key, el) {
                    formData.append(el.name, el.value);
                });

            });
        },
        removedfile: function (file) {
            file.previewElement.remove()
            var name = ''
            if (typeof file.file_name !== 'undefined') {
                name = file.file_name
            } else {
                name = uploadedDocumentMap[file.name]
            }
            $('form').find('input[name="photo[]"][value="' + name + '"]').remove()
        }
    }

    var uploadedEditDocumentMap = {}
    Dropzone.options.documentEditDropzone = {
        url: '{{ url('activity.edit-attachment') }}',
        maxFilesize: 1000000, // MB
        clickable: false,
        addRemoveLinks: false,
        autoProcessQueue: true,
        parallelUploads: 10,
        autoDiscover: false,
        uploadMultiple: true,
        // acceptedFiles: ".jpeg,.jpg,.png,.gif",
        processData: true,
        contentType: false,
        dictDefaultMessage: "No attachment yet.",
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function (file_new, response) {
            var myEditDropzone = this;
            $(".dz-processing").remove();
            $(".dz-preview").not(".dz-image-preview").remove();

            for (const [key, value] of Object.entries(response.attachment_id)) {

                var file = value;
                var url = "{{ url('activity/download-attachment') }}/" + value.id;

                myEditDropzone.emit("addedfile", file);
                myEditDropzone.emit("thumbnail", file, value.url);
                myEditDropzone.emit("complete", file);

                var anchorEl = document.createElement('a');
                anchorEl.setAttribute('href', url);
                anchorEl.setAttribute('class', 'download-dropzone');
                anchorEl.innerHTML = "<br>Download";
                file.previewTemplate.appendChild(anchorEl);

            }



            for (const [key, value] of Object.entries(response.activity_log)) {

                var html = "";
                html += ' <div class="col-sm-1 mt-4">';
                html +=
                    '            <img src="' + value.user_photo + '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                html += '               alt="flexy">';
                html += '        </div>';
                html += '       <div class="col-sm-11">';
                html += '           <div class="row">';
                html += '               <div class="col-sm-12 d-flex">';
                html +=
                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                    value.user_name + '</h6>' + ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                    value.title + ' </p> ' +
                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value.type +
                    ' </p> ';
                html +=
                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                    value.created_at + '</p>';
                html += '              </div>';
                html += '             </div>';
                html += '               <div class="row">';
                html += '                   <div class="col-sm-12">';
                html += '<p style="margin-left: -15px;font-size: 13px;">';

                if (value.old_name != "" && value.new_name != "") {
                    var description_log = value.old_name + ' &#8594 ' + value.new_name;
                } else if (value.old_name != "") {
                    var description_log = value.old_name;
                } else if (value.new_name != "") {
                    var description_log = value.new_name;
                }

                html += '' + description_log + '</p>';
                html += '                    </div>';
                html += '                </div>';
                html += '          </div>';

                $("#historyWrap").prepend(html);
            }

            Swal.fire({
                title: 'Done',
                text: "Attachment has been updated successfully!",
                icon: 'success',
                confirmButtonColor: '#7066e0',
                confirmButtonText: 'Ok'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#frameWrap').contents().find("#firstElement").remove();
                    $('#frameWrap').contents().find(".kanban-wrapper").remove();

                    var html = "";


                    html += '<div class="row" id="firstElement">';
                    html += '</div>';

                    $('#frameWrap').contents().find(".app-kanban").append(html);
                    $('#frameWrap').contents().find("#firstElement").after(
                        '<div class="kanban-wrapper"></div>');
                    document.getElementById('frameWrap').contentWindow.initKanban();
                }
            })
        },
        init: function () {
            var myEditDropzone = this;

            $(document).on('show.bs.modal', '#detail_kanban', function () {
                $(".attachment-delete-id").remove();
                $(".dz-preview").remove();

                $.ajax({
                    url: "{{ route('activity.get-attachment') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        activity_id: $("#editActivityId").val(),
                    },
                    success: function (result) {
                        var wrap = JSON.parse(result);
                        for (const [key, value] of Object.entries(wrap)) {

                            var html = "";

                            // $(".download-dropzone").html("");
                            var file = value;
                            var url = "{{ url('activity/download-attachment') }}/" + value
                                .id;

                            myEditDropzone.emit("addedfile", file);
                            myEditDropzone.emit("thumbnail", file, value.url);
                            myEditDropzone.emit("complete", file);

                            var anchorEl = document.createElement('a');
                            anchorEl.setAttribute('href', url);
                            anchorEl.setAttribute('class', 'download-dropzone');
                            anchorEl.innerHTML = "<br>Download";
                            file.previewTemplate.appendChild(anchorEl);
                            // html += `<a href="{{ url('activity/download-attachment') }}/` + file + `" class="download-dropzone"><br>Download</a>`;

                            // $(".dz-preview").append(html);
                        }
                    }

                });


            });


            // $("#editProdukButton").click(function() {
            //     var checkImage = document.getElementsByClassName('dz-preview');

            //     if (checkImage.length > 0) {
            //         $(".dropzone").css("cssText",
            //             "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
            //         $(".errorEditImage").css("cssText", "display: none !important;");
            //     } else {
            //         $(".dropzone").css("cssText",
            //             "border: 1px solid #f1556c !important; color: #f1556c !important;");
            //         $(".errorEditImage").css("cssText",
            //             "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
            //         );
            //     }

            //     if (checkImage.length > 0 && $('#editProdukForm').valid()) {

            //         $('#editProdukForm')[0].submit();

            //         myEditDropzone.processQueue();

            //         $("#editProdukButton").prop('disabled', true);
            //     } else {
            //         $("#editProdukButton").prop('disabled', false);
            //     }

            // });

            // this.on("addedfiles", function(files) {
            //     $("#editProdukButton").click(function(e) {
            //         if (!$('#editProdukForm').valid()) {
            //             $("#editProdukButton").prop('disabled', false);
            //         } else {
            //             myEditDropzone.processQueue();
            //         }
            //     });

            //     var checkImage = document.getElementsByClassName('dz-preview');
            //     if (checkImage.length > 0) {
            //         $(".edit-dropzone").css("cssText",
            //             "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
            //         $(".errorEditImage").css("cssText", "display: none !important;");
            //     } else {
            //         $(".edit-dropzone").css("cssText",
            //             "border: 1px solid #f1556c !important; color: #f1556c !important;");
            //         $(".errorEditImage").css("cssText",
            //             "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
            //         );
            //     }
            // });

            this.on('sendingmultiple', function (file, xhr, formData) {
                // Append all form inputs to the formData Dropzone will POST
                formData.append('edit_activity_id', $('#editActivityId').val());

            });


        },
        removedfile: function (file) {
            Swal.fire({
                title: "Delete Attachment?",
                text: `Are you sure to delete this attachment?`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonColor: "rgb(11, 42, 151)",
                cancelButtonColor: "rgb(209, 207, 207)",
                confirmButtonText: "Yes, Delete it !",
                cancelButtonText: "Cancel"
            }).then(function (t) {
                if (t.value) {

                    var token = '{{ csrf_token() }}';

                    $.ajax({
                        url: "{{ url('activity.edit-attachment') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            attachment: file.id,
                            edit_activity_id: $('#editActivityId').val(),
                        },
                        success: function (result) {
                            for (const [key, value] of Object.entries(
                                    result.activity_log)) {

                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html +=
                                    '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.user_name + '</h6>' +
                                    ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                    value.title + ' </p> ' +
                                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' +
                                    value.type +
                                    ' </p> ';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html += '               <div class="row">';
                                html +=
                                    '                   <div class="col-sm-12">';
                                html +=
                                    '<p style="margin-left: -15px;font-size: 13px;">';

                                if (value.old_name != "" && value
                                    .new_name != "") {
                                    var description_log = value.old_name +
                                        ' &#8594 ' + value.new_name;
                                } else if (value.old_name != "") {
                                    var description_log = value.old_name;
                                } else if (value.new_name != "") {
                                    var description_log = value.new_name;
                                }

                                html += '' + description_log + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html += '          </div>';

                                $("#historyWrap").prepend(html);
                            }

                            $('#detailKanbanForm').prepend(
                                '<input type="hidden" class="attachment-delete-id" name="attachment[]" value="' +
                                file
                                .id + '">')

                            file.previewElement.remove()
                            var name = ''
                            if (typeof file.file_name !== 'undefined') {
                                name = file.file_name
                            } else {
                                name = uploadedEditDocumentMap[file.name]
                            }

                            $('#detailKanbanForm').find(
                                    'input[name="attachment[]"][value="' + name + '"]')
                                .remove()
                            $('#detailKanbanForm').find('input[name="file"]').remove()

                            Swal.fire({
                                title: 'Done',
                                text: "Attachment has been updated successfully!",
                                icon: 'success',
                                confirmButtonColor: '#7066e0',
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.isConfirmed) {

                                    $('#frameWrap').contents().find("#firstElement")
                                        .remove();
                                    $('#frameWrap').contents().find(
                                        ".kanban-wrapper").remove();

                                    var html = "";

                                    html += '<div class="row" id="firstElement">';
                                    html += '</div>';

                                    $('#frameWrap').contents().find(".app-kanban")
                                        .append(html);
                                    $('#frameWrap').contents().find("#firstElement")
                                        .after(
                                            '<div class="kanban-wrapper"></div>');
                                    document.getElementById('frameWrap')
                                        .contentWindow.initKanban();
                                }
                            })
                        }

                    });

                }
            })
        }
    }
</script>

<script>
    function cancelComment() {
        $("#commentInputButton").css("cssText", "display: block !important;margin-left: -18px;margin-bottom: 10px;");
        $("#proTip").css('display', 'block');
        $("#button-comment-wrap").css("cssText", "display: none !important;");
        $("#textEditorComment").css("cssText", "display: none !important;");
    }

    function cancelEditComment(id) {
        $("#optionComment" + id).css("cssText", "display: flex !important;");
        $("#button-edit-comment-wrap" + id).css("cssText", "display: none !important;");
        $("#editTextCommentValue" + id).css("cssText", "display: none !important;");
        $("#descriptionWrapEdit" + id).css("cssText", "display: flex !important;");
    }

    function addComment() {
        $("#commentInputButton").css("cssText", "display: none !important;");
        $("#textEditorComment").css("cssText", "display: block !important;");
        $("#proTip").css('display', 'none');

        $("#textEditorComment").css("cssText", "margin-left: -18px !important;");
        $("#button-comment-wrap").css("cssText", "display: block !important;");
    }

    function cancelTitle() {
        $("#titleModal").css('display', 'block');
        $("#button-title-wrap").css("cssText", "display: none !important;");
        $("#titleEditor").css("cssText", "display: none !important;");
    }

    function cancelActionPlan() {
        $("#actionPlan").css('display', 'block');
        $("#button-action-plan-wrap").css("cssText", "display: none !important;");
        $("#actionPlanEditor").css("cssText", "display: none !important;");
    }

    function cancelStartDate() {
        $("#startDateModal").css('display', 'block');
        $("#button-start-date-wrap").css("cssText", "display: none !important;");
        $("#startDateEditor").css("cssText", "display: none !important;");
    }

    function cancelEndDate() {
        $("#endDateModal").css('display', 'block');
        $("#button-end-date-wrap").css("cssText", "display: none !important;");
        $("#endDateEditor").css("cssText", "display: none !important;");
    }

    function cancelLabel() {
        $("#labelModal").css('display', 'block');
        $("#button-label-wrap").css("cssText", "display: none !important;");
        $("#labelEditor").css("cssText", "display: none !important;");
    }

    function cancelSummary() {
        $("#reportSummary").css('display', 'block');
        $("#button-summary-wrap").css("cssText", "display: none !important;");
        $("#reportSummaryEditor").css("cssText", "display: none !important;");
    }

    function cancelReviewer() {
        $("#reviewerModal").css('display', 'flex');
        $("#button-reviewer-wrap").css("cssText", "display: none !important;");
        $("#reviewerEditor").css("cssText", "display: none !important;");
    }

    function actionPlanInput() {
        $("#actionPlan").css('display', 'none');
        $("#actionPlanEditor").css("cssText", "display: block !important;");
        $("#actionPlanEditor").focus();
        $("#button-action-plan-wrap").css("cssText", "display: block !important;");
    }

    function titleInput() {
        $("#titleModal").css('display', 'none');
        $("#titleEditor").css("cssText", "display: block !important;");
        $("#titleEditor").focus();
        $("#button-title-wrap").css("cssText", "display: block !important;");
    }

    function startDateInput() {
        $("#startDateModal").css('display', 'none');
        $("#startDateEditor").css("cssText", "display: block !important;");
        $("#startDateEditor").focus();
        $("#button-start-date-wrap").css("cssText", "display: block !important;");
    }

    function endDateInput() {
        $("#endDateModal").css('display', 'none');
        $("#endDateEditor").css("cssText", "display: block !important;");
        $("#endDateEditor").focus();
        $("#button-end-date-wrap").css("cssText", "display: block !important;");
    }

    function labelInput() {
        $("#labelModal").css('display', 'none');
        $("#labelEditor").css("cssText", "display: block !important;");
        $("#labelEditor").focus();
        $("#button-label-wrap").css("cssText", "display: block !important;");
    }

    function reviewerInput() {
        $("#reviewerModal").css('display', 'none');
        $("#reviewerEditor").css("cssText", "display: block !important;");
        $("#reviewerEditor").focus();
        $("#button-reviewer-wrap").css("cssText", "display: block !important;");
    }

    // function reportSummaryInput() {
    //     $("#reportSummary").css('display', 'none');
    //     $("#reportSummaryEditor").css("cssText", "display: block !important;");
    //     $("#reportSummaryEditor").focus();
    //     $("#button-summary-wrap").css("cssText", "display: block !important;");
    // }

    function newestOrder() {
        $("#newestFirst").css('display', 'none');
        $("#oldestFirst").css('display', 'block');
        $("#activity_tab_order").val("latest");

        if ($("#activity_tab_status").val() == "comment") {
            $("#commentWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {

                    for (const [key, value] of Object.entries(result)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by + '</h6>';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html +=
                            '               <div class="row" id="descriptionWrapEdit' +
                            value.id + '">';
                        html += '                   <div class="col-sm-12">';
                        html +=
                            '                      <p style="margin-left: -15px;font-size: 13px;">' +
                            value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html +=
                            '    <textarea class="form-control mt-3" cols="30" rows="5"';
                        html +=
                            '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                            value.id + '" placeholder="Add your comment here...">';
                        html += value.description + '</textarea>';
                        html +=
                            '    <div id="button-edit-comment-wrap' + value.id +
                            '" style="display: none;">';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                        html +=
                            '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                            value.id + '`)">Save</button>';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                        html +=
                            '             onclick="cancelEditComment(`' + value.id +
                            '`)">Cancel</button>';
                        html += '          </div>';
                        $("#commentWrap").append(html);
                    }

                }
            });
        } else if ($("#activity_tab_status").val() == "history") {
            $("#historyWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {
                    for (const [key, value] of Object.entries(result)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                            .type +
                            ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value.new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#historyWrap").append(html);
                    }
                }
            });
        }

    }

    function oldestOrder() {
        $("#oldestFirst").css('display', 'none');
        $("#newestFirst").css('display', 'block');
        $("#activity_tab_order").val("oldest");

        if ($("#activity_tab_status").val() == "comment") {
            $("#commentWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {

                    for (const [key, value] of Object.entries(result)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by + '</h6>';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html +=
                            '               <div class="row" id="descriptionWrapEdit' +
                            value.id + '">';
                        html += '                   <div class="col-sm-12">';
                        html +=
                            '                      <p style="margin-left: -15px;font-size: 13px;">' +
                            value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html +=
                            '    <textarea class="form-control mt-3" cols="30" rows="5"';
                        html +=
                            '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                            value.id + '" placeholder="Add your comment here...">';
                        html += value.description + '</textarea>';
                        html +=
                            '    <div id="button-edit-comment-wrap' + value.id +
                            '" style="display: none;">';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                        html +=
                            '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                            value.id + '`)">Save</button>';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                        html +=
                            '             onclick="cancelEditComment(`' + value.id +
                            '`)">Cancel</button>';
                        html += '          </div>';

                        $("#commentWrap").append(html);
                    }


                }
            });
        } else if ($("#activity_tab_status").val() == "history") {
            $("#historyWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {
                    for (const [key, value] of Object.entries(result)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                            .type +
                            ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value.new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#historyWrap").append(html);
                    }
                }
            });
        }
    }

    function allActivity(element) {
        $("#activity_tab_status").val("all");
        $("#allWrap").css('display', 'flex');
        $("#historyWrap").css('display', 'none');
        $("#commentWrap").css('display', 'none');

        $(".activity-choose").removeClass("text-white");
        $(".activity-choose").addClass("text-info");
        $(".activity-choose").addClass("btn-light-info");
        if ($(element).hasClass("btn-light-info")) {
            $(element).removeClass("btn-light-info");
            $(element).addClass("text-white");
            $(element).addClass("btn-info");
        }

        $("#allWrap").html("");

        $.ajax({
            url: "{{ route('activity.filter-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                status: $("#activity_tab_status").val(),
                activity_id: $("#editActivityId").val(),
                order: $("#activity_tab_order").val(),
            },
            success: function (result) {
                for (const [key, value] of Object.entries(result)) {
                    if ('commented_by' in value) {
                        var env = "{{ env('APP_URL') }}";
                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + env + value.commented_by_relation.photos_storage +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by_relation.name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.activity_by_relation.title + ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at_lang + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        html += '' + value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#allWrap").append(html);
                    } else {
                        var env = "{{ env('APP_URL') }}";
                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + env + value.user_by_relation.photos_storage +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_by_relation.name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                            .type +
                            ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at_lang + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value.new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#allWrap").append(html);
                    }
                }
            }
        });
    }

    function commentActivity(element) {
        $("#activity_tab_status").val("comment");
        $("#commentWrap").css('display', 'flex');
        $("#allWrap").css('display', 'none');
        $("#historyWrap").css('display', 'none');
        $(".activity-choose").removeClass("text-white");
        $(".activity-choose").addClass("text-info");
        $(".activity-choose").addClass("btn-light-info");
        if ($(element).hasClass("btn-light-info")) {
            $(element).removeClass("btn-light-info");
            $(element).addClass("text-white");
            $(element).addClass("btn-info");
        }

        $("#commentWrap").html("");

        $.ajax({
            url: "{{ route('activity.filter-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                status: $("#activity_tab_status").val(),
                activity_id: $("#editActivityId").val(),
                order: $("#activity_tab_order").val(),
            },
            success: function (result) {

                for (const [key, value] of Object.entries(result)) {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + value.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        value.commented_by + '</h6>';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        value.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html +=
                        '               <div class="row" id="descriptionWrapEdit' +
                        value.id + '">';
                    html += '                   <div class="col-sm-12">';
                    html +=
                        '                      <p style="margin-left: -15px;font-size: 13px;">' +
                        value.description + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html +=
                        '    <textarea class="form-control mt-3" cols="30" rows="5"';
                    html +=
                        '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                        value.id + '" placeholder="Add your comment here...">';
                    html += value.description + '</textarea>';
                    html +=
                        '    <div id="button-edit-comment-wrap' + value.id +
                        '" style="display: none;">';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                    html +=
                        '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                        value.id + '`)">Save</button>';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                    html +=
                        '             onclick="cancelEditComment(`' + value.id +
                        '`)">Cancel</button>';
                    html += '          </div>';
                    $("#commentWrap").append(html);
                }
            }
        });
    }

    function historyActivity(element) {
        $("#activity_tab_status").val("history");
        $("#commentWrap").css('display', 'none');

        $("#allWrap").css('display', 'none');
        $("#historyWrap").css('display', 'flex');
        $(".activity-choose").removeClass("text-white");
        $(".activity-choose").addClass("text-info");
        $(".activity-choose").addClass("btn-light-info");
        if ($(element).hasClass("btn-light-info")) {
            $(element).removeClass("btn-light-info");
            $(element).addClass("text-white");
            $(element).addClass("btn-info");
        }

        $("#historyWrap").html("");
        $.ajax({
            url: "{{ route('activity.filter-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                status: $("#activity_tab_status").val(),
                activity_id: $("#editActivityId").val(),
                order: $("#activity_tab_order").val(),
            },
            success: function (result) {
                for (const [key, value] of Object.entries(result)) {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + value.user_photo + '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        value.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                        value.title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                        .type +
                        ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        value.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (value.old_name != "" && value.new_name != "") {
                        var description_log = value.old_name + ' &#8594 ' + value.new_name;
                    } else if (value.old_name != "") {
                        var description_log = value.old_name;
                    } else if (value.new_name != "") {
                        var description_log = value.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").append(html);
                }
            }
        });
    }
</script>

<script>
    function deleteComment(id) {
        Swal.fire({
            title: "Delete This Comment?",
            text: `Are you sure to delete this comment?`,
            icon: "warning",
            showCancelButton: !0,
            confirmButtonColor: "rgb(11, 42, 151)",
            cancelButtonColor: "rgb(209, 207, 207)",
            confirmButtonText: "Yes, Delete it!",
            cancelButtonText: "Cancel"
        }).then(function (t) {
            if (t.value) {
                $.ajax({
                    url: "{{ route('activity.delete-comment') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        id: id,
                        activity_id: $("#editActivityId").val(),
                    },
                    success: function (result) {
                        $("#commentWrap").html("");

                        Swal.fire({
                            icon: 'success',
                            title: 'Done',
                            text: 'Comment has been deleted successfully',
                        })

                        var wrap = JSON.parse(result);

                        for (const [key, value] of Object.entries(wrap)) {

                            var html = "";
                            html += ' <div class="col-sm-1 mt-4">';
                            html +=
                                '            <img src="' + value.user_photo +
                                '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                            html += '               alt="flexy">';
                            html += '        </div>';
                            html += '       <div class="col-sm-11">';
                            html += '           <div class="row">';
                            html += '               <div class="col-sm-12 d-flex">';
                            html +=
                                '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                value.commented_by + '</h6>';
                            html +=
                                '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                value.created_at + '</p>';
                            html += '              </div>';
                            html += '             </div>';
                            html +=
                                '               <div class="row" id="descriptionWrapEdit' +
                                value.id + '">';
                            html += '                   <div class="col-sm-12">';
                            html +=
                                '                      <p style="margin-left: -15px;font-size: 13px;">' +
                                value.description + '</p>';
                            html += '                    </div>';
                            html += '                </div>';
                            html +=
                                '    <textarea class="form-control mt-3" cols="30" rows="5"';
                            html +=
                                '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                                value.id + '" placeholder="Add your comment here...">';
                            html += value.description + '</textarea>';
                            html +=
                                '    <div id="button-edit-comment-wrap' + value.id +
                                '" style="display: none;">';
                            html +=
                                '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                            html +=
                                '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                                value.id + '`)">Save</button>';
                            html +=
                                '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                            html +=
                                '             onclick="cancelEditComment(`' + value.id +
                                '`)">Cancel</button>';
                            html += '          </div>';

                            $("#commentWrap").append(html);
                        }


                        $('#frameWrap').contents().find("#firstElement").remove();
                        $('#frameWrap').contents().find(".kanban-wrapper").remove();

                        var html = "";

                        html += '<div class="row" id="firstElement">';
                        html += '</div>';

                        $('#frameWrap').contents().find(".app-kanban").append(html);
                        $('#frameWrap').contents().find("#firstElement").after(
                            '<div class="kanban-wrapper"></div>');
                        document.getElementById('frameWrap').contentWindow.initKanban();
                    }
                });
            }
        })
    }
</script>
@endsection