@extends('layouts.index')
@section('title')
    Dashboard
@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">Program</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">Total Finished Program Percentage</h4>
                        <div id="chart-radial-gradient"></div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row align-items-center">
                                    <div
                                        class="
                                  round
                                  rounded-circle
                                  text-white
                                  d-inline-block
                                  text-center
                                  bg-primary
                                ">
                                        <i data-feather="credit-card" class="feather-sm fill-white"></i>
                                    </div>
                                    <div class="ms-3 align-self-center">
                                        <h3 class="mb-0">{{ $total_program }}</h3>
                                        <span class="text-muted">Total Program</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row align-items-center">
                                    <div
                                        class="
                                  round
                                  rounded-circle
                                  text-white
                                  d-inline-block
                                  text-center
                                  bg-warning
                                ">
                                        <i data-feather="bar-chart-2" class="feather-sm fill-white"></i>
                                    </div>
                                    <div class="ms-3 align-self-center">
                                        <h3 class="mb-0">{{ $progress_program }}</h3>
                                        <span class="text-muted">Progress</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex flex-row align-items-center">
                                    <div
                                        class="
                                  round
                                  rounded-circle
                                  text-white
                                  d-inline-block
                                  text-center
                                  bg-success
                                ">
                                        <i data-feather="check-circle" class="feather-sm fill-white"></i>
                                    </div>
                                    <div class="ms-3 align-self-center">
                                        <h3 class="mb-0">{{ $completed_program }}</h3>
                                        <span class="text-muted">Finished</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row py-2">
                                    <!-- Column -->
                                    <div class="col d-flex align-items-center">
                                        <div>
                                            <h1 class="fw-light">{{ $team_program_activity }}</h1>
                                            <h6 class="text-muted mb-0 fw-normal">Team Activity</h6>
                                        </div>
                                    </div>
                                    <!-- Column -->
                                    <div
                                        class="
                                  col
                                  d-flex
                                  align-items-center
                                  justify-content-end
                                ">
                                        <div data-label="{{ $total_progress_team_activity }}%" class="css-bar mb-0 css-bar-primary css-bar-{{ $total_progress_team_activity }}">
                                            <i class="bi bi-person-circle"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row py-2">
                                    <!-- Column -->
                                    <div class="col d-flex align-items-center">
                                        <div>
                                            <h1 class="fw-light">{{ $personal_activity }}</h1>
                                            <h6 class="text-muted mb-0 fw-normal">Personal Activity </h6>
                                        </div>
                                    </div>
                                    <!-- Column -->
                                    <div
                                        class="
                                  col
                                  d-flex
                                  align-items-center
                                  justify-content-end
                                ">
                                        <div data-label="{{ $total_progress_personal_activity }}%" class="css-bar mb-0 css-bar-primary css-bar-{{ $total_progress_personal_activity }}">
                                            <i class="bi bi-person-circle"></i>
                                        </div>
                                    </div>
                                </div>
                            </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 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body">
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Task Statistic</h3>
                                <h6 class="card-subtitle">This Year</h6>
                            </div>
                            <div class="ms-auto">
                                <ul class="list-style-none">
                                    <li class="list-inline-item">
                                        <i
                                            class="
                                    ri-checkbox-blank-circle-fill
                                    text-primary
                                    fs-1
                                    me-1
                                  "></i>
                                        Finish
                                    </li>
                                    <li class="list-inline-item">
                                        <i
                                            class="
                                    ri-checkbox-blank-circle-fill
                                    text-warning
                                    fs-1
                                    me-1
                                  "></i>
                                        In Progress
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="product-performance" class="ps-3"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="card w-100">
                    <div class="card-body">
                        
                        <div class="d-md-flex align-items-center">
                            <div>
                                <h3 class="card-title">Program Timeline</h3>
                            </div>
                        </div>
                        <div id="chart_div"></div>
                    </div>
                </div>
                <div class="col-lg-12 d-flex align-items-stretch">
                    <div class="card w-100">
                        <div class="card-body">
                            <div class="d-md-flex align-items-center">
                                <div>
                                    <h3 class="card-title">Activity of Program</h3>
                                    <select class="form-select mt-3" name="choose_program" id="choose_program" onchange="ChooseProgram(this.value)">
                                        @foreach($program_formulation as $data)
                                            <option value="{{ $data->id }}" {{ isset($_GET['program']) && $_GET['program'] == $data->id ? 'selected' : '' }}>{{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                    <br>
                                </div>
                            </div>
                            @if($action_plan->count() < 1)
                                                        <h2>Data not yet available</h2>
                                                        @else
                                                        <div id="chart_activity_div"></div>
                                                        @endif
                        </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>
                    @foreach ($pegawai as $data)
                    <option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>
                    @endforeach
                </select>
                <div id="button-reviewer-wrap" style="display: none;">
                    <button type="button" class="btn btn-sm btn-primary mt-3" onclick="saveReviewer()">Save</button>
                    <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"
                        onclick="cancelReviewer()">Cancel</button>
                </div>
                <h5 style="margin-top: 20px;">Activity</h5>
                <div class="row mt-3">
                    <div class="col-sm-8">
                        <small>Show: </small>
                        {{-- <a type="button"
                                class="
                                btn btn-xs btn-light-info
                                text-info
                                font-weight-medium
                                rounded-pill
                                px-4 activity-choose
                              "
                                style="margin-left: 20px !important;font-size: 12px;" onclick="allActivity(this)">
                                All
                            </a> --}}
                        <a type="button" class="
                                btn btn-xs btn-info
                                text-white
                                font-weight-medium
                                rounded-pill
                                px-4 activity-choose
                              " style="margin-left: 10px !important;font-size: 12px;" id="commentButtonTrigger"
                            onclick="commentActivity(this)">
                            Comments
                        </a>
                        <a type="button" class="
                                btn btn-xs btn-light-info
                                text-info
                                font-weight-medium
                                rounded-pill
                                px-4 activity-choose
                              " style="margin-left: 10px !important;font-size: 12px;" onclick="historyActivity(this)">
                            History
                        </a>
                    </div>
                    <div class="col-sm-4 d-flex justify-content-end">
                        <a type="button" class="
                                btn btn-xs btn-primary
                                text-white
                                font-weight-medium
                                rounded-pill
                                px-4
                              " onclick="newestOrder()" id="newestFirst"
                            style="margin-left: 10px !important;font-size: 12px;display:none;">
                            Newest First <i class="bi bi-sort-down"></i>
                        </a>
                        <a type="button" class="
                                btn btn-xs btn-primary
                                text-white
                                font-weight-medium
                                rounded-pill
                                px-4
                              " onclick="oldestOrder()" id="oldestFirst"
                            style="margin-left: 10px !important;font-size: 12px;">
                            Oldest First <i class="bi bi-sort-down"></i>
                        </a>
                    </div>
                </div>
                <div class="row" id="allWrap" style="display: none;">
                    <div class="col-sm-1 mt-4">
                        <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle"
                            style="width: 38px;height: 38px;object-fit: cover;" alt="flexy">
                    </div>
                    <div class="col-sm-11">
                        <div class="row">
                            <div class="col-sm-12 d-flex">
                                <h6 class="mt-4" style="margin-left: -15px;">Muhamad Iqbal Rivaldi </h6>
                                <p class="mt-4" style="margin-left: 7px;font-size: 13px;">added an Attachment
                                </p>
                                <p class="mt-4" style="margin-left: 10px;font-size: 13px;">2 hours ago</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <p style="margin-left: -15px;font-size: 13px;font-weight: bold !important;">Annual
                                    Program Timeline 2022.xlsx</p>
                            </div>
                        </div>

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

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

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

    </div>
</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>
            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':['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');
        
                    <br />
<b>Warning</b>:  Undefined variable $program_timeline in <b>/home/eofficeuid/public_html/uid/resources/views/dashboard-program.blade.php</b> on line <b>2076</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/eofficeuid/public_html/uid/resources/views/dashboard-program.blade.php</b> on line <b>2076</b><br />
        
                    var options = {
                        height: 275,
                        gantt: {
                            palette: [
                                {
                                    "color": "#fec90f",
                                    "dark": "#1a9bfc"
                                }
                            ]
                        }
                    };
        
                    var chart = new google.visualization.Gantt(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');
        
                    <br />
<b>Warning</b>:  Undefined variable $action_plan in <b>/home/eofficeuid/public_html/uid/resources/views/dashboard-program.blade.php</b> on line <b>2130</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/eofficeuid/public_html/uid/resources/views/dashboard-program.blade.php</b> on line <b>2130</b><br />
        
                    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>
            var option_product_performance = {
                series: [{
                        name: "Finish",
                        data: {!! json_encode($finished_setiap_bulan) !!},
                    },
                    {
                        name: "In Progress",
                        data: {!! json_encode($not_finished_setiap_bulan) !!},
                    },
                ],

                chart: {
                    type: "bar",
                    height: 485,
                    stacked: true,
                    toolbar: {
                        show: false,
                    },
                    foreColor: "#adb0bb",
                    fontFamily: "DM sans",
                    sparkline: {
                        enabled: false,
                    },
                },
                colors: ["#1a9bfc", "#fec90f"],
                grid: {
                    show: false,
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: "50%",
                        borderRadius: 9,
                    },
                },
                fill: {
                    type: "solid",
                    opacity: 1,
                },
                dataLabels: {
                    enabled: false,
                },
                markers: {
                    size: 0,
                },
                legend: {
                    show: false,
                },
                xaxis: {
                    type: "category",
                    categories: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agust", "Sep", "Okt", "Nov", "Des"],
                    axisBorder: {
                        show: false,
                    },
                    axisTicks: {
                        show: false,
                    },
                },
                yaxis: {
                    show: true,
                    tickAmount: 3,
                    labels: {
                        formatter: function(val) {
                            return val.toFixed(0);
                        }
                    }
                },
                stroke: {
                    show: true,
                    curve: "smooth",
                    width: 5,
                    lineCap: "round",
                    colors: ["white"],
                },
                tooltip: {
                    theme: "dark",
                },
            };

            var chart_product_performance = new ApexCharts(
                document.querySelector("#product-performance"),
                option_product_performance
            );
            chart_product_performance.render();
        </script>

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

            // Stroked Gauge Radial Bar Chart -------> RADIAL CHART
            var options_gradient = {
                series: [{{ $total_all_progress }}],
                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