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

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

        p.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;
            cursor: pointer;
        }

        #programText:hover {
            background: #f2f2f2;
            cursor: pointer;
        }

        #actionPlan:hover {
            background: #f2f2f2;
            cursor: pointer;
        }

        #linkWrap:hover {
            background: #f2f2f2;
            cursor: pointer;
        }

        #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;
        }

        .colored-toast.swal2-icon-success {
            background-color: #a5dc86 !important;
        }

        .colored-toast.swal2-icon-error {
            background-color: #f27474 !important;
        }

        .colored-toast.swal2-icon-warning {
            background-color: #f8bb86 !important;
        }

        .colored-toast.swal2-icon-info {
            background-color: #3fc3ee !important;
        }

        .colored-toast.swal2-icon-question {
            background-color: #87adbd !important;
        }

        .colored-toast .swal2-title {
            color: white;
        }

        .colored-toast .swal2-close {
            color: white;
        }

        .colored-toast .swal2-html-container {
            color: white;
        }

        .to-do {
            background-color: #f0f0f0;
            color: #000000;
        }

        .in-progress {
            background-color: #ffff99;
            color: #000000;
        }

        .done {
            background-color: #00cc00;
            color: #ffffff;
        }

        .verified {
            background-color: #007bff;
            color: #ffffff;
        }

        .pending {
            background-color: #800080;
            color: #ffffff;
        }

        .cancel {
            background-color: #ff0000;
            color: #ffffff;
        }

        .table-responsive::-webkit-scrollbar {
            -webkit-appearance: none;
        }

        .table-responsive::-webkit-scrollbar:vertical {
            width: 12px;
        }

        .table-responsive::-webkit-scrollbar:horizontal {
            height: 12px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, .5);
            border-radius: 10px;
            border: 2px solid #ffffff;
        }

        .table-responsive::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #ffffff;
        }
    </style>
