@extends('layouts.index')
@section('title')
    Dashboard Perfomance
@endsection
@section('css')
    <link rel="stylesheet" href="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/extra-libs/css-chart/css-chart.css" />
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.css" />

    <style>
        #chart_activity_div text { 
            fill: rgb(0, 0, 0);
        }

        #chart_div text { 
            fill: rgb(0, 0, 0);
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <h4 class="text-muted mb-0 fw-normal">Page</h4>
                <h1 class="mb-0 fw-bold">Performance</h1>
            </div>

        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- Row -->
        <div class="row">
            <!-- Column -->
            <div class="col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <h4 class="text-center">KPI Percentage</h4>
                        <div id="chart-radial-gradient"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card w-100">
                    <div class="card-body">
                        
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">KPI Lists</h3>
                            </div>
                        </div>
                        <div id="chart_div"></div>
                    </div>
                </div>
            </div>
            {{-- <div class="col-lg-4 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <h4 class="card-title">Deadline Program</h4>

                        <div class="card w-100 mt-4">
                            <div class="card-body">
                                <div class="d-flex align-items-start">
                                    <div>
                                        <h3 class="card-title">E-Wallet </h3>
                                    </div>

                                </div>
                                <div class="mt-4">
                                    <span class="badge bg-light-primary text-primary">16 APR, 2021</span>
                                    <div class="row border-bottom mt-4 gx-0">
                                        <div class="col-6 pb-3 border-end">
                                            <h6 class="fw-normal text-muted mb-0">Due Date</h6>
                                            <span class="fs-3 font-weight-medium text-dark">Oct 23, 2021</span>
                                        </div>
                                        <div class="col-6 pb-3 border-end ps-3">
                                            <h6 class="fw-normal text-muted mb-0">Budget</h6>
                                            <span class="fs-3 font-weight-medium text-dark">$98,500</span>
                                        </div>

                                    </div>
                                    <div class="mt-4 pb-4 border-bottom">
                                        <h4>Person In Charge</h4>
                                        <div class="d-flex align-items-center mb-2 mt-2">
                                            <img src="{{ asset('back') }}/images/users/1.jpg" class="rounded-circle"
                                                width="35" alt="flexy">
                                            <div class="ms-3">
                                                <h6 class="mb-0 fw-bold">Muhammad Iqbal Rivaldi</h6>
                                                <span class="text-muted fs-9">PIC</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-4 pb-4 border-bottom">
                                        <h4>Teams</h4>
                                        <div class="mt-2 pt-1 mb-2">
                                            <a href="#" class="me-1">
                                                <img src="{{ asset('back') }}/images/users/3.jpg" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Ikbal Malik R" class="rounded-circle"
                                                    width="35" />
                                            </a>
                                            <a href="#" class="me-1">
                                                <img src="{{ asset('back') }}/images/users/3.jpg" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Fadli Rafidan" class="rounded-circle"
                                                    width="35" />
                                            </a>
                                            <a href="#" class="me-1">
                                                <img src="{{ asset('back') }}/images/users/3.jpg" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="Khalid" class="rounded-circle"
                                                    width="35" />
                                            </a>
                                        </div>
                                    </div>

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

            </div> --}}

            <div class="col-lg-12">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="table-responsive mt-4">
                            <table class="table table-bordered mb-0 v-middle text-nowrap">
                              <thead class="table-light">
                                <tr>
                                  <th class="text-muted">#</th>
                                  <th class="text-muted">Main Jobs</th>
                                  <th class="text-muted">Program</th>
                                  <th class="text-muted">Project</th>
                                  <th class="text-muted">Event</th>
                                  <th class="text-muted">Delegated</th>
                                  <th class="text-muted">KPI</th>
                                </tr>
                              </thead>
                              <tbody>
                                  <tr>
                                    <td>Achievement</td>
                                    <td>{{ $achievement_job_desc_average }}%</td>
                                    <td>{{ $achievement_program_average }}%</td>
                                    <td>{{ $achievement_project_average }}%</td>
                                    <td>{{ $achievement_event_average }}%</td>
                                    <td>{{ $achievement_delegated_average }}%</td>
                                    <th rowspan="3">{{ $kpi_percentage }}%</th>
                                  </tr>
                                  <tr>
                                    <td>Weight</td>
                                    @foreach($kpi_weight_main_job as $item)
                                        <td>{{ $item->weight_percentage }}%</td>
                                    @endforeach
                                    @foreach($kpi_weight_program as $item)
                                        <td>{{ $item->weight_percentage }}%</td>
                                    @endforeach
                                    @foreach($kpi_weight_project as $item)
                                        <td>{{ $item->weight_percentage }}%</td>
                                    @endforeach
                                    @foreach($kpi_weight_event as $item)
                                        <td>{{ $item->weight_percentage }}%</td>
                                    @endforeach
                                    @foreach($kpi_weight_delegated as $item)
                                        <td>{{ $item->weight_percentage }}%</td>
                                    @endforeach
                                  </tr>
                                  <tr>
                                    <td>Output</td>
                                    <td>{{ $output_main_job }}%</td>
                                    <td>{{ $output_program }}%</td>
                                    <td>{{ $output_project }}%</td>
                                    <td>{{ $output_event }}%</td>
                                    <td>{{ $output_delegated }}%</td>
                                  </tr>
                              </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Task Comparation</h3>
                            </div>
                        </div>
                        <br><br>
                        <div id="task-comparation" class="ps-3" style="width: 100%; height: 230px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Task Type</h3>
                            </div>
                        </div>
                        <br><br>
                        <div id="task-type" class="ps-3" style="width: 100%; height: 230px;"></div>
                    </div>
                </div>
            </div>
        
            <div class="col-lg-12">
                <div class="card w-100">
                    <div class="card-body">
                        <h3 class="card-title">Verified Activities</h3>

                        <div class="table-responsive mt-4">
                            <table class="table table-bordered mb-0 v-middle text-nowrap">
                                <thead class="table-light">
                                <tr>
                                  <th class="text-muted">Activities</th>
                                  <th class="text-muted">Program</th>
                                  <th class="text-muted">Event</th>
                                  <th class="text-muted">Project</th>
                                  <th class="text-muted">Delegated</th>
                                  <th class="text-muted">Main Job</th>
                                </tr>
                              </thead>
                              <tbody>
                                    <tr>
                                        <td>{{ $total_activities }}</td>
                                        <td>{{ $total_program_activities }}</td>
                                        <td>{{ $total_event_activities }}</td>
                                        <td>{{ $total_project_activities }}</td>
                                        <td>{{ $total_delegated_activities }}</td>
                                        <td>{{ $total_main_job_activities }}</td>
                                    </tr>
                                    <tr>
                                        <th>
                                            Total
                                        </th>
                                        <td colspan="3" class="text-center">{{ $total_program_activities + $total_event_activities + $total_project_activities }}</td>
                                        <td colspan="2" class="text-center">{{ $total_delegated_activities + $total_main_job_activities }}</td>
                                    </tr>
                              </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Row -->
        </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" id="action_plan_id_detail" value="">

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

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

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

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

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

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

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

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

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

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

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

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

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

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

                    <input type="date" name="edit_link" class="form-control" id="linkEditor" style="display: none;">

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

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



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

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

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

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

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

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

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

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

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

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

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

    </div>
