@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 ? 'ActionPlanM3View' : 'ActionPlanM3Edit', $model->id) : Breadcrumbs::render('ActionPlanM3Add')}}
          <div class="card w-100">
            <div class="card-body">
              <form role="form" action="{{ route('matrix3.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)
                  })"
                  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();
                    });
                  "
                >
                  <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 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>
                                <input type="text" :name="`forms[${index}][program_name]`" x-model="p.program_name" class="form-control" :id="`program-${index}`" placeholder="Nama Program" @readonly($disabled)/>
                                <input type="hidden" :name="`forms[${index}][id]`" x-model="p.id" class="form-control" />
                              </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>
                                          <input
                                            type="text"
                                            :name="`forms[${index}][activities][${indexA}][activity_name]`"
                                            class="form-control"
                                            x-model="p.activities[indexA].activity_name"
                                            :id="`activity-${index}-${indexA}`"
                                            placeholder="Nama Kegiatan"
                                            @readonly($disabled)
                                          />
                                          <input type="hidden" :name="`forms[${index}][activities][${indexA}][id]`" x-model="p.activities[indexA].id" class="form-control" />
                                        </div>
                                        <div class="accordion mb-3" :id="`accordion-${index}-${indexA}`">
                                          <template x-for="(output, indexO) in a.outputs" :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 Output 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 Output Kegiatan</a>
                                                    @endif
                                                  </div>
                                                  <div class="mb-3 fv-row">
                                                    <label class="form-label" :for="`output-name-${index}-${indexA}-${indexO}`">Nama Output Kegiatan</label>
                                                    <input
                                                      type="text"
                                                      :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][output_name]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].outputs[indexO].output_name"
                                                      :id="`output-name-${index}-${indexA}-${indexO}`"
                                                      placeholder="Nama Output Kegiatan"
                                                      @readonly($disabled)
                                                    />
                                                    <input
                                                      type="hidden"
                                                      :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][id]`"
                                                      x-model="p.activities[indexA].outputs[indexO].id"
                                                    />
                                                  </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}][outputs][${indexO}][unit]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].outputs[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}][outputs][${indexO}][source]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].outputs[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}][outputs][${indexO}][indicative_funds_allocation]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].outputs[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}][outputs][${indexO}][location]`"
                                                      class="form-control"
                                                      x-model="p.activities[indexA].outputs[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-2">
                                                        <label class="form-label" for="baseline">Tahun</label>
                                                        <input
                                                          class="form-control form-prefill"
                                                          :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][realisations][${indexY}][year]`"
                                                          x-model="p.activities[indexA].outputs[indexO].realisations[indexY].year"
                                                          :value="`${p.activities[indexA].outputs[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}][outputs][${indexO}][realisations][${indexY}][target]`"
                                                          x-model="p.activities[indexA].outputs[indexO].realisations[indexY].target"
                                                          value=""
                                                          placeholder="Target SDGs"
                                                          @readonly($disabled)
                                                        />
                                                      </div>
                                                      <div class="col-6">
                                                        <label class="form-label" for="baseline">Alokasi Anggaran</label>
                                                        <input
                                                          class="form-control form-prefill"
                                                          :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][realisations][${indexY}][funds_allocation]`"
                                                          x-model="p.activities[indexA].outputs[indexO].realisations[indexY].funds_allocation"
                                                          value=""
                                                          type="number"
                                                          placeholder="Alokasi Anggaran"
                                                          @readonly($disabled)
                                                        />
                                                      </div>
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][realisations][${indexY}][id]`"
                                                        x-model="p.activities[indexA].outputs[indexO].realisations[indexY].id"
                                                      />
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][realisations][${indexY}][realisation_target_1]`"
                                                        x-model="p.activities[indexA].outputs[indexO].realisations[indexY].realisation_target_1"
                                                      />
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][realisations][${indexY}][realisation_target_2]`"
                                                        x-model="p.activities[indexA].outputs[indexO].realisations[indexY].realisation_target_2"
                                                      />
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][realisations][${indexY}][realisation_funds_1]`"
                                                        x-model="p.activities[indexA].outputs[indexO].realisations[indexY].realisation_funds_1"
                                                      />
                                                      <input
                                                        type="hidden"
                                                        :name="`forms[${index}][activities][${indexA}][outputs][${indexO}][realisations][${indexY}][realisation_funds_2]`"
                                                        x-model="p.activities[indexA].outputs[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 Output 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">
                  <a class="btn btn-primary me-2 approve-confirmation" data-action="{{ route('matrix3.approve') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin menyetujui data ini?" href="javascript:void(0)">
                    <i class="ti ti-check me-2"></i>Setuju
                  </a>
                  {{-- <a class="btn btn-danger reject-confirmation" data-action="{{ route('matrix3.reject') }}" data-id="{{ $model->id }}" data-label="Anda yakin ingin menyetujui data ini?" href="javascript:void(0)">
                    <i class="ti ti-x me-2"></i>Tolak
                  </a> --}}
                  {{-- <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>
                </div>
              @endif
              @if($disabled && $model->status == 2)
                <div class="d-flex w-100 flex-column 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('matrix3.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('matrix3.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: [],
      pillars: [],
      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)) || '',
      programs: @json($programs) || [],

      init() {
        this.getRads();
        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();
        }
      },

      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));
      },

      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;
            if (data.pillar_id) {
              this.pillar_id = data.pillar_id;
              this.getPurposes();
            }
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
      },

      getPurposes() {
        this.metadata_purpose_id = '';
        this.metadata_target_id = '';
        this.metadata_indicator_id = '';
        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;
              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-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;
              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-by-matrix1`, {
            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 })
          })
            .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.programs.push({
            id: null,
            program_name: '',
            activities: []
          })
        }
      },

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

      addActivity(indexP) {
        this.programs[indexP].activities.push({
          id: null,
          activity_name: '',
          outputs: []
        })
      },

      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({
            id: null,
            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].outputs.push({
          id: null,
          output_name: '',
          source: '',
          unit: '',
          location: '',
          indicative_funds_allocation: '',
          realisations
        })
      },

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