@endsection
@section('content')
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <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">
                            Activity
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Activity</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid" id="wrapContainer">
        <!-- Row -->
        <input type="hidden" name="title_activity[]" id="titleActivity" value="Personal">
        <input type="hidden" id="uniqueIdFrame" value="Personal">
        <input type="hidden" id="tabType" value="Personal">

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="row">
                        <div class="col-lg-3 border-end pe-0">
                            <div class="p-3 border-bottom">
                                <a href="#" data-bs-toggle="modal" data-bs-target="#create_kanban"
                                    onclick="addActivityButton()"
                                    class="
                            btn
                            d-flex
                            align-items-center
                            justify-content-center
                            btn-light-danger
                            text-danger
                            d-block
                            w-100
                            waves-effect waves-light
                          ">
                                    <i class="ri-add-line fs-6 me-2"></i> Add New Activity
                                </a>
                            </div>
                            <div class="p-3">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h4 class="mb-3">LIST OF ACTIVITY</h4>
                                        <div id="activityLabelWrap">
                                            <div id="calendar-events">
                                                <ul class="mailbox list-style-none app-invoice">
                                                    <li>
                                                        <div class="message-center chat-scroll invoice-users"
                                                            style="height: calc(100vh - 150px) !important">
                                                            @php
                                                                $pegawai_id = \App\Models\Pegawai::where('id_user', Auth::user()->id)->first()->id;
                                                                
                                                                $totalActivity = \App\Models\Activity::where('label', '=', 'Personal')
                                                                    ->where(function ($query) use ($pegawai_id) {
                                                                        $query->whereHas('get_asignee', function ($q) {
                                                                            $q->where('user_id', Auth::user()->id);
                                                                        });
                                                                        $query->orWhere('reviewer_id', $pegawai_id);
                                                                    })
                                                                    ->count();
                                                                
                                                                if ($totalActivity >= 1) {
                                                                    $completedPersonal = \App\Models\Activity::where('label', '=', 'Personal')
                                                                        ->where('status', '=', 'verified')
                                                                        ->where(function ($query) use ($pegawai_id) {
                                                                            $query->whereHas('get_asignee', function ($q) {
                                                                                $q->where('user_id', Auth::user()->id);
                                                                            });
                                                                            $query->orWhere('reviewer_id', $pegawai_id);
                                                                        })
                                                                        ->count();
                                                                
                                                                    // Calculate the percentage of completed programs
                                                                    $completionPercentagePersonal = ($completedPersonal / $totalActivity) * 100;
                                                                
                                                                    // Round the percentage to 2 decimal places
                                                                    $total_progress_personal = round($completionPercentagePersonal, 2);
                                                                } else {
                                                                    $total_progress_personal = 0;
                                                                }
                                                            @endphp

                                                            <a href="javascript:void(0)"
                                                                class="invoice-user message-item @if (session('personal') || session('personal-team')) active @elseif(!session()->has('team')) active @endif listing-user border-bottom px-3 py-2 align-items-center"
                                                                disabled data-bs-toggle="tab" href="#personal-tab"
                                                                role="tab" id="personalTab" aria-selected="true"
                                                                onclick="tabSelect('Personal', 'Personal', this, 'Personal', '')">
                                                                <div class="mb-3 d-flex justify-content-between align-items-center"
                                                                    data-class="bg-light-info border-start border-2 border-info"
                                                                    style="width: 100%;">
                                                                    <div>
                                                                        <i
                                                                            class="ri-checkbox-blank-circle-fill text-info me-2"></i>
                                                                        Personal
                                                                    </div>
                                                                    <span
                                                                        class="
                                                badge
                                                @if ($total_progress_personal <= 50) bg-light-warning
                                                    text-warning
                                                @elseif($total_progress_personal > 50 && $total_progress_personal < 75)
                                                    bg-light-primary
                                                    text-primary
                                                @elseif($total_progress_personal >= 75)
                                                    bg-light-success
                                                    text-success @endif
                                                px-3
                                                rounded-pill
                                                font-weight-medium
                                                ms-auto"
                                                                        style="margin-left: 5px !important;">{{ $total_progress_personal }}%</span>
                                                                </div>
                                                            </a>
                                                            @php
                                                                $pegawai_id = \App\Models\Pegawai::where('id_user', Auth::user()->id)->first()->id;
                                                                
                                                                $totalActivity = \App\Models\Activity::where('status', '!=', null)
                                                                    ->where(function ($query) {
                                                                        $query->where('label', 'team')->orWhere('label', 'personal-team');
                                                                    })
                                                                    ->where(function ($query) use ($pegawai_id) {
                                                                        $query->whereHas('get_asignee', function ($q) {
                                                                            $q->where('user_id', Auth::user()->id);
                                                                        });
                                                                        $query->orWhere('reviewer_id', $pegawai_id);
                                                                    })
                                                                    ->count();
                                                                
                                                                // $totalActivity = \App\Models\Activity::where('label', '=', 'team')->where(function ($query) use ($pegawai_id) {
                                                                //     $query->whereHas('get_asignee', function ($q) {
                                                                //         $q->where('user_id', Auth::user()->id);
                                                                //     });
                                                                //     $query->orWhere('reviewer_id', $pegawai_id);
                                                                // })->count();
                                                                
                                                                // dd($totalActivity);
                                                                
                                                                if ($totalActivity >= 1) {
                                                                    $completedTeam = \App\Models\Activity::where('status', '=', 'verified')
                                                                        ->where(function ($query) {
                                                                            $query->where('label', 'team')->orWhere('label', 'personal-team');
                                                                        })
                                                                        ->where(function ($query) use ($pegawai_id) {
                                                                            $query->whereHas('get_asignee', function ($q) {
                                                                                $q->where('user_id', Auth::user()->id);
                                                                            });
                                                                            $query->orWhere('reviewer_id', $pegawai_id);
                                                                        })
                                                                        ->count();
                                                                    // dd($completedTeam);
                                                                
                                                                    // Calculate the percentage of completed programs
                                                                    $completionPercentageTeam = ($completedTeam / $totalActivity) * 100;
                                                                
                                                                    // Round the percentage to 2 decimal places
                                                                    $total_progress_team = round($completionPercentageTeam, 2);
                                                                } else {
                                                                    $total_progress_team = 0;
                                                                }
                                                            @endphp
                                                            <a href="javascript:void(0)"
                                                                class="@if (session('team')) active @endif d-flex justify-content-between invoice-user message-item listing-user border-bottom px-3 py-2 align-items-center"
                                                                data-bs-toggle="tab" disabled href="#team-tab"
                                                                id="teamTab" role="tab" aria-selected="true"
                                                                style="width: 100%;"
                                                                onclick="tabSelect('team', 'team', this, 'team', '')">
                                                                <div>
                                                                    <i
                                                                        class="ri-checkbox-blank-circle-fill text-success me-2"></i>
                                                                    Team
                                                                </div>
                                                                <span
                                                                    class="
                                                    badge
                                                    @if ($total_progress_team <= 50) bg-light-warning
                                                        text-warning
                                                    @elseif($total_progress_team > 50 && $total_progress_team < 75)
                                                        bg-light-primary
                                                        text-primary
                                                    @elseif($total_progress_team >= 75)
                                                        bg-light-success
                                                        text-success @endif
                                                    px-3
                                                    rounded-pill
                                                    font-weight-medium
                                                    ms-auto"
                                                                    style="margin-left: 5px !important;">{{ $total_progress_team }}%</span>
                                                            </a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="tab-pane p-3 tab-class" id="personal-tab" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-12">
                                        <iframe src="{{ url('activity/1') }}"
                                            style="height:120vh;width: 100%;overflow: hidden !important;"
                                            title="description" id="frameWrap-Personal"></iframe>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane p-3 tab-class" id="team-tab" role="tabpanel" style="display: none;">
                                <div class="row">
                                    <div class="col-md-12">
                                        <iframe src="{{ url('activity/1') }}" style="height:120vh;width: 100%;"
                                            title="description" id="frameWrap-team"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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> Add New 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="todo">

                        {{-- <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="">Activity Type <label for="" class="text-danger">*</label></label>
                                    <select name="activity_type" class="form-select" id="activity_type" onchange="activityType(this.value)">
                                        <option value="">-Choose Type-</option>
                                        <option value="Personal">Personal</option>
                                        <option value="team">Team</option>
                                    </select>
                                </div>
                            </div>
                        </div> --}}

                        <div class="row personal-wrap">
                            <div class="col-sm-12">
                                <div class="form-group mb-2 mt-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input task-type" type="checkbox" id="delegatedJobId"
                                            onchange="delegatedJobSwitch(this)" />
                                        <label class="form-check-label" for="delegatedJobId">
                                            <h5 class="mb-0">Delegated Job</h5>
                                        </label>
                                    </div>
                                </div>
                                <select name="delegated_job_action_plan_id" id="delegated_job_action_plan_id"
                                    class="form-select" style="display: none;">
                                    <option value="">Choose Delegated Job</option>
                                    @foreach ($delegated_job as $data)
                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                    @endforeach
                                </select>

                                <div class="form-group mb-2 mt-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" name="job_by_duties" type="checkbox"
                                            id="jobByDutiesId" value="job_by_duties"
                                            onchange="jobByDutiesSwitch(this)" />
                                        <label class="form-check-label" for="jobByDutiesId">
                                            <h5 class="mb-0">Job by Duties</h5>
                                        </label>
                                    </div>
                                </div>

                                <select name="job_desc_id" id="job_desc_id" class="form-select" style="display: none;">
                                    <option value="">-Choose Job-</option>
                                    @foreach ($job_desc as $data)
                                        <option value="{{ $data->id }}">{{ $data->job_desc }}</option>
                                    @endforeach
                                </select>

                                {{-- <div class="form-group mt-3" id="job_desc_reviewer_id_wrap" style="display: none;">
                                        <select name="job_desc_reviewer_id" class="form-select" id="job_desc_reviewer_id">
                                            <option value="">-Choose Reviewer-</option>
                                            @foreach ($pegawai as $data)
                                                <option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>
                                            @endforeach
                                        </select>
                                    </div> --}}
                            </div>

                        </div>

                        <div class="row team-wrap">
                            <div class="col-sm-12">
                                <div class="form-group mb-2 mt-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input task-type" type="checkbox" id="programId"
                                            onchange="programSwitch(this)" />
                                        <label class="form-check-label" for="programId">
                                            <h5 class="mb-0">Program</h5>
                                        </label>
                                    </div>
                                </div>
                                <select name="program_formulation_id" id="program_formulation_id" class="form-select"
                                    style="display: none;" onchange="programFmlPlan(this.value)">
                                    <option value="">Choose Program</option>
                                    @foreach ($program_formulation as $data)
                                        <option value="{{ $data->id }}">{{ $data->name }}
                                            {{ $data->program_type == 'initiation' ? ' - Initiation' : ' - Formulation' }}
                                        </option>
                                    @endforeach
                                </select>

                                <select name="program_fml_action_plan_id" id="program_fml_action_plan_id"
                                    class="form-select" style="display: none;margin-top: 15px !important;">
                                    <option value="">Choose Action Plan</option>
                                </select>

                                <div class="form-group mb-2 mt-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input task-type" type="checkbox" id="projectId"
                                            onchange="projectSwitch(this)" />
                                        <label class="form-check-label" for="projectId">
                                            <h5 class="mb-0">Project</h5>
                                        </label>
                                    </div>
                                </div>

                                <select name="project_id" id="project_id" class="form-select" style="display: none;"
                                    onchange="projectPlan(this.value)">
                                    <option value="">Choose Project</option>
                                    @foreach ($project as $data)
                                        <option value="{{ $data->id }}">{{ $data->name }} </option>
                                    @endforeach
                                </select>

                                <select name="project_action_plan_id" id="project_action_plan_id" class="form-select"
                                    style="display: none;margin-top: 15px !important;">
                                    <option value="">Choose Action Plan</option>
                                </select>

                                <div class="form-group mb-2 mt-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input task-type" type="checkbox" id="eventId"
                                            onchange="eventSwitch(this)" />
                                        <label class="form-check-label" for="eventId">
                                            <h5 class="mb-0">Event</h5>
                                        </label>
                                    </div>
                                </div>
                                <select name="event_id" id="event_id" class="form-select" style="display: none;"
                                    onchange="eventPlan(this.value)">
                                    <option value="">Choose Event</option>
                                    @foreach ($event as $data)
                                        <option value="{{ $data->id }}">{{ $data->name }} </option>
                                    @endforeach
                                </select>

                                <select name="event_action_plan_id" id="event_action_plan_id" class="form-select"
                                    style="display: none;margin-top: 15px !important;">
                                    <option value="">Choose Action Plan</option>
                                </select>
                            </div>

                        </div>

                        <div class="form-group mb-4 mt-4">
                            <label for="">Activity <label for="" class="text-danger">*</label></label>
                            <input type="text" class="form-control" name="title" id="title"
                                placeholder="Activity">
                        </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 mb-4">
                            <label for="">Link</label>
                            <input type="text" class="form-control" name="link" placeholder="Link">
                        </div>

                        <div class="form-group row mb-1">
                            <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">
                            <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"> Detail 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;
            ">

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

                        <p style="font-size: 24px!important; color: #000000;display: none;" id="titleModal"
                            onclick="titleInput()">
                        </p>

                        <p style="font-size: 24px!important; color: #000000;display: none;" id="titleModalTeam">
                        </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>

                        {{-- <div id="initProgramWrap">
                            <h5 class="mt-3">Program</h5>
                            <p style="cursor: pointer; display: none;" id="programText"
                                        onclick="programInput()"></p>
            
                            <p style="display: none;" id="programTextTeam"></p>
                        </div> --}}

                        {{-- <div class="row" id="editorProgramWrap" style="display: none; margin-top: 0px !important;">
                            <div class="col-sm-6">
                                <h5 class="mt-1">Program</h5>
                                <p style="cursor: pointer; display: none;" id="programText"></p>
                
                                <p style="display: none;" id="programTextTeam"></p>
                                <select name="edit_program_formulation" id="programEditor" class="form-select" style="display: none;" required>
                                    <option value="">Choose Program</option>
                                    @foreach ($program_formulation as $data)
                                        <option value="{{ $data->id }}">{{ $data->name }} {{ $data->program_type == 'initiation' ? ' - Initiation' : ' - Formulation'}}</option>
                                    @endforeach
                                </select>
        
                                <select name="edit_program_formulation" id="programEditorText" class="form-select" style="display: none;">
                                    <option value="">Choose Project</option>
                                    @foreach ($project as $data)
                                        <option value="{{ $data->id }}">{{ $data->name }}</option>
                                    @endforeach
                                </select>
                                                                
                                <div id="button-program-wrap" style="display: none;">
                                    <button type="button" class="btn btn-sm btn-primary mt-3"
                                        onclick="saveProgram()">Save</button>
                                    <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                                        onclick="cancelProgram()">Cancel</button>
                                </div>
                            </div>
                            <div class="col-sm-3 d-flex justify-content-end align-items-center">
                                <div class="form-group mb-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox"
                                            id="editAnualProgramId" checked
                                            onchange="editAnualProgram()" />
                                        <label class="form-check-label"
                                            for="editAnualProgramId">
                                            <h5 class="mb-0">Annual Program</h5>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3 d-flex justify-content-end align-items-center">
                                <div class="form-group mb-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox"
                                            id="editEmergingProgramId"
                                            onchange="editEmergingProgram()" />
                                        <label class="form-check-label"
                                            for="editEmergingProgramId">
                                            <h5 class="mb-0">Emerging Program</h5>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div> --}}

                        <h5 class="mt-3">Description</h5>
                        <p style="cursor: pointer; display: none;" id="actionPlan" onclick="actionPlanInput()">- 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="cursor: pointer; display: none;" id="linkWrap" onclick="linkInput()">
                        </p>

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

                        <input type="text" 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;" onclick="startDateInput()">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;" onclick="endDateInput()">30-01-2022</p>
                                <p id="endDateModalTeam" onclick="endDateInput()" 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 style="cursor: pointer;" id="reportSummary" onclick="reportSummaryInput()">
                            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 mb-4 mt-4">
                            <h5 for="formFile" class="form-label">Status</h5>
                            <select name="status" class="form-select" id="statusTaskOption"
                                onchange="statusChange(this.value)">
                                <option value="todo">To Do</option>
                                <option value="in-progress">In Progress</option>
                                <option value="done">Done</option>
                                <option value="verified" id="verifiedOption">Verified</option>
                                <option value="pending">Pending</option>
                                <option value="cancel">Cancel</option>
                            </select>
                        </div>

                        {{-- <h5 style="margin-top: 20px !important;" id="asigneeLabel">Assignee</h5>
                        <div class="row" id="asigneeWrap">
                            
                        </div> --}}

                        <h5 style="margin-top: 20px;" id="reviewerTitle">Reviewer</h5>
                        <div class="row" style="display: none;" onclick="reviewerInput()" id="reviewerModal">
                            <div class="col-sm-1 mt-1">
                                <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                    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" width="35"
                                    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>
                        <div class="table-responsive" style="margin-top: 20px; padding-top: 20px;">
                            <table class="table customize-table mb-0 v-middle text-nowrap">
                                <thead class="table-light">
                                    <tr>
                                        <th class="border-bottom border-top">Task Name</th>
                                        <th class="border-bottom border-top">Source</th>
                                        <th class="border-bottom border-top">Type</th>
                                        <th class="border-bottom border-top">Assignee</th>
                                        <th class="border-bottom border-top">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="action_plan_wrap">

                                </tbody>
                            </table>
                        </div>
                        <h5 style="margin-top: 20px; padding-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-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="historyActivityFunction(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" data-bs-toggle="tooltip" data-bs-placement="left"
                                    title="Tooltip on left"
                                    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" width="35"
                                    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" width="35"
                                    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="initCommentWrap">

                        </div>
                        <div class="row" id="commentWrap">

                        </div>
                        <div class="row" id="historyWrap" style="display: none;">

                        </div>

                    </div>

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

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

    <div class="modal fade" id="edit_assignee_modal" tabindex="-1" role="dialog"
        aria-labelledby="edit_assignee_modal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
            <div class="modal-content">
                <form id="editAssigneeForm" enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="edit_assignee_type" id="edit_assignee_type" value="">
                    <input type="hidden" name="edit_type_id" id="edit_type_id" value="">

                    <div class="modal-header d-flex align-items-center"
                        style="
                        padding-left: 40px;
                        padding-right: 40px;
                    ">
                        <h3 class="modal-title" id="createModalLabel"> Edit Assignee
                        </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;
                    ">
                        <div class="form-group">
                            <label for="">Assignee</label>
                            <select name="edit_assignee_id[]" id="edit_assignee_id" class="form-control custom-select"
                                style="width: 100%; height: 36px" multiple>
                                <option value="">-- Choose Employee --</option>
                                @foreach ($pegawai as $item)
                                    <option value="{{ $item->id }}">
                                        {{ $item->nama_lengkap }}</option>
                                @endforeach
                            </select>
                        </div>

                        <button type="button" class="btn btn-sm btn-primary mt-4 mb-2" id="saveButton"
                            onclick="saveAssignee()">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>
@endsection
@section('js')
    <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') }}/extra-libs/taskboard/js/jquery.ui.touch-punch-improved.js"></script>
    <script src="{{ asset('back') }}/extra-libs/taskboard/js/jquery-ui.min.js"></script>

    <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobilist.js"></script>
    <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobibox.min.js"></script>
    <script src="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.js"></script>
    <script src="{{ asset('vuexy/assets/js/app-kanban.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/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>

    <script>
        function getAssigneeById(id, type) {
            $.ajax({
                url: "{{ route('activity.get-assignee') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    id: id,
                    type: type
                },
                success: function(data) {
                    $('#edit_assignee_id').val(data['team_id']).trigger('change');
                    $('#edit_assignee_type').val(type);
                }
            });
        }
    </script>

    <script>
        $(document).ready(function() {
            $("body").tooltip({
                selector: '[data-bs-toggle=tooltip]'
            });
        });
    </script>

    <script>
        function activityType(value) {
            if (value == 'Personal') {
                $(".personal-wrap").css('display', 'block');
                $(".team-wrap").css('display', 'none');
            } else if (value == 'team') {
                $(".team-wrap").css('display', 'block');
                $(".personal-wrap").css('display', 'none');
            }
        }
    </script>
    <script>
        // function delegatedJobPlan(value) {
        //     $("#delegated_job_action_plan_id").css('display', 'block');

        //     $.ajax({
        //         url: "{{ route('activity.delegated-job-action') }}",
        //         method: "POST",
        //         data: {
        //             "_token": "{{ csrf_token() }}",
        //             delegated_job_id: value
        //         },
        //         success: function (result) {
        //             for (const [key, value] of Object.entries(result)) {
        //                 console.log(value.title);

        //                 var html = "";
        //                 html += '<option value="">Choose Action Plan</option>';
        //                 html += '<option value="' + value.id + '">' + value.name + '</option>';

        //                 $("#delegated_job_action_plan_id").html(html);
        //             }

        //         }
        //     });
        // }

        function eventPlan(value) {
            $("#event_action_plan_id").css('display', 'block');
            $("#event_action_plan_id").html("");

            $.ajax({
                url: "{{ route('activity.event-action') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    event_id: value
                },
                success: function(result) {
                    $("#event_action_plan_id").html('<option value="">Choose Action Plan</option>');

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

                        var html = "";
                        html += '<option value="' + value.id + '">' + value.title + '</option>';

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

                }
            });
        }

        function projectPlan(value) {
            $("#project_action_plan_id").css('display', 'block');
            $("#project_action_plan_id").html("");

            $.ajax({
                url: "{{ route('activity.project-action') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    project_id: value
                },
                success: function(result) {

                    $("#project_action_plan_id").html('<option value="">Choose Action Plan</option>');

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

                        var html = "";
                        html += '<option value="' + value.id + '">' + value.title + '</option>';

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

                }
            });
        }

        function programFmlPlan(value) {
            $("#program_fml_action_plan_id").css('display', 'block');
            $("#program_fml_action_plan_id").html("");

            $.ajax({
                url: "{{ route('activity.fml-action') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    program_fml_id: value
                },
                success: function(result) {
                    $("#program_fml_action_plan_id").html('<option value="">Choose Action Plan</option>');

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

                        var html = '';
                        html += '<option value="' + value.id + '">' + value.title + '</option>';

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

                }
            });
        }
    </script>
    <script>
        function programSwitch(element) {

            $("#program_formulation_id").toggle();

            if ($('#program_formulation_id').css('display') == 'none') {
                $(".task-type").prop('disabled', false);
                $(element).prop('disabled', false);
                $("#program_fml_action_plan_id").css('display', 'none');
                $("#program_fml_action_plan_id").val('');
                $('#program_formulation_id').val('');
            } else {
                $(".task-type").prop('disabled', true);
                $(element).prop('disabled', false);
            }


        }

        function projectSwitch(element) {

            $("#project_id").toggle();

            if ($('#project_id').css('display') == 'none') {
                $(".task-type").prop('disabled', false);
                $(element).prop('disabled', false);
                $("#project_action_plan_id").css('display', 'none');
                $('#project_action_plan_id').val('');
                $("#project_id").val('');
            } else {
                $(".task-type").prop('disabled', true);
                $(element).prop('disabled', false);
            }

        }

        function eventSwitch(element) {

            $("#event_id").toggle();

            if ($('#event_id').css('display') == 'none') {
                $(".task-type").prop('disabled', false);
                $(element).prop('disabled', false);
                $("#event_action_plan_id").css('display', 'none');
                $('#event_action_plan_id').val('');
                $("#event_id").val('');
            } else {
                $(".task-type").prop('disabled', true);
                $(element).prop('disabled', false);
            }

        }

        function delegatedJobSwitch(element) {

            $("#delegated_job_action_plan_id").toggle();

            if ($('#delegated_job_action_plan_id').css('display') == 'none') {
                $(".task-type").prop('disabled', false);
                $(element).prop('disabled', false);
            } else {
                $(".task-type").prop('disabled', true);
                $(element).prop('disabled', false);
            }
        }

        function jobByDutiesSwitch(element) {

            $("#job_desc_id").toggle();
            $("#job_desc_reviewer_id_wrap").toggle();

            if ($('#job_desc_id').css('display') == 'none') {
                // $(".task-type").prop('disabled', false);
                $(element).prop('disabled', false);
            } else {
                // $(".task-type").prop('disabled', true);
                $(element).prop('disabled', false);
            }
        }
    </script>
    <script>
        function generateActivityLabel(label) {
            $.ajax({
                url: "{{ route('activity.generate-activity-label') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    label: label
                },
                success: function(result) {
                    $("#activityLabelWrap").html(result);
                }
            });
        }
    </script>
    <script>
        function addActivityButton() {
            $("#status_val").val('todo');
        }
    </script>

    <script>
        // function anualProgram() {
        //     $("#program_formulation_id").val("");
        //     $("#emergingProgramId").prop('checked', false);
        //     $("#anualProgramId").prop('checked', true);

        //     $("#programTextOption").css('display', 'none');
        //     $("#programSelectOption").css('display', 'block');
        // }

        // function emergingProgram() {
        //     $("#project_id").val("");

        //     $("#programTextOption").css('display', 'block');
        //     $("#programSelectOption").css('display', 'none');

        //     $("#anualProgramId").prop('checked', false);
        //     $("#emergingProgramId").prop('checked', true);
        // }

        // function editAnualProgram() {

        //     $("#editAnualProgramId").prop('checked', true);
        //     $("#editEmergingProgramId").prop('checked', false);

        //     $("#programEditor").css('display', 'block');
        //     $("#programEditorText").css('display', 'none');

        //     $("#statusProgram").val('formulation');
        // }

        // function editEmergingProgram() {
        //     $("#editAnualProgramId").prop('checked', false);
        //     $("#editEmergingProgramId").prop('checked', true);

        //     $("#programEditor").css('display', 'none');
        //     $("#programEditorText").css('display', 'block');

        //     $("#statusProgram").val('emerging_program');
        // }
    </script>

    <script>
        function deleteCardKanban(element) {
            var uniqueId = $("#uniqueIdFrame").val();

            $.ajax({
                url: "{{ route('activity.delete') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    activity_id: $(element).parents().eq(3).data('activity-id'),
                },
                success: function(result) {
                    Swal.fire({
                        title: 'Done',
                        text: "Activity has been deleted successfully!",
                        icon: 'success',
                    });

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

                    var html = "";

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

                    $('#frameWrap-' + uniqueId).contents().find(".app-kanban").append(html);
                    $('#frameWrap-' + uniqueId).contents().find("#firstElement").after(
                        '<div class="kanban-wrapper"></div>');
                    document.getElementById('frameWrap-' + uniqueId).contentWindow.initKanban($(
                        "#titleActivity").val(), $("#tabType").val());
                }
            });
        }
    </script>
    <script>
        function tabSelect(activity_id, uniqueId, element, type, key) {
            console.log(element);

            $(".invoice-user").removeClass('active');

            if (element == 'team') {
                $("#teamTab").addClass('active');
                // $("#teamTab").prop("disabled", true);
                // $("#teamTab").addClass("disabled");

                if ($("#teamTab").prop("disabled")) {

                } else {
                    console.log('ok');

                    if (type == 'Personal') {
                        $(".tab-class").css("display", "none");
                        $("#personal-tab").css("display", "block");
                    } else if (type == 'team') {
                        $(".tab-class").css("display", "none");
                        $("#team-tab").css("display", "block");
                    }


                    $("#titleActivity").val(activity_id);

                    $("#tabType").val(type);

                    $("#uniqueIdFrame").val(uniqueId);

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

                    var html = "";

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

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

                    $("#teamTab").prop("disabled", true); // Disable the button
                    setTimeout(function() {
                        $("#teamTab").prop("disabled", false); // Enable the button after 3 seconds
                    }, 500); // 3000 milliseconds (3 seconds)
                }

            } else if (element == 'Personal') {
                $("#personalTab").addClass('active');
                // $(element).prop("disabled", true);
                // $(element).addClass("disabled");

                if ($("#personalTab").prop("disabled")) {

                } else {
                    console.log('ok');

                    if (type == 'Personal') {
                        $(".tab-class").css("display", "none");
                        $("#personal-tab").css("display", "block");
                    } else if (type == 'team') {
                        $(".tab-class").css("display", "none");
                        $("#team-tab").css("display", "block");
                    }

                    $("#titleActivity").val(activity_id);

                    $("#tabType").val(type);

                    $("#uniqueIdFrame").val(uniqueId);

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

                    var html = "";

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

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

                    $("#personalTab").prop("disabled", true); // Disable the button
                    setTimeout(function() {
                        $("#personalTab").prop("disabled", false); // Enable the button after 3 seconds
                    }, 500); // 3000 milliseconds (3 seconds)
                }
            } else {
                $(element).addClass('active');
                // $(element).prop("disabled", true);
                // $(element).addClass("disabled");

                if ($(element).prop("disabled")) {

                } else {
                    console.log('ok');

                    if (type == 'Personal') {
                        $(".tab-class").css("display", "none");
                        $("#personal-tab").css("display", "block");
                    } else if (type == 'team') {
                        $(".tab-class").css("display", "none");
                        $("#team-tab").css("display", "block");
                    }

                    $("#titleActivity").val(activity_id);

                    $("#tabType").val(type);

                    $("#uniqueIdFrame").val(uniqueId);

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

                    var html = "";

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

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

                    $(element).prop("disabled", true); // Disable the button
                    setTimeout(function() {
                        $(element).prop("disabled", false); // Enable the button after 3 seconds
                    }, 500); // 3000 milliseconds (3 seconds)
                }
            }

        }
    </script>

    <script>
        function statusChange(value) {

            var uniqueId = $("#uniqueIdFrame").val();

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

                    console.log(uniqueId);

                    Swal.fire({
                        icon: 'success',
                        title: 'Activity Status has been changed successfully',
                        target: 'body',
                        iconColor: 'white',
                        customClass: {
                            popup: 'colored-toast'
                        },
                        toast: true,
                        position: 'top-right',
                        showConfirmButton: false,
                        timerProgressBar: true,
                        timer: 3000,
                    });

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

                    var html = "";

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

                    $('#frameWrap-' + uniqueId).contents().find(".app-kanban").append(html);
                    $('#frameWrap-' + uniqueId).contents().find("#firstElement").after(
                        '<div class="kanban-wrapper"></div>');
                    document.getElementById('frameWrap-' + uniqueId).contentWindow.initKanban($(
                        "#titleActivity").val(), $("#tabType").val());
                }
            });
        }
    </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() {

            var uniqueId = $("#uniqueIdFrame").val();

            $.ajax({
                url: "{{ route('activity.edit-kanban') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    id_edit: $('#frameWrap-' + uniqueId).contents().find("#idKanban").val(),
                    status: $('#frameWrap-' + uniqueId).contents().find("#statusWrap").val()
                },
                success: function(result) {
                    var wrap = JSON.parse(result);

                    if (wrap.alert_status == 'true') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Activity Status has been changed successfully',
                            target: 'body',
                            iconColor: 'white',
                            customClass: {
                                popup: 'colored-toast'
                            },
                            toast: true,
                            position: 'top-right',
                            showConfirmButton: false,
                            timerProgressBar: true,
                            timer: 3000,
                        });
                    }

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

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

                        var html = "";

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

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

    <script>
        function editAssignee(id, team_id, type) {
            $('#detail_kanban').modal('hide');
            $('#edit_assignee_modal').modal('show');
            $("#edit_type_id").val(id);

            getAssigneeById(id, type);
        }

        function saveAssignee() {
            $('#edit_assignee_modal').modal('hide');

            // $('#detail_kanban').modal('show');

            var uniqueId = $("#uniqueIdFrame").val();

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

            $.ajax({
                url: "{{ route('activity.save-assignee') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    id: $("#edit_type_id").val(),
                    type: $("#edit_assignee_type").val(),
                    activity_id: $("#editActivityId").val(),
                    edit_assignee_id: $("#edit_assignee_id").val()
                },
                success: function(result) {

                    var wrap = JSON.parse(result);
                    // console.log(wrap.action_plan);

                    var action_plans = JSON.parse(wrap.action_plan);

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

                        if (value.title != "") {

                            console.log(value.type);

                            var action_plan_init = "";
                            action_plan_init += '<tr>';
                            action_plan_init += '<td>';
                            action_plan_init += value.title;
                            action_plan_init += '</td>';
                            action_plan_init += '<td>';
                            action_plan_init += value.source;
                            action_plan_init += '</td>';
                            action_plan_init += '<td>';
                            action_plan_init += value.type;
                            action_plan_init += '</td>';
                            action_plan_init += '<td>';
                            action_plan_init += '<div class="d-flex align-items-center">';
                            action_plan_init += value.asignee_wrap
                            action_plan_init += '</div>';
                            action_plan_init += '</td>';

                            if (value.type != "Job Desc") {
                                action_plan_init += '<td>';
                                action_plan_init += '<button type="button" onclick="editAssignee(`' + value
                                .id +
                                '`, `' + value.team_id + '`, `' + value.type +
                                '`, `' + value.activity_id + '`)" class="btn btn-sm btn-warning">';
                                action_plan_init += 'Edit'
                                action_plan_init += '</button>';
                                action_plan_init += '</td>';
                            } else {
                                action_plan_init += '<td>';
                                action_plan_init += '-';
                                action_plan_init += '</td>';
                            }

                            action_plan_init += '</tr>';

                            $("#action_plan_wrap").prepend(action_plan_init);

                            $('[data-bs-toggle="tooltip"]').tooltip();
                            $('[data-bs-toggle="tooltip"]').tooltip();

                        }
                    }

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

                    var html = "";

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

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

        }

        $("#edit_assignee_modal").on('hidden.bs.modal', function() {
            $('#detail_kanban').modal('show');
        });

        $("#edit_assignee_id").select2({
            dropdownParent: $("#edit_assignee_modal")
        });

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

            var uniqueId = $("#uniqueIdFrame").val();

            $.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 authId = "{{ json_encode(Auth::user()->id) }}";

                        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 += '                <div class="flex" id="optionComment' + value.id + '">';

                        if (authId == value.commented_by_id) {
                            html +=
                                '    <button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                            value.id +
                            '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                            value.id + '`)">Delete</button>';
                        }

                        html += '</div><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-' + uniqueId).contents().find("#firstElement").remove();
                    $('#frameWrap-' + uniqueId).contents().find(".kanban-wrapper").remove();

                    var html = "";

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

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

        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 authId = "{{ json_encode(Auth::user()->id) }}";

                        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 += '                <div class="flex" id="optionComment' + value.id + '">';

                        if (authId == value.commented_by_id) {
                            html +=
                                '    <button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                            value.id +
                            '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                            value.id + '`)">Delete</button>';
                        }

                        html += '</div><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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";

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

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

        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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        function saveProgram() {
            $("#programText").css('display', 'block');
            $("#button-program-wrap").css("cssText", "display: none !important;");
            $("#initProgramWrap").toggle();
            $("#editorProgramWrap").toggle();

            if ($("#statusProgram").val() == "emerging_program") {
                $("#programEditorText").css("cssText", "display: none !important;");
                var programValue = $("#programEditorText").val();
                var status = "emerging";
            } else {
                $("#programEditor").css("cssText", "display: none !important;");
                var programValue = $("#programEditor").val();
                var status = "formulation";
            }

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

                    $("#programText").html(wrap.program_formulation);

                    // 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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        function saveLink() {
            $("#linkWrap").css('display', 'block');
            $("#button-link-wrap").css("cssText", "display: none !important;");
            $("#linkEditor").css("cssText", "display: none !important;");

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

                    $("#linkWrap").html(wrap.activity.link);

                    // 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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

        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);
                    }

                    var uniqueId = $("#uniqueIdFrame").val();

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

                    var html = "";


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

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

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            $("#createForm").validate({
                ignore: ":disabled,:hidden",
                rules: {
                    // program_formulation_id: {
                    //     required: true,
                    // },
                    activity_type: {
                        required: true,
                    },
                    title: {
                        required: true,
                    },
                    description: {
                        required: true,
                    },
                    start_date: {
                        required: true,
                    },
                    end_date: {
                        required: true,
                    },
                    job_desc_reviewer_id: {
                        required: true,
                    }
                },
                messages: {
                    // program_formulation_id: {
                    //     required: "Program is required"
                    // },
                    activity_type: {
                        required: "Activity Type is required"
                    },
                    title: {
                        required: "Activity is required"
                    },
                    description: {
                        required: "Description is required"
                    },
                    start_date: {
                        required: "Start Date is required"
                    },
                    end_date: {
                        required: "End Date is required"
                    },
                    job_desc_reviewer_id: {
                        required: "Reviewer is required"
                    }
                },
                submitHandler: function(form) {
                    if ($("#program_fml_action_plan_id").val() == '' && $("#project_action_plan_id")
                        .val() == '' &&
                        $("#event_action_plan_id").val() == '' && $("#delegated_job_action_plan_id")
                        .val() == '' &&
                        $("#job_desc_id").val() == '') {
                        Swal.fire({
                            title: "Action Plan Required",
                            text: `Choose action plan first!`,
                            icon: "info"
                        });
                    } else {
                        $("#saveButton").prop('disabled', true);
                        form.submit();
                    }

                }
            });
        });
    </script>

    <script>
        // var uploadedDocumentMap = {}
        // Dropzone.options.documentDropzone = {
        //     url: '{{ route('activity.store') }}',
        //     maxFilesize: 1000000, // MB
        //     addRemoveLinks: true,
        //     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) => {
        //             var uniqueId = $("#uniqueIdFrame").val();

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

        //                 var html = "";


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

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


        //         $('#create_kanban').on('shown.bs.modal', function () {
        //             myDropzone.removeAllFiles();
        //         });

        //         $("#saveButton").click(function() {

        //             if (myDropzone.getQueuedFiles().length > 0 && $('#createForm').valid()) {
        //                 conosle.log('check');
        //                 // if($("#project_id").val() == "") {
        //                 //     $("#project_id").addClass("error");
        //                 //     $("#project_id_error").css("cssText", "display: block !important;");
        //                 //     $("#project_id_error").html("Program is required");
        //                 // } else {
        //                 //     $("#project_id").removeClass("error");
        //                 //     $("#project_id_error").css("cssText", "display: none !important;");

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

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

        //             } else if (myDropzone.getQueuedFiles().length <= 0 && $('#createForm').valid()) {

        //                 // if($("#project_id").val() == "" && $("#program_formulation_id").val() == "") {
        //                 //     console.log('false');
        //                 //     $("#project_id").addClass("error");
        //                 //     $("#project_id_error").css("cssText", "display: block !important;");
        //                 //     $("#project_id_error").html("Program is required");
        //                 // }  else {
        //                 //     console.log('true');
        //                 //     $("#project_id").removeClass("error");
        //                 //     $("#project_id_error").css("cssText", "display: none !important;");

        //                 // }

        //                 $("#create_kanban").modal('hide');

        //                     $.ajax({
        //                         url: "{{ route('activity.store') }}",
        //                         method: "POST",
        //                         data: {
        //                             "_token": "{{ csrf_token() }}",
        //                             program_fml_action_plan_id: $("#program_fml_action_plan_id").val(),
        //                             project_action_plan_id: $("#project_action_plan_id").val(),
        //                             event_action_plan_id: $("#event_action_plan_id").val(),
        //                             delegated_job_action_plan_id: $("#delegated_job_action_plan_id").val(),
        //                             job_by_duties: $("#job_by_duties").val(),
        //                             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) => {
        //                                 var uniqueId = $("#uniqueIdFrame").val();

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

        //                                     var html = "";

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

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

        //             } 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: '{{ route('activity.edit-attachment') }}',
            maxFilesize: 1000000, // MB
            addRemoveLinks: true,
            autoProcessQueue: true,
            parallelUploads: 10,
            autoDiscover: false,
            uploadMultiple: true,
            // acceptedFiles: ".jpeg,.jpg,.png,.gif",
            processData: true,
            contentType: false,
            dictDefaultMessage: "Drop attachment here...",
            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) {

                        var uniqueId = $("#uniqueIdFrame").val();

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

                        var html = "";


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

                        $('#frameWrap-' + uniqueId).contents().find(".app-kanban").append(html);
                        $('#frameWrap-' + uniqueId).contents().find("#firstElement").after(
                            '<div class="kanban-wrapper"></div>');
                        document.getElementById('frameWrap-' + uniqueId).contentWindow.initKanban($(
                            "#titleActivity").val(), $("#tabType").val());
                    }
                })
            },
            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: "{{ route('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) {

                                        var uniqueId = $("#uniqueIdFrame").val();

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

                                        var html = "";

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

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

                        });

                    }
                })
            }
        }
    </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 cancelProgram() {

            $("#initProgramWrap").toggle();

            $("#editorProgramWrap").toggle();

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

            if ($("#statusProgram").val() == "emerging_program") {
                $("#programEditorText").css("cssText", "display: none !important;");
            } else {
                $("#programEditor").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 cancelLink() {
            $("#linkWrap").css('display', 'block');
            $("#button-link-wrap").css("cssText", "display: none !important;");
            $("#linkEditor").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 programInput() {

            $("#initProgramWrap").css('display', 'none');

            $("#editorProgramWrap").toggle();

            $("#programText").css('display', 'none');

            if ($("#statusProgram").val() == "emerging_program") {
                $("#editAnualProgramId").prop('checked', false);
                $("#editEmergingProgramId").prop('checked', true);

                $("#programEditor").css('display', 'none');
                $("#programEditorText").css("cssText", "display: block !important;");
                $("#programEditorText").focus();

                $("#statusProgram").val('emerging_program');
            } else {
                $("#editAnualProgramId").prop('checked', true);
                $("#editEmergingProgramId").prop('checked', false);

                $("#programEditorText").css('display', 'none');
                $("#programEditor").css("cssText", "display: block !important;");
                $("#programEditor").focus();

                $("#statusProgram").val('formulation');
            }

            $("#button-program-wrap").css("cssText", "display: block !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 authId = "{{ json_encode(Auth::user()->id) }}";

                            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 += '                <div class="flex" id="optionComment' + value.id + '">';

                            if (authId == value.commented_by_id) {
                                html +=
                                    '    <button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                                value.id +
                                '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                                value.id + '`)">Delete</button>';
                            }

                            html += '</div><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 authId = "{{ json_encode(Auth::user()->id) }}";

                            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 += '                <div class="flex" id="optionComment' + value.id + '">';

                            if (authId == value.commented_by_id) {
                                html +=
                                    '    <button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                                value.id +
                                '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                                value.id + '`)">Delete</button>';
                            }

                            html += '</div><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');
            $("#initCommentWrap").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');
            $("#initCommentWrap").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 authId = "{{ json_encode(Auth::user()->id) }}";

                        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 += '                <div class="flex" id="optionComment' + value.id + '">';

                        if (authId == value.commented_by_id) {
                            html +=
                                '    <button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                            value.id +
                            '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                            value.id + '`)">Delete</button>';
                        }

                        html += '</div><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 historyActivityFunction(element) {
            $("#activity_tab_status").val("history");
            $("#commentWrap").css('display', 'none');
            $("#initCommentWrap").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 authId = "{{ json_encode(Auth::user()->id) }}";

                                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 += '                <div class="flex" id="optionComment' + value
                                    .id + '">';

                                if (authId == value.commented_by_id) {
                                    html +=
                                        '    <button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                                    value.id +
                                    '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                                    value.id + '`)">Delete</button>';
                                }

                                html += '</div><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);
                            }

                            var uniqueId = $("#uniqueIdFrame").val();

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

                            var html = "";

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

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

    <script>
        $(function() {
            /**
             * Created by Zura on 4/5/2016.
             */
            $(function() {
                Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, {
                    size: "mini",
                    // delay: false,
                    position: "right top",
                });

                //Basic example



                var myList = $("#todo-lists-basic-demo").lobiList({
                    useCheckboxes: false,
                    enableTodoAdd: false,
                    enableTodoRemove: false,
                    enableTodoEdit: false,
                    controls: ['styleChange'],
                    dragHandle: '.lobilist-item',
                    lists: [{
                            id: "todo",
                            title: "TO DO",
                            defaultStyle: "lobilist-danger",
                            items: [{
                                title: "2 to 3 Technical skills improvement needs identified",
                                description: "Team",
                            }, ],
                        },
                        {
                            id: "doing",
                            title: "IN PROGRESS",
                            defaultStyle: "lobilist-warning",
                            items: [{
                                    title: "Alumni portal & database updated",
                                    description: "Team",
                                },
                                {
                                    title: "Login System",
                                    description: "Personal",
                                },

                            ],
                        },
                        {
                            id: "reveiw",
                            title: "REVIEW",
                            defaultStyle: "lobilist-primary",
                            items: [{
                                    title: "1 to 2 alumni stories written and published in portal (monthly)",
                                    description: "Team",
                                }

                            ],
                        },
                        {
                            id: "Done",
                            title: "DONE  ",
                            defaultStyle: "lobilist-success",
                            items: [{
                                title: "C2 alumni gathering preparation organized",
                                description: "Team",
                            }, ],
                        },
                    ],
                });

                myList.on('click', 'li', function(index, two) {
                    $('#detail_kanban').modal('show');
                });

                myList.on('click', '.btn-show-form', function(index, two) {
                    $('#create_kanban').modal('show');
                });

                myList.on('click', '.btn-show-form', function(index, two) {
                    $('#create_kanban').modal('show');
                });

                myList.on('click', 'li', function(index, two) {
                    console.log($(this).attr('data-id'));
                    $('#detail_kanban').modal('show');
                });

                // myList.find(".lobilist-item").append('<div class="card w-100 lobo-card"></div>');
                // myList.find(".lobo-card").append('<div class="card-bodt"></div>');

                //Custom datepicker
                $("#todo-lists-demo-datepicker").lobiList({
                    onClick: function(lobiList) {
                        // Code to execute when an item in the list is clicked
                        console.log("List item clicked!");
                    },
                    lists: [{
                        title: "Todo",
                        defaultStyle: "lobilist-info",
                        items: [{
                            title: "Floor cool cinders",
                            description: "Thunder fulfilled travellers folly, wading, lake.",
                            dueDate: "2015-01-31",
                        }, ],
                    }, ],
                    afterListAdd: function(lobilist, list) {
                        var $dueDateInput = list.$el.find("form [name=dueDate]");
                        $dueDateInput.datepicker();
                    },
                });
                // Event handling
                (function() {
                    var list;

                    $("#todo-lists-initialize-btn").click(function() {
                        list = $("#todo-lists-demo-events")
                            .lobiList({
                                onClick: function(lobiList) {
                                    // Code to execute when an item in the list is clicked
                                    console.log("List item clicked!");
                                },
                                init: function() {
                                    Lobibox.notify("default", {
                                        msg: "init",
                                    });

                                    console.log('dddd');
                                },
                                beforeDestroy: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeDestroy",
                                    });
                                },
                                afterDestroy: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterDestroy",
                                    });
                                },
                                beforeListAdd: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeListAdd",
                                    });
                                },
                                afterListAdd: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterListAdd",
                                    });
                                },
                                beforeListRemove: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeListRemove",
                                    });
                                },
                                afterListRemove: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterListRemove",
                                    });
                                },
                                beforeItemAdd: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeItemAdd",
                                    });
                                },
                                afterItemAdd: function() {
                                    console.log(arguments);
                                    Lobibox.notify("default", {
                                        msg: "afterItemAdd",
                                    });
                                },
                                beforeItemUpdate: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeItemUpdate",
                                    });
                                },
                                afterItemUpdate: function() {
                                    console.log(arguments);
                                    Lobibox.notify("default", {
                                        msg: "afterItemUpdate",
                                    });
                                },
                                beforeItemDelete: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeItemDelete",
                                    });
                                },
                                afterItemDelete: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterItemDelete",
                                    });
                                },
                                beforeListDrop: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeListDrop",
                                    });
                                },
                                afterListReorder: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterListReorder",
                                    });
                                },
                                beforeItemDrop: function() {
                                    Lobibox.notify("default", {
                                        msg: "beforeItemDrop",
                                    });
                                },
                                afterItemReorder: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterItemReorder",
                                    });
                                },
                                afterMarkAsDone: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterMarkAsDone",
                                    });
                                },
                                afterMarkAsUndone: function() {
                                    Lobibox.notify("default", {
                                        msg: "afterMarkAsUndone",
                                    });
                                },
                                styleChange: function(list, oldStyle, newStyle) {
                                    console.log(arguments);
                                    Lobibox.notify("default", {
                                        msg: 'styleChange: Old style - "' +
                                            oldStyle +
                                            '". New style - "' +
                                            newStyle +
                                            '"',
                                    });
                                },
                                titleChange: function(list, oldTitle, newTitle) {
                                    console.log(arguments);
                                    Lobibox.notify("default", {
                                        msg: 'titleChange: Old title - "' +
                                            oldTitle +
                                            '". New title - "' +
                                            newTitle +
                                            '"',
                                    });
                                },
                                lists: [{
                                    title: "Todo",
                                    defaultStyle: "lobilist-info",
                                    items: [{
                                            title: "Floor cool cinders",
                                            description: "Thunder fulfilled travellers folly, wading, lake.",
                                            dueDate: "2015-01-31",
                                        },
                                        {
                                            title: "Periods pride",
                                            description: "Accepted was mollis",
                                            done: true,
                                        },
                                        {
                                            title: "Flags better burns pigeon",
                                            description: "Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank " +
                                                "treacherously darkling.",
                                        },
                                        {
                                            title: "Accepted was mollis",
                                            description: "Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank " +
                                                "treacherously darkling.",
                                            dueDate: "2015-02-02",
                                        },
                                    ],
                                }, ],
                            })
                            .data("lobiList");
                    });

                    $("#todo-lists-destroy-btn").click(function() {
                        list.destroy();
                    });
                })();
                // Custom controls
                $("#todo-lists-demo-controls").lobiList({
                    onClick: function(lobiList) {
                        // Code to execute when an item in the list is clicked
                        console.log("List item clicked!");
                    },
                    lists: [{
                            title: "Todo",
                            defaultStyle: "lobilist-info",
                            controls: ["edit", "styleChange"],
                            items: [{
                                title: "Floor cool cinders",
                                description: "Thunder fulfilled travellers folly, wading, lake.",
                                dueDate: "2015-01-31",
                            }, ],
                        },
                        {
                            title: "Disabled checkboxes",
                            defaultStyle: "lobilist-danger",
                            controls: ["edit", "add", "remove"],
                            useLobicheck: false,
                            items: [{
                                title: "Periods pride",
                                description: "Accepted was mollis",
                                done: true,
                            }, ],
                        },
                        {
                            title: "Controls disabled",
                            controls: false,
                            items: [{
                                title: "Composed trays",
                                description: "Hoary rattle exulting suspendisse elit paradises craft wistful. " +
                                    "Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage " +
                                    "celerities gales beams.",
                            }, ],
                        },
                        {
                            title: "No edit/remove",
                            enableTodoRemove: false,
                            enableTodoEdit: false,
                            items: [{
                                title: "Composed trays",
                                description: "Hoary rattle exulting suspendisse elit paradises craft wistful. " +
                                    "Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage " +
                                    "celerities gales beams.",
                            }, ],
                        },
                    ],
                });
                // Disabled drag & drop
                $("#todo-lists-demo-sorting").lobiList({
                    onClick: function(lobiList) {
                        // Code to execute when an item in the list is clicked
                        console.log("List item clicked!");
                    },
                    sortable: false,
                    lists: [{
                            title: "Todo",
                            defaultStyle: "lobilist-info",
                            controls: ["edit", "styleChange"],
                            items: [{
                                title: "Floor cool cinders",
                                description: "Thunder fulfilled travellers folly, wading, lake.",
                                dueDate: "2015-01-31",
                            }, ],
                        },
                        {
                            title: "Controls disabled",
                            controls: false,
                            items: [{
                                title: "Composed trays",
                                description: "Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.",
                            }, ],
                        },
                    ],
                });

                $("#actions-by-ajax").lobiList({
                    actions: {
                        load: "../example1/load.json",
                        insert: "../example1/insert.php",
                        delete: "../example1/delete.php",
                        update: "../example1/update.php",
                    },
                    afterItemAdd: function() {
                        console.log(arguments);
                    },
                });

                $(".datepicker").datepicker({
                    autoclose: true,
                    todayHighlight: true,
                });
                $(".lobilist").perfectScrollbar();
            });


        });
    </script>

    <script>
        @if (session('team'))
            $('#frameWrap-team').on('load', function() {
                tabSelect('team', 'team', 'team', 'team', '');
                const labelColors = {
                    'To Do': {
                        background: '#f0f0f0',
                        text: '#000000'
                    }, // Light Gray
                    'In Progress': {
                        background: '#ffff99',
                        text: '#000000'
                    }, // Yellow
                    'Done': {
                        background: '#00cc00',
                        text: '#ffffff'
                    }, // Green
                    'Verified': {
                        background: '#007bff',
                        text: '#ffffff'
                    }, // Blue
                    'Pending': {
                        background: '#800080',
                        text: '#ffffff'
                    }, // Purple
                    'Cancel': {
                        background: '#ff0000',
                        text: '#ffffff'
                    } // Red
                };

                const titleElements = document.querySelectorAll(".kanban-title-board");

                titleElements.forEach(function(titleElement) {
                    const labelText = titleElement.textContent.trim();
                    const labelInfo = labelColors[labelText];

                    if (labelInfo) {
                        titleElement.style.backgroundColor = labelInfo.background;
                        titleElement.style.color = labelInfo.text;
                    }
                });
            });
        @else
            $('#frameWrap-Personal').on('load', function() {
                tabSelect('Personal', 'Personal', 'Personal', 'Personal', '');
                const labelColors = {
                    'To Do': {
                        background: '#f0f0f0',
                        text: '#000000'
                    }, // Light Gray
                    'In Progress': {
                        background: '#ffff99',
                        text: '#000000'
                    }, // Yellow
                    'Done': {
                        background: '#00cc00',
                        text: '#ffffff'
                    }, // Green
                    'Verified': {
                        background: '#007bff',
                        text: '#ffffff'
                    }, // Blue
                    'Pending': {
                        background: '#800080',
                        text: '#ffffff'
                    }, // Purple
                    'Cancel': {
                        background: '#ff0000',
                        text: '#ffffff'
                    } // Red
                };

                const titleElements = document.querySelectorAll(".kanban-title-board");

                titleElements.forEach(function(titleElement) {
                    const labelText = titleElement.textContent.trim();
                    const labelInfo = labelColors[labelText];

                    if (labelInfo) {
                        titleElement.style.backgroundColor = labelInfo.background;
                        titleElement.style.color = labelInfo.text;
                    }
                });
            });
        @endif
    </script>
@endsection