@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">
          <div class="card w-100">
            <div class="card-body">
              <h3 class="mb-4">{{ $disabled ? 'Detail' : ($model->id ? 'Update' : 'Tambah') }} {{ 'Capaian Form 3' }}</h3>
              <form role="form" action="{{ route('matrix3.storeRealisation') }}" method="post">
                <div
                  x-data="targetFormData()"
                >
                  <div class="mb-3 fv-row">
                  </div>
                  <div class="mb-3">
                    <div class="row mb-2">
                      <div class="col-2">
                        <h6>RAD</h6>
                      </div>
                      <div class="col-10">
                        <h6>: {{ $matrix3->rad->name }} ({{ $matrix3->rad->year_start }} - {{ $matrix3->rad->year_end }})</h6>
                      </div>
                      <div class="col-2">
                        <h6>Pillar</h6>
                      </div>
                      <div class="col-10">
                        <h6>: {{ $matrix3->pillar->name }}</h6>
                      </div>
                      <div class="col-2">
                        <h6>Tujuan</h6>
                      </div>
                      <div class="col-10">
                        <h6>: [{{ $matrix3->metadataPurpose->code }}] {{ $matrix3->metadataPurpose->name }}</h6>
                      </div>
                      <div class="col-2">
                        <h6>Target</h6>
                      </div>
                      <div class="col-10">
                        <h6>: [{{ $matrix3->metadataTarget->code }}] {{ $matrix3->metadataTarget->name }}</h6>
                      </div>
                      <div class="col-2">
                        <h6>Indikator</h6>
                      </div>
                      <div class="col-10">
                        <h6>: [{{ $matrix3->metadataIndicator->code }}] {{ $matrix3->metadataIndicator->name }}</h6>
                      </div>
                      <div class="col-2">
                        <h6>Nama Program</h6>
                      </div>
                      <div class="col-10">
                        <h6>: {{ $model->program->program_name }}</h6>
                      </div>
                      <div class="col-2">
                        <h6>Nama Kegiatan</h6>
                      </div>
                      <div class="col-10">
                        <h6>: {{ $model->activity_name }}</h6>
                      </div>
                    </div>
                    <div class="accordion mb-3" :id="`accordion-outputs`">
                      <template x-for="(output, index) in activity.outputs" :key="index">
                        <div class="accordion-item" :key="index">
                          <h2 class="accordion-header">
                            <button 
                              class="accordion-button collapsed"
                              type="button" 
                              data-bs-toggle="collapse" 
                              :data-bs-target="`#collapse-${index}`" 
                              aria-expanded="false" 
                              :aria-controls="`collapse-${index}`"
                              x-text="`Data Output Kegiatan ${index+1}`"
                            >
                            </button>
                          </h2>
                          <div :id="`collapse-${index}`" class="accordion-collapse collapse" :data-bs-parent="`#accordion-outputs`">
                            <div class="accordion-body">
                              <div class="row mb-2">
                                <div class="col-2">
                                  <h6>Nama Output Kegiatan</h6>
                                </div>
                                <div class="col-10">
                                  <h6 x-text="`: ${output.output_name}`"></h6>
                                </div>
                                <div class="col-2">
                                  <h6>Satuan</h6>
                                </div>
                                <div class="col-10">
                                  <h6 x-text="`: ${output.unit}`"></h6>
                                </div>
                                <div class="col-2">
                                  <h6>Sumber Pendanaan</h6>
                                </div>
                                <div class="col-10">
                                  <h6 x-text="`: ${output.source}`"></h6>
                                </div>
                                <div class="col-2">
                                  <h6>Indikatif Alokasi Anggaran 5 Tahun (Rp.)</h6>
                                </div>
                                <div class="col-10">
                                  <h6 x-text="`: ${output.indicative_funds_allocation}`"></h6>
                                </div>
                                <div class="col-2">
                                  <h6>Lokasi Aktual Pelaksanaan Kegiatan</h6>
                                </div>
                                <div class="col-10">
                                  <h6 x-text="`: ${output.location}`"></h6>
                                </div>
                              </div>
                              <template x-for="(year, indexY) in output.realisations" :key="indexY">
                                <div class="row mb-3">
                                  <input type="hidden" :name="`activity[outputs][${index}][realisations][${indexY}][id]`" :value="`${activity.outputs[index].realisations[indexY].id}`" />
                                  <div class="col-1">
                                    <label class="form-label" :for="`year-${index}-${indexY}`">Tahun</label>
                                    <input
                                      class="form-control form-prefill"
                                      :name="`activity[outputs][${index}][realisations][${indexY}][year]`"
                                      x-model="activity.outputs[index].realisations[indexY].year"
                                      :value="`${activity.outputs[index].realisations[indexY].year}`"
                                      :id="`year-${index}-${indexY}`"
                                      placeholder="Tahun" 
                                      readonly
                                    />
                                  </div>
                                  <div class="col-2">
                                    <label class="form-label" :for="`realisation_target_1-${index}-${indexY}`">Realisasi Sem I</label>
                                    <input
                                      class="form-control form-prefill"
                                      :name="`activity[outputs][${index}][realisations][${indexY}][realisation_target_1]`"
                                      x-model="activity.outputs[index].realisations[indexY].realisation_target_1"
                                      :id="`realisation_target_1-${index}-${indexY}`"
                                      value=""
                                      placeholder=""
                                      @readonly($disabled)
                                    />
                                  </div>
                                  <div class="col-2">
                                    <label class="form-label" :for="`realisation_target_2-${index}-${indexY}`">Realisasi Sem I</label>
                                    <input
                                      class="form-control form-prefill"
                                      :name="`activity[outputs][${index}][realisations][${indexY}][realisation_target_2]`"
                                      x-model="activity.outputs[index].realisations[indexY].realisation_target_2"
                                      :id="`realisation_target_2-${index}-${indexY}`"
                                      value=""
                                      placeholder=""
                                      @readonly($disabled)
                                    />
                                  </div>
                                  <div class="col-2">
                                    <label class="form-label" :for="`funds_allocation-${index}-${indexY}`">Alokasi Anggaran</label>
                                    <input
                                      type="number"
                                      class="form-control form-prefill"
                                      :name="`activity[outputs][${index}][realisations][${indexY}][funds_allocation]`"
                                      x-model="activity.outputs[index].realisations[indexY].funds_allocation"
                                      :id="`funds_allocation-${index}-${indexY}`"
                                      value=""
                                      placeholder=""
                                      readonly
                                    />
                                  </div>
                                  <div class="col-2">
                                    <label class="form-label" :for="`realisation_funds_1-${index}-${indexY}`">Realisasi Anggaran Sem I</label>
                                    <input
                                      class="form-control form-prefill"
                                      :name="`activity[outputs][${index}][realisations][${indexY}][realisation_funds_1]`"
                                      x-model="activity.outputs[index].realisations[indexY].realisation_funds_1"
                                      :id="`realisation_funds_1-${index}-${indexY}`"
                                      value=""
                                      placeholder=""
                                      @readonly($disabled)
                                    />
                                  </div>
                                  <div class="col-2">
                                    <label class="form-label" :for="`realisation_funds_2-${index}-${indexY}`">Realisasi Anggaran Sem II</label>
                                    <input
                                      class="form-control form-prefill"
                                      :name="`activity[outputs][${index}][realisations][${indexY}][realisation_funds_2]`"
                                      x-model="activity.outputs[index].realisations[indexY].realisation_funds_2"
                                      :id="`realisation_funds_2-${index}-${indexY}`"
                                      value=""
                                      placeholder=""
                                      @readonly($disabled)
                                    />
                                  </div>
                                </div>
                              </template>
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
                <input type="hidden" name="matrix3_id" value="{{ $model->matrix3_id }}" />
                <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 && $matrix3->status_form == 0 && auth()->user()->role_id == 1)
                <div class="d-flex w-100 justify-content-end gap-2">
                  <a class="btn btn-primary me-2 approve-confirmation" data-action="{{ route('matrix3.forms-approve') }}" data-id="{{ $model->matrix3_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 && $matrix3->status_form == 1)
                <div class="d-flex w-100 flex-column justify-content-start">
                  <h5>Disetujui Oleh: {{ $matrix3->approvedByForm ? $matrix3->approvedBy->name : '-' }} ({{ $matrix3->approved_date_form }})</h5>
                  <h5>Komentar: </h5>
                  <h5>{{ $matrix3->comment_form }}</h5>
                </div>
              @endif
              @if($disabled && $matrix3->status_form == 2)
                <div class="d-flex w-100 justify-content-start">
                  <h5>Ditolak Oleh: {{ $matrix3->rejectedByForm ? $matrix3->rejectedBy->name : '-' }} ({{ $matrix3->rejected_date_form }})</h5>
                  <h5>Komentar: </h5>
                  <h5>{{ $matrix3->comment_form }}</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.forms-approve') }}" method="POST">
          <input type="hidden" name="id" value="{{ $model->matrix3_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_form" 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.forms-reject') }}" method="POST">
          <input type="hidden" name="id" value="{{ $model->matrix3_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_form" 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() {
    return {
      activity: @json($activity) || {},

      init() {
        console.log(@json($activity))
        // 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();
        // }
      },

      // addProgram() {
      //   if (this.selectedRad) {
      //     this.programs.push({
      //       program_name: '',
      //       activities: []
      //     })
      //   }
      // },

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

      // addActivity(indexP) {
      //   this.programs[indexP].activities.push({
      //     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({
      //       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({
      //     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