@extends('layouts.admin.index')

@section('content')
  <div id="main-wrapper">
    <!-- Sidebar -->
    @include('layouts.admin.sidebar')
    <div class="page-wrapper">

      @include('layouts.admin.header')

      <div class="body-wrapper">
        <div class="container-fluid">
          {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('StakeholderAnalysisAdd') }}
          <div class="card w-100">
            {{-- <div class="card-body"> --}}
            <div class="card-body f1">
              <div class="row f1-steps">
                <div class="col-12 col-md-4 f1-step active">
                  <div class="f1-step-icon text-center"><span>1</span></div>
                  <div class="step-text">Penentuan Indikator Utama</div>
                </div>
                <div class="col-12 col-md-4 f1-step">
                  <div class="f1-step-icon text-center"><span>2</span></div>
                  <div class="step-text">Membuat Pohon Outcome</div>
                </div>
                <div class="col-12 col-md-4 f1-step">
                  <div class="f1-step-icon text-center"><span>3</span></div>
                  <div class="step-text">Data Potensi KMP</div>
                </div>
              </div>
              <form
                action="{{ route('stakeholder.store') }}"
                method="POST"
                class="mt-5"
                x-data="mspData({
                  rad_id: @json($model->rad_id),
                })"
                x-init="
                  init();

                "
                id="form-solution"
                @set-load-jquery.window="loadedJquery()"
              >
                <input type="hidden" name="id" value="{{ $model->id }}" />
                {{ csrf_field() }}
                <!-- Step 1 -->
                <fieldset>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="mb-3">
                        <div>
                          <label class="form-label" for="rad_id">Periode RAD</label>
                        </div>

                        <select class="form-select select2" id="select-rad" data-live-search="true" name="rad_id" x-model="rad_id">
                          <option value="" @disabled($disabled)>Pilih RAD</option>
                          <template x-for="r in rads" :key="r.id">
                            <option :value="r.id" x-text="`${r.name} (${r.year_start} - ${r.year_end})`" :selected="r.id == rad_id" @disabled($disabled)></option>
                          </template>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-12">
                      <button class="btn btn-primary me-2" type="button" @click="getPrimaryIndicators()">Cari Indikator Utama</button>
                    </div>
                  </div>
                  <template x-if="primaryIndicators.length > 0">
                    <div class="row mb-3">
                      <template x-for="(pIndicator, indexS) in primaryIndicators" :key="`primary-indicator-${indexS}`">
                        <div class="col-12">
                          <div class="card border mb-3">
                            <div class="card-header fw-bold d-flex justify-content-between p-2 align-items-center border-bottom gap-3">
                              <span class="fs-6" x-text="'['+pIndicator.code+'] '+pIndicator.name"></span>
                              <button type="button" class="btn btn-outline-primary" @click="selectPrimaryIndicator(pIndicator.id)">Pilih Indikator Utama</button>
                            </div>
                            <div class="card-body p-2">
                              <div class="row g-1">
                                <div class="col-6">
                                  <div class="card border">
                                    <div class="card-header text-bg-info fw-bold">
                                      Matrik 2B
                                    </div>
                                    <div class="card-body p-0">
                                      <template x-for="(act, index) in pIndicator.programs.matrix2b" :key="`2b-program-${index}`">
                                        <div>
                                          <div class="row p-2">
                                            <div class="col-12">
                                              <div class="ms-2 fw-bold fs-5" x-text="act.institution.name + '('+act.activityCount+')'"></div>
                                            </div>
                                          </div>
                                          <template x-for="(indicator, indexI) in act.indicators" :key="`indicator-${index}-${indexI}`">
                                            <template x-for="(program, indexP) in indicator.programs" :key="`program-${index}-${indexI}-${indexP}`">
                                              <div>
                                                <div class="row p-2 pl-4">
                                                  <div class="col-12">
                                                    <div class="ms-3" x-text="program.program_name + '('+program.activityCount+')'"></div>
                                                  </div>
                                                </div>
                                                <template x-for="(activity, indexA) in program.activities" :key="`activity-${index}-${indexI}-${indexP}-${indexA}`">
                                                  <div class="row p-2 pl-8">
                                                    <div class="col-12 d-flex">
                                                      <div class="ms-4">
                                                        <i class="fs-4 ti ti-notes me-2"></i>
                                                        <span x-text="activity.activity_name"></span>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </template>
                                              </div>
                                            </template>
                                          </template>
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-6">
                                  <div class="card border">
                                    <div class="card-header text-bg-warning fw-bold">
                                      Matrik 3
                                    </div>
                                    <div class="card-body p-0">
                                      <template x-for="(act, index) in pIndicator.programs.matrix3" :key="`matrix3-program-${index}`">
                                        <div>
                                          <div class="row p-2">
                                            <div class="col-12">
                                              <div class="ms-2 fw-bold fs-5" x-text="act.institution.name + '('+act.activityCount+')'"></div>
                                            </div>
                                          </div>
                                          <template x-for="(indicator, indexI) in act.indicators" :key="`indicator-${index}-${indexI}`">
                                            <template x-for="(program, indexP) in indicator.programs" :key="`program-${index}-${indexI}-${indexP}`">
                                              <div>
                                                <div class="row p-2 pl-4">
                                                  <div class="col-12">
                                                    <div class="ms-3" x-text="program.program_name + '('+program.activityCount+')'"></div>
                                                  </div>
                                                </div>
                                                <template x-for="(activity, indexA) in program.activities" :key="`activity-${index}-${indexI}-${indexP}-${indexA}`">
                                                  <div class="row p-2 pl-8">
                                                    <div class="col-12 d-flex">
                                                      <div class="ms-4">
                                                        <i class="fs-4 ti ti-notes me-2"></i>
                                                        <span x-text="activity.activity_name"></span>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </template>
                                              </div>
                                            </template>
                                          </template>
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-4 d-none">
                                  <div class="card border">
                                    <div class="card-header text-bg-success fw-bold">
                                      Matrik 4
                                    </div>
                                    <div class="card-body p-0">
                                      <template x-for="(act, index) in pIndicator.programs.matrix4" :key="`matrix4-program-${index}`">
                                        <div>
                                          <div class="row p-2">
                                            <div class="col-12">
                                              <div class="ms-2 fw-bold fs-5" x-text="act.institution.name + '('+act.activityCount+')'"></div>
                                            </div>
                                          </div>
                                          <template x-for="(indicator, indexI) in act.indicators" :key="`indicator-${index}-${indexI}`">
                                            <template x-for="(program, indexP) in indicator.programs" :key="`program-${index}-${indexI}-${indexP}`">
                                              <div>
                                                <div class="row p-2 pl-4">
                                                  <div class="col-12">
                                                    <div class="ms-3" x-text="program.program_name + '('+program.activityCount+')'"></div>
                                                  </div>
                                                </div>
                                                <template x-for="(activity, indexA) in program.activities" :key="`activity-${index}-${indexI}-${indexP}-${indexA}`">
                                                  <div class="row p-2 pl-8">
                                                    <div class="col-12 d-flex">
                                                      <div class="ms-4">
                                                        <i class="fs-4 ti ti-notes me-2"></i>
                                                        <span x-text="activity.activity_name"></span>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </template>
                                              </div>
                                            </template>
                                          </template>
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </template>
                  <div class="d-flex w-100 justify-content-center gap-2 mt-4 d-none">
                    <button type="button" class="btn btn-primary btn-next btn-primary-indicator-next" >Selanjutnya</button>
                  </div>
                </fieldset>
                <fieldset>
                  <div class="row">
                    <div class="col-md-12">
                      <span class="mb-1 badge text-bg-primary">Indikator Utama</span>
                      <h3 x-text="'['+selectedPrimaryIndicator?.code+']' + selectedPrimaryIndicator?.name"></h3>
                    </div>
                    <div class="col-12 border-top my-3 pt-3">
                      <div class="row">
                        <div class="col-md-6">
                          <div class="mb-3 fv-row">
                            <div>
                              <label class="form-label" for="pillar_id">Pilar</label>
                            </div>
                            <select class="form-select select2" id="select-pillar" data-live-search="true" name="pillar_id" x-model="pillar_id">
                              <option value="" @disabled($disabled)>Pilih Pillar</option>
                              <template x-for="pillar in pillars" :key="pillar.id">
                                <option :value="pillar.id" x-text="pillar.name" :selected="pillar.id == pillar_id" @disabled($disabled)></option>
                              </template>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <div>
                              <label class="form-label" for="metadata_purpose_id">Tujuan</label>
                            </div>
                            <select class="form-select select2" id="select-purpose" data-live-search="true" name="metadata_purpose_id" x-model="metadata_purpose_id">
                              <option value="" @disabled($disabled)>Pilih Tujuan</option>
                              <template x-for="p in purposes" :key="p.id">
                                <option :value="p.id" x-text="`[${p.code}] ${p.name}`" :selected="p.id == metadata_purpose_id" @disabled($disabled)></option>
                              </template>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="mb-3">
                            <div>
                              <label class="form-label" for="metadata_target_id">Target</label>
                            </div>
                            <select class="form-select select2" id="select-target" data-live-search="true" name="metadata_target_id" x-model="metadata_target_id">
                              <option value="">Pilih Target</option>
                              <template x-for="t in targets" :key="t.id">
                                <option :value="t.id" x-text="`[${t.code}] ${t.name}`" :selected="t.id == metadata_target_id"></option>
                              </template>
                            </select>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="mb-3">
                            <div>
                              <label class="form-label" for="metadata_indicator_id">Indikator</label>
                            </div>
                            <select class="form-select select2" id="select-indicator" data-live-search="true" name="metadata_indicator_id" x-model="metadata_indicator_id" data-placeholder="Pilih Indikator">
                              <option value="">Pilih Indikator</option>
                              <template x-for="i in indicators" :key="i.id">
                                <option :value="i.id" x-text="`[${i.code}] ${i.name}`" @disabled($disabled)></option>
                              </template>
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="row d-flex align-items-end">
                        <div class="col-6">
                          <div>
                            <label class="form-label">Nama Outcome</label>
                          </div>
                          <input type="text" class="form-control" x-model="solutionName" placeholder="Nama Outcome"/>
                        </div>
                        <div class="col-6">
                          <button class="btn btn-primary" type="button" @click="addSolutions()">Tambah Outcome</button>
                          <template x-if="solutions.length > 0">
                            <button type="button" class="btn btn-warning" @click="showSolution()">Pohon Outcome</button>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row mb-3" x-show="showSolutionFlag">
                    <div class="col-12">
                      <div class="card border">
                        <div class="card-body position-relative">
                          <div class="d-flex top-0 end-0 mt-3 me-3 position-absolute gap-2" style="z-index:2">
                            <div class="btn-group">
                              <button type="button" class="me-0 btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Tampilan: <span x-text="showSolutionView === 'tree' ? 'Tree View' : 'Network'"></span>
                              </button>
                              <div class="dropdown-menu dropdown-menu-start" style="">
                                <button class="dropdown-item" type="button" @click="switchView('network')">
                                  Network
                                </button>
                                <button class="dropdown-item" type="button" @click="switchView('tree')">
                                  Tree View
                                </button>
                              </div>
                            </div>
                            <button type="button" class="btn btn-warning d-block " @click="showFullscreen()"><i class="ti ti-arrows-maximize"></i></button>
                            <button type="button" class="btn btn-danger d-block " @click="hideSolution()"><i class="ti ti-x"></i></button>
                          </div>
                          <div id="mynetwork" class="w-100 bg-white" style="height: 400px;z-index:1;position: relative" x-show="showSolutionView === 'network'"></div>
                          <div x-show="showSolutionView === 'tree'" class="row bg-white" id="tree-view"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <template x-if="solutions.length > 0">
                    <div class="row mb-3 border-top mt-3 pt-3">
                      <div class="col-12 mb-3">
                        <h5>Daftar Outcome</h5>
                      </div>
                      <template x-for="(solution, indexS) in solutions" :key="`solution-${indexS}`">
                        <div class="col-12" :id="`solution-${indexS}`">
                          <div class="card border mb-3">
                            <div class="card-header fw-bold d-flex flex-column align-items-start p-2 position-relative">
                              <template x-if="indexS !== 0">
                                <button class="btn btn-danger position-absolute top-0 end-0 mt-2 me-2" @click="deleteSolution(indexS)"><i class="ti ti-trash"></i></button>
                              </template>
                              <span class="mb-1 badge text-bg-primary" x-text="'['+solution.indicator.code+'] '+solution.indicator.name">Indikator Utama</span>
                              <div class="mb-3 w-100">
                                <div>
                                  <label class="form-label" for="pillar_id">Nama Outcome</label>
                                </div>
                                <input type="hidden" :name="`solutions[${indexS}][metadata_indicator_id]`" :value="solution.indicator.id"/>
                                <input class="form-control" :name="`solutions[${indexS}][name]`" x-model="solutions[indexS].name" placeholder="Nama Outcome"/>
                              </div>
                              <div class="mb-3 w-100">
                                <div>
                                  <label class="form-label">Catatan</label>
                                </div>
                                <input class="form-control" :name="`solutions[${indexS}][notes]`" x-model="solutions[indexS].notes" placeholder="Catatan"/>
                              </div>
                            </div>
                            <div class="card-body p-2">
                              <div class="row g-1">
                                <div class="col-6">
                                  <div class="card border">
                                    <div class="card-header text-bg-info fw-bold">
                                      Matrik 2B
                                    </div>
                                    <div class="card-body p-0">
                                      <template x-for="(act, index) in solution.programs.matrix2b" :key="`2b-program-${index}`">
                                        <div>
                                          <div class="row p-2">
                                            <div class="col-12">
                                              <div class="ms-2 fw-bold fs-5" x-text="act.institution.name + '('+act.activityCount+')'"></div>
                                            </div>
                                          </div>
                                          <template x-for="(indicator, indexI) in act.indicators" :key="`indicator-${index}-${indexI}`">
                                            <template x-for="(program, indexP) in indicator.programs" :key="`program-${index}-${indexI}-${indexP}`">
                                              <div>
                                                <div class="row p-2 pl-4">
                                                  <div class="col-12">
                                                    <div class="ms-3" x-text="program.program_name + '('+program.activityCount+')'"></div>
                                                  </div>
                                                </div>
                                                <template x-for="(activity, indexA) in program.activities" :key="`activity-${index}-${indexI}-${indexP}-${indexA}`">
                                                  <div class="row p-2 pl-8">
                                                    <div class="col-12 d-flex">
                                                      <div class="ms-4">
                                                        <input type="checkbox" class="form-check-input" :name="`solutions[${indexS}][programs][matrix2b][${index}][indicators][${indexI}][programs][${indexP}][activities][${indexA}][activity_id]`" x-model="solutions[indexS].programs.matrix2b[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].checked" :value="solutions[indexS].programs.matrix2b[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].id"  :checked="solutions[indexS].programs.matrix2b[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].checked">
                                                        <input type="hidden" class="form-check-input" :name="`solutions[${indexS}][programs][matrix2b][${index}][indicators][${indexI}][programs][${indexP}][activities][${indexA}][actor_id]`" x-model="solutions[indexS].programs.matrix2b[index].institution.id" :value="solutions[indexS].programs.matrix2b[index].institution.id"  />
                                                        <span x-text="activity.activity_name"></span>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </template>
                                              </div>
                                            </template>
                                          </template>
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-6">
                                  <div class="card border">
                                    <div class="card-header text-bg-warning fw-bold">
                                      Matrik 3
                                    </div>
                                    <div class="card-body p-0">
                                      <template x-for="(act, index) in solution.programs.matrix3" :key="`matrix3-program-${index}`">
                                        <div>
                                          <div class="row p-2">
                                            <div class="col-12">
                                              <div class="ms-2 fw-bold fs-5" x-text="act.institution.name + '('+act.activityCount+')'"></div>
                                            </div>
                                          </div>
                                          <template x-for="(indicator, indexI) in act.indicators" :key="`indicator-${index}-${indexI}`">
                                            <template x-for="(program, indexP) in indicator.programs" :key="`program-${index}-${indexI}-${indexP}`">
                                              <div>
                                                <div class="row p-2 pl-4">
                                                  <div class="col-12">
                                                    <div class="ms-3" x-text="program.program_name + '('+program.activityCount+')'"></div>
                                                  </div>
                                                </div>
                                                <template x-for="(activity, indexA) in program.activities" :key="`activity-${index}-${indexI}-${indexP}-${indexA}`">
                                                  <div class="row p-2 pl-8">
                                                    <div class="col-12 d-flex">
                                                      <div class="ms-4">
                                                        <input type="checkbox" class="form-check-input" :name="`solutions[${indexS}][programs][matrix3][${index}][indicators][${indexI}][programs][${indexP}][activities][${indexA}][activity_id]`" x-model="solutions[indexS].programs.matrix3[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].checked" :value="solutions[indexS].programs.matrix3[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].id"  :checked="solutions[indexS].programs.matrix3[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].checked">
                                                        <input type="hidden" class="form-check-input" :name="`solutions[${indexS}][programs][matrix3][${index}][indicators][${indexI}][programs][${indexP}][activities][${indexA}][actor_id]`" x-model="solutions[indexS].programs.matrix3[index].institution.id" :value="solutions[indexS].programs.matrix3[index].institution.id"  />
                                                        <span x-text="activity.activity_name"></span>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </template>
                                              </div>
                                            </template>
                                          </template>
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-4 d-none">
                                  <div class="card border">
                                    <div class="card-header text-bg-success fw-bold">
                                      Matrik 4
                                    </div>
                                    <div class="card-body p-0">
                                      <template x-for="(act, index) in solution.programs.matrix4" :key="`matrix4-program-${index}`">
                                        <div>
                                          <div class="row p-2">
                                            <div class="col-12">
                                              <div class="ms-2 fw-bold fs-5" x-text="act.institution.name + '('+act.activityCount+')'"></div>
                                            </div>
                                          </div>
                                          <template x-for="(indicator, indexI) in act.indicators" :key="`indicator-${index}-${indexI}`">
                                            <template x-for="(program, indexP) in indicator.programs" :key="`program-${index}-${indexI}-${indexP}`">
                                              <div>
                                                <div class="row p-2 pl-4">
                                                  <div class="col-12">
                                                    <div class="ms-3" x-text="program.program_name + '('+program.activityCount+')'"></div>
                                                  </div>
                                                </div>
                                                <template x-for="(activity, indexA) in program.activities" :key="`activity-${index}-${indexI}-${indexP}-${indexA}`">
                                                  <div class="row p-2 pl-8">
                                                    <div class="col-12 d-flex">
                                                      <div class="ms-4">
                                                        <input type="checkbox" class="form-check-input" :name="`solutions[${indexS}][programs][matrix4][${index}][indicators][${indexI}][programs][${indexP}][activities][${indexA}][activity_id]`" x-model="solutions[indexS].programs.matrix4[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].checked" :value="solutions[indexS].programs.matrix4[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].id"  :checked="solutions[indexS].programs.matrix4[index]['indicators'][indexI]['programs'][indexP]['activities'][indexA].checked">
                                                        <input type="hidden" class="form-check-input" :name="`solutions[${indexS}][programs][matrix4][${index}][indicators][${indexI}][programs][${indexP}][activities][${indexA}][actor_id]`" x-model="solutions[indexS].programs.matrix4[index].institution.id" :value="solutions[indexS].programs.matrix4[index].institution.id"  />
                                                        <span x-text="activity.activity_name"></span>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </template>
                                              </div>
                                            </template>
                                          </template>
                                        </div>
                                      </template>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </template>
                  <div class="d-flex w-100 justify-content-center gap-2 mt-4">
                    <button type="button" class="btn btn-primary btn-next" >Selanjutnya</button>
                  </div>
                </fieldset>
                <!-- Step 3 -->
                <fieldset>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="mb-3">
                        <label class="form-label" for="title">Nama Analisis</label>
                        <input type="text" class="form-control" id="name" name="name" x-model="saName" value="{{ old('name', $model->name) }}" />
                      </div>
                      <div class="mb-3">
                        <label class="form-label" for="description">Deskripsi</label>
                        <textarea name="description" id="description" rows="4" class="form-control">{{ old('description', $model->description) }}</textarea>
                      </div>
                    </div>
                  </div>
                  <div class="d-flex w-100 justify-content-center gap-2 mt-4">
                    <input type="hidden" name="primary_indicator_id" x-model="selectedPrimaryIndicatorId" />
                    <button type="button" class="btn btn-light btn-previous">Sebelumnya</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('styles')
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/js/visjs/vis-network.min.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/js/skd3/sk.d3.min.css') }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/js/bootstrap-tree/dist/bootstrap-treeview.min.css') }}">
@endpush
@push('scripts')
  <script src="{{ asset('assets/js/visjs/vis.min.js') }}"></script>
  <script>
    function mspData(data) {
      return {
        rads: [],
        pillars: [],
        purposes: [],
        targets: [],
        indicators: [],
        primaryIndicators: [],
        title: @json(old('title', $model->name)) || '',
        rad_id: @json(old('rad_id', $model->rad_id)) || '',
        pillar_id: null,
        metadata_purpose_id: null,
        metadata_target_id: null,
        metadata_indicator_id: null,
        selectedRad: null,
        selectedPrimaryIndicator: null,
        selectedPrimaryIndicatorId: null,
        showData: false,
        dataEmpty: false,
        solutionName: '',
        solutions: [],
        showSolutionFlag: false,
        showSolutionView: 'network',
        saName: '',
        init() {
          this.getRads();
          if (this.rad_id) {
            this.selectRad();
          }
          $('#select-rad').on('change', () => {
            this.rad_id = $('#select-rad').val();
            this.selectRad();
          });
          $('#select-pillar').on('change', () => {
            this.pillar_id = $('#select-pillar').val();
            this.getPurposes();
          });
          $('#select-purpose').on('change', () => {
            this.metadata_purpose_id = $('#select-purpose').val();
            this.getTargets();
          });
          $('#select-target').on('change', () => {
            this.metadata_target_id = $('#select-target').val();
            this.getIndicators();
          });
          $('#select-indicator').on('change', () => {
            this.metadata_indicator_id = $('#select-indicator').val();
          });
        },

        selectRad() {
          this.selectedRad = this.rads.find((r) => r.id === Number(this.rad_id));
          this.getPillars();
        },

        getRads() {
          fetch(`/api/rads-by-matrix1`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({})
          })
            .then(response => response.json())
            .then(res => {
              this.rads = res.data;
              if (data.rad_id) {
                this.rad_id = data.rad_id;
              }
            })
            .catch(error => console.error('Error fetching target and indicator:', error));
        },

        getPrimaryIndicators() {
          this.selectedPrimaryIndicator = null;

          if (this.rad_id) {
            fetch(`/api/indicators-msp`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              },
              body: JSON.stringify({ rad_id: this.rad_id })
            })
              .then(response => response.json())
              .then(res => {
                this.primaryIndicators = res.data;
                if(this.primaryIndicators.length === 0){
                  window.Swal.fire({
                    title: "Error",
                    text: 'Data Indikator Utama Tidak Ditemukan',
                    icon: "error"
                  });
                }
              })
              .catch(error => console.error('Error fetching target and indicator:', error));
          } else {
            this.primaryIndicators = [];
          }
        },

        selectPrimaryIndicator(indicator_id){
          this.selectedPrimaryIndicatorId = indicator_id;
          this.selectedPrimaryIndicator = this.primaryIndicators.find(p => Number(p.id) === Number(indicator_id))
          this.saName = `${this.selectedPrimaryIndicator.code}. ${this.selectedPrimaryIndicator.name}`
          this.solutions.push({
            metadata_indicator_id: this.selectedPrimaryIndicator.id,
            indicator: {
              id: this.selectedPrimaryIndicator.id,
              code: this.selectedPrimaryIndicator.code,
              name: this.selectedPrimaryIndicator.name,
            },
            name: this.selectedPrimaryIndicator.name,
            notes: '',
            programs: {
              matrix2b: JSON.parse(JSON.stringify(this.selectedPrimaryIndicator.programs.matrix2b)),
              matrix3: JSON.parse(JSON.stringify(this.selectedPrimaryIndicator.programs.matrix3)),
              //matrix4: JSON.parse(JSON.stringify(this.selectedPrimaryIndicator.programs.matrix4)),
            }
          })
          $('.btn-primary-indicator-next').trigger('click');
        },

        addSolutions(){
          fetch(`/api/indicators/matrix`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ indicator_id: [this.metadata_indicator_id] })
          })
          .then(response => response.json())
          .then(res => {
            // if(res.data.matrix2b.length > 0 || res.data.matrix3.length > 0 || res.data.matrix4.length > 0){
            if(res.data.matrix2b.length > 0 || res.data.matrix3.length > 0){
              const indicator = this.indicators.find(i => i.id===Number(this.metadata_indicator_id));
              this.solutions.push({
                metadata_indicator_id: indicator.id,
                indicator,
                name: this.solutionName,
                notes: '',
                programs: {
                  matrix2b: JSON.parse(JSON.stringify(res.data.matrix2b)),
                  matrix3: JSON.parse(JSON.stringify(res.data.matrix3)),
                  // matrix4: JSON.parse(JSON.stringify(res.data.matrix4)),
                }
              })
              this.pillar_id = null;
              this.metadata_target_id = null;
              this.metadata_purpose_id = null;
              this.metadata_indicator_id = null;
              this.solutionName = '';
              $("#select-pillar").val("").trigger('change');
            }else{
              window.Swal.fire({
                title: "Error",
                text: 'Data Tidak Tersedia',
                icon: "error"
              });
            }
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
        },

        deleteSolution(index){
          this.solutions.splice(index,1);
        },

        showSolution(){
          this.showSolutionFlag = true;
          this.switchView(this.showSolutionView);
        },
        hideSolution(){
          this.showSolutionsView = 'network';
          this.showSolutionFlag = false;
        },
        switchView(view){
          this.showSolutionView = view;
          if(view === 'tree'){
            this.displayTree();
          }else{
            this.displayNetwork();
          }
        },
        displayNetwork(){
          var nodes = [];
          var edges = [];
          var network = null;
          nodes.push({
            id: `sol-primary`,
            value: 0,
            label: this.selectedPrimaryIndicator?.name,
            group: 'primaryIndicator'
          })
          this.solutions.forEach((solution, index)=>{
            nodes.push({
              id: `sol-${index}`,
              value: 0,
              label: (solution?.name || 'Outcome '+(index+1)) + ` (${solution.indicator.code})`,
              group: 'solution'
            })
            edges.push({
              from: 'sol-primary',
              to:`sol-${index}`,
              title: `[${solution.indicator.code}] ${solution.indicator.name}`,
              color: '#666666',
            });
            solution.programs.matrix2b.forEach((institution,indexI)=>{
              const findI = nodes.find((i)=>i.id === `ins-${institution.institution.id}`)
              if(!findI){
                nodes.push({
                  id: `ins-${institution.institution.id}`,
                  value: 0,
                  label: institution.institution.name,
                  group: 'actor'
                })
              }
              institution.indicators.forEach((indicator, indexIn) => {
                indicator.programs.forEach((program, indexP) => {
                  program.activities.forEach((activity,indexA)=>{
                    if(activity.checked){
                      nodes.push({
                        id: `2b-${activity.id}`,
                        value: 1,
                        label: activity.activity_name,
                        group: 'activity'
                      })
                      const solIns = edges.find((i)=>i.id === `sol-ins-${institution.institution.id}-${index}`)
                      if(!solIns){
                        edges.push({
                          id:`sol-ins-${institution.institution.id}-${index}`,
                          from: 'sol-' + index,
                          to: 'ins-' + institution.institution.id,
                          color: '#666666',
                        });
                      }
                      const indexInst = nodes.findIndex((i)=>i.id === `ins-${institution.institution.id}`)
                      if(indexInst !== -1){
                        nodes[indexInst].value = nodes[indexInst].value+1;
                      }
                      const indexSol = nodes.findIndex((s)=>s.id === `sol-${index}`);
                      if(indexSol !== -1){
                        nodes[indexSol].value = nodes[indexSol].value+1;
                      }
                      nodes[0].value = nodes[0].value + 1;
                      edges.push({
                        id:`ins-2b-${institution.institution.id}-${activity.id}`,
                        from: `ins-${institution.institution.id}`,
                        to: `2b-${activity.id}`,
                        color: '#666666',
                      });
                    }
                  })
                })
              })
            })

            solution.programs.matrix3.forEach((institution,indexI)=>{
              const findI = nodes.find((i)=>i.id === `ins-${institution.institution.id}`)
              if(!findI){
                nodes.push({
                  id: `ins-${institution.institution.id}`,
                  value: 0,
                  label: institution.institution.name,
                  group: 'actor'
                })
              }
              institution.indicators.forEach((indicator, indexIn) => {
                indicator.programs.forEach((program, indexP) => {
                  program.activities.forEach((activity,indexA)=>{
                    if(activity.checked){
                      nodes.push({
                        id: `3-${activity.id}`,
                        value: 1,
                        label: activity.activity_name,
                        group: 'activity'
                      })
                      const solIns = edges.find((i)=>i.id === `sol-ins-${institution.institution.id}-${index}`)
                      if(!solIns){
                        edges.push({
                          id:`sol-ins-${institution.institution.id}-${index}`,
                          from: 'sol-' + index,
                          to: 'ins-' + institution.institution.id,
                          color: '#666666',
                        });
                      }
                      const indexInst = nodes.findIndex((i)=>i.id === `ins-${institution.institution.id}`)
                      if(indexInst !== -1){
                        nodes[indexInst].value = nodes[indexInst].value+1;
                      }
                      const indexSol = nodes.findIndex((s)=>s.id === `sol-${index}`);
                      if(indexSol !== -1){
                        nodes[indexSol].value = nodes[indexSol].value+1;
                      }
                      nodes[0].value = nodes[0].value + 1;
                      edges.push({
                        id:`ins-3-${institution.institution.id}-${activity.id}`,
                        from: `ins-${institution.institution.id}`,
                        to: `3-${activity.id}`,
                        color: '#666666',
                      });
                    }
                  })
                })
              })
            })

            // solution.programs.matrix4.forEach((institution,indexI)=>{
            //   institution.indicators.forEach((indicator, indexIn) => {
            //     const findI = nodes.find((i)=>i.id === `ins-${institution.institution.id}`)
            //     if(!findI){
            //       nodes.push({
            //         id: `ins-${institution.institution.id}`,
            //         value: 0,
            //         label: institution.institution.name,
            //         group: 'actor'
            //       })
            //     }
            //     indicator.programs.forEach((program, indexP) => {
            //       program.activities.forEach((activity,indexA)=>{
            //         if(activity.checked){
            //           nodes.push({
            //             id: `4-${activity.id}`,
            //             value: 1,
            //             label: activity.activity_name,
            //             group: 'activity'
            //           })
            //           const solIns = edges.find((i)=>i.id === `sol-ins-${institution.institution.id}-${index}`)
            //           if(!solIns){
            //             edges.push({
            //               id:`sol-ins-${institution.institution.id}-${index}`,
            //               from: 'sol-' + index,
            //               to: 'ins-' + institution.institution.id,
            //               color: '#666666',
            //             });
            //           }
            //           const indexInst = nodes.findIndex((i)=>i.id === `ins-${institution.institution.id}`)
            //           if(indexInst !== -1){
            //             nodes[indexInst].value = nodes[indexInst].value+1;
            //           }
            //           const indexSol = nodes.findIndex((s)=>s.id === `sol-${index}`);
            //           if(indexSol !== -1){
            //             nodes[indexSol].value = nodes[indexSol].value+1;
            //           }
            //           nodes[0].value = nodes[0].value + 1;
            //           edges.push({
            //             id:`ins-4-${institution.institution.id}-${activity.id}`,
            //             from: `ins-${institution.institution.id}`,
            //             to: `4-${activity.id}`,
            //             color: '#666666',
            //           });
            //         }
            //       })
            //     })
            //   })
            // })
          })
          function draw() {
            var container = document.getElementById("mynetwork");
            var x = -container.clientWidth / 2 - 400;
            var y = -container.clientHeight / 2 - 200;
            var step = 140;
            nodes.push({
              id: 1000,
              x: x,
              y: y,
              label: "Indikator Utama",
              group: "primaryIndicator",
              value: 5,
              fixed: true,
              physics: false,
            });
            nodes.push({
              id: 1001,
              x: x,
              y: y + step,
              label: "Outcome",
              group: "solution",
              value: 5,
              fixed: true,
              physics: false,
            });
            nodes.push({
              id: 1002,
              x: x,
              y: y + 2 * step,
              label: "Aktor",
              group: "actor",
              value: 5,
              fixed: true,
              physics: false,
            });
            nodes.push({
              id: 1003,
              x: x,
              y: y + 3 * step,
              label: "Kegiatan",
              group: "activity",
              value: 5,
              fixed: true,
              physics: false,
            });
            var data = {
              nodes: nodes,
              edges: edges,
            };
            var options = {
              nodes: {
                shape: 'dot',
                scaling: {
                  label: {
                    min: 8,
                    max: 20
                  },
                  min: 24,
                  max: 32,
                }
              },
              edges: {
                color: '#666666',
                smooth: false,
              },
              physics: {
                barnesHut: { gravitationalConstant: -30000 },
                stabilization: { iterations: 2500 },
              },
              groups: {
                primaryIndicator: {
                  shape: "dot",
                  color: "#FF9900", // orange
                },
                solution: {
                  shape: "triangle",
                  color: "#2B7CE9", // blue
                },
                actor: {
                  shape: "square",
                  color: "#C5000B", // purple
                },
                activity: {
                  shape: "dot",
                  color: "#109618", // red
                },
              },
              autoResize: false
            };
            network = new vis.Network(container, data, options);
          }
          draw();
        },
        displayTree(){
          $('#tree-view').empty();
          this.solutions.forEach((solution, index)=>{
            // const
            const solElm = $(`<div class="col-4 d-flex flex-column gap-2"><h5 class="fw-bold">${solution.name}</h5><div id="sol-${index}"></div></div>`)
            const solutionNodes = [];
            $('#tree-view').append(solElm);
            let act2b = 0;
            let act3 = 0;
            let act4 = 0;
            solution.programs.matrix2b.forEach((institution,indexI)=>{
              institution.indicators.forEach((indicator, indexIn) => {
                indicator.programs.forEach((program, indexP) => {
                  let childActivities = []
                  program.activities.forEach((activity,indexA)=>{
                    if(activity.checked){
                      childActivities.push({
                        text: activity.activity_name,
                        href: `#act-2b-${activity.id}`,
                        icon: "ti ti-notes fs-6",
                        selectable: false,
                      })
                      act2b++;
                    }
                  })
                  if(childActivities.length > 0){
                    solutionNodes.push({
                      text: institution.institution.name,
                      href: `#ins-${institution.institution.id}`,
                      icon: "ti ti-building fs-6",
                      nodes: childActivities,
                      selectable: false,
                      backColor: '#46caeb',
                      color: '#FFFFFF',
                    })
                  }
                })
              })
            })

            solution.programs.matrix3.forEach((institution,indexI)=>{
              institution.indicators.forEach((indicator, indexIn) => {
                indicator.programs.forEach((program, indexP) => {
                  let childActivities = []
                  program.activities.forEach((activity,indexA)=>{
                    if(activity.checked){
                      childActivities.push({
                        text: activity.activity_name,
                        href: `#act-3-${activity.id}`,
                        icon: "ti ti-notes fs-6",
                        selectable: false,
                      })
                      act3++;
                    }
                  })
                  if(childActivities.length > 0){
                    solutionNodes.push({
                      text: institution.institution.name,
                      href: `#ins-${institution.institution.id}`,
                      icon: "ti ti-building fs-6",
                      nodes: childActivities,
                      selectable: false,
                      backColor: '#ffd648',
                      color: '#000000',
                    })
                  }
                })
              })
            })

            // solution.programs.matrix4.forEach((institution,indexI)=>{
            //   institution.indicators.forEach((indicator, indexIn) => {
            //     indicator.programs.forEach((program, indexP) => {
            //       let childActivities = []
            //       program.activities.forEach((activity,indexA)=>{
            //         if(activity.checked){
            //           childActivities.push({
            //             text: activity.activity_name,
            //             href: `#act-4-${activity.id}`,
            //             icon: "ti ti-notes fs-6",
            //             selectable: false,
            //           })
            //           act4++;
            //         }
            //       })
            //       if(childActivities.length > 0){
            //         solutionNodes.push({
            //           text: institution.institution.name,
            //           href: `#ins-${institution.institution.id}`,
            //           icon: "ti ti-building fs-6",
            //           nodes: childActivities,
            //           selectable: false,
            //           backColor: '#36c76c',
            //           color: '#FFFFFF',
            //         })
            //       }
            //     })
            //   })
            // })
            $(`#sol-${index}`).treeview({
              onhoverColor: "var(--bs-primary-bg-subtle)",
              expandIcon: "ti ti-plus",
              collapseIcon: "ti ti-minus",
              data: solutionNodes,
            })
            // if(act2b <= 0 || act3 <= 0 || act4 <= 0){
            if(act2b <= 0 || act3 <= 0){
              $(`#sol-${index}`).after(`<div class='alert text-danger alert-danger' role="alert">Perlu dilengkapi</div>`)
            }
          })
        },
        getPillars() {
          fetch(`/api/pillars-by-matrix1`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ 'rad_id': this.rad_id })
          })
            .then(response => response.json())
            .then(res => {
              this.pillars = res.data;
            })
            .catch(error => console.error('Error fetching target and indicator:', error));
        },

        getPurposes() {
          this.metadata_purpose_id = null;
          this.metadata_target_id = null;
          this.metadata_indicator_id = null;
          this.targets = [];
          this.indicators = [];

          if (this.pillar_id) {
            fetch(`/api/purposes-by-matrix1`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              },
              body: JSON.stringify({ pillar_id: this.pillar_id })
            })
              .then(response => response.json())
              .then(res => {
                this.purposes = res.data;
              })
              .catch(error => console.error('Error fetching target and indicator:', error));
          } else {
            this.purposes = [];
          }
        },

        getTargets() {
          this.metadata_target_id = null;
          this.metadata_indicator_id = null;
          this.indicators = [];

          if (this.metadata_purpose_id) {
            fetch(`/api/targets-by-matrix1`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              },
              body: JSON.stringify({ purpose_id: this.metadata_purpose_id })
            })
              .then(response => response.json())
              .then(res => {
                this.targets = res.data;
              })
              .catch(error => console.error('Error fetching target and indicator:', error));
          } else {
            this.targets = [];
          }
        },

        getIndicators() {
          this.metadata_indicator_id = null;

          if (this.metadata_target_id) {
            fetch(`/api/indicators`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              },
              body: JSON.stringify({ target_id: this.metadata_target_id, version: this.selectedRad.metadata_version })
            })
              .then(response => response.json())
              .then(res => {
                this.indicators = res.data;
              })
              .catch(error => console.error('Error fetching target and indicator:', error));
          } else {
            this.indicators = [];
          }
        },
        loadedJquery(){
          console.log('sat')
          this.$store.alpineJ.loadScript('/assets/js/bootstrap-tree/dist/bootstrap-treeview.min.js',()=>{});
        },
        showFullscreen(){
          const elem = document.getElementById(this.showSolutionView === 'tree' ? 'tree-view' : 'mynetwork');
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.webkitRequestFullscreen) { /* Safari */
            elem.webkitRequestFullscreen();
          } else if (elem.msRequestFullscreen) { /* IE11 */
            elem.msRequestFullscreen();
          }
        }
      }
    }
  </script>
  <script type="module">
    const disabled = {{ $disabled ? 'true' : 'false' }};
    function scroll_to_class(element_class, removed_height) {
      let scroll_to = $(element_class).offset().top - removed_height;
      if ($(window).scrollTop() != scroll_to) {
        $("html, body").stop().animate({ scrollTop: scroll_to }, 0);
      }
    }
    function bar_progress(progress_line_object, direction) {
      let number_of_steps = progress_line_object.data("number-of-steps");
      let now_value = progress_line_object.data("now-value");
      let new_value = 0;
      if (direction == "right") {
        new_value = now_value + 100 / number_of_steps;
      } else if (direction == "left") {
        new_value = now_value - 100 / number_of_steps;
      }
      progress_line_object.attr("style", "width: " + new_value + "%;").data("now-value", new_value);
    }
    $(function() {
      // Form
      $(".f1 fieldset:first").fadeIn("slow");
      $('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on("focus", function () {
        $(this).removeClass("input-error");
      });
      // step selanjutnya (ketika klik tombol selanjutnya)
      $(".f1 .btn-next").on("click", function () {
        let parent_fieldset = $(this).parents("fieldset");
        let next_step = true;
        // navigation steps / progress steps
        let current_active_step = $(this).parents(".f1").find(".f1-step.active");
        let progress_line = $(this).parents(".f1").find(".f1-progress-line");
        let sidebar_active_step = $(this).parents(".container").find(".sidebar-list .sidebar-item.active");

        sidebar_active_step.removeClass("active").addClass("activated").next().addClass("active");
        let with_validation = $(this).hasClass("with-validation");
        // validasi form
        if (with_validation) {
          parent_fieldset.find('input[type="text"], input[type="password"], input[type="file"], textarea').each(function () {
            if ($(this).val() == "") {
              $(this).addClass("input-error");
              next_step = false;
            } else {
              $(this).removeClass("input-error");
            }
          });
        }

        if (next_step) {
          parent_fieldset.fadeOut(300, function () {
            // change icons
            current_active_step.removeClass("active").addClass("activated").next().addClass("active");
            sidebar_active_step.removeClass("active").addClass("activated").next().addClass("active");
            // progress bar
            bar_progress(progress_line, "right");
            // show next step
            $(this).next().fadeIn();
            // scroll window to the beginning of the form
            scroll_to_class($(".f1"), 20);
          });
        }
      });

      // step sbelumnya (ketika klik tombol sebelumnya)
      $(".f1 .btn-previous").on("click", function () {
        // navigation steps / progress steps
        let current_active_step = $(this).parents(".f1").find(".f1-step.active");
        let sidebar_active_step = $(this).parents(".container").find(".sidebar-list .sidebar-item.active");
        let progress_line = $(this).parents(".f1").find(".f1-progress-line");
        sidebar_active_step.removeClass("active").prev().removeClass("activated").addClass("active");

        $(this)
          .parents("fieldset")
          .fadeOut(300, function () {
            // change icons
            current_active_step.removeClass("active").prev().removeClass("activated").addClass("active");
            sidebar_active_step.removeClass("active").prev().removeClass("activated").addClass("active");
            // progress bar
            bar_progress(progress_line, "left");
            // show the previous step
            $(this).prev().fadeIn();
            // scroll window to the beginning of the form
            scroll_to_class($(".f1"), 20);
          });
      });

      // submit (ketika klik tombol submit diakhir wizard)
      $(".f1").on("submit", function (e) {
        // validasi form
        $(this)
      });

      $('.select2').select2();
    });
  </script>
@endpush