@extends('layouts.admin.index')

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

      <div class="body-wrapper">
        <div class="container-fluid">
          {{ $model->id ? Breadcrumbs::render($disabled ? 'ActionPlanM2BView' : 'ActionPlanM2BEdit', $model->id) : Breadcrumbs::render('ActionPlanM2BAdd')}}
          <div class="card w-100">
            <div class="card-body">
              <form role="form" action="{{ route('matrix2b.store') }}" method="post">
                <div
                  x-data="targetFormData({
                    rad_id: @json($model->rad_id),
                    pillar_id: @json($model->pillar_id),
                    metadata_purpose_id: @json($model->metadata_purpose_id),
                    metadata_target_id: @json($model->metadata_target_id),
                    metadata_indicator_id: @json($model->metadata_indicator_id),
                    nomenclature_id: @json($model->nomenclature_id)
                  })"
                  x-init="
                    init();
                    $('#select-rad').on('change', () => {
                      rad_id = $('#select-rad').val();
                      selectRad();
                    });
                    $('#select-pillar').on('change', () => {
                      pillar_id = $('#select-pillar').val();
                      getPurposes();
                    });
                    $('#select-purpose').on('change', () => {
                      metadata_purpose_id = $('#select-purpose').val();
                      getTargets();
                    });
                    $('#select-target').on('change', () => {
                      metadata_target_id = $('#select-target').val();
                      getIndicators();
                    });
                    $('#select-indicator').on('change', () => {
                      metadata_indicator_id = $('#select-indicator').val();
                    });
                    $('#select-nomenklatur').on('change', () => {
                      nomenclature_id = $('#select-nomenklatur').val();
                    });
                  "
                >
                  <div class="mb-3 fv-row">
                    <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>
                    @error('rad_id')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                    @enderror
                  </div>
                  <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>
                    @error('pillar_id')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                    @enderror
                  </div>
                  <div class="mb-3 fv-row">
                    <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>
                    @error('metadata_purpose_id')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                    @enderror
                  </div>
                  <div class="mb-3 fv-row">
                    <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="" @disabled($disabled)>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" @disabled($disabled)></option>
                      </template>
                    </select>
                    @error('metadata_target_id')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                    @enderror
                  </div>
                  <div class="mb-3 fv-row">
                    <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">
                      <option value=" @disabled($disabled)">Pilih Indikator</option>
                      <template x-for="i in indicators" :key="i.id">
                        <option :value="i.id" x-text="`[${i.code}] ${i.name}`" :selected="i.id == metadata_indicator_id" @disabled($disabled)></option>
                      </template>
                    </select>
                    @error('metadata_indicator_id')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                    @enderror
                  </div>
                  <div class="mb-3 fv-row">
                    <div>
                      <label class="form-label" for="metadata_indicator_id">Nomenklatur</label>
                    </div>
                    <select class="form-select select2" id="select-nomenklatur" data-live-search="true" name="nomenclature_id" x-model="nomenclature_id">
                      <option value=" @disabled($disabled)">Pilih Nomenklatur</option>
                      <template x-for="i in nomenclatures" :key="i.id">
                        <option :value="i.id" x-text="`${i.name}`" :selected="i.id == nomenclature_id" @disabled($disabled)></option>
                      </template>
                    </select>
                    @error('nomenclature_id')
                    <div class="invalid-feedback d-block">
                      {{ $message }}
                    </div>
                    @enderror
                  </div>
                  <div class="mb-3 fv-row">
                    <div class="accordion mb-3" id="accordion-program">
                      <template x-for="(p, index) in programs" :key="index">
                        <div class="accordion-item" :key="indexA">
                          <h2 class="accordion-header">
                            <button
                              class="accordion-button"
                              :class="`${index == 0 ? '' : 'collapsed'}`"
                              type="button"
                              data-bs-toggle="collapse"
                              :data-bs-target="`#collapse-${index}`"
                              :aria-expanded="`${index == 0 ? 'true' : 'false'}`"
                              :aria-controls="`collapse-${index}`"
                              x-text="`Data Program ${index+1}`"
                            >
                            </button>
                          </h2>
                          <div :id="`collapse-${index}`" class="accordion-collapse collapse" :class="`${index == 0 ? 'show' : ''}`" data-bs-parent="#accordion-program">
                            <div class="accordion-body">
                              <div class="mb-2 d-flex justify-content-end">
                                @if(!$disabled)
                                  <a class="btn btn-danger" @click="deleteProgram(index)"><i class="ti ti-trash me-2"></i>Hapus Program</a>
                                @endif
                              </div>
                              <div class="mb-3 fv-row">
                                <label class="form-label" :for="`program-${index}`">Nama Program</label>
                                <select class="form-select select2-auto" :name="`forms[${index}][nomenclature_program_id]`" x-model="p.nomenclature_program_id" :id="`program-${index}`" >
                                  <template x-if="p.nomenclature_program">
                                    <option :value="p.nomenclature_program_id" x-text="`[${p.nomenclature_program.code}] ${p.nomenclature_program.name}`" :selected="true"></option>
                                  </template>
                                </select>
                              </div>
                              <div class="accordion mb-3" :id="`accordion-${index}`">
                                <template x-for="(a, indexA) in p.activities" :key="indexA">
                                  <div class="accordion-item" :key="indexA">
                                    <h2 class="accordion-header">
                                      <button
                                        class="accordion-button"
                                        :class="`${indexA == 0 ? '' : 'collapsed'}`"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        :data-bs-target="`#collapse-${index}-${indexA}`"
                                        :aria-expanded="`${indexA == 0 ? 'true' : 'false'}`"
                                        :aria-controls="`collapse-${index}-${indexA}`"
                                        x-text="`Data Kegiatan ${indexA+1}`"
                                      >
                                      </button>
                                    </h2>
                                    <div :id="`collapse-${index}-${indexA}`" class="accordion-collapse collapse" :class="`${indexA == 0 ? 'show' : ''}`" :data-bs-parent="`#accordion-${index}`">
                                      <div class="accordion-body">
                                        <div class="mb-2 d-flex justify-content-end">
                                          @if(!$disabled)
                                            <a class="btn btn-danger" @click="deleteActivity(index,indexA)"><i class="ti ti-trash me-2"></i>Hapus Kegiatan</a>
                                          @endif
                                        </div>
                                        <div class="mb-3 fv-row">
                                          <label class="form-label" :for="`activity-${index}-${indexA}`">Nama Kegiatan</label>
                                          <select class="form-select select2-auto"
                                                  :name="`forms[${index}][activities][${indexA}][nomenclature_activity_id]`"
                                                  x-model="p.activities[indexA].nomenclature_activity_id"
                                                  :id="`activity-${index}-${indexA}`" >
                                            <template x-if="p.activities[indexA].nomenclature_activity">
                                              <option :value="p.activities[indexA].nomenclature_activity_id" x-text="`[${p.activities[indexA].nomenclature_activity.code}] ${p.activities[indexA].nomenclature_activity.name}`" :selected="true"></option>
                                            </template>
                                          </select>
                                        </div>
                                        <div class="accordion mb-3" :id="`accordion-${index}-${indexA}`">
                                          <template x-for="(output, indexO) in a.sub_activities" :key="indexO">
                                            <div class="accordion-item" :key="indexO">
                                              <h2 class="accordion-header">
                                                <button
                                                  class="accordion-button"
                                                  :class="`${indexO == 0 ? '' : 'collapsed'}`"
                                                  type="button"
                                                  data-bs-toggle="collapse"
                                                  :data-bs-target="`#collapse-${index}-${indexA}-${indexO}`"
                                                  :aria-expanded="`${indexO == 0 ? 'true' : 'false'}`"
                                                  :aria-controls="`collapse-${index}-${indexA}-${indexO}`"
                                                  x-text="`Data Sub Kegiatan ${indexO+1}`"
                                                >
                                                </button>
                                              </h2>
                                              <div :id="`collapse-${index}-${indexA}-${indexO}`" class="accordion-collapse collapse" :class="`${indexO == 0 ? 'show' : ''}`" :data-bs-parent="`#accordion-${index}-${indexA}`">
                                                <div class="accordion-body">
                                                  <div class="mb-2 d-flex justify-content-end">
                                                    @if(!$disabled)
                                                      <a class="btn btn-danger" @click="deleteOutput(index,indexA,indexO)"><i class="ti ti-trash me-2"></i>Hapus Sub Kegiatan</a>
                                                    @endif
                                                  </div>
                                                  <div class="mb-3 fv-row">
                                                    <label class="form-label" :for="`output-name-${index}-${indexA}-${indexO}`">Nama Sub Kegiatan</label>
                                                    <select class="form-select select2-auto"
                                                            :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][nomenclature_sub_activity_id]`"
                                                            x-model="p.activities[indexA].sub_activities[indexO].nomenclature_sub_activity_id"
                                                            :id="`output-id-${index}-${indexA}-${indexO}`" >
                                                      <template x-if="p.activities[indexA].sub_activities[indexO].nomenclature_sub_activity">
                                                        <option :value="p.activities[indexA].sub_activities[indexO].nomenclature_sub_activity_id" x-text="`[${p.activities[indexA].sub_activities[indexO].nomenclature_sub_activity.code}] ${p.activities[indexA].sub_activities[indexO].nomenclature_sub_activity.name}`" :selected="true"></option>
                                                      </template>
                                                    </select>
                                                  </div>
                                                  <div class="mb-3 fv-row">
                                                    <label class="form-label" :for="`output-unit-${index}-${indexA}-${indexO}`">Satuan</label>
                                                    <input
                                                      type="text"
                                                      :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][unit]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].sub_activities[indexO].unit"
                                                      :id="`output-unit-${index}-${indexA}-${indexO}`"
                                                      placeholder="Satuan"
                                                      @readonly($disabled)
                                                    />
                                                  </div>
                                                  <div class="mb-3 fv-row">
                                                    <label class="form-label" :for="`output-source-${index}-${indexA}-${indexO}`">Sumber Pendanaan</label>
                                                    <input
                                                      type="text"
                                                      :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][source]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].sub_activities[indexO].source"
                                                      :id="`output-source-${index}-${indexA}-${indexO}`"
                                                      placeholder="Sumber Pendanaan"
                                                      @readonly($disabled)
                                                    />
                                                  </div>
                                                  <div class="mb-3 fv-row">
                                                    <label class="form-label" :for="`output-indicative-${index}-${indexA}-${indexO}`">Indikatif Alokasi Anggaran 5 Tahun (Rp.)</label>
                                                    <input
                                                      type="text"
                                                      :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][indicative_funds_allocation]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].sub_activities[indexO].indicative_funds_allocation"
                                                      :id="`output-indicative-${index}-${indexA}-${indexO}`"
                                                      placeholder="Indikatif Alokasi Anggaran 5 Tahun (Rp.)"
                                                      @readonly($disabled)
                                                    />
                                                  </div>
                                                  <div class="mb-3 fv-row">
                                                    <label class="form-label" :for="`output-location-${index}-${indexA}-${indexO}`">Lokasi Aktual Pelaksanaan Kegiatan</label>
                                                    <input
                                                      type="text"
                                                      :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][location]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].sub_activities[indexO].location"
                                                      :id="`output-location-${index}-${indexA}-${indexO}`"
                                                      placeholder="Lokasi Aktual Pelaksanaan Kegiatan"
                                                      @readonly($disabled)
                                                    />
                                                  </div>
                                                  <template x-for="(year, indexY) in output.realisations" :key="indexY">
                                                    <div class="row mb-3">
                                                      <div class="col-3">
                                                        <label class="form-label" for="baseline">Tahun</label>
                                                        <input
                                                          class="form-control form-prefill"
                                                          :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][realisations][${indexY}][year]`"
                                                          x-model="p.activities[indexA].sub_activities[indexO].realisations[indexY].year"
                                                          :value="`${p.activities[indexA].sub_activities[indexO].realisations[indexY].year}`"
                                                          placeholder="Tahun"
                                                          readonly
                                                        />
                                                      </div>
                                                      <div class="col-4">
                                                        <label class="form-label" for="baseline">Target SDGs</label>
                                                        <input
                                                          class="form-control form-prefill"
                                                          :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][realisations][${indexY}][target]`"
                                                          x-model="p.activities[indexA].sub_activities[indexO].realisations[indexY].target"
                                                          value=""
                                                          placeholder="Target SDGs"
                                                          @readonly($disabled)
                                                        />
                                                      </div>
                                                      <div class="col-5">
                                                        <label class="form-label" for="baseline">Alokasi Anggaran</label>
                                                        <input
                                                          class="form-control form-prefill"
                                                          :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][realisations][${indexY}][funds_allocation]`"
                                                          x-model="p.activities[indexA].sub_activities[indexO].realisations[indexY].funds_allocation"
                                                          value=""
                                                          placeholder="Alokasi Anggaran"
                                                          @readonly($disabled)
                                                        />
                                                      </div>
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][realisations][${indexY}][realisation_target_1]`"
                                                        x-model="p.activities[indexA].sub_activities[indexO].realisations[indexY].realisation_target_1"
                                                      />
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][realisations][${indexY}][realisation_target_2]`"
                                                        x-model="p.activities[indexA].sub_activities[indexO].realisations[indexY].realisation_target_2"
                                                      />
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][realisations][${indexY}][realisation_funds_1]`"
                                                        x-model="p.activities[indexA].sub_activities[indexO].realisations[indexY].realisation_funds_1"
                                                      />
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][sub_activities][${indexO}][realisations][${indexY}][realisation_funds_2]`"
                                                        x-model="p.activities[indexA].sub_activities[indexO].realisations[indexY].realisation_funds_2"
                                                      />
                                                    </div>
                                                  </template>
                                                </div>
                                              </div>
                                            </div>
                                          </template>
                                        </div>
                                        @if(!$disabled)
                                          <a class="btn btn-primary" @click="addOutput(index,indexA)"><i class="ti ti-plus me-2"></i>Tambah Sub Kegiatan</a>
                                        @endif
                                      </div>
                                    </div>
                                  </div>
                                </template>
                              </div>
                              @if(!$disabled)
                                <a class="btn btn-primary" @click="addActivity(index)"><i class="ti ti-plus me-2"></i>Tambah Kegiatan</a>
                              @endif
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                    @if(!$disabled)
                      <a class="btn btn-primary" @click="addProgram()"><i class="ti ti-plus me-2"></i>Tambah Program</a>
                    @endif
                  </div>
                </div>
                <input type="hidden" name="id" value="{{ $model->id }}" />
                {{ csrf_field() }}
                <div class="d-flex w-100 justify-content-end">
                  @if(!$disabled)
                    <button class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Simpan</button>
                  @endif
                </div>
              </form>
              @if($disabled && $model->status == 0 && (auth()->user()->role_id == 1 || auth()->user()->role_id == 6))
                <div class="d-flex w-100 justify-content-end gap-2">
                  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#approve-modal" data-bs-whatever="@mdo">
                    <i class="ti ti-check me-2"></i>Setuju
                  </button>
                  <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#reject-modal" data-bs-whatever="@mdo">
                    <i class="ti ti-x me-2"></i>Tolak
                  </button>
                </div>
              @endif
              @if($disabled && $model->status == 1)
                <div class="d-flex w-100 flex-column justify-content-start">
                  <h5>Disetujui Oleh: {{ $model->approvedBy ? $model->approvedBy->name : '-' }} ({{ $model->approved_date }})</h5>
                  <h5>Komentar: </h5>
                  <h5>{{ $model->comment }}</h5>
                </div>
              @endif
              @if($disabled && $model->status == 2)
                <div class="d-flex w-100 justify-content-start">
                  <h5>Ditolak Oleh: {{ $model->rejectedBy ? $model->rejectedBy->name : '-' }} ({{ $model->rejected_date }})</h5>
                  <h5>Komentar: </h5>
                  <h5>{{ $model->comment }}</h5>
                </div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="approve-modal" tabindex="-1" aria-labelledby="exampleModalLabel1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form action="{{ route('matrix2b.approve') }}" method="POST">
          <input type="hidden" name="id" value="{{ $model->id }}" />
          {{ csrf_field() }}
          <div class="modal-header d-flex align-items-center">
            <h4 class="modal-title" id="exampleModalLabel1">
              Konfirmasi Setuju
            </h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="message-text" class="">Komentar</label>
              <textarea class="form-control" name="comment" id="message-text1"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
              Tutup
            </button>
            <button type="submit" class="btn btn-primary">
              <i class="ti ti-device-floppy me-2"></i>Simpan
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="modal fade" id="reject-modal" tabindex="-1" aria-labelledby="exampleModalLabel2">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form action="{{ route('matrix2b.reject') }}" method="POST">
          <input type="hidden" name="id" value="{{ $model->id }}" />
          {{ csrf_field() }}
          <div class="modal-header d-flex align-items-center">
            <h4 class="modal-title" id="exampleModalLabel2">
              Konfirmasi Tolak
            </h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="message-text" class="">Komentar</label>
              <textarea class="form-control" name="comment" id="message-text1"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
              Tutup
            </button>
            <button type="submit" class="btn btn-primary">
              <i class="ti ti-device-floppy me-2"></i>Simpan
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
  <script>
    function targetFormData(data) {
      return {
        rads: @json($rads),
        pillars: @json($pillars),
        nomenclatures: @json($nomenclatures),
        purposes: [],
        targets: [],
        indicators: [],
        selectedRad: null,
        rad_id: @json(old('rad_id', $model->rad_id)) || '',
        pillar_id: @json(old('pillar_id', $model->pillar_id)) || '',
        metadata_purpose_id: @json(old('metadata_purpose_id', $model->metadata_purpose_id)) || '',
        metadata_target_id: @json(old('metadata_target_id', $model->metadata_target_id)) || '',
        metadata_indicator_id: @json(old('metadata_indicator_id', $model->metadata_indicator_id)) || '',
        nomenclature_id: @json(old('nomenclature_id', $model->nomenclature_id)) || '',
        programs: @json($programs) || [],

        init() {
          if (this.rad_id) {
            this.selectRad();
          }
          if (this.pillar_id) {
            this.getPurposes();
          }
          if (this.metadata_purpose_id) {
            this.getTargets();
          }
          if (this.metadata_target_id) {
            this.getIndicators();
          }
          const _this = this;
          if(this.programs.length > 0){
            setTimeout(()=>{
              this.programs.forEach(function(p,pIndex){
                $(`#program-${pIndex}`).select2({
                  ajax: {
                    url: '/api/nomenclature/program',
                    data: function (params) {
                      return {
                        search: params.term,
                        nomenclature_id: _this.nomenclature_id,
                        _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                      };
                    },
                    processResults: function (data, params) {
                      return {
                        results: data.data,
                      };
                    },
                    cache: true,
                  },
                  placeholder: 'Cari Nama Program',
                  minimumInputLength: 1,
                  templateResult: function (repo) {
                    if (repo.loading) {
                      return repo.text;
                    }
                    var $container = $(
                      "<div class='select2-result-repository clearfix'>" +
                      "<div class='select2-result-repository__meta'>" +
                      "<div class='select2-result-repository__title'></div>" +
                      "</div>" +
                      "</div>"
                    );

                    $container.find(".select2-result-repository__title").html(`<strong>[${repo.code}]</strong> ${repo.text}`);

                    return $container;
                  },
                  templateSelection: function (repo) {
                    return repo.code ? `[${repo.code}] ${repo.text}` : repo.text;
                  }
                })
                $(`#program-${pIndex}`).on('change',function(){
                  _this.programs[pIndex].nomenclature_program_id = $(this).val();
                })
                p.activities.forEach(function(a,aIndex){
                  $(`#activity-${pIndex}-${aIndex}`).select2({
                    ajax: {
                      url: '/api/nomenclature/activity',
                      data: function (params) {
                        return {
                          search: params.term,
                          program_id: _this.programs[pIndex].nomenclature_program_id,
                          _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        };
                      },
                      processResults: function (data, params) {
                        return {
                          results: data.data,
                        };
                      },
                      cache: true,
                    },
                    placeholder: 'Cari Nama Kegiatan',
                    minimumInputLength: 1,
                    templateResult: function (repo) {
                      if (repo.loading) {
                        return repo.text;
                      }
                      var $container = $(
                        "<div class='select2-result-repository clearfix'>" +
                        "<div class='select2-result-repository__meta'>" +
                        "<div class='select2-result-repository__title'></div>" +
                        "</div>" +
                        "</div>"
                      );

                      $container.find(".select2-result-repository__title").html(`<strong>[${repo.code}]</strong> ${repo.text}`);

                      return $container;
                    },
                    templateSelection: function (repo) {
                      return repo.code ? `[${repo.code}] ${repo.text}` : repo.text;
                    }
                  })
                  $(`#activity-${pIndex}-${aIndex}`).on('change',function(){
                    _this.programs[pIndex].activities[aIndex].nomenclature_activity_id = $(this).val();
                  })
                  a.sub_activities.forEach(function(s,sIndex){
                    $(`#output-id-${pIndex}-${aIndex}-${sIndex}`).select2({
                      ajax: {
                        url: '/api/nomenclature/sub-activity',
                        data: function (params) {
                          return {
                            search: params.term,
                            activity_id: _this.programs[pIndex].activities[aIndex].nomenclature_activity_id,
                            _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                          };
                        },
                        processResults: function (data, params) {
                          return {
                            results: data.data,
                          };
                        },
                        cache: true,
                      },
                      placeholder: 'Cari Nama Sub Kegiatan',
                      minimumInputLength: 1,
                      templateResult: function (repo) {
                        if (repo.loading) {
                          return repo.text;
                        }
                        var $container = $(
                          "<div class='select2-result-repository clearfix'>" +
                          "<div class='select2-result-repository__meta'>" +
                          "<div class='select2-result-repository__title'></div>" +
                          "</div>" +
                          "</div>"
                        );

                        $container.find(".select2-result-repository__title").html(`<strong>[${repo.code}]</strong> ${repo.text}`);

                        return $container;
                      },
                      templateSelection: function (repo) {
                        return repo.code ? `[${repo.code}] ${repo.text}` : repo.text;
                      }
                    })
                    $(`#output-id-${pIndex}-${aIndex}-${sIndex}`).on('change',function(){
                      _this.programs[pIndex].activities[aIndex].sub_activities[sIndex].nomenclature_activity_id = $(this).val();
                    })
                  })
                })
              })
            },300)
          }
          console.log(this.programs);
        },

        selectRad() {
          this.selectedRad = @json($rads).find((r) => r.id === Number(this.rad_id));
          // console.log(this.selectedRad);
        },

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

          if (this.pillar_id) {
            fetch(`/api/purposes`, {
              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, version: this.selectedRad !== null ? this.selectedRad.metadata_version : 'v1' })
            })
              .then(response => response.json())
              .then(res => {
                this.purposes = res.data;
                if (data.metadata_purpose_id) {
                  this.metadata_purpose_id = data.metadata_purpose_id;
                  this.getTargets()
                }
              })
              .catch(error => console.error('Error fetching target and indicator:', error));
          } else {
            this.purposes = [];
          }
        },

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

          if (this.metadata_purpose_id) {
            fetch(`/api/targets`, {
              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, version: this.selectedRad !== null ? this.selectedRad.metadata_version : 'v1' })
            })
              .then(response => response.json())
              .then(res => {
                this.targets = res.data;
                if (data.metadata_target_id) {
                  this.metadata_target_id = data.metadata_target_id;
                  this.getIndicators();
                }
              })
              .catch(error => console.error('Error fetching target and indicator:', error));
          } else {
            this.targets = [];
          }
        },

        getIndicators() {
          this.metadata_indicator_id = '';

          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 !== null ? this.selectedRad.metadata_version : 'v1' })
            })
              .then(response => response.json())
              .then(res => {
                this.indicators = res.data;
                if (data.metadata_indicator_id) {
                  this.metadata_indicator_id = data.metadata_indicator_id;
                }
              })
              .catch(error => console.error('Error fetching target and indicator:', error));
          } else {
            this.indicators = [];
          }
        },

        addProgram() {
          if (this.selectedRad && this.nomenclature_id) {
            this.programs.push({
              nomenclature_program_id: '',
              activities: []
            })
            const _this = this;
            setTimeout(function(){
              const pIndex = _this.programs.length - 1;
              $(`#program-${pIndex}`).select2({
                ajax: {
                  url: '/api/nomenclature/program',
                  data: function (params) {
                    return {
                      search: params.term,
                      nomenclature_id: _this.nomenclature_id,
                      _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    };
                  },
                  processResults: function (data, params) {
                    return {
                      results: data.data,
                    };
                  },
                  cache: true,
                },
                placeholder: 'Cari Nama Program',
                minimumInputLength: 1,
                templateResult: function (repo) {
                  if (repo.loading) {
                    return repo.text;
                  }
                  var $container = $(
                    "<div class='select2-result-repository clearfix'>" +
                    "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'></div>" +
                    "</div>" +
                    "</div>"
                  );

                  $container.find(".select2-result-repository__title").html(`<strong>[${repo.code}]</strong> ${repo.text}`);

                  return $container;
                },
                templateSelection: function (repo) {
                  return repo.code ? `[${repo.code}] ${repo.text}` : repo.text;
                }
              })
              $(`#program-${pIndex}`).on('change',function(){
                _this.programs[pIndex].nomenclature_program_id = $(this).val();
              })
            },200)
          }
        },

        deleteProgram(index) {
          this.programs.splice(index, 1);
        },

        addActivity(indexP) {
          this.programs[indexP].activities.push({
            nomenclature_activity_id: '',
            sub_activities: []
          })
          const _this = this;
          setTimeout(function(){
            const pIndex = _this.programs[indexP].activities.length - 1;
            $(`#activity-${indexP}-${pIndex}`).select2({
              ajax: {
                url: '/api/nomenclature/activity',
                data: function (params) {
                  return {
                    search: params.term,
                    program_id: _this.programs[indexP].nomenclature_program_id,
                    _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                  };
                },
                processResults: function (data, params) {
                  return {
                    results: data.data,
                  };
                },
                cache: true,
              },
              placeholder: 'Cari Nama Kegiatan',
              minimumInputLength: 1,
              templateResult: function (repo) {
                if (repo.loading) {
                  return repo.text;
                }
                var $container = $(
                  "<div class='select2-result-repository clearfix'>" +
                  "<div class='select2-result-repository__meta'>" +
                  "<div class='select2-result-repository__title'></div>" +
                  "</div>" +
                  "</div>"
                );

                $container.find(".select2-result-repository__title").html(`<strong>[${repo.code}]</strong> ${repo.text}`);

                return $container;
              },
              templateSelection: function (repo) {
                return repo.code ? `[${repo.code}] ${repo.text}` : repo.text;
              }
            })
            $(`#activity-${indexP}-${pIndex}`).on('change',function(){
              _this.programs[indexP].activities[pIndex].nomenclature_activity_id = $(this).val();
            })
          },200)
        },

        deleteActivity(indexP, indexA) {
          this.programs[indexP].activities.splice(indexA, 1);
        },

        addOutput(indexP, indexA) {
          const realisations = [];
          for(let iy = this.selectedRad.year_start;iy <= this.selectedRad.year_end;iy++){
            realisations.push({
              year: iy,
              target: '',
              realisation_target_1: null,
              realisation_target_2: null,
              funds_allocation: null,
              realisation_funds_1: null,
              realisation_funds_2: null,
            })
          }
          this.programs[indexP].activities[indexA].sub_activities.push({
            nomenclature_sub_activity_id: '',
            source: '',
            unit: '',
            location: '',
            indicative_funds_allocation: '',
            realisations
          })
          const _this = this;
          setTimeout(function(){
            const pIndex = _this.programs[indexP].activities[indexA].sub_activities.length - 1;
            $(`#output-id-${indexP}-${indexA}-${pIndex}`).select2({
              ajax: {
                url: '/api/nomenclature/sub-activity',
                data: function (params) {
                  return {
                    search: params.term,
                    activity_id: _this.programs[indexP].activities[indexA].nomenclature_activity_id,
                    _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                  };
                },
                processResults: function (data, params) {
                  return {
                    results: data.data,
                  };
                },
                cache: true,
              },
              placeholder: 'Cari Nama Sub Kegiatan',
              minimumInputLength: 1,
              templateResult: function (repo) {
                if (repo.loading) {
                  return repo.text;
                }
                var $container = $(
                  "<div class='select2-result-repository clearfix'>" +
                  "<div class='select2-result-repository__meta'>" +
                  "<div class='select2-result-repository__title'></div>" +
                  "</div>" +
                  "</div>"
                );

                $container.find(".select2-result-repository__title").html(`<strong>[${repo.code}]</strong> ${repo.text}`);

                return $container;
              },
              templateSelection: function (repo) {
                return repo.code ? `[${repo.code}] ${repo.text}` : repo.text;
              }
            })
            $(`#output-id-${indexP}-${indexA}-${pIndex}`).on('change',function(){
              _this.programs[indexP].activities[indexA].sub_activities[pIndex].nomenclature_activity_id = $(this).val();
            })
          },200)
        },

        deleteOutput(indexP, indexA, indexO) {
          this.programs[indexP].activities[indexA].sub_activities.splice(indexO, 1);
        },
      }
    }
  </script>
  <script type="module">
    const disabled = {{ $disabled ? 'true' : 'false' }};
    $(function() {
      $('.select2').select2({
        disabled: disabled
      });
    });
  </script>
@endpush