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

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link rel="stylesheet" href="{{ asset('back') }}/extra-libs/taskboard/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="{{ asset('back') }}/extra-libs/taskboard/css/lobilist.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.css" />

    <style>
        #chart_div text { 
            fill: rgb(0, 0, 0);
        }
        .l2 {
            padding-left: 1em;
        }

        .l3 {
            padding-left: 2em;
        }

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

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

        select.error {
            color: #F94687;
            border: 1px solid #F94687;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <a href="{{ route('project.index') }}">Project</a>
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Project Detail</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <!-- Container fluid  -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        {{-- <pre>
        {{dd($detail)}}
    </pre> --}}
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->

        <div class="row">
            <div class="col-lg-4 col-xlg-3 col-md-5 d-flex flex-column">
                <div class="card">
                    <div class="card-body">
                        <center class="mt-4">

                            <div id="chart-radial-basic"></div>


                        </center>
                    </div>
                    <div>
                        <hr />
                    </div>
                    <div class="card-body pt-0 mt-2">
                        <h5>Person In Charge</h5>
                        <div class="d-flex align-items-center mb-2">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                alt="flexy">
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">
                                    {{ isset($team->person_in_charge) ? $team->person_in_charge_relation->nama_lengkap : '-' }}
                                </h6>
                                <span class="text-muted fs-9">PIC</span>
                            </div>
                        </div>
                        <div>
                            <hr />
                        </div>
                        <h5>Team</h5>
                        @foreach ($team->member as $data)
                            <div class="d-flex align-items-center mb-2">
                                <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                    alt="flexy">
                                <div class="ms-3">
                                    <h6 class="mb-0 fw-bold">{{ $data->pegawai->nama_lengkap }}</h6>
                                    <span
                                        class="text-muted fs-9">{{ isset($data->pegawai->jabatan->nama) ? $data->pegawai->jabatan->nama : 'no position yet' }}</span>
                                </div>
                            </div>
                        @endforeach
                        <hr>
                        <button type="button"
                            class="
                    justify-content-center
                    w-100
                    btn btn-rounded btn-outline-danger
                    d-flex
                    align-items-center
                    mb-2
                  "
                            onclick="deleteData({{ $team->id }})">
                            Delete Project
                        </button>

                        <a href="{{ route('project.edit', $team->id) }}"
                            class="
                          justify-content-center
                          w-100
                          btn btn-rounded btn-outline-success
                          d-flex
                          align-items-center
                          mt-2
                          mb-2
                        ">
                            Edit Project
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-md-7">

                <ul class="nav nav-pills p-3 bg-white border mb-3 align-items-center">
                    <li class="nav-item">
                        <a href="javascript:void(0)"
                            class="
                  nav-link
                  rounded-pill
                  note-link
                  d-flex
                  align-items-center
                  justify-content-center
                  active
                  px-3 px-md-3
                  me-0 me-md-2
                "
                            id="all-part">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-list feather-sm fill-white me-0 me-md-1">
                                <line x1="8" y1="6" x2="21" y2="6"></line>
                                <line x1="8" y1="12" x2="21" y2="12"></line>
                                <line x1="8" y1="18" x2="21" y2="18"></line>
                                <line x1="3" y1="6" x2="3" y2="6"></line>
                                <line x1="3" y1="12" x2="3" y2="12"></line>
                                <line x1="3" y1="18" x2="3" y2="18"></line>
                            </svg><span class="d-none d-md-block font-weight-medium">Description</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0)"
                            class="
                  nav-link
                  rounded-pill
                  note-link
                  d-flex
                  align-items-center
                  justify-content-center
                  px-3 px-md-3
                  me-0 me-md-2
                "
                            id="budget-part">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-list feather-sm fill-white me-0 me-md-1">
                                <line x1="8" y1="6" x2="21" y2="6"></line>
                                <line x1="8" y1="12" x2="21" y2="12"></line>
                                <line x1="8" y1="18" x2="21" y2="18"></line>
                                <line x1="3" y1="6" x2="3" y2="6"></line>
                                <line x1="3" y1="12" x2="3" y2="12"></line>
                                <line x1="3" y1="18" x2="3" y2="18"></line>
                            </svg><span class="d-none d-md-block font-weight-medium">Budget</span></a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div id="note-full-container" class="note-has-grid row">
                        <div class="col-md-12 single-note-item all-part">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-primary">Description</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12 col-xs-6 b-r">
                                                <h5>Project Name</h5>
                                                <p class="text-muted">
                                                    {{ $team->name != '' ? $team->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Description</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $team->description != '' ? $team->description : '-' !!}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Project Type</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $team->type != '' ? ucwords($team->type) : '-' !!}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 budget-part mb-4" style="display: none;">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="card-title text-primary">Budgetting</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <table class="table" id="budgetTable">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="px-0 text-muted">No</th>
                                                    <th scope="col" class="px-0 text-muted">Description</th>
                                                    <th scope="col" class="px-0 text-muted">Volume</th>
                                                    <th scope="col" class="px-0 text-muted">Unit Cost</th>
                                                    <th scope="col" class="px-0 text-muted">Total (IDR)</th>
                                                    <th scope="col" class="px-0 text-muted">Total (USD)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $increment = 1;
                                                @endphp

                                                @foreach ($project_budget as $data)
                                                    <tr>
                                                        <td>{{ $increment++ }}</td>
                                                        <td>{{ $data->description }}</td>
                                                        <td>{{ $data->volume }}</td>
                                                        <td>{{ number_format($data->unit_cost, 0, ',', '.') }} </td>
                                                        <td>{{ number_format($data->total_idr, 0, ',', '.') }} IDR</td>
                                                        <td>{{ number_format($data->total_usd, 0, ',', '.') }} USD</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('team.action-plan') }}" method="post" id="actionPlanForm">
            @csrf
            <input type="hidden" name="team_initiation_id" value="{{ $team->id }}">
            <input type="hidden" name="team_id" value="{{ $team->id }}">
            <input type="hidden" id="increment_value" value="0">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div
                            class="
                        d-flex
                        border-bottom
                        title-part-padding
                        align-items-center
                        ">
                            <div>
                                <ul class="nav nav-pills nav-fill mt-4" role="tablist" id="myTab">

                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#navpill-111"
                                            role="tab" aria-selected="true" onclick="ganttChart()">
                                            <span>Gantt Chart</span>
                                        </a>
                                    </li>
                                    
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#navpill-222" role="tab"
                                            aria-selected="false">
                                            <span>Action Plan</span>
                                        </a>
                                    </li>
                                      
                                </ul>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Nav tabs -->

                            <!-- Tab panes -->
                            <div class="tab-content mt-2">
                                <div class="tab-pane p-3 active" id="navpill-111" role="tabpanel">
                                    <input type="hidden" id="action_plan_id_detail" value="">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h4 class="card-title text-primary">Chart</h4>
                                                </div>
                                                <div class="card-content">
                                                    <div class="card-body">
                                                        @if($action_plan_data->count() < 1)
                                                        <h2>Data not yet available</h2>
                                                        @else
                                                            <div id="chart_div" style="width: 100% !important;"></div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane p-3" id="navpill-222" role="tabpanel">
                                   
                                    <input type="hidden" name="validate_jquery" id="validate-jquery">

                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="card">
                                                    <div class="border-bottom title-part-padding">
                                                        <div class="d-flex justify-content-between">
                                                            <div class="form-check form-switch">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="switch"
                                                                    onchange="displaySwitch()"
                                                                    @if (${'action_plan_count'} >= 1) checked @endif />
                                                                <label class="form-check-label"
                                                                    for="switch">
                                                                    <h4 class="mb-0">Plan</h4>
                                                                </label>
                                                            </div>
                                                            <a href="#savePlan" class="btn btn-sm btn-primary">
                                                                <i data-feather="arrow-down-circle"></i>
                                                            </a>
                                                        </div>

                                                    </div>
                                                    <div class="card-body">

                                                        <div class="row" id="topCardWrap" @if (${'action_plan_count'} < 1) style="display: none;" @endif>
                                                            <div class="col-sm-6">
                                                                <h4>List of Plan</h4>
                                                            </div>
                                                            <div class="col-sm-6 d-flex justify-content-end">
                                                                <div class="mb-3">
                                                                    <button
                                                                                onclick="education_fields(0);"
                                                                                class="
                                                                btn
                                                                btn-sm
                                                                rounded-pill
                                                                px-4
                                                                btn-light-success
                                                                text-success
                                                                font-weight-medium
                                                                waves-effect waves-light
                                                                "
                                                                                type="button">
                                                                                <i class="ri-add-circle-line fs-5"></i>
                                                                </button>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <input type="hidden" name="key_First"
                                                            id="key_First" value="">
                                                        <div id="formWrap"
                                                            @if (${'action_plan_count'} < 1) style="display: none;" @endif>
                                                            <div>
                                                                <div class="row">
                                                                    <input type="hidden"
                                                                        name="team_part_id[]"
                                                                        value="0">

                                                                    <div class="col-sm-3">
                                                                        <div class="mb-3">
                                                                            <h5>Title</h5>
                                                                            <input type="text"
                                                                                class="form-control validate"
                                                                                id="title"
                                                                                name="title[]"
                                                                                placeholder="Title" />
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-sm-3">
                                                                        <div class="mb-3">
                                                                            <h5>Description</h5>
                                                                            <input type="text"
                                                                                class="form-control validate"
                                                                                id="action_plan"
                                                                                name="action_plan[]"
                                                                                placeholder="Description" />
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-3">
                                                                        <div class="mb-3">
                                                                            <h5>Link</h5>
                                                                            <input type="text"
                                                                                class="form-control"
                                                                                id="link"
                                                                                name="link[]"
                                                                                placeholder="Link" />
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-3">
                                                                        <div class="mb-3">
                                                                            <h5>Start Date</h5>
                                                                            <input type="date"
                                                                                class="form-control validate"
                                                                                id="start_date"
                                                                                name="start_date[]"
                                                                                placeholder="Start Date" />
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-3">
                                                                        <div class="mb-3">
                                                                            <h5>End Date</h5>
                                                                            <input type="date"
                                                                                class="form-control validate"
                                                                                id="end_date"
                                                                                name="end_date[]"
                                                                                placeholder="End Date" />
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-sm-3">
                                                                        <div class="mb-3">
                                                                            <h5>Team</h5>
                                                                            <select
                                                                                class="select2 form-control block validate"
                                                                                multiple="multiple"
                                                                                name="team_0[]"
                                                                                style="width: 100%">
                                                                                @foreach ($pegawai as $data)
                                                                                    <option value="{{ $data->id }}">
                                                                                        {{ $data->nama_lengkap }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-sm-3">
                                                                        <div class="mb-3">
                                                                            <h5>Reviewer</h5>
                                                                            <select
                                                                                class="select2 form-control block validate"
                                                                                name="reviewer[]"
                                                                                style="width: 100%">
                                                                                <option value="">Choose Reviewer
                                                                                </option>
                                                                                @foreach ($pegawai as $data)
                                                                                    <option value="{{ $data->id }}">
                                                                                        {{ $data->nama_lengkap }}</option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-sm-1">
                                                                        <div class="mb-3 mt-4">
                                                                            <button
                                                                                onclick="remove_education_fields(0, 'init');"
                                                                                class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light"
                                                                                type="button">
                                                                                <i class="ri-delete-bin-line fs-5"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div id="first_repeat" class=""
                                                            @if (${'action_plan_count'} < 1) style="display: none;" @endif>
                                                        </div>



                                                        <div class="row" id="emptyFirst"
                                                            @if (${'action_plan_count'} >= 1) style="display: none;" @endif>
                                                            <div class="col-sm-12">
                                                                <p>Activity is not active, you can click the button above to
                                                                    activate it..
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <button class="btn btn-primary" type="submit" id="savePlan">Save Plan</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>

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

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

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

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

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

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

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

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

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

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

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

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

    </div>
</div>
    <!-- Riwayat Pangkat  end-->


    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
@endsection
@section('js')
    <!--This page plugins -->
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>
    <script src="{{ asset('back') }}/extra-libs/prism/prism.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
    <script src="{{ asset('back') }}/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>

    <script src="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.min.js"></script>
    <script src="{{ asset('back') }}/js/pages/notes/notes.js"></script>
    <!--This page JavaScript -->

    <script src="{{ asset('back') }}/extra-libs/taskboard/js/jquery.ui.touch-punch-improved.js"></script>
    <script src="{{ asset('back') }}/extra-libs/taskboard/js/jquery-ui.min.js"></script>

    <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobilist.js"></script>
    <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobibox.min.js"></script>
    <!--This page JavaScript -->
    <script src="{{ asset('back') }}/libs/jquery.repeater/jquery.repeater.min.js"></script>
    <script src="{{ asset('back') }}/extra-libs/jquery.repeater/repeater-init.js"></script>
    <script src="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.js"></script>
    {{-- <script src="{{ asset('back') }}/extra-libs/jquery.repeater/dff.js"></script> --}}
   
    <script>
        $("#budgetTable").DataTable();
    </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>
        $("#savePlan").click(function() {
            $('.validate').each(function(index, card) {
                var this_element = this;
                if ($(this_element).val() == '' && $(this_element).parents().eq(4).css('display') !=
                    'none') {
                    $(this_element).css('border', '1px solid #F94687');
                    $('#' + index).remove();
                    $(this).parent().append(
                        '<label class="error-validation" style="color: #F94687 !important;margin-top: 10px;font-size: 13px !important;font-weight: 400;line-height: 1.5; margin-top: 5px;padding: 0;" id="' +
                        index + '">Field is required!</label>');
                } else {
                    $(this_element).css('border', '1px solid #ecf0f2');
                    $('#' + index).css('display', 'none');
                    $('#' + index).attr('class', 'validated');
                }
            });

            $("#validate-jquery-error").css('display', 'none');

            if ($('label').hasClass('error-validation')) {
                $("#validate-jquery").val('');
            } else {
                $("#validate-jquery").val('exist');
            }
        })

        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });

            $.validator.setDefaults({
                ignore: []
            });

            $("#actionPlanForm").validate({
                ignore: [],
                rules: {
                    validate_jquery: {
                        required: true,
                    }
                },
                messages: {
                    validate_jquery: {
                        required: "fields are required!"
                    }
                }
            });
        });
    </script>
    <script>
        function actionPlan() {
            $.ajax({
                url: "{{ route('team.get-action-plan') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    team_initiation_id: '{{ $team->id }}'
                },
                success: function(data) {
                    var result = JSON.parse(data);


                        if (result != "") {
                            $("#formWrap").remove();
                        } else {
                        }

                        var increment_lastest_id = 0;

                        $("#key_First").val(0);

                        for (const [key, value] of Object.entries(result)) {
                            $("#key_First").val(key);
                        }

                        increment_lastest_id = $("#key_First").val();

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

                            var element =
                                '<input type="hidden" name="action_plan_id[]" value="' + value.id +
                                '" /><div class"mb-3" id="removeclass' +
                                key +
                                '"><div class="row"><div class="col-sm-3"><div class="mb-3"><h5>Title</h5><input type="text" class="form-control validate" name="title[]" value="' + value.title +
                                '" placeholder="Title"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Description</h5><input type="text" class="form-control validate" name="action_plan[]" value="' + value.description +
                                '" placeholder="Description"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Link</h5><input type="text" class="form-control" name="link[]" value="' + value.link +
                                '" placeholder="Link"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Start Date</h5><input type="date" class="form-control validate" name="start_date[]" value="' + value.start_date +
                                '" placeholder="Start Date"></div></div><div class="col-sm-3"><div class="mb-3"><h5>End Date</h5><input type="date" class="form-control validate" name="end_date[]" value="' + value.end_date +
                                '" placeholder="End Date"></div></div>';
                            element += '<div class="col-sm-3"><div class="mb-3" id="team_id_wrap_' +
                                key +
                                '"><h5>Team</h5><select name="team_old_' + value.id +
                                '[]" id="teamPlan' + key + '" class="select2 form-control validate block" multiple="multiple" style="width: 100%"></select></div></div>';
                            element += '<div class="col-sm-3"><div class="mb-3" id="reviewer_id_wrap_' +
                                key +
                                '"><h5>Reviewer</h5><select name="reviewer[]" id="reviewerPlan' + key + '" class="select2 form-control validate block" style="width: 100%"><option value="">Choose Reviewer</option>@foreach ($pegawai as $data)<option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>@endforeach</select></div></div>';
                            if (key == 0) {
                                element +=
                                    '<div class="col-sm-1"> <div class="mb-3 mt-4"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_education_fields(' +
                                    key + ',' + `'` + value.id + `'` +
                                    ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div></div>';
                            } else {
                                element +=
                                    '<div class="col-sm-1"> <div class="mb-3 mt-4"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_education_fields(' +
                                    key + ',' + `'` + value.id + `'` +
                                    ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div></div>';
                            }

                            $("#first_repeat").append(element);

                            $(".select2").select2();

                            $("#reviewerPlan" + key).val(value.reviewer_id).trigger('change');

                            $.ajax({
                                url: "{{ route('team.get-action-plan-team') }}",
                                method: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    team_action_plan_id: value.id
                                },
                                success: function(result) {
                                    var wrap = JSON.parse(result);

                                    var html = '';

                                    var artificial_increment = 0;

                                    for (const [key, value] of Object.entries(wrap
                                            .pegawai)) {
                                        if (jQuery.inArray(value.id, wrap.team
                                                .pegawai_id) !== -1) {
                                            artificial_increment++
                                            var inside = artificial_increment - 1;
                                            console.log(inside);
                                            html += '<option data-custom-attribute="' + wrap
                                                .team.id_team[inside] + '" value="' + value
                                                .id + '">' + value.nama_lengkap +
                                                '</option>';
                                        } else {
                                            html += '<option value="' + value.id + '">' +
                                                value.nama_lengkap + '</option>';
                                        }

                                    }

                                    $('#teamPlan' + key).append(html);

                                    $('#teamPlan' + key).val(wrap.team
                                        .pegawai_id).trigger('change');

                                    $(".select2").select2();

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

                                        $("#team_id_wrap_" + key).append(
                                            '<input type="hidden" name="team_id_valid[]" value="' +
                                            value + '" />');

                                    }
                                }
                            });
                            var results = [];

                            $('#teamPlan' + key).on('select2:unselect', function(e) {
                                var deletedOption = e.params.data.element.dataset
                                    .customAttribute;
                                $("#actionPlanForm").append(
                                    '<input type="hidden" name="deleted_select_id' +'_' + value.id + '[]" value="' + deletedOption +
                                    '" />')
                                console.log(parseInt(deletedOption));
                            });
                        }
                   
                }
            });
        }

        actionPlan();
    </script>
    <script></script>
    <script>
        function education_fields(increment) {
            var sum_increment = parseInt($("#key_First").val()) + 1;

            $("#key_First").val(sum_increment);

            var objTo = document.getElementById("first_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass" + sum_increment);
            divtest.setAttribute("id", "removeclass" + sum_increment);
            var rdiv = "removeclass" + sum_increment;

            divtest.innerHTML =
                '<input type="hidden" name="team_part_id[]" value="' + sum_increment +
                '" /><div class="row"><div class="col-sm-3"><div class="mb-3"><h5>Title</h5><input type="text"  class="form-control validate" id="title" name="title[]" placeholder="Title"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Description</h5><input type="text"  class="form-control validate" id="action_plan" name="action_plan[]" placeholder="Description"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Link</h5><input type="text" class="form-control" id="link" name="link[]" placeholder="Link"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Start Date</h5><input type="date" class="form-control validate" id="start_date" name="start_date[]" placeholder="Start Date"></div></div><div class="col-sm-3"><div class="mb-3"><h5>End Date</h5><input type="date" class="form-control validate" id="end_date" name="end_date[]" placeholder="End Date"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Team</h5><select  name="team'
                +
                '_' + sum_increment +
                '[]" class="select2 form-control block validate" multiple="multiple" style="width: 100%"><option value="">Choose Reviewer</option>@foreach ($pegawai as $data)<option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>@endforeach</select> </div></div>' +
                '<div class="col-sm-3"><div class="mb-3"><h5>Reviewer</h5><select  name="reviewer'
                +
                '[]" class="select2 form-control block validate" style="width: 100%">@foreach ($pegawai as $data)<option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>@endforeach</select> </div></div>' +
                '<div class="col-sm-1"> <div class="mb-3 mt-4"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_education_fields(' +
                sum_increment +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div>';

            objTo.appendChild(divtest);
            feather.replace();
            $(".select2").select2();
        }

        function remove_education_fields(rid, hapus_id) {

            var sum_increment = parseInt($("#key_First").val()) - 1;

            $("#key_First").val(sum_increment);
            if(hapus_id == "init") {
                $("#formWrap").remove();
            } else {
                if (hapus_id != "") {
                    $("#removeclass" + rid).remove();
                    $("#actionPlanForm").append('<input type="hidden" name="hapus_id_plan[]" value="' +
                        hapus_id + '" />');
                } else {
                    $("#removeclass" + rid).remove();
                }
            }
        }
    </script>

    <script>
        function displaySwitch() {
            $("#topCardWrap").toggle();
            $("#formWrap").toggle();
            $("#first_repeat").toggle();
            $("#emptyFirst").toggle();

            if ($('#formWrap').css('display') === 'block' || $('#first_repeat').css('display') === 'block') {
                $("#delete_month_first").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_first" id="delete_month_first" value="nonactive" />');
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            $('a[data-bs-toggle="tab"]').on('show.bs.tab', function(e) {
                localStorage.setItem('activeTab', $(e.target).attr('href'));
            });
            var activeTab = localStorage.getItem('activeTab');
            if (activeTab) {
                $('#myTab a[href="' + activeTab + '"]').tab('show');
            }
        });
    </script>

