@extends('layouts.index')
@section('title')
    Recap 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;
                    }

                    #linkWrap: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">
                            Recap Activity
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Recap 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 for="search">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">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-3 d-flex flex-column">
                                    <label>Division</label>
                                    <select name="division_id" class="form-select" id="division_id">
                                        <option value="">Choose Division</option>
                                        @foreach ($ref_unit_kerja as $data)
                                            <option value="{{ $data->id }}">{{ $data->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3 d-flex flex-column">
                                    <label>Program</label>
                                    <select name="program_id" class="form-select" id="program_id">
                                        <option value="">Choose Program</option>
                                        @foreach ($program as $data)
                                            <option value="{{ $data->id }}">{{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3 d-flex flex-column">
                                    <label>Event</label>
                                    <select name="event_id" class="form-select" id="event_id">
                                        <option value="">Choose Event</option>
                                        @foreach ($event as $data)
                                            <option value="{{ $data->id }}">{{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3 d-flex flex-column">
                                    <label>Project</label>
                                    <select name="project_id" class="form-select" id="project_id">
                                        <option value="">Choose Project</option>
                                        @foreach ($project as $data)
                                            <option value="{{ $data->id }}">{{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-3 d-flex flex-column">
                                    <label>Delegated Job</label>
                                    <select name="delegated_job_id" class="form-select" id="delegated_job_id">
                                        <option value="">Choose Delegated Job</option>
                                        @foreach ($delegated_job as $data)
                                            <option value="{{ $data->id }}">{{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-4">
                                <div class="col-sm-12 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="activityAll()">All</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="process-part">
                                    <i class="bi bi-gear"></i><span class="d-none d-md-block font-weight-medium"
                                        onclick="activityProcess()">Process</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="verified-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="card">
                                        <div class="card-body">
                                            <div id="activityAllWrap">

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

                                </div>
                                <div class="col-md-12 process-part" style="display: none;">
                                    <div class="card">
                                        <div class="card-body">
                                            <div id="activityProcessWrap">

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

                                </div>

                                <div class="col-md-12 verified-part" style="display: none;">
                                    <div class="card">
                                        <div class="card-body">
                                            <div id="activityVerifiedWrap">

                                            </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="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;" 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>
        $(document).ready(function() {
            $("#allActivityTable").DataTable({
                dom: "Bfrtip",
                buttons: [{
                        extend: "excel",
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                    // Add the "print" button
                    {
                        extend: "print", // The name of the print button extension
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                    {
                        extend: "csv", // The name of the print button extension
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                ],
            });
            $(
                ".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
            ).addClass("btn btn-primary mr-1");

            $("#processActivityTable").DataTable({
                dom: "Bfrtip",
                buttons: [{
                        extend: "excel",
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                    // Add the "print" button
                    {
                        extend: "print", // The name of the print button extension
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                    {
                        extend: "csv", // The name of the print button extension
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                ],
            });
            $(
                ".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
            ).addClass("btn btn-primary mr-1");

            $("#verifiedActivityTable").DataTable({
                dom: "Bfrtip",
                buttons: [{
                        extend: "excel",
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                    // Add the "print" button
                    {
                        extend: "print", // The name of the print button extension
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                    {
                        extend: "csv", // The name of the print button extension
                        exportOptions: {
                            columns: ":not(.not-export-column)",
                        },
                    },
                ],
            });
            $(
                ".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
            ).addClass("btn btn-primary mr-1");
        });
    </script>

    <script>
        function detailActivityProcess(activity_id) {
            $.ajax({
                url: "{{ route('recap-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("");

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

                        $('#linkTeam').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                        $("#linkTeam").css("cssText", "display: block !important;");
                        $("#link").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('recap-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;");

                        $('#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;");

                        $('#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 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>
        $(".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;");

                    $('#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;");

                    $('#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;");

                    $('#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;");

                    $('#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 activityAll() {

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

            $.ajax({
                url: "{{ route('recap-activity.get-all') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    pegawai_id: $('#pegawai_id').val(),
                    date_range: $('#date_range').val(),
                    division_id: $('#division_id').val(),
                    program_id: $('#program_id').val(),
                    project_id: $('#project_id').val(),
                    event_id: $('#event_id').val(),
                    delegated_job_id: $('#delegated_job_id').val(),
                    status_activity: "verified"
                },
                success: function(result) {
                    $("#activityAllWrap").html(result);
                    $("#allActivityTable").DataTable({
                        dom: "Bfrtip",
                        buttons: [{
                                extend: "excel",
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                            // Add the "print" button
                            {
                                extend: "print", // The name of the print button extension
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                            {
                                extend: "csv", // The name of the print button extension
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                        ],
                    });
                    $(
                        ".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
                    ).addClass("btn btn-primary mr-1");
                }
            });
        }

        activityAll();

        function activityProcess() {

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

            $.ajax({
                url: "{{ route('recap-activity.get-process') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    pegawai_id: $('#pegawai_id').val(),
                    date_range: $('#date_range').val(),
                    division_id: $('#division_id').val(),
                    program_id: $('#program_id').val(),
                    project_id: $('#project_id').val(),
                    event_id: $('#event_id').val(),
                    delegated_job_id: $('#delegated_job_id').val(),
                    status_activity: "verified"
                },
                success: function(result) {
                    $("#activityProcessWrap").html(result);
                    $("#processActivityTable").DataTable({
                        dom: "Bfrtip",
                        buttons: [{
                                extend: "excel",
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                            // Add the "print" button
                            {
                                extend: "print", // The name of the print button extension
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                            {
                                extend: "csv", // The name of the print button extension
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                        ],
                    });
                    $(
                        ".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
                    ).addClass("btn btn-primary mr-1");
                }
            });
        }

        activityProcess();

        function activityVerified() {

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

            $.ajax({
                url: "{{ route('recap-activity.get-verified') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    pegawai_id: $('#pegawai_id').val(),
                    date_range: $('#date_range').val(),
                    division_id: $('#division_id').val(),
                    program_id: $('#program_id').val(),
                    project_id: $('#project_id').val(),
                    event_id: $('#event_id').val(),
                    delegated_job_id: $('#delegated_job_id').val(),
                    status_activity: "verified"
                },
                success: function(result) {
                    $("#activityVerifiedWrap").html(result);
                    $("#verifiedActivityTable").DataTable({
                        dom: "Bfrtip",
                        buttons: [{
                                extend: "excel",
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                            // Add the "print" button
                            {
                                extend: "print", // The name of the print button extension
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                            {
                                extend: "csv", // The name of the print button extension
                                exportOptions: {
                                    columns: ":not(.not-export-column)",
                                },
                            },
                        ],
                    });
                    $(
                        ".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
                    ).addClass("btn btn-primary mr-1");
                }
            });
        }

        activityVerified();
    </script>
    <script>
        function filterActivity() {
            activityAll();
            activityProcess();
            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: "Drop attachment here...",
            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 linkInput() {
            $("#linkWrap").css('display', 'none');
            $("#linkEditor").css("cssText", "display: block !important;");
            $("#linkEditor").focus();
            $("#button-link-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