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

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

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

        .l3 {
            padding-left: 2em;
        }

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

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

        select.error {
            color: #F94687;
            border: 1px solid #F94687;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item">
                            <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <a href="{{ route('delegated-job.index') }}">Delegated Job</a>
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Delegated 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>Assigned By</h5>
                        <div class="d-flex align-items-center mb-2">
                            @if(Storage::exists($delegated_job->assigned_by->foto))
                            <img src="{{ Storage::url($delegated_job->assigned_by->foto) }}" class="rounded-circle" width="35"
                            alt="flexy">
                            @else
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                            alt="flexy">
                            @endif
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">
                                    {{ isset($delegated_job->assigned_by->nama_lengkap) ? $delegated_job->assigned_by->nama_lengkap : '-' }}
                                </h6>
                                <span class="text-muted fs-9">{{ $delegated_job->assigned_by->jabatan->nama }}</span>
                            </div>
                        </div>
                        <div>
                            <hr />
                        </div>
                        <h5>Assigned To</h5>
                        @foreach ($delegated_job->assigned_to 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>
                        @if($delegated_job->assigned_by->id_user == Auth::user()->id)
                            <button type="button"
                                class="
                                justify-content-center
                                w-100
                                btn btn-rounded btn-outline-danger
                                d-flex
                                align-items-center
                                mb-2
                            "
                                    onclick="deleteData({{ $delegated_job->id }})">
                                    Delete Delegated Job
                            </button>

                                <a href="{{ route('delegated-job.edit', $delegated_job->id) }}"
                                    class="
                                justify-content-center
                                w-100
                                btn btn-rounded btn-outline-success
                                d-flex
                                align-items-center
                                mt-2
                                mb-2
                                ">
                                    Edit Delegated Job
                            </a>
                        @endif
                    </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>

                </ul>
                <div class="tab-content">
                    <div id="note-full-container" class="note-has-grid row">
                        <div class="col-md-12 single-note-item all-part">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-primary">Description</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12 col-xs-6 b-r">
                                                <h5>Delegated Job Name</h5>
                                                <p class="text-muted">
                                                    {{ $delegated_job->name != '' ? $delegated_job->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Start Date</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {{ $delegated_job->start_date != '' ? $delegated_job->start_date : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>End Date</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {{ $delegated_job->end_date != '' ? $delegated_job->end_date : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Link</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {{ $delegated_job->link != '' ? $delegated_job->link : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Realization</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {{ $delegated_job->realization != '' ? $delegated_job->realization : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <h5>Description</h5>
                                                <p class="text-muted" style="text-align: justify !important;">
                                                    {!! $delegated_job->description != '' ? $delegated_job->description : '-' !!}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

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

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

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

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

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

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

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

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

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

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

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



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

    </div>

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

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

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

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

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

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

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

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

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

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

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

                        Change label Sign In to Log In

                        Delete helper text Insert username & Password

                        Footer change to United in Diversity

                        Log in with Google Button
                    </p>

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

    <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobilist.js"></script>
    <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobibox.min.js"></script>
    <!--This page JavaScript -->
    <script src="{{ asset('back') }}/libs/jquery.repeater/jquery.repeater.min.js"></script>
    <script src="{{ asset('back') }}/extra-libs/jquery.repeater/repeater-init.js"></script>
    <script src="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.js"></script>
    {{-- <script src="{{ asset('back') }}/extra-libs/jquery.repeater/dff.js"></script> --}}
 
<script 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/delegated_job/detail.blade.php</b> on line <b>916</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/delegated_job/detail.blade.php</b> on line <b>916</b><br />

            var options = {
                        height: 275,
                        gantt: {
                            palette: [
                                {
                                    "color": "#fec90f",
                                    "dark": "#1a9bfc"
                                }
                            ]
                        }
                    };

            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

            chart.draw(data, options);

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

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

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

                    detailActivity(actionPlanId);
                }

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

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

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

        var chart_radial_basic = new ApexCharts(
            document.querySelector("#chart-radial-basic"),
            options_basic
        );
        chart_radial_basic.render();
    </script>
    <script>
        function deleteData(id) {
            Swal.fire({
                title: "Delete Delegated job?",
                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('delegated-job.delete') }}",
                        method: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            id: id
                        },
                        success: function(data) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Done',
                                text: 'Delegated Job has been deleted successfully!',
                            }).then(function() {
                                location.href = "{{ route('delegated-job.index') }}";
                            });
                        }
                    });
                }
            })
        }
    </script>
@endsection