<script type="text/javascript">
function ganttChart() {
    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_data in <b>/home/eofficeuid/public_html/uid/resources/views/team/detail.blade.php</b> on line <b>2572</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/team/detail.blade.php</b> on line <b>2572</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);

            // 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_div').css('cursor','pointer');
            });

            google.visualization.events.addListener(chart, 'onmouseout', function() {
                $('#chart_div').css('cursor','default');
            });
        }
    }
    ganttChart();
  </script>
    <script>
        // Basic Radial Bar Chart -------> RADIAL CHART
        var options_basic = {
            series: [{{ $total_progress }}],
            chart: {
                fontFamily: '"DM Sans", sans-serif',
                height: 350,
                type: "radialBar",
            },
            colors: ["#2962ff"],
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: "70%",
                    },
                    dataLabels: {
                        value: {
                            color: "#a1aab2",
                            show: true,
                        },
                    },
                },
            },
            labels: ["Progress"],
        };

        var chart_radial_basic = new ApexCharts(
            document.querySelector("#chart-radial-basic"),
            options_basic
        );
        chart_radial_basic.render();
    </script>
    <script>
        function deleteData(id) {
            Swal.fire({
                title: "Delete Project?",
                text: `Are you sure to delete this data?`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonColor: "rgb(11, 42, 151)",
                cancelButtonColor: "rgb(209, 207, 207)",
                confirmButtonText: "Yes, Delete it!",
                cancelButtonText: "Cancel"
            }).then(function(t) {
                if (t.value) {
                    $.ajax({
                        url: "{{ route('team.hapus') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            id: id
                        },
                        success: function(data) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Done',
                                text: 'Project has been deleted successfully!',
                            }).then(function() {
                                location.href = "{{ route('project.index') }}";
                            });
                        }
                    });
                }
            })
        }
    </script>
@endsection