@extends('layouts.index')
@section('title')
    Detail Program
@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" type="text/css" href="{{ asset('back') }}/libs/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" href="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.css" />

    <style>
        .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;
        }

        #chart_div text { 
            fill: rgb(0, 0, 0);
        }

    .dz-image img {
        width: 130px !important;
        height: 130px !important;
        object-fit: cover !important;
    }

    .lobilists .lobilist-item {
        cursor: pointer !important;
    }

    button.active {
        background-color: #15435A !important;
        color: #fff !important;
    }

    button.normal {
        background-color: #ddebff !important;
        color: #15435A !important;
    }

    /* #reportSummary:hover {
        background: #f2f2f2;
    } */

    /* #actionPlan:hover {
        background: #f2f2f2;
    } */

    /* #titleModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    /* #startDateModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    /* #endDateModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    /* #labelModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    }

    #reviewerModal:hover {
        background: #f2f2f2;
        cursor: pointer;
    } */

    .lobilist-item-description {
        font-style: normal;
        display: inline-block;
        padding: 6px 13px;
        font-size: .65rem !important;
        font-weight: 100;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        color: #ffffff !important;
        border-radius: 6px;
        background-color: #15435A !important;
    }

    .lobilist-item .text-muted {
        color: #ffffff !important;
    }

    .download-dropzone {
        font-size: 14px;
        text-align: center;
        display: block;
        cursor: pointer;
        margin-top: -17px !important;
        border: none;
    }

    .download-dropzone:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    .css-1s4q3yq {
        display: flex;
        margin-top: 6px;
        -webkit-box-align: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .css-1bh36ul {
        display: flex;
        color: #42526E;
    }

    .css-1bh36ul+.css-1bh36ul::before {
        display: inline-block;
        width: 16px;
        color: #42526E;
        content: "·";
        text-align: center;
        vertical-align: middle;
    }

    .css-1gd7hga {
        opacity: 1;
        transition: opacity 0.3s ease 0s;
        margin: 0px;
        -webkit-box-flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="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('program.index') }}">Program</a>
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Program 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($program->person_in_charge) ? $program->person_in_charge_relation->nama_lengkap : '-' }}
                                </h6>
                                <span class="text-muted fs-9">PIC</span>
                            </div>
                        </div>
                        <div>
                            <hr />
                        </div>
                        <h5>Team</h5>
                        @foreach ($program->team 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>
                        <h5>Proposed By</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">
                                    {{ $program->proposed_by ? $program->proposed_by_relation->nama_lengkap : '-' }}
                                </h6>
                            </div>
                        </div>
                        <h5 class="mt-3">Acknowledged By</h5>
                        <div class="d-flex align-items-center mb-3">
                            <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">
                                    {{ $program->acknowledge_by ? $program->acknowledge_by_relation->nama_lengkap : '-' }}
                                </h6>
                            </div>
                        </div>
                        <h5>Approved By</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($program->approved_by_relation) ? $program->approved_by_relation->nama_lengkap : '-' }}
                                </h6>
                            </div>
                        </div>


                        <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({{ $program->id }})">
                            Delete Program
                        </button>
                        {{-- <button type="button" class="
                        justify-content-center
                        w-100
                        btn btn-rounded btn-outline-primary
                        d-flex
                        align-items-center
                        mt-2
                        mb-2
                      " onclick="setUser()">
                      Set User Account
                  </button> --}}

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

                        @if ($program->progress_status == 'approved')
                            <button type="button" id="registrasi_akun"
                                class="
                            justify-content-center
                            w-100
                            btn btn-rounded btn-danger
                            d-flex
                            align-items-center
                            mb-2
                            "
                                onclick="reject()">
                                Reject
                            </button>
                        @elseif($program->progress_status == 'rejected')
                            <button type="button"
                                class="
                      justify-content-center
                      w-100
                      btn btn-rounded btn-primary
                      d-flex
                      align-items-center
                      mb-2
                    "
                                onclick="approve()">
                                Approve
                            </button>
                        @else
                            <button type="button"
                                class="
              justify-content-center
              w-100
              btn btn-rounded btn-primary
              d-flex
              align-items-center
              mb-2
            "
                                onclick="approve()">
                                Approve
                            </button>
                            <button type="button" id="registrasi_akun"
                                class="
                justify-content-center
                w-100
                btn btn-rounded btn-danger
                d-flex
                align-items-center
                mb-2
                "
                                onclick="reject()">
                                Reject
                            </button>
                        @endif



                    </div>
                </div>
                {{-- <div class="card">
                    <div class="card-body">
                        <h4> <i data-feather="activity"></i> Log Activity</h4>
                        <ul class="timeline timeline-left">
                            <li class="timeline-inverted timeline-item">
                                <div class="timeline-badge warning">
                                    <i class="fa fa-plus"></i>
                                </div>
                                <div class="timeline-panel">
                                    <div class="timeline-heading">
                                        <h4 class="timeline-title">Program Created</h4>
                                    </div>
                                    <div class="timeline-body">
                                        <p>Project Management Unit - Project Management Systems and Policy</p>
                                        <small>24 Januari 2023 - 17:20 WIB</small>
                                    </div>
                                </div>
                            </li>
                            
                        </ul>
                    </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">
                                        @if($program->program_type == 'initiation')
                                        <div class="row">
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Name</strong>
                                                <br>
                                                <p class="text-muted">{{ $program->name ? $program->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Cateogry</strong>
                                                <br>
                                                <p class="text-muted">
                                                    {{ $program->ref_kategori_program_id ? $program->ref_kategori_program->nama : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Partners</strong>
                                                <br>
                                                <p class="text-muted">
                                                    {{ $program->ref_program_partner_id ? $program->ref_program_partner->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Program Type</strong>
                                                <br>
                                                <p class="text-muted">
                                                    {{ $program->program_type ? ucwords($program->program_type) : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Start Date</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->start_date ? $program->start_date : '-' !!}</p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>End Date</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->end_date ? $program->end_date : '-' !!}</p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Description</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->description ? $program->description : '-' !!}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Sustainability Impact Focus</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->sustainability_impact_focus ? $program->sustainability_impact_focus : '-' !!}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Support Needed</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->support_needed ? $program->support_needed : '-' !!}</p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Funding Model</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->funding_models ? $program->funding_models : '-' !!}</p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Stackholders</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->stakholders ? $program->stakholders : '-' !!}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Progress Status</strong>
                                                <br>
                                                @if ($program->progress_status == 'approved')
                                                    <span
                                                        class="badge bg-light-primary text-primary font-weight-medium">{{ ucwords($program->progress_status) }}</span>
                                                @elseif($program->progress_status == 'rejected')
                                                    <span
                                                        class="badge bg-light-danger text-danger font-weight-medium">{{ ucwords($program->progress_status) }}</span>
                                                @else
                                                    <span class="badge bg-light-secondary text-secondary font-weight-medium">Reviewed</span>
                                                @endif
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r mt-3">
                                                <strong>Risk Management</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->risk_management ? $program->risk_management : '-' !!}</p>

                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Further Exploration For Discussion</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->further_exploration_for_discussion ? $program->further_exploration_for_discussion : '-' !!}</p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Decision Making</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->decision_making ? $program->decision_making : '-' !!}</p>
                                            </div>
                                        </div>
                                        @elseif($program->program_type == 'formulation')
                                        <div class="row">
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <h5>Program Name</h5>
                                                <p class="text-muted">
                                                    {{ $program->name ? $program->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <h5>Client Name</h5>
                                                <p class="text-muted">
                                                    {{ $program->ref_program_client ? $program->client_program_formulation->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <h5>Start Date</h5>
                                                <p class="text-muted">{!! $program->start_date ? $program->start_date : '-' !!}</p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <h5>End Date</h5>
                                                <p class="text-muted">{!! $program->end_date ? $program->end_date : '-' !!}</p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Program Type</h5>
                                                <p class="text-muted">
                                                    {{ $program->program_type ? ucwords($program->program_type) : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Description</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $program->description ? $program->description : '-' !!}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Timeline And Total Commited Dates</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $program->timeline_and_total_commited_dates
                                                        ? $program->timeline_and_total_commited_dates
                                                        : '-' !!}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r" style="padding-right: 40px !important;">
                                                <h5>Financial Scheme</h5>
                                                <p class="text-muted">
                                                    {!! $program->financial_scheme ? $program->financial_scheme : '-' !!}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r" style="padding-right: 40px !important;">
                                                <h5>Value Considerations (Impact) To UID</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $program->value_considerations ? $program->value_considerations : '-' !!}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r" style="padding-right: 40px !important;">
                                                <h5>Resource Allocation</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $program->resource_allocation ? $program->resource_allocation : '-' !!}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r" style="padding-right: 30px !important;">
                                                <h5>Sustainability Impact Focus</h5>
                                                <p class="text-muted">
                                                    {!! $program->sustainability_impact_focus
                                                        ? $program->sustainability_impact_focus
                                                        : '-' !!}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Risk Management</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $program->risk_management ? $program->risk_management : '-' !!}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-xs-6 b-r">
                                                <h5>Supporting Document</h5>
                                                <p class="text-muted">
                                                    {!! $program->supporting_documents ? $program->supporting_documents : '-' !!}
                                                </p>
                                            </div>
                                        </div>
                                        @endif
                                    </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 ($program_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>

       


            <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>Activity 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">Activity 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">
                                   
                                   

                                        <div class="row">
                                            <div class="col-sm-12">
                                                <form action="{{ route('program.action-plan-team-store') }}" method="post" id="actionPlanForm">
                                                    @csrf
                                        
                                                    <input type="hidden" name="program_id" value="{{ $program->id }}">
                                                    <input type="hidden" id="increment_value" value="0">
            
                                                    <input type="hidden" name="validate_jquery" id="validate-jquery">
                                                    <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">Team 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" style="font-size: 14px;"></i> <span class="mt-3">Add Activity</span>
                                                                    </button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <input type="hidden" name="key_First"
                                                                id="key_First" value="">

                                                            <input type="hidden" name="status_section" value="team">

                                                            <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>Realization</h5>
                                                                                <input type="number"
                                                                                    class="form-control"
                                                                                    name="realization[]"
                                                                                    placeholder="Realization" />
                                                                            </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"></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>

                                                            <button class="btn btn-primary mt-3" type="submit" id="savePlan" style="display: none;">Save Plan</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>

                                        {{-- <div class="row">
                                            <div class="col-sm-12">
                                                <form action="{{ route('program.action-plan-personal-store') }}" method="post" id="actionPlanFormPersonal">
                                                    @csrf
                                        
                                                    <input type="hidden" name="program_id" value="{{ $program->id }}">
                                                    <input type="hidden" id="increment_value_personal" value="0">
            
                                                    <input type="hidden" name="validate_jquery_personal" id="validate-jquery-personal">
                                                    <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="switchPersonal"
                                                                        onchange="displaySwitchPersonal()"
                                                                        @if (${'action_plan_count_personal'} >= 1) checked @endif />
                                                                    <label class="form-check-label"
                                                                        for="switchPersonal">
                                                                        <h4 class="mb-0">Personal Plan</h4>
                                                                    </label>
                                                                </div>
                                                                <a href="#savePlanPersonal" class="btn btn-sm btn-primary">
                                                                    <i data-feather="arrow-down-circle"></i>
                                                                </a>
                                                            </div>

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

                                                            <div class="row" id="topCardWrapPersonal" @if (${'action_plan_count_personal'} < 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_personal(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_FirstPersonal"
                                                                id="key_FirstPersonal" value="">

                                                            <input type="hidden" name="status_section" value="personal">

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

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

                                                                        <div class="col-sm-3">
                                                                            <div class="mb-3">
                                                                                <h5>Description</h5>
                                                                                <input type="text"
                                                                                    class="form-control validate-personal"
                                                                                    id="action_plan_personal"
                                                                                    name="action_plan_personal[]"
                                                                                    placeholder="Description" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="mb-3">
                                                                                <h5>Start Date</h5>
                                                                                <input type="date"
                                                                                    class="form-control validate-personal"
                                                                                    id="start_date_personal"
                                                                                    name="start_date_personal[]"
                                                                                    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-personal"
                                                                                    id="end_date_personal"
                                                                                    name="end_date_personal[]"
                                                                                    placeholder="End Date" />
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-3">
                                                                            <div class="mb-3">
                                                                                <h5>Employee</h5>
                                                                                <select
                                                                                    class="select2 form-control block validate-personal"
                                                                                    name="employee_id_personal[]"
                                                                                    style="width: 100%">
                                                                                    <option value="">Choose Employee</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
                                                                                    class="select2 form-control block validate-personal"
                                                                                    name="reviewer_personal[]"
                                                                                    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_personal(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_personal" class=""
                                                                @if (${'action_plan_count_personal'} < 1) style="display: none;" @endif>
                                                            </div>



                                                            <div class="row" id="emptyFirstPersonal"
                                                                @if (${'action_plan_count_personal'} >= 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>

                                                            <button class="btn btn-primary mt-3" type="submit" id="savePlanPersonal" style="display: none;">Save Plan</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div> --}}
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    </div>

    <div class="offcanvas offcanvas-end" id="approveCanvas" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Approve Program
            </h5>
            <hr>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>

                <div class="card">
                    <div class="card-body">
                        <form class="form" action="{{ route('program.approve') }}" method="POST"
                            id="approveProgramForm">
                            @csrf

                            <input type="hidden" name="program_id" value="{{ $program->id }}">

                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Notes</label>
                                <textarea name="approval_notes" id="approval_notes" cols="30" rows="5" class="form-control"
                                    placeholder="Notes"></textarea>
                            </div>

                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button"
                                        class="
                                                btn btn-outline-secondary
                                                rounded-pill
                                                px-4
                                                ms-2
                                            "
                                        data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

                                    <button type="submit" class="btn btn-primary rounded-pill px-4"
                                        id="saveApproveButton">
                                        <div class="d-flex align-items-center">
                                            Submit
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" id="rejectCanvas" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                Reject Program
            </h5>
            <hr>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div>

                <div class="card">
                    <div class="card-body">
                        <form class="form" action="{{ route('program.reject') }}" method="POST"
                            id="rejectProgramForm">
                            @csrf

                            <input type="hidden" name="program_id" value="{{ $program->id }}">

                            <div class="mb-2">
                                <label for="example-text-input" class="col-form-label">Notes</label>
                                <textarea name="rejection_notes" id="rejection_notes" cols="30" rows="5" class="form-control"
                                    placeholder="Notes"></textarea>
                            </div>

                            <div class="form-actions">
                                <div class="card-body border-top">
                                    <button type="button"
                                        class="
                                                btn btn-outline-secondary
                                                rounded-pill
                                                px-4
                                                ms-2
                                            "
                                        data-bs-dismiss="offcanvas">
                                        Cancel
                                    </button>

                                    <button type="submit" class="btn btn-primary rounded-pill px-4"
                                        id="saveRejectButton">
                                        <div class="d-flex align-items-center">
                                            Submit
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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>
</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>
    <!--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') }}/js/pages/notes/notes.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>
    function detailActivity(action_plan_id) {
        $.ajax({
            url: "{{ route('program.get-gantt-chart-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                action_plan_id: action_plan_id
            },
            success: function (result) {

                var kanbanWrap = JSON.parse(result);

                // console.log(kanbanWrap[0]["summary-report"]);

                var generateAsignee = "";
                generateAsignee += '<div class="col-sm-1 mt-1">';
                generateAsignee += '    <img src="' + kanbanWrap[0]["reviewer-photo"] +
                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                generateAsignee += '       alt="flexy">';
                generateAsignee += '</div>';
                generateAsignee += '<div class="col-sm-11 mt-2">';
                generateAsignee +=
                    '    <p style="margin-left: -15px;font-size: 15px;" class="text-dark">';
                generateAsignee += kanbanWrap[0]["reviewer"] + '</p>';
                generateAsignee += ' </div>';

                if (kanbanWrap[0]["label"] == 'Personal') {
                    $('#titleModal').html("");

                    $('#titleModal').html(kanbanWrap[0]["title-modal"]);
                    $("#titleModal").css("cssText",
                        "display: block !important;font-size: 24px !important; color: #000000;");
                    $("#titleModalTeam").css("cssText", "display: none !important;");

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

                    $('#actionPlan').html(kanbanWrap[0]["description"]);
                    $("#actionPlan").css("cssText", "display: block !important;");
                    $("#actionPlanTeam").css("cssText", "display: none !important;");

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

                    $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                    $("#linkWrap").css("cssText", "display: block !important;");
                    $("#linkTeam").css("cssText", "display: none !important;");

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

                    $('#startDateModal').html(kanbanWrap[0]["start-date"]);
                    $("#startDateModal").css("cssText", "display: block !important;");
                    $("#startDateModalTeam").css("cssText", "display: none !important;");

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

                    $('#endDateModal').html(kanbanWrap[0]["end-date"]);
                    $("#endDateModal").css("cssText", "display: block !important;");
                    $("#endDateModalTeam").css("cssText", "display: none !important;");

                    $("#reviewerTitle").css("cssText", "display: none !important;");

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

                    $('#reviewerModal').html(generateAsignee);
                    $("#reviewerModal").css("cssText", "display: none !important;");
                    $("#reviewerModalTeam").css("cssText", "display: none !important;");
                } else {
                    $('#titleModalTeam').html("");

                    $('#titleModalTeam').html(kanbanWrap[0]["title-modal"]);
                    $("#titleModalTeam").css("cssText",
                        "display: block !important;font-size: 24px !important; color: #000000;");
                    $("#titleModal").css("cssText", "display: none !important;");

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

                    $('#actionPlanTeam').html(kanbanWrap[0]["description"]);
                    $("#actionPlanTeam").css("cssText", "display: block !important;");
                    $("#actionPlan").css("cssText", "display: none !important;");

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

                    $('#linkWrap').html(kanbanWrap[0]["link"] ? kanbanWrap[0]["link"] : '-');
                    $("#linkWrap").css("cssText", "display: block !important;");
                    $("#linkTeam").css("cssText", "display: none !important;");

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

                    $('#startDateModalTeam').html(kanbanWrap[0]["start-date"]);
                    $("#startDateModalTeam").css("cssText", "display: block !important;");
                    $("#startDateModal").css("cssText", "display: none !important;");

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

                    $('#endDateModalTeam').html(kanbanWrap[0]["end-date"]);
                    $("#endDateModalTeam").css("cssText", "display: block !important;");
                    $("#endDateModal").css("cssText", "display: none !important;");

                    $("#reviewerTitle").css("cssText", "display: block !important;margin-top: 20px;");

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

                    $('#reviewerModalTeam').html(generateAsignee);
                    $("#reviewerModalTeam").css("cssText", "display: flex !important;");
                    $("#reviewerModal").css("cssText", "display: none !important;");
                }

                $("#commentWrap").html("");
                $("#historyWrap").html("");

                // if(element.getAttribute('data-status') == '')
                // console.log();
                $('#statusTask').val(kanbanWrap[0]["id"]);

                $('#titleEditor').val(kanbanWrap[0]["title-modal"]);
                $('#endDateEditor').val(kanbanWrap[0]["end-date-modal"]);
                $('#asigneeModal').html(kanbanWrap[0]["asignee"]);



                $('#reviewerEditor').val(kanbanWrap[0]["reviewer-id"]);


                $('#actionPlanEditor').html(kanbanWrap[0]["description"]);

                $('#startDateEditor').val(kanbanWrap[0]["start-date"]);


                $('#labelModal').html(kanbanWrap[0]["label"]);
                $('#labelEditor').val(kanbanWrap[0]["label"]);
                $('#endDateEditor').val(kanbanWrap[0]["end-date"]);

                $('#reportSummary').html(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0]["summary-report"] : '-');

                $('#reportSummaryEditor').val(kanbanWrap[0]["summary-report"] != null ? kanbanWrap[0][
                    "summary-report"
                ] : '-');

                $('#editActivityId').val(kanbanWrap[0]["activity-id"]);
                $('#detail_kanban').modal('show');


                if (kanbanWrap[0]["label"] != "Personal") {


                    $("#asigneeLabel").css("cssText",
                        "display: block !important;margin-top: 20px !important;");
                    $("#asigneeWrap").css("cssText", "display: flex !important;");

                    var assigned_object = JSON.parse(kanbanWrap[0]["assigned-encode"]);

                    var members_object = JSON.parse(kanbanWrap[0]["members-encode"]);

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

                    for (const [key, value] of Object.entries(assigned_object)) {
                        var html = "";
                        html += '<div class="col-sm-1 mt-1">';
                        html += '<img src="' + value +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += ' alt="flexy">';
                        html += '</div>';
                        html += '<div class="col-sm-11 mt-2">';
                        html +=
                            ' <p style="margin-left: -15px;font-size: 15px;" class="text-dark" id="asigneeModal">';
                        html += members_object[key] + '</p>';
                        html += '</div>';

                        $("#asigneeWrap").prepend(html);
                    }
                } else {

                    $("#asigneeLabel").css("cssText", "display: none !important;");
                    $("#asigneeWrap").css("cssText", "display: none !important;");
                }

                if (kanbanWrap[0]["comment-wrap"]) {
                    var comment_object = JSON.parse(kanbanWrap[0]["comment-wrap"]);

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

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by + '</h6>';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html +=
                            '               <div class="row" id="descriptionWrapEdit' +
                            value.id + '">';
                        html += '                   <div class="col-sm-12">';
                        html +=
                            '                      <p style="margin-left: -15px;font-size: 13px;">' +
                            value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                      
                        html +=
                            '    <textarea class="form-control mt-3" cols="30" rows="5"';
                        html +=
                            '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                            value.id + '" placeholder="Add your comment here...">';
                        html += value.description + '</textarea>';
                        html +=
                            '    <div id="button-edit-comment-wrap' + value.id +
                            '" style="display: none;">';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                        html +=
                            '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                            value.id + '`)">Save</button>';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                        html +=
                            '             onclick="cancelEditComment(`' + value.id +
                            '`)">Cancel</button>';
                        html += '          </div>';

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


                if (kanbanWrap[0]["log-wrap"] != null) {

                    $("#log_object_val").val(kanbanWrap[0]["log-wrap"]);

                    var log_object = JSON.parse(kanbanWrap[0]["log-wrap"]);

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

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' +
                            value.type + ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value
                                .new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#historyWrap").prepend(html);
                    }
                }

            }
        });
    }


    $('#detail_kanban').on('shown.bs.modal', function () {
        $(document).on('keydown', function (event) {
            if (event.which == 77) { // Check if the key pressed is "m"
                addComment(); // Call your function here
                $("#textEditorComment").html("");
            }
        });
    });

    $('#detail_kanban').on('hidden.bs.modal', function () {
        $(document).off('keydown');
    });
    </script>

<script>
    var uploadedDocumentMap = {}
    Dropzone.options.documentDropzone = {
        url: '{{ url('activity.store ') }}',
        maxFilesize: 1000000, // MB
        clickable: false,
        addRemoveLinks: false,
        autoProcessQueue: false,
        parallelUploads: 10,
        autoDiscover: false,
        uploadMultiple: true,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",
        processData: false,
        contentType: false,
        dictDefaultMessage: "No attachment yet.",
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function (file, response) {

            Swal.fire({
                title: 'Done',
                text: "Activity has been added successfully!",
                icon: 'success',
                confirmButtonColor: '#7066e0',
                confirmButtonText: 'Ok'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#frameWrap').contents().find("#firstElement").remove();
                    $('#frameWrap').contents().find(".kanban-wrapper").remove();

                    var html = "";


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

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


            $("#saveButton").click(function () {
                // if (myDropzone.getQueuedFiles().length > 0) {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                //     $(".errorAddImage").css("cssText", "display: none !important;");
                // } else {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #f1556c !important; color: #f1556c !important;");
                //     $(".errorAddImage").css("cssText",
                //         "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                //     );
                // }

                if (myDropzone.getQueuedFiles().length > 0 && $('#createForm').valid()) {

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

                } else if (myDropzone.getQueuedFiles().length <= 0 && $('#createForm').valid()) {
                    $("#create_kanban").modal('hide');

                    $.ajax({
                        url: "{{ route('activity.store') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            title: $("#title").val(),
                            description: $("#description").val(),
                            start_date: $("#start_date").val(),
                            end_date: $("#end_date").val(),
                            summary_report: $("#summary_report").val(),
                            reviewer_id: $("#reviewer_id").val(),
                            label: $("#label_value").val(),
                            status: $("#status_val").val()

                        },
                        success: function (result) {

                            Swal.fire({
                                title: 'Done',
                                text: "Activity has been added successfully!",
                                icon: 'success',
                                confirmButtonColor: '#7066e0',
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('#frameWrap').contents().find("#firstElement")
                                        .remove();
                                    $('#frameWrap').contents().find(
                                        ".kanban-wrapper").remove();

                                    var html = "";

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

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


                } else {
                    $("#saveButton").prop('disabled', false);
                }
            });

            this.on("addedfiles", function (files) {
                $("#saveButton").click(function (e) {
                    if (!$('#createForm').valid()) {
                        // $("#saveButton").prop('disabled', false);
                    } else {
                        // $("#saveButton").prop('disabled', true);
                        myDropzone.processQueue();
                    }
                });

                // if (myDropzone.getQueuedFiles().length > 0) {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
                //     $(".errorAddImage").css("cssText", "display: none !important;");
                // } else {
                //     $(".dropzone").css("cssText",
                //         "border: 1px solid #f1556c !important; color: #f1556c !important;");
                //     $(".errorAddImage").css("cssText",
                //         "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
                //     );
                // }

            });

            this.on('sendingmultiple', function (file, xhr, formData) {
                // Append all form inputs to the formData Dropzone will POST
                var data = $('#createForm').serializeArray();

                $.each(data, function (key, el) {
                    formData.append(el.name, el.value);
                });

            });
        },
        removedfile: function (file) {
            file.previewElement.remove()
            var name = ''
            if (typeof file.file_name !== 'undefined') {
                name = file.file_name
            } else {
                name = uploadedDocumentMap[file.name]
            }
            $('form').find('input[name="photo[]"][value="' + name + '"]').remove()
        }
    }

    var uploadedEditDocumentMap = {}
    Dropzone.options.documentEditDropzone = {
        url: '{{ url('activity.edit-attachment') }}',
        maxFilesize: 1000000, // MB
        clickable: false,
        addRemoveLinks: false,
        autoProcessQueue: true,
        parallelUploads: 10,
        autoDiscover: false,
        uploadMultiple: true,
        // acceptedFiles: ".jpeg,.jpg,.png,.gif",
        processData: true,
        contentType: false,
        dictDefaultMessage: "No attachment yet.",
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function (file_new, response) {
            var myEditDropzone = this;
            $(".dz-processing").remove();
            $(".dz-preview").not(".dz-image-preview").remove();

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

                var file = value;
                var url = "{{ url('activity/download-attachment') }}/" + value.id;

                myEditDropzone.emit("addedfile", file);
                myEditDropzone.emit("thumbnail", file, value.url);
                myEditDropzone.emit("complete", file);

                var anchorEl = document.createElement('a');
                anchorEl.setAttribute('href', url);
                anchorEl.setAttribute('class', 'download-dropzone');
                anchorEl.innerHTML = "<br>Download";
                file.previewTemplate.appendChild(anchorEl);

            }



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

                var html = "";
                html += ' <div class="col-sm-1 mt-4">';
                html +=
                    '            <img src="' + value.user_photo + '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                html += '               alt="flexy">';
                html += '        </div>';
                html += '       <div class="col-sm-11">';
                html += '           <div class="row">';
                html += '               <div class="col-sm-12 d-flex">';
                html +=
                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                    value.user_name + '</h6>' + ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                    value.title + ' </p> ' +
                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value.type +
                    ' </p> ';
                html +=
                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                    value.created_at + '</p>';
                html += '              </div>';
                html += '             </div>';
                html += '               <div class="row">';
                html += '                   <div class="col-sm-12">';
                html += '<p style="margin-left: -15px;font-size: 13px;">';

                if (value.old_name != "" && value.new_name != "") {
                    var description_log = value.old_name + ' &#8594 ' + value.new_name;
                } else if (value.old_name != "") {
                    var description_log = value.old_name;
                } else if (value.new_name != "") {
                    var description_log = value.new_name;
                }

                html += '' + description_log + '</p>';
                html += '                    </div>';
                html += '                </div>';
                html += '          </div>';

                $("#historyWrap").prepend(html);
            }

            Swal.fire({
                title: 'Done',
                text: "Attachment has been updated successfully!",
                icon: 'success',
                confirmButtonColor: '#7066e0',
                confirmButtonText: 'Ok'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#frameWrap').contents().find("#firstElement").remove();
                    $('#frameWrap').contents().find(".kanban-wrapper").remove();

                    var html = "";


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

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

            $(document).on('show.bs.modal', '#detail_kanban', function () {
                $(".attachment-delete-id").remove();
                $(".dz-preview").remove();

                $.ajax({
                    url: "{{ route('activity.get-attachment') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        activity_id: $("#editActivityId").val(),
                    },
                    success: function (result) {
                        var wrap = JSON.parse(result);
                        for (const [key, value] of Object.entries(wrap)) {

                            var html = "";

                            // $(".download-dropzone").html("");
                            var file = value;
                            var url = "{{ url('activity/download-attachment') }}/" + value
                                .id;

                            myEditDropzone.emit("addedfile", file);
                            myEditDropzone.emit("thumbnail", file, value.url);
                            myEditDropzone.emit("complete", file);

                            var anchorEl = document.createElement('a');
                            anchorEl.setAttribute('href', url);
                            anchorEl.setAttribute('class', 'download-dropzone');
                            anchorEl.innerHTML = "<br>Download";
                            file.previewTemplate.appendChild(anchorEl);
                            // html += `<a href="{{ url('activity/download-attachment') }}/` + file + `" class="download-dropzone"><br>Download</a>`;

                            // $(".dz-preview").append(html);
                        }
                    }

                });


            });


            // $("#editProdukButton").click(function() {
            //     var checkImage = document.getElementsByClassName('dz-preview');

            //     if (checkImage.length > 0) {
            //         $(".dropzone").css("cssText",
            //             "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
            //         $(".errorEditImage").css("cssText", "display: none !important;");
            //     } else {
            //         $(".dropzone").css("cssText",
            //             "border: 1px solid #f1556c !important; color: #f1556c !important;");
            //         $(".errorEditImage").css("cssText",
            //             "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
            //         );
            //     }

            //     if (checkImage.length > 0 && $('#editProdukForm').valid()) {

            //         $('#editProdukForm')[0].submit();

            //         myEditDropzone.processQueue();

            //         $("#editProdukButton").prop('disabled', true);
            //     } else {
            //         $("#editProdukButton").prop('disabled', false);
            //     }

            // });

            // this.on("addedfiles", function(files) {
            //     $("#editProdukButton").click(function(e) {
            //         if (!$('#editProdukForm').valid()) {
            //             $("#editProdukButton").prop('disabled', false);
            //         } else {
            //             myEditDropzone.processQueue();
            //         }
            //     });

            //     var checkImage = document.getElementsByClassName('dz-preview');
            //     if (checkImage.length > 0) {
            //         $(".edit-dropzone").css("cssText",
            //             "border: 1px solid #e6e6e6 !important; color: #c8c8c9 !important;");
            //         $(".errorEditImage").css("cssText", "display: none !important;");
            //     } else {
            //         $(".edit-dropzone").css("cssText",
            //             "border: 1px solid #f1556c !important; color: #f1556c !important;");
            //         $(".errorEditImage").css("cssText",
            //             "display: block !important; color: #f1556c; font-size: .875rem; font-weight: 400; line-height: 1.5; margin-top: 5px; padding: 0;"
            //         );
            //     }
            // });

            this.on('sendingmultiple', function (file, xhr, formData) {
                // Append all form inputs to the formData Dropzone will POST
                formData.append('edit_activity_id', $('#editActivityId').val());

            });


        },
        removedfile: function (file) {
            Swal.fire({
                title: "Delete Attachment?",
                text: `Are you sure to delete this attachment?`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonColor: "rgb(11, 42, 151)",
                cancelButtonColor: "rgb(209, 207, 207)",
                confirmButtonText: "Yes, Delete it !",
                cancelButtonText: "Cancel"
            }).then(function (t) {
                if (t.value) {

                    var token = '{{ csrf_token() }}';

                    $.ajax({
                        url: "{{ url('activity.edit-attachment') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            attachment: file.id,
                            edit_activity_id: $('#editActivityId').val(),
                        },
                        success: function (result) {
                            for (const [key, value] of Object.entries(
                                    result.activity_log)) {

                                var html = "";
                                html += ' <div class="col-sm-1 mt-4">';
                                html +=
                                    '            <img src="' + value.user_photo +
                                    '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                                html += '               alt="flexy">';
                                html += '        </div>';
                                html += '       <div class="col-sm-11">';
                                html += '           <div class="row">';
                                html +=
                                    '               <div class="col-sm-12 d-flex">';
                                html +=
                                    '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                                    value.user_name + '</h6>' +
                                    ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                                    value.title + ' </p> ' +
                                    ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' +
                                    value.type +
                                    ' </p> ';
                                html +=
                                    '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                                    value.created_at + '</p>';
                                html += '              </div>';
                                html += '             </div>';
                                html += '               <div class="row">';
                                html +=
                                    '                   <div class="col-sm-12">';
                                html +=
                                    '<p style="margin-left: -15px;font-size: 13px;">';

                                if (value.old_name != "" && value
                                    .new_name != "") {
                                    var description_log = value.old_name +
                                        ' &#8594 ' + value.new_name;
                                } else if (value.old_name != "") {
                                    var description_log = value.old_name;
                                } else if (value.new_name != "") {
                                    var description_log = value.new_name;
                                }

                                html += '' + description_log + '</p>';
                                html += '                    </div>';
                                html += '                </div>';
                                html += '          </div>';

                                $("#historyWrap").prepend(html);
                            }

                            $('#detailKanbanForm').prepend(
                                '<input type="hidden" class="attachment-delete-id" name="attachment[]" value="' +
                                file
                                .id + '">')

                            file.previewElement.remove()
                            var name = ''
                            if (typeof file.file_name !== 'undefined') {
                                name = file.file_name
                            } else {
                                name = uploadedEditDocumentMap[file.name]
                            }

                            $('#detailKanbanForm').find(
                                    'input[name="attachment[]"][value="' + name + '"]')
                                .remove()
                            $('#detailKanbanForm').find('input[name="file"]').remove()

                            Swal.fire({
                                title: 'Done',
                                text: "Attachment has been updated successfully!",
                                icon: 'success',
                                confirmButtonColor: '#7066e0',
                                confirmButtonText: 'Ok'
                            }).then((result) => {
                                if (result.isConfirmed) {

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

                                    var html = "";

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

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

                    });

                }
            })
        }
    }
</script>
<script>
    function newestOrder() {
        $("#newestFirst").css('display', 'none');
        $("#oldestFirst").css('display', 'block');
        $("#activity_tab_order").val("latest");

        if ($("#activity_tab_status").val() == "comment") {
            $("#commentWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {

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

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by + '</h6>';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html +=
                            '               <div class="row" id="descriptionWrapEdit' +
                            value.id + '">';
                        html += '                   <div class="col-sm-12">';
                        html +=
                            '                      <p style="margin-left: -15px;font-size: 13px;">' +
                            value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html +=
                            '    <textarea class="form-control mt-3" cols="30" rows="5"';
                        html +=
                            '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                            value.id + '" placeholder="Add your comment here...">';
                        html += value.description + '</textarea>';
                        html +=
                            '    <div id="button-edit-comment-wrap' + value.id +
                            '" style="display: none;">';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                        html +=
                            '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                            value.id + '`)">Save</button>';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                        html +=
                            '             onclick="cancelEditComment(`' + value.id +
                            '`)">Cancel</button>';
                        html += '          </div>';
                        $("#commentWrap").append(html);
                    }

                }
            });
        } else if ($("#activity_tab_status").val() == "history") {
            $("#historyWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {
                    for (const [key, value] of Object.entries(result)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                            .type +
                            ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value.new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

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

    }

    function oldestOrder() {
        $("#oldestFirst").css('display', 'none');
        $("#newestFirst").css('display', 'block');
        $("#activity_tab_order").val("oldest");

        if ($("#activity_tab_status").val() == "comment") {
            $("#commentWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {

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

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by + '</h6>';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html +=
                            '               <div class="row" id="descriptionWrapEdit' +
                            value.id + '">';
                        html += '                   <div class="col-sm-12">';
                        html +=
                            '                      <p style="margin-left: -15px;font-size: 13px;">' +
                            value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html +=
                            '    <textarea class="form-control mt-3" cols="30" rows="5"';
                        html +=
                            '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                            value.id + '" placeholder="Add your comment here...">';
                        html += value.description + '</textarea>';
                        html +=
                            '    <div id="button-edit-comment-wrap' + value.id +
                            '" style="display: none;">';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                        html +=
                            '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                            value.id + '`)">Save</button>';
                        html +=
                            '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                        html +=
                            '             onclick="cancelEditComment(`' + value.id +
                            '`)">Cancel</button>';
                        html += '          </div>';

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


                }
            });
        } else if ($("#activity_tab_status").val() == "history") {
            $("#historyWrap").html("");
            $.ajax({
                url: "{{ route('activity.filter-detail') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    status: $("#activity_tab_status").val(),
                    activity_id: $("#editActivityId").val(),
                    order: $("#activity_tab_order").val(),
                },
                success: function (result) {
                    for (const [key, value] of Object.entries(result)) {

                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + value.user_photo +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                            .type +
                            ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value.new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

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

    function allActivity(element) {
        $("#activity_tab_status").val("all");
        $("#allWrap").css('display', 'flex');
        $("#historyWrap").css('display', 'none');
        $("#commentWrap").css('display', 'none');

        $(".activity-choose").removeClass("text-white");
        $(".activity-choose").addClass("text-info");
        $(".activity-choose").addClass("btn-light-info");
        if ($(element).hasClass("btn-light-info")) {
            $(element).removeClass("btn-light-info");
            $(element).addClass("text-white");
            $(element).addClass("btn-info");
        }

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

        $.ajax({
            url: "{{ route('activity.filter-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                status: $("#activity_tab_status").val(),
                activity_id: $("#editActivityId").val(),
                order: $("#activity_tab_order").val(),
            },
            success: function (result) {
                for (const [key, value] of Object.entries(result)) {
                    if ('commented_by' in value) {
                        var env = "{{ env('APP_URL') }}";
                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + env + value.commented_by_relation.photos_storage +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.commented_by_relation.name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.activity_by_relation.title + ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at_lang + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        html += '' + value.description + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

                        $("#allWrap").append(html);
                    } else {
                        var env = "{{ env('APP_URL') }}";
                        var html = "";
                        html += ' <div class="col-sm-1 mt-4">';
                        html +=
                            '            <img src="' + env + value.user_by_relation.photos_storage +
                            '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                        html += '               alt="flexy">';
                        html += '        </div>';
                        html += '       <div class="col-sm-11">';
                        html += '           <div class="row">';
                        html += '               <div class="col-sm-12 d-flex">';
                        html +=
                            '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                            value.user_by_relation.name + '</h6>' +
                            ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                            value.title + ' </p> ' +
                            ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                            .type +
                            ' </p> ';
                        html +=
                            '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                            value.created_at_lang + '</p>';
                        html += '              </div>';
                        html += '             </div>';
                        html += '               <div class="row">';
                        html += '                   <div class="col-sm-12">';
                        html += '<p style="margin-left: -15px;font-size: 13px;">';

                        if (value.old_name != "" && value.new_name != "") {
                            var description_log = value.old_name + ' &#8594 ' + value.new_name;
                        } else if (value.old_name != "") {
                            var description_log = value.old_name;
                        } else if (value.new_name != "") {
                            var description_log = value.new_name;
                        }

                        html += '' + description_log + '</p>';
                        html += '                    </div>';
                        html += '                </div>';
                        html += '          </div>';

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

    function commentActivity(element) {
        $("#activity_tab_status").val("comment");
        $("#commentWrap").css('display', 'flex');
        $("#allWrap").css('display', 'none');
        $("#historyWrap").css('display', 'none');
        $(".activity-choose").removeClass("text-white");
        $(".activity-choose").addClass("text-info");
        $(".activity-choose").addClass("btn-light-info");
        if ($(element).hasClass("btn-light-info")) {
            $(element).removeClass("btn-light-info");
            $(element).addClass("text-white");
            $(element).addClass("btn-info");
        }

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

        $.ajax({
            url: "{{ route('activity.filter-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                status: $("#activity_tab_status").val(),
                activity_id: $("#editActivityId").val(),
                order: $("#activity_tab_order").val(),
            },
            success: function (result) {

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

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + value.user_photo +
                        '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        value.commented_by + '</h6>';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        value.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html +=
                        '               <div class="row" id="descriptionWrapEdit' +
                        value.id + '">';
                    html += '                   <div class="col-sm-12">';
                    html +=
                        '                      <p style="margin-left: -15px;font-size: 13px;">' +
                        value.description + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html +=
                        '    <textarea class="form-control mt-3" cols="30" rows="5"';
                    html +=
                        '        style="margin-left: -18px !important;display: none;" id="editTextCommentValue' +
                        value.id + '" placeholder="Add your comment here...">';
                    html += value.description + '</textarea>';
                    html +=
                        '    <div id="button-edit-comment-wrap' + value.id +
                        '" style="display: none;">';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                    html +=
                        '            style="margin-left: -18px;" onclick="saveEditComment(`' +
                        value.id + '`)">Save</button>';
                    html +=
                        '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                    html +=
                        '             onclick="cancelEditComment(`' + value.id +
                        '`)">Cancel</button>';
                    html += '          </div>';
                    $("#commentWrap").append(html);
                }
            }
        });
    }

    function historyActivity(element) {
        $("#activity_tab_status").val("history");
        $("#commentWrap").css('display', 'none');

        $("#allWrap").css('display', 'none');
        $("#historyWrap").css('display', 'flex');
        $(".activity-choose").removeClass("text-white");
        $(".activity-choose").addClass("text-info");
        $(".activity-choose").addClass("btn-light-info");
        if ($(element).hasClass("btn-light-info")) {
            $(element).removeClass("btn-light-info");
            $(element).addClass("text-white");
            $(element).addClass("btn-info");
        }

        $("#historyWrap").html("");
        $.ajax({
            url: "{{ route('activity.filter-detail') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                status: $("#activity_tab_status").val(),
                activity_id: $("#editActivityId").val(),
                order: $("#activity_tab_order").val(),
            },
            success: function (result) {
                for (const [key, value] of Object.entries(result)) {

                    var html = "";
                    html += ' <div class="col-sm-1 mt-4">';
                    html +=
                        '            <img src="' + value.user_photo + '" class="rounded-circle" style="width: 38px;height: 38px;object-fit: cover;"';
                    html += '               alt="flexy">';
                    html += '        </div>';
                    html += '       <div class="col-sm-11">';
                    html += '           <div class="row">';
                    html += '               <div class="col-sm-12 d-flex">';
                    html +=
                        '                   <h6 class="mt-4" style="margin-left: -15px;">' +
                        value.user_name + '</h6>' +
                        ' <p class="mt-4" style="margin-left: 5px;font-size: 13px;">' +
                        value.title + ' </p> ' +
                        ' <p class="mt-4 fw-bold" style="margin-left: 5px;font-size: 13px;">' + value
                        .type +
                        ' </p> ';
                    html +=
                        '                   <p class="mt-4" style="margin-left: 10px;font-size: 13px;">' +
                        value.created_at + '</p>';
                    html += '              </div>';
                    html += '             </div>';
                    html += '               <div class="row">';
                    html += '                   <div class="col-sm-12">';
                    html += '<p style="margin-left: -15px;font-size: 13px;">';

                    if (value.old_name != "" && value.new_name != "") {
                        var description_log = value.old_name + ' &#8594 ' + value.new_name;
                    } else if (value.old_name != "") {
                        var description_log = value.old_name;
                    } else if (value.new_name != "") {
                        var description_log = value.new_name;
                    }

                    html += '' + description_log + '</p>';
                    html += '                    </div>';
                    html += '                </div>';
                    html += '          </div>';

                    $("#historyWrap").append(html);
                }
            }
        });
    }
</script>
    <script>
        function deleteData(id) {
            Swal.fire({
                title: "Delete Program ?",
                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('program.hapus') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            id: id
                        },
                        success: function(data) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Done',
                                text: 'Program has been deleted successfully!',
                            }).then(function() {
                                location.href = "{{ route('program.index') }}";
                            });
                        }
                    });
                }
            })
        }

        function approve() {
            var offCanvasApprove = document.getElementById("approveCanvas");
            var canvasApprove = new bootstrap.Offcanvas(offCanvasApprove, {
                backdrop: true
            });

            canvasApprove.show();
        }

        function reject() {
            var offCanvasReject = document.getElementById("rejectCanvas");
            var canvasReject = new bootstrap.Offcanvas(offCanvasReject, {
                backdrop: true
            });

            canvasReject.show()
        }
    </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');
            }
        })

        $("#savePlanPersonal").click(function() {
            $('.validate-personal').each(function(index, card) {
                console.log($(this_element).parents().eq(4).css('display'));
                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-personal" 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-personal');
                }
            });

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

            if ($('label').hasClass('error-validation-personal')) {
                $("#validate-jquery-personal").val('');
            } else {
                $("#validate-jquery-personal").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!"
                    }
                }
            });
        });

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

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

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


                        if (result != "") {
                            $("#formWrap").remove();
                            $("#savePlan").toggle();
                        } 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" style="padding-bottom: 15px; margin-bottom: 30px;border-bottom: 1px solid #ecf0f2;"><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('program.get-action-plan-team') }}",
                                method: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    program_fml_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;
                                            
                                            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 +
                                    '" />')
                                
                            });
                        }
                   
                }
            });
        }

        actionPlan();

        function actionPlanPersonal() {
            $.ajax({
                url: "{{ route('program.get-action-plan-personal') }}",
                method: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    program_id: '{{ $program->id }}'
                },
                success: function(data) {
                    var result = JSON.parse(data);


                        if (result != "") {
                            $("#formWrapPersonal").remove();
                            $("#savePlanPersonal").toggle();
                        } else {
                        }

                        var increment_lastest_id = 0;

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

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

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

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

                            var element =
                                '<input type="hidden" name="action_plan_id_personal[]" value="' + value.id +
                                '" /><div class"mb-3" id="removeclass_personal' +
                                key +
                                '"><div class="row"><div class="col-sm-3"><div class="mb-3"><h5>Title</h5><input type="text" class="form-control validate-personal" name="title_personal[]" 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-personal" name="action_plan_personal[]" value="' + value.description +
                                '" placeholder="Description"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Start Date</h5><input type="date" class="form-control validate-personal" name="start_date_personal[]" 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-personal" name="end_date_personal[]" value="' + value.end_date +
                                '" placeholder="End Date"></div></div>';
                            element += '<div class="col-sm-3"><div class="mb-3" id="team_id_wrap_' +
                                key +
                                '_personal"><h5>Employee</h5><select name="employee_id_personal[]" id="employeeIdPersonal' + key + '" class="select2 form-control validate-personal block" style="width: 100%"><option value="">Choose Employee</option>@foreach ($pegawai as $data)<option value="{{ $data->id }}">{{ $data->nama_lengkap }}</option>@endforeach</select></div></div>';
                            element += '<div class="col-sm-3"><div class="mb-3" id="reviewer_id_wrap_' +
                                key +
                                '"><h5>Reviewer</h5><select name="reviewer_personal[]" id="reviewerPlanPersonal' + key + '" class="select2 form-control validate-personal 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_personal(' +
                                    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_personal(' +
                                    key + ',' + `'` + value.id + `'` +
                                    ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div></div>';
                            }

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

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

                            $("#reviewerPlanPersonal" + key).val(value.reviewer_id).trigger('change');
                            
                            $.ajax({
                                url: "{{ route('program.get-action-plan-team') }}",
                                method: "POST",
                                data: {
                                    "_token": "{{ csrf_token() }}",
                                    program_fml_action_plan_id: value.id
                                },
                                success: function(result) {
                                    var parse = JSON.parse(result);
                                        console.log(parse);

                                    $("#employeeIdPersonal" + key).val(parse.team.pegawai_id).trigger('change');
                                }

                            });

                            

                        }
                   
                }
            });
        }

        actionPlanPersonal();
    </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 education_fields_personal(increment) {
            var sum_increment = parseInt($("#key_FirstPersonal").val()) + 1;

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

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

            divtest.innerHTML =
                '<input type="hidden" name="team_part_id_personal[]" 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-personal" id="title_personal" name="title_personal[]" placeholder="Title"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Description</h5><input type="text"  class="form-control validate-personal" id="action_plan_personal" name="action_plan_personal[]" placeholder="Description"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Start Date</h5><input type="date" class="form-control validate-personal" id="start_date_personal" name="start_date_personal[]" 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-personal" id="end_date_personal" name="end_date_personal[]" placeholder="End Date"></div></div><div class="col-sm-3"><div class="mb-3"><h5>Employee</h5><select  name="employee_id_personal'
                + '[]" class="select2 form-control block validate-personal" 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_personal'
                +
                '[]" class="select2 form-control block validate-personal" style="width: 100%"><option value="">Choose Employee</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 class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_education_fields_personal(' +
                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();
                }
            }
        }

        function remove_education_fields_personal(rid, hapus_id) {

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

            $("#key_FirstPersonal").val(sum_increment);
            if(hapus_id == "init") {
                $("#formWrapPersonal").remove();
            } else {
                if (hapus_id != "") {
                    $("#removeclass_personal" + rid).remove();
                    $("#actionPlanFormPersonal").append('<input type="hidden" name="hapus_id_plan_personal[]" value="' +
                        hapus_id + '" />');
                } else {
                    $("#removeclass_personal" + rid).remove();
                }
            }
        }
    </script>

    <script>
        function displaySwitch() {
            $("#topCardWrap").toggle();
            $("#formWrap").toggle();
            $("#first_repeat").toggle();
            $("#emptyFirst").toggle();
            $("#savePlan").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>
        function displaySwitchPersonal() {
            $("#topCardWrapPersonal").toggle();
            $("#formWrapPersonal").toggle();
            $("#first_repeat_personal").toggle();
            $("#emptyFirstPersonal").toggle();
            $("#savePlanPersonal").toggle();

            if ($('#formWrapPersonal').css('display') === 'block' || $('#first_repeat_personal').css('display') === 'block') {
                $("#delete_month_first_personal").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_first_personal" id="delete_month_first_personal" 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>
        // function displaySwitch(month) {
        //     $("#topCardWrap" + month).toggle();
           
        //     $("#form" + month + "Wrap").toggle();
        //     $("#" + month + "_repeat").toggle();
        //     $("#empty" + month).toggle();

        //     if ($('#form' + month + 'Wrap').css('display') === 'block' || $('#' + month + '_repeat').css('display') ===
        //         'block') {
        //         $("#delete_month_" + month).remove();
        //     } else {
        //         $("#actionPlanForm").append(
        //             '<input type="hidden" name="delete_month_' + month + '" id="delete_month_' + month +
        //             '" value="nonactive" />');
        //     }
        // }

        function displayFebruary() {
            $("#formFebruaryWrap").toggle();
            $("#february_repeat").toggle();
            $("#emptyFebruary").toggle();

            if ($('#formFebruaryWrap').css('display') === 'block' || $('#february_repeat').css('display') === 'block') {
                $("#delete_month_feb").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_feb" id="delete_month_feb" value="nonactive" />');
            }
        }

        function displayMarch() {
            $("#formMarchWrap").toggle();
            $("#march_repeat").toggle();
            $("#emptyMarch").toggle();

            if ($('#formMarchWrap').css('display') === 'block' || $('#march_repeat').css('display') === 'block') {
                $("#delete_month_mar").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_mar" id="delete_month_mar" value="nonactive" />');
            }
        }

        function displayApril() {
            $("#formAprilWrap").toggle();
            $("#april_repeat").toggle();
            $("#emptyApril").toggle();

            if ($('#formAprilWrap').css('display') === 'block' || $('#april_repeat').css('display') === 'block') {
                $("#delete_month_apr").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_apr" id="delete_month_apr" value="nonactive" />');
            }
        }

        function displayMei() {
            $("#formMeiWrap").toggle();
            $("#mei_repeat").toggle();
            $("#emptyMei").toggle();

            if ($('#formMeiWrap').css('display') === 'block' || $('#mei_repeat').css('display') === 'block') {
                $("#delete_month_mei").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_mei" id="delete_month_mei" value="nonactive" />');
            }
        }

        function displayJune() {
            $("#formJuneWrap").toggle();
            $("#june_repeat").toggle();
            $("#emptyJune").toggle();

            if ($('#formJuneWrap').css('display') === 'block' || $('#june_repeat').css('display') === 'block') {
                $("#delete_month_jun").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_jun" id="delete_month_jun" value="nonactive" />');
            }
        }

        function displayJuly() {
            $("#formJulyWrap").toggle();
            $("#july_repeat").toggle();
            $("#emptyJuly").toggle();

            if ($('#formJulyWrap').css('display') === 'block' || $('#july_repeat').css('display') === 'block') {
                $("#delete_month_jul").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_jul" id="delete_month_jul" value="nonactive" />');
            }
        }

        function displayAugust() {
            $("#formAugustWrap").toggle();
            $("#august_repeat").toggle();
            $("#emptyAugust").toggle();

            if ($('#formAugustWrap').css('display') === 'block' || $('#august_repeat').css('display') === 'block') {
                $("#delete_month_aug").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_aug" id="delete_month_aug" value="nonactive" />');
            }
        }

        function displaySeptember() {
            $("#formSeptemberWrap").toggle();
            $("#september_repeat").toggle();
            $("#emptySeptember").toggle();

            if ($('#formSeptemberWrap').css('display') === 'block' || $('#september_repeat').css('display') === 'block') {
                $("#delete_month_sep").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_sep" id="delete_month_sep" value="nonactive" />');
            }
        }

        function displayOctober() {
            $("#formOctoberWrap").toggle();
            $("#october_repeat").toggle();
            $("#emptyOctober").toggle();

            if ($('#formOctoberWrap').css('display') === 'block' || $('#october_repeat').css('display') === 'block') {
                $("#delete_month_oct").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_oct" id="delete_month_oct" value="nonactive" />');
            }
        }

        function displayNovember() {
            $("#formNovemberWrap").toggle();
            $("#november_repeat").toggle();
            $("#emptyNovember").toggle();

            if ($('#formNovemberWrap').css('display') === 'block' || $('#november_repeat').css('display') === 'block') {
                $("#delete_month_nov").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_nov" id="delete_month_nov" value="nonactive" />');
            }
        }

        function displayDecember() {
            $("#formDecemberWrap").toggle();
            $("#december_repeat").toggle();
            $("#emptyDecember").toggle();

            if ($('#formDecemberWrap').css('display') === 'block' || $('#december_repeat').css('display') === 'block') {
                $("#delete_month_dec").remove();
            } else {
                $("#actionPlanForm").append(
                    '<input type="hidden" name="delete_month_dec" id="delete_month_dec" 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>
        
    </script>
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
            });
            // $("#approveProgramForm").validate({
            //     rules: {
            //         approval_notes: {
            //             required: true,
            //         },
            //     },
            //     messages: {
            //         approval_notes: {
            //             required: "Notes is required",
            //         }
            //     },
            //     submitHandler: function(form) {
            //         $("#saveApproveButton").prop('disabled', true);
            //         form.submit();
            //     }
            // });

            $("#rejectProgramForm").validate({
                rules: {
                    rejection_notes: {
                        required: true,
                    },
                },
                messages: {
                    rejection_notes: {
                        required: "Notes is required",
                    }
                },
                submitHandler: function(form) {
                    $("#saveRejectButton").prop('disabled', true);
                    form.submit();
                }
            });
        });
    </script>


    <script>
        function february_repeat_add() {
            room++;
            var objTo = document.getElementById("february_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-february" + room);
            var rdiv = "removeclass-february" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Description</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Description"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_february_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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



        function remove_february_repeat(rid) {
            $(".removeclass-february" + rid).remove();
        }

        function march_repeat_add() {
            room++;
            var objTo = document.getElementById("march_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-march" + room);
            var rdiv = "removeclass-march" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Description</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Description"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_march_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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



        function remove_march_repeat(rid) {
            $(".removeclass-march" + rid).remove();
        }

        function april_repeat_add() {
            room++;
            var objTo = document.getElementById("april_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-april" + room);
            var rdiv = "removeclass-april" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Description</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Description"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_april_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_april_repeat(rid) {
            $(".removeclass-april" + rid).remove();
        }

        function mei_repeat_add() {
            room++;
            var objTo = document.getElementById("mei_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-mei" + room);
            var rdiv = "removeclass-mei" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_mei_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_mei_repeat(rid) {
            $(".removeclass-mei" + rid).remove();
        }

        function june_repeat_add() {
            room++;
            var objTo = document.getElementById("june_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-june" + room);
            var rdiv = "removeclass-june" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" type="date" 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 class="form-control" type="date" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_june_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_june_repeat(rid) {
            $(".removeclass-june" + rid).remove();
        }

        function july_repeat_add() {
            room++;
            var objTo = document.getElementById("july_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-july" + room);
            var rdiv = "removeclass-july" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_july_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_july_repeat(rid) {
            $(".removeclass-july" + rid).remove();
        }

        function august_repeat_add() {
            room++;
            var objTo = document.getElementById("august_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-august" + room);
            var rdiv = "removeclass-august" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_august_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_august_repeat(rid) {
            $(".removeclass-august" + rid).remove();
        }

        function september_repeat_add() {
            room++;
            var objTo = document.getElementById("september_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-september" + room);
            var rdiv = "removeclass-september" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_september_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_september_repeat(rid) {
            $(".removeclass-september" + rid).remove();
        }

        function october_repeat_add() {
            room++;
            var objTo = document.getElementById("october_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-october" + room);
            var rdiv = "removeclass-october" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_october_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_october_repeat(rid) {
            $(".removeclass-october" + rid).remove();
        }

        function november_repeat_add() {
            room++;
            var objTo = document.getElementById("november_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-november" + room);
            var rdiv = "removeclass-november" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input class="form-control" 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 class="form-control" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_november_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

        function remove_november_repeat(rid) {
            $(".removeclass-november" + rid).remove();
        }

        function december_repeat_add() {
            room++;
            var objTo = document.getElementById("december_repeat");
            var divtest = document.createElement("div");
            divtest.setAttribute("class", "mb-3 removeclass-december" + room);
            var rdiv = "removeclass-december" + room;
            divtest.innerHTML =
                '<form class="row"><div class="col-sm-3"><div class="mb-3"><h5>Action Plan</h5><input type="text" class="form-control" id="action_plan" name="action_plan" placeholder="Action Plan"></div></div><div class="col-sm-2"> <div class="mb-3"> <h5>Start Date</h5><input type="number" class="form-control" 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 class="form-control" type="number" 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" class="select2 form-control block" multiple="multiple" style="width: 100%"><option value="">Muhammad Iqbal Rivaldi</option><option value="">Ikbal Malik Ramadhan</option></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_december_repeat(' +
                room +
                ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></form>';

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

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

                //Basic example
                $("#todo-lists-basic-demo").lobiList({
                    lists: [{
                            id: "todo",
                            title: "TODO",
                            defaultStyle: "lobilist-danger",
                            items: [{
                                title: "Roles",
                                description: "Make page role for every users",
                            }, ],
                        },
                        {
                            id: "doing",
                            title: "IN PROGRESS",
                            defaultStyle: "lobilist-primary",
                            items: [{
                                    title: "CRUD",
                                    description: "Make all the crud functions for every pages",
                                },
                                {
                                    title: "Login System",
                                    description: "Make login system for the apps",
                                },

                            ],
                        },
                        {
                            id: "Done",
                            title: "DONE  ",
                            defaultStyle: "lobilist-success",
                            items: [{
                                    title: "Collect Data",
                                    description: "Collect all the data regarding to the e-wallet apps",
                                    done: true,
                                },
                                {
                                    title: "Create Modules",
                                    description: "Make all static pages that will be use for the apps",
                                    done: true,
                                },
                            ],
                        },
                    ],
                });
                //Custom datepicker
                $("#todo-lists-demo-datepicker").lobiList({
                    lists: [{
                        title: "Todo",
                        defaultStyle: "lobilist-info",
                        items: [{
                            title: "Floor cool cinders",
                            description: "Thunder fulfilled travellers folly, wading, lake.",
                            dueDate: "2015-01-31",
                        }, ],
                    }, ],
                    afterListAdd: function(lobilist, list) {
                        var $dueDateInput = list.$el.find("form [name=dueDate]");
                        $dueDateInput.datepicker();
                    },
                });
                // Event handling
                (function() {
                    var list;

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

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

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

                $(".datepicker").datepicker({
                    autoclose: true,
                    todayHighlight: true,
                });
                $(".lobilist").perfectScrollbar();
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#budgetTable').DataTable();
        });
    </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/program_formulation/detail.blade.php</b> on line <b>4301</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/program_formulation/detail.blade.php</b> on line <b>4301</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>
   
@endsection