</div>
    @endsection
    @section('js')
        <script src="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.min.js"></script>
        <!-- Chart JS -->
        {{-- <script src="{{ asset('back') }}/js/pages/dashboards/dashboard1.js"></script> --}}
        {{-- <script src="{{ asset('back') }}/js/pages/apex-chart/apex.radial.init.js"></script> --}}
        <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') }}/libs/dropzone/dist/min/dropzone.min.js"></script>

<script>
var option_task_comparation = {
    series: [{{ $total_job_desc }}, {{ $total_program }}, {{ $total_project }}, {{ $total_event }}, {{ $total_delegated_job }}],
    labels: ["Main Job", "Program", "Project", "Event", "Delegated"],
    chart: {
      height: 280,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    // colors: ["#15435A", "#fec90f"],
    dataLabels: {
      enabled: true,
    },
    legend: {
      show: true,
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        top: 0,
        right: 0,
      },
    },
    stroke: {
      colors: ["transparent"],
    },
    plotOptions: {
      pie: {
        donut: {
          size: "78%",
          background: "transparent",
          labels: {
            show: false,
            name: {
              show: true,
              fontSize: "18px",
              color: undefined,
              offsetY: -10,
            },
            value: {
              show: false,
              color: "#98aab4",
            },
            total: {
              show: false,
              label: "Our Visitors",
              color: "#98aab4",
            },
          },
        },
      },
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

  var chart_task_comparation = new ApexCharts(
    document.querySelector("#task-comparation"),
    option_task_comparation
  );
  chart_task_comparation.render();
</script>
<script>
    var option_task_type = {
    series: [{{ $total_personal_task }}, {{ $total_team_task }}],
    labels: ["Personal", "Team"],
    chart: {
      height: 280,
      type: "donut",
      foreColor: "#adb0bb",
      fontFamily: "DM sans",
    },
    // colors: ["#15435A", "#fec90f"],
    dataLabels: {
      enabled: true,
    },
    legend: {
      show: true,
    },
    grid: {
      show: false,
      borderColor: "transparent",
      padding: {
        top: 0,
        right: 0,
      },
    },
    stroke: {
      colors: ["transparent"],
    },
    plotOptions: {
      pie: {
        donut: {
          size: "78%",
          background: "transparent",
          labels: {
            show: false,
            name: {
              show: true,
              fontSize: "18px",
              color: undefined,
              offsetY: -10,
            },
            value: {
              show: false,
              color: "#98aab4",
            },
            total: {
              show: false,
              label: "Our Visitors",
              color: "#98aab4",
            },
          },
        },
      },
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

  var chart_task_type = new ApexCharts(
    document.querySelector("#task-type"),
    option_task_type
  );
  chart_task_type.render();
</script>
        <script>
            function detailActivity(action_plan_id) {
                $.ajax({
                    url: "{{ route('program.get-gantt-chart-detail') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        action_plan_id: action_plan_id
                    },
                    success: function (result) {
        
                        var kanbanWrap = JSON.parse(result);
        
                        // console.log(kanbanWrap[0]["summary-report"]);
        
                        var generateAsignee = "";
                        generateAsignee += '<div class="col-sm-1 mt-1">';
                        generateAsignee += '    <img src="' + kanbanWrap[0]["reviewer-photo"] +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        generateAsignee += '       alt="flexy">';
                        generateAsignee += '</div>';
                        generateAsignee += '<div class="col-sm-11 mt-2">';
                        generateAsignee +=
                            '    <p style="margin-left: -15px;font-size: 15px;" class="text-dark">';
                        generateAsignee += kanbanWrap[0]["reviewer"] + '</p>';
                        generateAsignee += ' </div>';
        
                        if (kanbanWrap[0]["label"] == 'Personal') {
                            $('#titleModal').html("");
        
                            $('#titleModal').html(kanbanWrap[0]["title-modal"]);
                            $("#titleModal").css("cssText",
                                "display: block !important;font-size: 24px !important; color: #000000;");
                            $("#titleModalTeam").css("cssText", "display: none !important;");
        
                            $('#actionPlan').html("");
        
                            $('#actionPlan').html(kanbanWrap[0]["description"]);
                            $("#actionPlan").css("cssText", "display: block !important;");
                            $("#actionPlanTeam").css("cssText", "display: none !important;");
        
                            $('#linkWrap').html("");
        
                            $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                            $("#linkWrap").css("cssText", "display: block !important;");
                            $("#linkTeam").css("cssText", "display: none !important;");
        
                            $('#startDateModal').html("");
        
                            $('#startDateModal').html(kanbanWrap[0]["start-date"]);
                            $("#startDateModal").css("cssText", "display: block !important;");
                            $("#startDateModalTeam").css("cssText", "display: none !important;");
        
                            $('#endDateModal').html("");
        
                            $('#endDateModal').html(kanbanWrap[0]["end-date"]);
                            $("#endDateModal").css("cssText", "display: block !important;");
                            $("#endDateModalTeam").css("cssText", "display: none !important;");
        
                            $("#reviewerTitle").css("cssText", "display: none !important;");
        
                            $('#reviewerModal').html("");
        
                            $('#reviewerModal').html(generateAsignee);
                            $("#reviewerModal").css("cssText", "display: none !important;");
                            $("#reviewerModalTeam").css("cssText", "display: none !important;");
                        } else {
                            $('#titleModalTeam').html("");
        
                            $('#titleModalTeam').html(kanbanWrap[0]["title-modal"]);
                            $("#titleModalTeam").css("cssText",
                                "display: block !important;font-size: 24px !important; color: #000000;");
                            $("#titleModal").css("cssText", "display: none !important;");
        
                            $('#actionPlanTeam').html("");
        
                            $('#actionPlanTeam').html(kanbanWrap[0]["description"]);
                            $("#actionPlanTeam").css("cssText", "display: block !important;");
                            $("#actionPlan").css("cssText", "display: none !important;");
        
                            $('#linkWrap').html("");
        
                            $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                            $("#linkWrap").css("cssText", "display: block !important;");
                            $("#linkTeam").css("cssText", "display: none !important;");
        
                            $('#startDateModalTeam').html("");
        
                            $('#startDateModalTeam').html(kanbanWrap[0]["start-date"]);
                            $("#startDateModalTeam").css("cssText", "display: block !important;");
                            $("#startDateModal").css("cssText", "display: none !important;");
        
                            $('#endDateModalTeam').html("");
        
                            $('#endDateModalTeam').html(kanbanWrap[0]["end-date"]);
                            $("#endDateModalTeam").css("cssText", "display: block !important;");
                            $("#endDateModal").css("cssText", "display: none !important;");
        
                            $("#reviewerTitle").css("cssText", "display: block !important;margin-top: 20px;");
        
                            $('#reviewerModalTeam').html("");
        
                            $('#reviewerModalTeam').html(generateAsignee);
                            $("#reviewerModalTeam").css("cssText", "display: flex !important;");
                            $("#reviewerModal").css("cssText", "display: none !important;");
                        }
        
                        $("#commentWrap").html("");
                        $("#historyWrap").html("");
        
                        // if(element.getAttribute('data-status') == '')
                        // console.log();
                        $('#statusTask').val(kanbanWrap[0]["id"]);
        
                        $('#titleEditor').val(kanbanWrap[0]["title-modal"]);
                        $('#endDateEditor').val(kanbanWrap[0]["end-date-modal"]);
                        $('#asigneeModal').html(kanbanWrap[0]["asignee"]);
        
        
        
                        $('#reviewerEditor').val(kanbanWrap[0]["reviewer-id"]);
        
        
                        $('#actionPlanEditor').html(kanbanWrap[0]["description"]);
        
                        $('#startDateEditor').val(kanbanWrap[0]["start-date"]);
        
        
                        $('#labelModal').html(kanbanWrap[0]["label"]);
                        $('#labelEditor').val(kanbanWrap[0]["label"]);
                        $('#endDateEditor').val(kanbanWrap[0]["end-date"]);
        
                        $('#reportSummary').html(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0]["summary-report"] : '-');
        
                        $('#reportSummaryEditor').val(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0][
                            "summary-report"
                        ] : '-');
        
                        $('#editActivityId').val(kanbanWrap[0]["activity-id"]);
                        $('#detail_kanban').modal('show');
        
        
                        if (kanbanWrap[0]["label"] != "Personal") {
        
        
                            $("#asigneeLabel").css("cssText",
                                "display: block !important;margin-top: 20px !important;");
                            $("#asigneeWrap").css("cssText", "display: flex !important;");
        
                            var assigned_object = JSON.parse(kanbanWrap[0]["assigned-encode"]);
        
                            var members_object = JSON.parse(kanbanWrap[0]["members-encode"]);
        
                            $("#asigneeWrap").html("");
        
                            for (const [key, value] of Object.entries(assigned_object)) {
                                var html = "";
                                html += '<div class="col-sm-1 mt-1">';
                                html += '<img src="' + value +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += ' alt="flexy">';
                                html += '</div>';
                                html += '<div class="col-sm-11 mt-2">';
                                html +=
                                    ' <p style="margin-left: -15px;font-size: 15px;" class="text-dark" id="asigneeModal">';
                                html += members_object[key] + '</p>';
                                html += '</div>';
        
                                $("#asigneeWrap").prepend(html);
                            }
                        } else {
        
                            $("#asigneeLabel").css("cssText", "display: none !important;");
                            $("#asigneeWrap").css("cssText", "display: none !important;");
                        }
        
                        if (kanbanWrap[0]["comment-wrap"]) {
                            var comment_object = JSON.parse(kanbanWrap[0]["comment-wrap"]);
        
                            for (const [key, value] of Object.entries(comment_object)) {
                                console.log(value);
        
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.commented_by + '</h6>';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html +=
                                    '               <div class="row" id="descriptionWrapEdit' +
                                    value.id + '">';
                                html += '                   <div class="col-sm-12">';
                                html +=
                                    '                      <p style="margin-left: -15px;font-size: 13px;">' +
                                    value.description + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                              
                                html +=
                                    '    <textarea class="form-control mt-3" cols="30" rows="5"';
                                html +=
                                    '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                                    value.id + '" placeholder="Add your comment here...">';
                                html += value.description + '</textarea>';
                                html +=
                                    '    <div id="button-edit-comment-wrap' + value.id +
                                    '" style="display: none;">';
                                html +=
                                    '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                                html +=
                                    '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                                    value.id + '`)">Save</button>';
                                html +=
                                    '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                                html +=
                                    '             onclick="cancelEditComment(`' + value.id +
                                    '`)">Cancel</button>';
                                html += '          </div>';
        
                                $("#commentWrap").append(html);
                            }
                        }
        
        
                        if (kanbanWrap[0]["log-wrap"] != null) {
        
                            $("#log_object_val").val(kanbanWrap[0]["log-wrap"]);
        
                            var log_object = JSON.parse(kanbanWrap[0]["log-wrap"]);
        
                            for (const [key, value] of Object.entries(log_object)) {
        
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.user_name + '</h6>' +
                                    ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                    value.title + ' </p> ' +
                                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' +
                                    value.type + ' </p> ';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html += '               <div class="row">';
                                html += '                   <div class="col-sm-12">';
                                html += '<p style="margin-left: -15px;font-size: 13px;">';
        
                                if (value.old_name != "" && value.new_name != "") {
                                    var description_log = value.old_name + ' &#8594 ' + value
                                        .new_name;
                                } else if (value.old_name != "") {
                                    var description_log = value.old_name;
                                } else if (value.new_name != "") {
                                    var description_log = value.new_name;
                                }
        
                                html += '' + description_log + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html += '          </div>';
        
                                $("#historyWrap").prepend(html);
                            }
                        }
        
                    }
                });
            }
        
        
            $('#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>
            var uploadedDocumentMap = {}
            Dropzone.options.documentDropzone = {
                url: '{{ url('activity.store ') }}',
                maxFilesize: 1000000, // MB
                clickable: false,
                addRemoveLinks: false,
                autoProcessQueue: false,
                parallelUploads: 10,
                autoDiscover: false,
                uploadMultiple: true,
                acceptedFiles: ".jpeg,.jpg,.png,.gif",
                processData: false,
                contentType: false,
                dictDefaultMessage: "No attachment yet.",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function (file, response) {
        
                    Swal.fire({
                        title: 'Done',
                        text: "Activity has been added successfully!",
                        icon: 'success',
                        confirmButtonColor: '#7066e0',
                        confirmButtonText: 'Ok'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#frameWrap').contents().find("#firstElement").remove();
                            $('#frameWrap').contents().find(".kanban-wrapper").remove();
        
                            var html = "";
        
        
                            html += '<div class="row" id="firstElement">';
                            html += '</div>';
        
                            $('#frameWrap').contents().find(".app-kanban").append(html);
                            $('#frameWrap').contents().find("#firstElement").after(
                                '<div class="kanban-wrapper"></div>');
                            document.getElementById('frameWrap').contentWindow.initKanban();
                        }
                    })
                },
                init: function () {
                    var myDropzone = this;
        
        
                    $("#saveButton").click(function () {
                        // if (myDropzone.getQueuedFiles().length > 0) {
                        //     $(".dropzone").css("cssText",
                        //         "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                        //     $(".errorAddImage").css("cssText", "display: none !important;");
                        // } else {
                        //     $(".dropzone").css("cssText",
                        //         "border: 1px solid #f1556c !important; color: #f1556c !important;");
                        //     $(".errorAddImage").css("cssText",
                        //         "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                        //     );
                        // }
        
                        if (myDropzone.getQueuedFiles().length > 0 && $('#createForm').valid()) {
        
                            myDropzone.processQueue();
                            $("#create_kanban").modal('hide');
        
                        } else if (myDropzone.getQueuedFiles().length <= 0 && $('#createForm').valid()) {
                            $("#create_kanban").modal('hide');
        
                            $.ajax({
                                url: "{{ route('activity.store') }}",
                                method: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    title: $("#title").val(),
                                    description: $("#description").val(),
                                    start_date: $("#start_date").val(),
                                    end_date: $("#end_date").val(),
                                    summary_report: $("#summary_report").val(),
                                    reviewer_id: $("#reviewer_id").val(),
                                    label: $("#label_value").val(),
                                    status: $("#status_val").val()
        
                                },
                                success: function (result) {
        
                                    Swal.fire({
                                        title: 'Done',
                                        text: "Activity has been added successfully!",
                                        icon: 'success',
                                        confirmButtonColor: '#7066e0',
                                        confirmButtonText: 'Ok'
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            $('#frameWrap').contents().find("#firstElement")
                                                .remove();
                                            $('#frameWrap').contents().find(
                                                ".kanban-wrapper").remove();
        
                                            var html = "";
        
                                            html += '<div class="row" id="firstElement">';
                                            html += '</div>';
        
                                            $('#frameWrap').contents().find(".app-kanban")
                                                .append(html);
                                            $('#frameWrap').contents().find("#firstElement")
                                                .after(
                                                    '<div class="kanban-wrapper"></div>');
                                            document.getElementById('frameWrap')
                                                .contentWindow.initKanban();
                                        }
                                    })
                                }
                            });
        
        
                        } else {
                            $("#saveButton").prop('disabled', false);
                        }
                    });
        
                    this.on("addedfiles", function (files) {
                        $("#saveButton").click(function (e) {
                            if (!$('#createForm').valid()) {
                                // $("#saveButton").prop('disabled', false);
                            } else {
                                // $("#saveButton").prop('disabled', true);
                                myDropzone.processQueue();
                            }
                        });
        
                        // if (myDropzone.getQueuedFiles().length > 0) {
                        //     $(".dropzone").css("cssText",
                        //         "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                        //     $(".errorAddImage").css("cssText", "display: none !important;");
                        // } else {
                        //     $(".dropzone").css("cssText",
                        //         "border: 1px solid #f1556c !important; color: #f1556c !important;");
                        //     $(".errorAddImage").css("cssText",
                        //         "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                        //     );
                        // }
        
                    });
        
                    this.on('sendingmultiple', function (file, xhr, formData) {
                        // Append all form inputs to the formData Dropzone will POST
                        var data = $('#createForm').serializeArray();
        
                        $.each(data, function (key, el) {
                            formData.append(el.name, el.value);
                        });
        
                    });
                },
                removedfile: function (file) {
                    file.previewElement.remove()
                    var name = ''
                    if (typeof file.file_name !== 'undefined') {
                        name = file.file_name
                    } else {
                        name = uploadedDocumentMap[file.name]
                    }
                    $('form').find('input[name="photo[]"][value="' + name + '"]').remove()
                }
            }
        
            var uploadedEditDocumentMap = {}
            Dropzone.options.documentEditDropzone = {
                url: '{{ url('activity.edit-attachment') }}',
                maxFilesize: 1000000, // MB
                clickable: false,
                addRemoveLinks: false,
                autoProcessQueue: true,
                parallelUploads: 10,
                autoDiscover: false,
                uploadMultiple: true,
                // acceptedFiles: ".jpeg,.jpg,.png,.gif",
                processData: true,
                contentType: false,
                dictDefaultMessage: "No attachment yet.",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function (file_new, response) {
                    var myEditDropzone = this;
                    $(".dz-processing").remove();
                    $(".dz-preview").not(".dz-image-preview").remove();
        
                    for (const [key, value] of Object.entries(response.attachment_id)) {
        
                        var file = value;
                        var url = "{{ url('activity/download-attachment') }}/" + value.id;
        
                        myEditDropzone.emit("addedfile", file);
                        myEditDropzone.emit("thumbnail", file, value.url);
                        myEditDropzone.emit("complete", file);
        
                        var anchorEl = document.createElement('a');
                        anchorEl.setAttribute('href', url);
                        anchorEl.setAttribute('class', 'download-dropzone');
                        anchorEl.innerHTML = "<br>Download";
                        file.previewTemplate.appendChild(anchorEl);
        
                    }
        
        
        
                    for (const [key, value] of Object.entries(response.activity_log)) {
        
                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo + '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' + ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value.type +
                            ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';
        
                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value.new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }
        
                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';
        
                        $("#historyWrap").prepend(html);
                    }
        
                    Swal.fire({
                        title: 'Done',
                        text: "Attachment has been updated successfully!",
                        icon: 'success',
                        confirmButtonColor: '#7066e0',
                        confirmButtonText: 'Ok'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#frameWrap').contents().find("#firstElement").remove();
                            $('#frameWrap').contents().find(".kanban-wrapper").remove();
        
                            var html = "";
        
        
                            html += '<div class="row" id="firstElement">';
                            html += '</div>';
        
                            $('#frameWrap').contents().find(".app-kanban").append(html);
                            $('#frameWrap').contents().find("#firstElement").after(
                                '<div class="kanban-wrapper"></div>');
                            document.getElementById('frameWrap').contentWindow.initKanban();
                        }
                    })
                },
                init: function () {
                    var myEditDropzone = this;
        
                    $(document).on('show.bs.modal', '#detail_kanban', function () {
                        $(".attachment-delete-id").remove();
                        $(".dz-preview").remove();
        
                        $.ajax({
                            url: "{{ route('activity.get-attachment') }}",
                            method: "POST",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                activity_id: $("#editActivityId").val(),
                            },
                            success: function (result) {
                                var wrap = JSON.parse(result);
                                for (const [key, value] of Object.entries(wrap)) {
        
                                    var html = "";
        
                                    // $(".download-dropzone").html("");
                                    var file = value;
                                    var url = "{{ url('activity/download-attachment') }}/" + value
                                        .id;
        
                                    myEditDropzone.emit("addedfile", file);
                                    myEditDropzone.emit("thumbnail", file, value.url);
                                    myEditDropzone.emit("complete", file);
        
                                    var anchorEl = document.createElement('a');
                                    anchorEl.setAttribute('href', url);
                                    anchorEl.setAttribute('class', 'download-dropzone');
                                    anchorEl.innerHTML = "<br>Download";
                                    file.previewTemplate.appendChild(anchorEl);
                                    // html += `<a href="{{ url('activity/download-attachment') }}/` + file + `" class="download-dropzone"><br>Download</a>`;
        
                                    // $(".dz-preview").append(html);
                                }
                            }
        
                        });
        
        
                    });
        
        
                    // $("#editProdukButton").click(function() {
                    //     var checkImage = document.getElementsByClassName('dz-preview');
        
                    //     if (checkImage.length > 0) {
                    //         $(".dropzone").css("cssText",
                    //             "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                    //         $(".errorEditImage").css("cssText", "display: none !important;");
                    //     } else {
                    //         $(".dropzone").css("cssText",
                    //             "border: 1px solid #f1556c !important; color: #f1556c !important;");
                    //         $(".errorEditImage").css("cssText",
                    //             "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                    //         );
                    //     }
        
                    //     if (checkImage.length > 0 && $('#editProdukForm').valid()) {
        
                    //         $('#editProdukForm')[0].submit();
        
                    //         myEditDropzone.processQueue();
        
                    //         $("#editProdukButton").prop('disabled', true);
                    //     } else {
                    //         $("#editProdukButton").prop('disabled', false);
                    //     }
        
                    // });
        
                    // this.on("addedfiles", function(files) {
                    //     $("#editProdukButton").click(function(e) {
                    //         if (!$('#editProdukForm').valid()) {
                    //             $("#editProdukButton").prop('disabled', false);
                    //         } else {
                    //             myEditDropzone.processQueue();
                    //         }
                    //     });
        
                    //     var checkImage = document.getElementsByClassName('dz-preview');
                    //     if (checkImage.length > 0) {
                    //         $(".edit-dropzone").css("cssText",
                    //             "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                    //         $(".errorEditImage").css("cssText", "display: none !important;");
                    //     } else {
                    //         $(".edit-dropzone").css("cssText",
                    //             "border: 1px solid #f1556c !important; color: #f1556c !important;");
                    //         $(".errorEditImage").css("cssText",
                    //             "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                    //         );
                    //     }
                    // });
        
                    this.on('sendingmultiple', function (file, xhr, formData) {
                        // Append all form inputs to the formData Dropzone will POST
                        formData.append('edit_activity_id', $('#editActivityId').val());
        
                    });
        
        
                },
                removedfile: function (file) {
                    Swal.fire({
                        title: "Delete Attachment?",
                        text: `Are you sure to delete this attachment?`,
                        icon: "warning",
                        showCancelButton: !0,
                        confirmButtonColor: "rgb(11, 42, 151)",
                        cancelButtonColor: "rgb(209, 207, 207)",
                        confirmButtonText: "Yes, Delete it !",
                        cancelButtonText: "Cancel"
                    }).then(function (t) {
                        if (t.value) {
        
                            var token = '{{ csrf_token() }}';
        
                            $.ajax({
                                url: "{{ url('activity.edit-attachment') }}",
                                method: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    attachment: file.id,
                                    edit_activity_id: $('#editActivityId').val(),
                                },
                                success: function (result) {
                                    for (const [key, value] of Object.entries(
                                            result.activity_log)) {
        
                                        var html = "";
                                        html += ' <div class="col-sm-1 mt-4">';
                                        html +=
                                            '            <img src="' + value.user_photo +
                                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                        html += '               alt="flexy">';
                                        html += '        </div>';
                                        html += '       <div class="col-sm-11">';
                                        html += '           <div class="row">';
                                        html +=
                                            '               <div class="col-sm-12 d-flex">';
                                        html +=
                                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                            value.user_name + '</h6>' +
                                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                            value.title + ' </p> ' +
                                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' +
                                            value.type +
                                            ' </p> ';
                                        html +=
                                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                            value.created_at + '</p>';
                                        html += '              </div>';
                                        html += '             </div>';
                                        html += '               <div class="row">';
                                        html +=
                                            '                   <div class="col-sm-12">';
                                        html +=
                                            '<p style="margin-left: -15px;font-size: 13px;">';
        
                                        if (value.old_name != "" && value
                                            .new_name != "") {
                                            var description_log = value.old_name +
                                                ' &#8594 ' + value.new_name;
                                        } else if (value.old_name != "") {
                                            var description_log = value.old_name;
                                        } else if (value.new_name != "") {
                                            var description_log = value.new_name;
                                        }
        
                                        html += '' + description_log + '</p>';
                                        html += '                    </div>';
                                        html += '                </div>';
                                        html += '          </div>';
        
                                        $("#historyWrap").prepend(html);
                                    }
        
                                    $('#detailKanbanForm').prepend(
                                        '<input type="hidden" class="attachment-delete-id" name="attachment[]" value="' +
                                        file
                                        .id + '">')
        
                                    file.previewElement.remove()
                                    var name = ''
                                    if (typeof file.file_name !== 'undefined') {
                                        name = file.file_name
                                    } else {
                                        name = uploadedEditDocumentMap[file.name]
                                    }
        
                                    $('#detailKanbanForm').find(
                                            'input[name="attachment[]"][value="' + name + '"]')
                                        .remove()
                                    $('#detailKanbanForm').find('input[name="file"]').remove()
        
                                    Swal.fire({
                                        title: 'Done',
                                        text: "Attachment has been updated successfully!",
                                        icon: 'success',
                                        confirmButtonColor: '#7066e0',
                                        confirmButtonText: 'Ok'
                                    }).then((result) => {
                                        if (result.isConfirmed) {
        
                                            $('#frameWrap').contents().find("#firstElement")
                                                .remove();
                                            $('#frameWrap').contents().find(
                                                ".kanban-wrapper").remove();
        
                                            var html = "";
        
                                            html += '<div class="row" id="firstElement">';
                                            html += '</div>';
        
                                            $('#frameWrap').contents().find(".app-kanban")
                                                .append(html);
                                            $('#frameWrap').contents().find("#firstElement")
                                                .after(
                                                    '<div class="kanban-wrapper"></div>');
                                            document.getElementById('frameWrap')
                                                .contentWindow.initKanban();
                                        }
                                    })
                                }
        
                            });
        
                        }
                    })
                }
            }
        </script>
        <script>
            function newestOrder() {
                $("#newestFirst").css('display', 'none');
                $("#oldestFirst").css('display', 'block');
                $("#activity_tab_order").val("latest");
        
                if ($("#activity_tab_status").val() == "comment") {
                    $("#commentWrap").html("");
                    $.ajax({
                        url: "{{ route('activity.filter-detail') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            status: $("#activity_tab_status").val(),
                            activity_id: $("#editActivityId").val(),
                            order: $("#activity_tab_order").val(),
                        },
                        success: function (result) {
        
                            for (const [key, value] of Object.entries(result)) {
        
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.commented_by + '</h6>';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html +=
                                    '               <div class="row" id="descriptionWrapEdit' +
                                    value.id + '">';
                                html += '                   <div class="col-sm-12">';
                                html +=
                                    '                      <p style="margin-left: -15px;font-size: 13px;">' +
                                    value.description + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html +=
                                    '    <textarea class="form-control mt-3" cols="30" rows="5"';
                                html +=
                                    '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                                    value.id + '" placeholder="Add your comment here...">';
                                html += value.description + '</textarea>';
                                html +=
                                    '    <div id="button-edit-comment-wrap' + value.id +
                                    '" style="display: none;">';
                                html +=
                                    '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                                html +=
                                    '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                                    value.id + '`)">Save</button>';
                                html +=
                                    '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                                html +=
                                    '             onclick="cancelEditComment(`' + value.id +
                                    '`)">Cancel</button>';
                                html += '          </div>';
                                $("#commentWrap").append(html);
                            }
        
                        }
                    });
                } else if ($("#activity_tab_status").val() == "history") {
                    $("#historyWrap").html("");
                    $.ajax({
                        url: "{{ route('activity.filter-detail') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            status: $("#activity_tab_status").val(),
                            activity_id: $("#editActivityId").val(),
                            order: $("#activity_tab_order").val(),
                        },
                        success: function (result) {
                            for (const [key, value] of Object.entries(result)) {
        
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.user_name + '</h6>' +
                                    ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                    value.title + ' </p> ' +
                                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                                    .type +
                                    ' </p> ';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html += '               <div class="row">';
                                html += '                   <div class="col-sm-12">';
                                html += '<p style="margin-left: -15px;font-size: 13px;">';
        
                                if (value.old_name != "" && value.new_name != "") {
                                    var description_log = value.old_name + ' &#8594 ' + value.new_name;
                                } else if (value.old_name != "") {
                                    var description_log = value.old_name;
                                } else if (value.new_name != "") {
                                    var description_log = value.new_name;
                                }
        
                                html += '' + description_log + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html += '          </div>';
        
                                $("#historyWrap").append(html);
                            }
                        }
                    });
                }
        
            }
        
            function oldestOrder() {
                $("#oldestFirst").css('display', 'none');
                $("#newestFirst").css('display', 'block');
                $("#activity_tab_order").val("oldest");
        
                if ($("#activity_tab_status").val() == "comment") {
                    $("#commentWrap").html("");
                    $.ajax({
                        url: "{{ route('activity.filter-detail') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            status: $("#activity_tab_status").val(),
                            activity_id: $("#editActivityId").val(),
                            order: $("#activity_tab_order").val(),
                        },
                        success: function (result) {
        
                            for (const [key, value] of Object.entries(result)) {
        
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.commented_by + '</h6>';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html +=
                                    '               <div class="row" id="descriptionWrapEdit' +
                                    value.id + '">';
                                html += '                   <div class="col-sm-12">';
                                html +=
                                    '                      <p style="margin-left: -15px;font-size: 13px;">' +
                                    value.description + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html +=
                                    '    <textarea class="form-control mt-3" cols="30" rows="5"';
                                html +=
                                    '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                                    value.id + '" placeholder="Add your comment here...">';
                                html += value.description + '</textarea>';
                                html +=
                                    '    <div id="button-edit-comment-wrap' + value.id +
                                    '" style="display: none;">';
                                html +=
                                    '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                                html +=
                                    '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                                    value.id + '`)">Save</button>';
                                html +=
                                    '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                                html +=
                                    '             onclick="cancelEditComment(`' + value.id +
                                    '`)">Cancel</button>';
                                html += '          </div>';
        
                                $("#commentWrap").append(html);
                            }
        
        
                        }
                    });
                } else if ($("#activity_tab_status").val() == "history") {
                    $("#historyWrap").html("");
                    $.ajax({
                        url: "{{ route('activity.filter-detail') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            status: $("#activity_tab_status").val(),
                            activity_id: $("#editActivityId").val(),
                            order: $("#activity_tab_order").val(),
                        },
                        success: function (result) {
                            for (const [key, value] of Object.entries(result)) {
        
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.user_name + '</h6>' +
                                    ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                    value.title + ' </p> ' +
                                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                                    .type +
                                    ' </p> ';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html += '               <div class="row">';
                                html += '                   <div class="col-sm-12">';
                                html += '<p style="margin-left: -15px;font-size: 13px;">';
        
                                if (value.old_name != "" && value.new_name != "") {
                                    var description_log = value.old_name + ' &#8594 ' + value.new_name;
                                } else if (value.old_name != "") {
                                    var description_log = value.old_name;
                                } else if (value.new_name != "") {
                                    var description_log = value.new_name;
                                }
        
                                html += '' + description_log + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html += '          </div>';
        
                                $("#historyWrap").append(html);
                            }
                        }
                    });
                }
            }
        
            function allActivity(element) {
                $("#activity_tab_status").val("all");
                $("#allWrap").css('display', 'flex');
                $("#historyWrap").css('display', 'none');
                $("#commentWrap").css('display', 'none');
        
                $(".activity-choose").removeClass("text-white");
                $(".activity-choose").addClass("text-info");
                $(".activity-choose").addClass("btn-light-info");
                if ($(element).hasClass("btn-light-info")) {
                    $(element).removeClass("btn-light-info");
                    $(element).addClass("text-white");
                    $(element).addClass("btn-info");
                }
        
                $("#allWrap").html("");
        
                $.ajax({
                    url: "{{ route('activity.filter-detail') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        status: $("#activity_tab_status").val(),
                        activity_id: $("#editActivityId").val(),
                        order: $("#activity_tab_order").val(),
                    },
                    success: function (result) {
                        for (const [key, value] of Object.entries(result)) {
                            if ('commented_by' in value) {
                                var env = "{{ env('APP_URL') }}";
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + env + value.commented_by_relation.photos_storage +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.commented_by_relation.name + '</h6>' +
                                    ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                    value.activity_by_relation.title + ' </p> ';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at_lang + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html += '               <div class="row">';
                                html += '                   <div class="col-sm-12">';
                                html += '<p style="margin-left: -15px;font-size: 13px;">';
        
                                html += '' + value.description + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html += '          </div>';
        
                                $("#allWrap").append(html);
                            } else {
                                var env = "{{ env('APP_URL') }}";
                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + env + value.user_by_relation.photos_storage +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html += '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.user_by_relation.name + '</h6>' +
                                    ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                    value.title + ' </p> ' +
                                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                                    .type +
                                    ' </p> ';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at_lang + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html += '               <div class="row">';
                                html += '                   <div class="col-sm-12">';
                                html += '<p style="margin-left: -15px;font-size: 13px;">';
        
                                if (value.old_name != "" && value.new_name != "") {
                                    var description_log = value.old_name + ' &#8594 ' + value.new_name;
                                } else if (value.old_name != "") {
                                    var description_log = value.old_name;
                                } else if (value.new_name != "") {
                                    var description_log = value.new_name;
                                }
        
                                html += '' + description_log + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html += '          </div>';
        
                                $("#allWrap").append(html);
                            }
                        }
                    }
                });
            }
        
            function commentActivity(element) {
                $("#activity_tab_status").val("comment");
                $("#commentWrap").css('display', 'flex');
                $("#allWrap").css('display', 'none');
                $("#historyWrap").css('display', 'none');
                $(".activity-choose").removeClass("text-white");
                $(".activity-choose").addClass("text-info");
                $(".activity-choose").addClass("btn-light-info");
                if ($(element).hasClass("btn-light-info")) {
                    $(element).removeClass("btn-light-info");
                    $(element).addClass("text-white");
                    $(element).addClass("btn-info");
                }
        
                $("#commentWrap").html("");
        
                $.ajax({
                    url: "{{ route('activity.filter-detail') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        status: $("#activity_tab_status").val(),
                        activity_id: $("#editActivityId").val(),
                        order: $("#activity_tab_order").val(),
                    },
                    success: function (result) {
        
                        for (const [key, value] of Object.entries(result)) {
        
                            var html = "";
                            html += ' <div class="col-sm-1 mt-4">';
                            html +=
                                '            <img src="' + value.user_photo +
                                '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                            html += '               alt="flexy">';
                            html += '        </div>';
                            html += '       <div class="col-sm-11">';
                            html += '           <div class="row">';
                            html += '               <div class="col-sm-12 d-flex">';
                            html +=
                                '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                value.commented_by + '</h6>';
                            html +=
                                '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                value.created_at + '</p>';
                            html += '              </div>';
                            html += '             </div>';
                            html +=
                                '               <div class="row" id="descriptionWrapEdit' +
                                value.id + '">';
                            html += '                   <div class="col-sm-12">';
                            html +=
                                '                      <p style="margin-left: -15px;font-size: 13px;">' +
                                value.description + '</p>';
                            html += '                    </div>';
                            html += '                </div>';
                            html +=
                                '    <textarea class="form-control mt-3" cols="30" rows="5"';
                            html +=
                                '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                                value.id + '" placeholder="Add your comment here...">';
                            html += value.description + '</textarea>';
                            html +=
                                '    <div id="button-edit-comment-wrap' + value.id +
                                '" style="display: none;">';
                            html +=
                                '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                            html +=
                                '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                                value.id + '`)">Save</button>';
                            html +=
                                '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                            html +=
                                '             onclick="cancelEditComment(`' + value.id +
                                '`)">Cancel</button>';
                            html += '          </div>';
                            $("#commentWrap").append(html);
                        }
                    }
                });
            }
        
            function historyActivity(element) {
                $("#activity_tab_status").val("history");
                $("#commentWrap").css('display', 'none');
        
                $("#allWrap").css('display', 'none');
                $("#historyWrap").css('display', 'flex');
                $(".activity-choose").removeClass("text-white");
                $(".activity-choose").addClass("text-info");
                $(".activity-choose").addClass("btn-light-info");
                if ($(element).hasClass("btn-light-info")) {
                    $(element).removeClass("btn-light-info");
                    $(element).addClass("text-white");
                    $(element).addClass("btn-info");
                }
        
                $("#historyWrap").html("");
                $.ajax({
                    url: "{{ route('activity.filter-detail') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        status: $("#activity_tab_status").val(),
                        activity_id: $("#editActivityId").val(),
                        order: $("#activity_tab_order").val(),
                    },
                    success: function (result) {
                        for (const [key, value] of Object.entries(result)) {
        
                            var html = "";
                            html += ' <div class="col-sm-1 mt-4">';
                            html +=
                                '            <img src="' + value.user_photo + '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                            html += '               alt="flexy">';
                            html += '        </div>';
                            html += '       <div class="col-sm-11">';
                            html += '           <div class="row">';
                            html += '               <div class="col-sm-12 d-flex">';
                            html +=
                                '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                value.user_name + '</h6>' +
                                ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                value.title + ' </p> ' +
                                ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                                .type +
                                ' </p> ';
                            html +=
                                '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                value.created_at + '</p>';
                            html += '              </div>';
                            html += '             </div>';
                            html += '               <div class="row">';
                            html += '                   <div class="col-sm-12">';
                            html += '<p style="margin-left: -15px;font-size: 13px;">';
        
                            if (value.old_name != "" && value.new_name != "") {
                                var description_log = value.old_name + ' &#8594 ' + value.new_name;
                            } else if (value.old_name != "") {
                                var description_log = value.old_name;
                            } else if (value.new_name != "") {
                                var description_log = value.new_name;
                            }
        
                            html += '' + description_log + '</p>';
                            html += '                    </div>';
                            html += '                </div>';
                            html += '          </div>';
        
                            $("#historyWrap").append(html);
                        }
                    }
                });
            }
        </script>

        <script>
            function ChooseProgram(value) {
                window.location.href = `{{ url('dashboard-program/?program=` + value + `') }}`;
            }
        </script>
        <script type="text/javascript">
                  google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['', 'Percentage'],
          ["Main Job", {{ $achievement_job_desc_average }}],
          ["Program", {{ $achievement_program_average}}],
          ["Project", {{ $achievement_project_average}}],
          ["Event", {{ $achievement_event_average}}],
          ['Delegated', {{ $achievement_delegated_average}}]
        ]);

        var options = {
          legend: { position: 'none' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Achievement'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));
        chart.draw(data, options);
      };
          </script>

          <script type="text/javascript">
            google.charts.load('current', {'packages':['gantt']});
                google.charts.setOnLoadCallback(drawChart);
        
                function drawChart() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Task ID');
                    data.addColumn('string', 'Task Name');
                    data.addColumn('date', 'Start Date');
                    data.addColumn('date', 'End Date');
                    data.addColumn('number', 'Duration');
                    data.addColumn('number', 'Percent Complete');
                    data.addColumn('string', 'Dependencies');
        
                   
        
                    var options = {
                        height: 275,
                        gantt: {
                            palette: [
                                {
                                    "color": "#fec90f",
                                    "dark": "#1a9bfc"
                                }
                            ]
                        }
                    };
        
                    var chart = new google.visualization.Gantt(document.getElementById('chart_activity_div'));
        
                    chart.draw(data, options);

                    // Add click event listener to progress bars
                    google.visualization.events.addListener(chart, 'select', function() {
                        var selection = chart.getSelection();
                        if (selection.length > 0) {
                            var row = selection[0].row;

                            var actionPlanId = data.getValue(row, 0);

                            $("#action_plan_id_detail").val(actionPlanId);

                            detailActivity(actionPlanId);
                        }

                        if($("#action_plan_id_detail").val() != "") {
                            detailActivity($("#action_plan_id_detail").val());
                        }
                    });

                    google.visualization.events.addListener(chart, 'onmouseover', function() {
                        $('#chart_activity_div').css('cursor','pointer');
                    });

                    google.visualization.events.addListener(chart, 'onmouseout', function() {
                        $('#chart_activity_div').css('cursor','default');
                    });
                }
          </script>

