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

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

        .dropzone .dz-message .dz-button {
            cursor: default !important;
        }

        .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
            cursor: default !important;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <h4 class="text-muted mb-0 fw-normal">Team</h4>
                <h1 class="mb-0 fw-bold">Monitoring Team</h1>
            </div>

        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- Row -->
        <div class="row">
            <!-- Column -->
            <div class="col-md-12">
                <div class="card">
                    <div
                        class="
                      d-flex
                      border-bottom
                      title-part-padding
                      align-items-center
                    ">
                        <h4 class="mb-0">Monitoring</h4>
                    </div>
                    <div class="card-body">
                        <div class="row mt-3">
                            <h4 for="">Team</h4>
                            <div class="col-md-3">
                                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                                    aria-orientation="vertical">
                                    @foreach ($team as $key => $item)
                                        <a class="nav-link {{ $key == 0 ? 'active' : '' }}"
                                            id="v-pills-project-tab{{ $key }}" data-bs-toggle="pill"
                                            href="#v-pills-team{{ $key }}" role="tab"
                                            aria-controls="v-pills-home" aria-selected="false">
                                            <i data-feather="folder"></i><span class="hide-menu"
                                                style="margin-left: 3px !important;">{{ ucwords($item->name) }}</span>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="tab-content" id="v-pills-tabContent">
                                    @foreach ($team as $key => $item)
                                        <div class="tab-pane fade {{ $key == 0 ? 'show active' : '' }}"
                                            id="v-pills-team{{ $key }}" role="tabpanel"
                                            aria-labelledby="pills-home-tab">
                                            <!-- Nav tabs -->
                                            <ul class="nav nav-pills" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-bs-toggle="tab"
                                                        href="#all-project{{ $key }}" role="tab">
                                                        <span>All Project</span>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-bs-toggle="tab"
                                                        href="#in-progress{{ $key }}" role="tab">
                                                        <span>In Progress</span>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-bs-toggle="tab"
                                                        href="#done{{ $key }}" role="tab">
                                                        <span>Done</span>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-bs-toggle="tab"
                                                        href="#verified{{ $key }}" role="tab">
                                                        <span>Verified</span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <!-- Tab panes -->
                                            <div class="tab-content border mt-3">
                                                <div class="tab-pane active p-3" id="all-project{{ $key }}"
                                                    role="tabpanel">
                                                    <div class="row">
                                                        @foreach ($item->action_plan as $key_plan => $plan)
                                                            @if(isset($plan->activity->id))
                                                            @else
                                                                @continue
                                                            @endif
                                                            <div class="col-md-6 card-hover">
                                                                <a href="javascript:void"
                                                                    onclick="modalDetal({{ $plan->activity->id }})">
                                                                    <div class="card">
                                                                        <div class="card-header d-flex justify-content-between">
                                                                            <h5>
                                                                                {{ $plan->activity->title }}
                                                                            </h5>
                                                                            @if ($plan->activity->status == 'todo')
                                                                                <span class="badge bg-light-secondary text-secondary font-weight-medium">In Progress</span>
                                                                            @elseif($plan->activity->status == 'in-progress')
                                                                                <span class="badge bg-light-secondary text-secondary font-weight-medium">In Progress</span>
                                                                            @elseif($plan->activity->status == 'done')
                                                                                <span class="badge bg-light-primary text-primary font-weight-medium">Done</span>
                                                                            @elseif($plan->activity->status == 'verified')
                                                                                <span class="badge bg-light-success text-success font-weight-medium">Verified</span>
                                                                            @endif
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="mb-4"
                                                                                style="display: flex !important; justify-content: flex-start !important;">
                                                                                @foreach ($plan->activity->get_asignee as $asignee)
                                                                                    @php
                                                                                        if (Storage::exists($asignee->get_user->photos)) {
                                                                                            $image = env('APP_URL') . Storage::url($asignee->get_user->photos);
                                                                                        } else {
                                                                                            $image = asset($asignee->get_user->photos);
                                                                                        }
                                                                                    @endphp
                                                                                    <img src="{{ $image }}"
                                                                                        data-bs-toggle="tooltip"
                                                                                        data-bs-placement="top"
                                                                                        title=""
                                                                                        class="rounded-circle"
                                                                                        style="width: 38px;height: 38px;object-fit: cover;"
                                                                                        data-bs-original-title="{{ $asignee->get_user->name }}"
                                                                                        aria-label="{{ $asignee->get_user->name }}">
                                                                                @endforeach
                                                                            </div>
                                                                            <div
                                                                                class="d-flex justify-content-between border-top">
                                                                                <h6 class="mt-3">Progress</h6>
                                                                                {{-- <h6 class="text-muted mt-3">11/14 tasks</h6> --}}
                                                                            </div>
                                                                            <div class="progress" style="height: 10px">
                                                                                @if ($plan->activity->status == 'todo')
                                                                                    <div class="progress-bar bg-primary"
                                                                                        style="width: 0%"
                                                                                        role="progressbar">
                                                                                        0%
                                                                                    </div>
                                                                                @elseif($plan->activity->status == 'in-progress')
                                                                                    <div class="progress-bar bg-primary"
                                                                                        style="width: 50%"
                                                                                        role="progressbar">
                                                                                        50%
                                                                                    </div>
                                                                                @elseif($plan->activity->status == 'done')
                                                                                    <div class="progress-bar bg-primary"
                                                                                        style="width: 75%"
                                                                                        role="progressbar">
                                                                                        75%
                                                                                    </div>
                                                                                @elseif($plan->activity->status == 'verified')
                                                                                    <div class="progress-bar bg-primary"
                                                                                        style="width: 100%"
                                                                                        role="progressbar">
                                                                                        100%
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <div class="tab-pane p-3" id="in-progress{{ $key }}"
                                                    role="tabpanel">
                                                    <div class="row">
                                                        @foreach ($item->action_plan_progress as $key_plan => $plan)
                                                            <div class="col-md-6 card-hover">
                                                                <a href="javascript:void"
                                                                onclick="modalDetal({{ $plan->activity->id }})">
                                                                    <div class="card">
                                                                        <div class="card-header d-flex justify-content-between">
                                                                            <h5>
                                                                                {{ $plan->activity->title }}
                                                                            </h5>
                                                                            <span class="badge bg-light-secondary text-secondary font-weight-medium">In Progress</span>
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="mb-4"
                                                                                style="display: flex !important; justify-content: flex-start !important;">
                                                                                @foreach ($plan->activity->get_asignee as $asignee)
                                                                                    @php
                                                                                        if (Storage::exists($asignee->get_user->photos)) {
                                                                                            $image = env('APP_URL') . Storage::url($asignee->get_user->photos);
                                                                                        } else {
                                                                                            $image = asset($asignee->get_user->photos);
                                                                                        }
                                                                                    @endphp
                                                                                    <img src="{{ $image }}"
                                                                                        data-bs-toggle="tooltip"
                                                                                        data-bs-placement="top"
                                                                                        title=""
                                                                                        class="rounded-circle"
                                                                                        style="width: 38px;height: 38px;object-fit: cover;"
                                                                                        data-bs-original-title="{{ $asignee->get_user->name }}"
                                                                                        aria-label="{{ $asignee->get_user->name }}">
                                                                                @endforeach
                                                                            </div>
                                                                            <div
                                                                                class="d-flex justify-content-between border-top">
                                                                                <h6 class="mt-3">Progress</h6>
                                                                                {{-- <h6 class="text-muted mt-3">11/14 tasks</h6> --}}
                                                                            </div>
                                                                            <div class="progress" style="height: 10px">
                                                                                <div class="progress-bar bg-primary"
                                                                                    style="width: 50%" role="progressbar">
                                                                                    50%
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <div class="tab-pane p-3" id="done{{ $key }}" role="tabpanel">
                                                    <div class="row">
                                                        @foreach ($item->action_plan_done as $key_plan => $plan)
                                                            <div class="col-md-6 card-hover">
                                                                <a href="javascript:void"
                                                                onclick="modalDetal({{ $plan->activity->id }})">
                                                                    <div class="card">
                                                                        <div class="card-header d-flex justify-content-between">
                                                                            <h5>
                                                                                {{ $plan->activity->title }}
                                                                            </h5>
                                                                            <span class="badge bg-light-primary text-primary font-weight-medium">Done</span>
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="mb-4"
                                                                                style="display: flex !important; justify-content: flex-start !important;">
                                                                                @foreach ($plan->activity->get_asignee as $asignee)
                                                                                    @php
                                                                                        if (Storage::exists($asignee->get_user->photos)) {
                                                                                            $image = env('APP_URL') . Storage::url($asignee->get_user->photos);
                                                                                        } else {
                                                                                            $image = asset($asignee->get_user->photos);
                                                                                        }
                                                                                    @endphp
                                                                                    <img src="{{ $image }}"
                                                                                        data-bs-toggle="tooltip"
                                                                                        data-bs-placement="top"
                                                                                        title=""
                                                                                        class="rounded-circle"
                                                                                        style="width: 38px;height: 38px;object-fit: cover;"
                                                                                        data-bs-original-title="{{ $asignee->get_user->name }}"
                                                                                        aria-label="{{ $asignee->get_user->name }}">
                                                                                @endforeach
                                                                            </div>
                                                                            <div
                                                                                class="d-flex justify-content-between border-top">
                                                                                <h6 class="mt-3">Progress</h6>
                                                                                {{-- <h6 class="text-muted mt-3">11/14 tasks</h6> --}}
                                                                            </div>
                                                                            <div class="progress" style="height: 10px">
                                                                                <div class="progress-bar bg-primary"
                                                                                    style="width: 75%"
                                                                                    role="progressbar">
                                                                                    75%
                                                                                </div>
                                                                            </div>
                                                                        </div>

                                                                    </div>
                                                                </a>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <div class="tab-pane p-3" id="verified{{ $key }}" role="tabpanel">
                                                    <div class="row">
                                                        @foreach ($item->action_plan_verified as $key_plan => $plan)
                                                            <div class="col-md-6 card-hover">
                                                                <a href="javascript:void"
                                                                    onclick="modalDetal({{ $plan->activity->id }})">
                                                                    <div class="card">
                                                                        <div class="card-header d-flex justify-content-between">
                                                                            <h5>
                                                                                {{ $plan->activity->title }}
                                                                            </h5>
                                                                            <span class="badge bg-light-success text-success font-weight-medium">Verified</span>
                                                                        </div>
                                                                        <div class="card-body">
                                                                            <div class="mb-4"
                                                                                style="display: flex !important; justify-content: flex-start !important;">
                                                                                @foreach ($plan->activity->get_asignee as $asignee)
                                                                                    @php
                                                                                        if (Storage::exists($asignee->get_user->photos)) {
                                                                                            $image = env('APP_URL') . Storage::url($asignee->get_user->photos);
                                                                                        } else {
                                                                                            $image = asset($asignee->get_user->photos);
                                                                                        }
                                                                                    @endphp
                                                                                    <img src="{{ $image }}"
                                                                                        data-bs-toggle="tooltip"
                                                                                        data-bs-placement="top"
                                                                                        title=""
                                                                                        class="rounded-circle"
                                                                                        style="width: 38px;height: 38px;object-fit: cover;"
                                                                                        data-bs-original-title="{{ $asignee->get_user->name }}"
                                                                                        aria-label="{{ $asignee->get_user->name }}">
                                                                                @endforeach
                                                                            </div>
                                                                            <div
                                                                                class="d-flex justify-content-between border-top">
                                                                                <h6 class="mt-3">Progress</h6>
                                                                                {{-- <h6 class="text-muted mt-3">11/14 tasks</h6> --}}
                                                                            </div>
                                                                            <div class="progress" style="height: 10px">
                                                                                <div class="progress-bar bg-primary"
                                                                                    style="width: 100%"
                                                                                    role="progressbar">
                                                                                    100%
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

                    <input type="hidden" 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"
                            onclick="titleInput()">
                            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" onclick="actionPlanInput()">- 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>

                        <div class="row mt-3">
                            <div class="col-sm-6">
                                <h5>Start Date :</h5>
                                <p id="startDateModal" style="display: none;" onclick="startDateInput()">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;" onclick="endDateInput()">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 mt-4">
                            <h5 for="formFile" class="form-label">Attachment</h5>
                            <div class="needsclick dropzone add-dropzone" id="document-edit-dropzone">
                            </div>
                        </div>



                        <h5 style="margin-top: 20px !important;" id="asigneeLabel">Assignee</h5>
                        <div class="row" id="asigneeWrap">

                        </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="initCommentWrap">

                        </div>
                        <div class="row" id="commentWrap">

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

                        </div>

                    </div>

                    <br>
                    <br>
                    <br>
                    <br>

                </form>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.min.js"></script>
    <!-- Chart JS -->
    {{-- <script src="{{ asset('back') }}/js/pages/dashboards/dashboard1.js"></script> --}}
    {{-- <script src="{{ asset('back') }}/js/pages/apex-chart/apex.radial.init.js"></script> --}}
    <script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <!-- start - This is for export functionality only -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="{{ asset('back') }}/libs/apexcharts/dist/apexcharts.min.js"></script>
    <script src="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.js"></script>

    <script>
        function modalDetal(value_id) {
            $("#editActivityId").val(value_id);
            $("#detail_kanban").modal('show');
            
            //disable the click of your clickable area
            $(".dz-hidden-input").prop("disabled",true);

            $.ajax({
                    url: "{{ route('monitoring-team.get-detail') }}",
                    method: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        id_edit: value_id
                    },
                    success: function(result) {
    
                        var kanbanWrap = JSON.parse(result);

                      
       
                        console.log(kanbanWrap[0]);
    
                                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;");
    
                                    $('#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;");
    
                                    $('#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;");
                                }
    
    
                                var init_comment = "";
                                init_comment += '<div class="col-sm-1 mt-4">';
                                init_comment += '</div>';
                                init_comment += '<div class="col-sm-11">';
                                init_comment +=
                                    '    <textarea class="form-control mt-3" cols="30" rows="5"';
                                init_comment +=
                                    '        style="margin-left: -18px !important;display: none;" id="textEditorComment" placeholder="Add your comment here...">';
                                init_comment += '    </textarea>';
                                init_comment +=
                                    '    <div id="button-comment-wrap" style="display: none;">';
                                init_comment +=
                                    '        <button type="button" class="btn btn-sm btn-primary mt-3"';
                                init_comment +=
                                    '            style="margin-left: -18px;" onclick="saveComment()">Save</button>';
                                init_comment +=
                                    '        <button type="button" class="btn btn-sm btn-light mt-3" style="margin-left: 5px;"';
                                init_comment +=
                                    '             onclick="cancelComment()">Cancel</button>';
                                init_comment += '     </div>';
                                init_comment += '  </div>';
    
                                $("#initCommentWrap").html(init_comment);
    
                                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 += '                <div class="flex" id="optionComment' +
                                            value.id +
                                            '"><button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                                        value.id +
                                        '`)"></button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' + value.id + '`)"></button></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);
                                    }
                                }
    
                    }
                });   
                
                
        }
    </script>

<script>
    var uploadedEditDocumentMap = {}
    Dropzone.options.documentEditDropzone = {
        url: '{{ route('activity.edit-attachment') }}',
        clickable: false,
        maxFilesize: 1000000, // MB
        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) {
            
        },
        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: "{{ route('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 += '                <div class="flex" id="optionComment' +
                                value.id +
                                '"><button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                            value.id +
                            '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                            value.id + '`)">Delete</button></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 += '                <div class="flex" id="optionComment' +
                                value.id +
                                '"><button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                            value.id +
                            '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                            value.id + '`)">Delete</button></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');
            $("#initCommentWrap").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');
            $("#initCommentWrap").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 += '                <div class="flex" id="optionComment' +
                            value.id +
                            '"><button class="btn" id="commentEditInputButton" type="button" style="margin-left: -29px !important;font-size: 14px !important;" onclick="editComment(`' +
                        value.id +
                        '`)">Edit</button><button type="button" class="btn" style="margin-left: -15px !important;font-size: 14px !important;" onclick="deleteComment(`' +
                        value.id + '`)">Delete</button></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');
            $("#initCommentWrap").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>
@endsection