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

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

        .l3 {
            padding-left: 2em;
        }

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

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

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

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

                            <img src="{{ asset('uid.png') }}" width="200" alt="">


                        </center>
                    </div>
                    <div>
                        <hr />
                    </div>
                    <div class="card-body pt-0 mt-2">
                        <h5>Unit Lead</h5>
                        <div class="d-flex align-items-center mb-2">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                alt="flexy">
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">
                                    @if(isset($program->unit_lead))
                                        @if(isset($program->unit_lead_relation->nama))
                                            {{ $program->unit_lead_relation->nama }}
                                        @else 
                                            -
                                        @endif
                                    @else
                                        -
                                    @endif
                                <span class="text-muted fs-9">PIC</span>
                            </div>
                        </div>
                        <div>
                            <hr />
                        </div>
                        <h5>Person In Charge</h5>
                        <div class="d-flex align-items-center mb-2">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                alt="flexy">
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">{{ isset($program->person_in_charge) ? $program->person_in_charge_relation->nama_lengkap : '-' }}</h6>
                                <span class="text-muted fs-9">PIC</span>
                            </div>
                        </div>
                        <div>
                            <hr />
                        </div>
                        <h5>Team</h5>
                        @if(isset($program->team))
                        @foreach ($program->team as $data)
                            <div class="d-flex align-items-center mb-2">
                                <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                    alt="flexy">
                                <div class="ms-3">
                                    <h6 class="mb-0 fw-bold">{{ $data->pegawai->nama_lengkap }}</h6>
                                    <span
                                        class="text-muted fs-9">{{ isset($data->pegawai->jabatan->nama) ? $data->pegawai->jabatan->nama : 'no position yet' }}</span>
                                </div>
                            </div>
                        @endforeach
                        @else
                        <div class="d-flex align-items-center mb-2">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                alt="flexy">
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">-</h6>
                                <span
                                    class="text-muted fs-9">-</span>
                            </div>
                        </div>
                        @endif
                        <hr>
                        <h5>Porposed By</h5>
                        <div class="d-flex align-items-center mb-2">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                alt="flexy">
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">
                                    {{ isset($program->proposed_by) ? $program->proposed_by_relation->nama_lengkap : '-' }}
                                </h6>
                            </div>
                        </div>
                        <h5 class="mt-3">Acknowledged By</h5>
                        <div class="d-flex align-items-center mb-3">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                alt="flexy">
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">
                                    {{ isset($program->acknowledge_by) ? $program->acknowledge_by_relation->nama_lengkap : '-' }}
                                </h6>
                            </div>
                        </div>
                        <h5>Approved By</h5>
                        <div class="d-flex align-items-center mb-2">
                            <img src="{{ asset('back') }}/images/users/3.jpg" class="rounded-circle" width="35"
                                alt="flexy">
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">
                                    {{ isset($program->approved_by) ? $program->approved_by_relation->nama_lengkap : '-' }}
                                </h6>
                            </div>
                        </div>


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

                        <a href="{{ route('program.edit', $program->id) }}"
                            class="
                          justify-content-center
                          w-100
                          btn btn-rounded btn-outline-success
                          d-flex
                          align-items-center
                          mt-2
                          mb-2
                        ">
                            Edit Program
                        </a>
                        @if ($program->progress_status == 'approved')
                            <button type="button" id="registrasi_akun"
                                class="
                            justify-content-center
                            w-100
                            btn btn-rounded btn-danger
                            d-flex
                            align-items-center
                            mb-2
                            "
                                onclick="reject()">
                                Reject
                            </button>
                        @elseif($program->progress_status == 'rejected')
                            <button type="button"
                                class="
                      justify-content-center
                      w-100
                      btn btn-rounded btn-primary
                      d-flex
                      align-items-center
                      mb-2
                    "
                                onclick="approve()">
                                Approve
                            </button>
                        @else
                        <button type="button"
                        class="
              justify-content-center
              w-100
              btn btn-rounded btn-primary
              d-flex
              align-items-center
              mb-2
            "
                        onclick="approve()">
                        Approve
                    </button>
                    <button type="button" id="registrasi_akun"
                    class="
                justify-content-center
                w-100
                btn btn-rounded btn-danger
                d-flex
                align-items-center
                mb-2
                "
                    onclick="reject()">
                    Reject
                </button>
                        @endif

                    </div>
                </div>

            </div>

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

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

                    <li class="nav-item">
                        <a href="javascript:void(0)"
                            class="
                  nav-link
                  rounded-pill
                  note-link
                  d-flex
                  align-items-center
                  justify-content-center
                  px-3 px-md-3
                  me-0 me-md-2
                "
                            id="approved-part">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-star feather-sm fill-white me-0 me-md-1">
                                <polygon
                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                                </polygon>
                            </svg><span class="d-none d-md-block font-weight-medium">Budget</span></a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div id="note-full-container" class="note-has-grid row">
                        <div class="col-md-12 single-note-item all-part">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title text-primary">Description</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Name</strong>
                                                <br>
                                                <p class="text-muted">{{ $program->name != '' ? $program->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Cateogry</strong>
                                                <br>
                                                <p class="text-muted">
                                                    {{ $program->ref_kategori_program_id != '' ? $program->ref_kategori_program->nama : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Description</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->description != '' ? $program->description : '-' !!}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Sustainability Impact Focus</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->sustainability_impact_focus != '' ? $program->sustainability_impact_focus : '-' !!}</p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Start Date</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->start_date != '' ? $program->start_date : '-' !!}</p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>End Date</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->end_date != '' ? $program->end_date : '-' !!}</p>
                                            </div>



                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Support Needed</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->support_needed != '' ? $program->support_needed : '-' !!}</p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Funding Model</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->funding_models != '' ? $program->funding_models : '-' !!}</p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Partners</strong>
                                                <br>
                                                <p class="text-muted">
                                                    {{ $program->ref_program_partner_id != '' ? $program->ref_program_partner->name : '-' }}
                                                </p>
                                            </div>
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Stackholders</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->stakholders != '' ? $program->stakholders : '-' !!}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 col-xs-6 b-r">
                                                <strong>Progress Status</strong>
                                                <br>
                                                @if ($program->progress_status == 'approved')
                                                    <span
                                                        class="badge bg-light-primary text-primary font-weight-medium">{{ ucwords($program->progress_status) }}</span>
                                                @elseif($program->progress_status == 'rejected')
                                                    <span
                                                        class="badge bg-light-danger text-danger font-weight-medium">{{ ucwords($program->progress_status) }}</span>
                                                @else
                                                    <span class="badge bg-light-secondary text-secondary font-weight-medium">Reviewed</span>
                                                @endif
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r mt-3">
                                                <strong>Risk Management</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->risk_management != '' ? $program->risk_management : '-' !!}</p>

                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Further Exploration For Discussion</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->further_exploration_for_discussion != '' ? $program->further_exploration_for_discussion : '-' !!}</p>
                                            </div>
                                            <div class="col-md-12 col-xs-12 b-r">
                                                <strong>Decision Making</strong>
                                                <br>
                                                <p class="text-muted">{!! $program->decision_making != '' ? $program->decision_making : '-' !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 approved-part mb-4" style="display: none;">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h4 class="card-title text-primary">Budgetting</h4>
                                </div>
                                <div class="card-content">
                                    <div class="card-body">
                                        <table class="table" id="budgetTable">
                                            <thead>
                                                <tr>
                                                    <th scope="col" class="px-0 text-muted">No</th>
                                                    <th scope="col" class="px-0 text-muted">Description</th>
                                                    <th scope="col" class="px-0 text-muted">Volume</th>
                                                    <th scope="col" class="px-0 text-muted">Unit Cost</th>
                                                    <th scope="col" class="px-0 text-muted">Total (IDR)</th>
                                                    <th scope="col" class="px-0 text-muted">Total (USD)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $increment = 1;
                                                @endphp
                                                @foreach ($program_budget as $data)
                                                    <tr>
                                                        <td>{{ $increment++ }}</td>
                                                        <td>{{ $data->description }}</td>
                                                        <td>{{ $data->volume }}</td>
                                                        <td>{{ number_format($data->unit_cost, 0, ',', '.') }} </td>
                                                        <td>{{ number_format($data->total_idr, 0, ',', '.') }} IDR</td>
                                                        <td>{{ number_format($data->total_usd, 0, ',', '.') }} USD</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title text-primary">Work Timeline</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div id="chart_div"></div>
                        </div>
                    </div>
                </div>
            </div> --}}
            </div>

            {{-- <div class="row">
            <div class="col-sm-12">
              <diclass="cav rd">
                <div class="card-body">
                  <h4 class="card-title mb-2">KANBAN TASKBOARD</h4>
                  <div
                    id="todo-lists-basic-demo"
                    class="position-relative scrollable"
                    style="height: 550px"
                  ></div>
                </div>
              </diclass=>
            </div>
          </div> --}}
        </div>

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

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

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

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

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

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

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

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

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

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

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

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



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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobilist.js"></script>
        <script src="{{ asset('back') }}/extra-libs/taskboard/js/lobibox.min.js"></script>
        {{-- <script src="{{ asset('back') }}/extra-libs/taskboard/js/task-init.js"></script> --}}

        {{-- <script src="../../assets/extra-libs/taskboard/js/lobilist.js"></script>
 <script src="../../assets/extra-libs/taskboard/js/lobibox.min.js"></script>
 <script src="../../assets/extra-libs/taskboard/js/task-init.js"></script>
  --}}
        <script>
            $(document).ready(function() {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                });
                $("#approveProgramForm").validate({
                    rules: {
                        approval_notes: {
                            required: true,
                        },
                    },
                    messages: {
                        approval_notes: {
                            required: "Notes is required",
                        }
                    },
                    submitHandler: function(form) {
                        $("#saveApproveButton").prop('disabled', true);
                        form.submit();
                    }
                });

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

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

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

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

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

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

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

                    $(".datepicker").datepicker({
                        autoclose: true,
                        todayHighlight: true,
                    });
                    $(".lobilist").perfectScrollbar();
                });
            });
        </script>
        <script>
            $(document).ready(function() {
                $('#budgetTable').DataTable();
            });
        </script>


        <script>
            google.charts.load('current', {
                'packages': ['gantt']
            });
            google.charts.setOnLoadCallback(drawChart);

            function daysToMilliseconds(days) {
                return days * 24 * 60 * 60 * 1000;
            }

            function drawChart() {

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Task ID');
                data.addColumn('string', 'Task Name');
                data.addColumn('date', 'Start Date');
                data.addColumn('date', 'End Date');
                data.addColumn('number', 'Duration');
                data.addColumn('number', 'Percent Complete');
                data.addColumn('string', 'Dependencies');

                data.addRows([
                    ['Research', 'Collect Data',
                        new Date(2022, 0, 1), new Date(2022, 0, 5), null, 100, null
                    ],
                    ['Write', 'Create Modules',
                        null, new Date(2022, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'
                    ],
                    ['Cite', 'Login System',
                        null, new Date(2022, 0, 7), daysToMilliseconds(1), 20, 'Research'
                    ],
                    ['Complete', 'CRUD',
                        null, new Date(2022, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'
                    ],
                    ['Outline', 'Roles',
                        null, new Date(2022, 0, 6), daysToMilliseconds(1), 100, 'Research'
                    ]
                ]);

                var options = {
                    height: 275,
                    width: 690
                };

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

                chart.draw(data, options);
            }
        </script>
        <script>
            // Basic Radial Bar Chart -------> RADIAL CHART
            var options_basic = {
                series: [70],
                chart: {
                    fontFamily: '"DM Sans", sans-serif',
                    height: 350,
                    type: "radialBar",
                },
                colors: ["#2962ff"],
                plotOptions: {
                    radialBar: {
                        hollow: {
                            size: "70%",
                        },
                        dataLabels: {
                            value: {
                                color: "#a1aab2",
                                show: true,
                            },
                        },
                    },
                },
                labels: ["Progress"],
            };

            var chart_radial_basic = new ApexCharts(
                document.querySelector("#chart-radial-basic"),
                options_basic
            );
            chart_radial_basic.render();
        </script>

        <script>
            function deleteData(id) {
                Swal.fire({
                    title: "Delete Program?",
                    text: `Are you sure to delete this data?`,
                    icon: "warning",
                    showCancelButton: !0,
                    confirmButtonColor: "rgb(11, 42, 151)",
                    cancelButtonColor: "rgb(209, 207, 207)",
                    confirmButtonText: "Yes, Delete it!",
                    cancelButtonText: "Cancel"
                }).then(function(t) {
                    if (t.value) {
                        $.ajax({
                            url: "{{ route('program.hapus') }}",
                            method: "POST",
                            data: {
                                "_token": "{{ csrf_token() }}",
                                id: id
                            },
                            success: function(data) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Done',
                                    text: 'Program has been deleted successfully!',
                                }).then(function() {
                                    location.href = "{{ route('program.index') }}";
                                });
                            }
                        });

                    }
                })
            }

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

                canvasApprove.show();
            }

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

                canvasReject.show()
            }
        </script>
    @endsection