<script>
    $('#programInformationTable').DataTable();

    // Stroked Gauge Radial Bar Chart -------> RADIAL CHART
    var options_gradient = {
        series: [{{ $kpi_percentage }}],
        chart: {
            fontFamily: '"DM Sans", sans-serif',
            height: 230,
            type: "radialBar",
            toolbar: {
                show: false,
            },
        },
        plotOptions: {
            radialBar: {
                startAngle: -135,
                endAngle: 225,
                hollow: {
                    margin: 0,
                    size: "70%",
                    background: "#fff",
                    image: undefined,
                    imageOffsetX: 0,
                    imageOffsetY: 0,
                    position: "front",
                    dropShadow: {
                        enabled: true,
                        top: 3,
                        left: 0,
                        blur: 4,
                        opacity: 0.24,
                    },
                },
                track: {
                    background: "#fff",
                    strokeWidth: "67%",
                    margin: 0, // margin is in pixels
                    dropShadow: {
                        enabled: true,
                        top: -3,
                        left: 0,
                        blur: 4,
                        opacity: 0.35,
                    },
                },

                dataLabels: {
                    show: true,
                    name: {
                        offsetY: -10,
                        show: true,
                        color: "#2962ff",
                        fontSize: "17px",
                    },
                    value: {
                        formatter: function(val) {
                            return parseInt(val);
                        },
                        color: "#00b0ff",
                        fontSize: "36px",
                        show: true,
                    },
                },
            },
        },
        fill: {
            type: "gradient",
            gradient: {
                shade: "dark",
                type: "horizontal",
                shadeIntensity: 0.5,
                gradientToColors: ["#2962ff"],
                inverseColors: true,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100],
            },
        },
        stroke: {
            lineCap: "round",
        },
        labels: ["Percent"],
    };

    var chart_radial_gradient = new ApexCharts(
        document.querySelector("#chart-radial-gradient"),
        options_gradient
    );
    chart_radial_gradient.render();
</script>
 @endsection