@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">
          {{ $disabled ? Breadcrumbs::render('Forms3DetailEvaluation',$activity->id) :  Breadcrumbs::render('Forms3UpdateEvaluation',$activity->id)}}
          <div class="card w-100">
            <div class="card-body">
              <form role="form" action="{{ route('matrix3.storeEvaluation') }}" method="post" id="form-evaluation">
                <div x-data="targetFormData()" 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>: {{ $activity->program->program_name }}</h6>
                    </div>
                    <div class="col-2">
                      <h6>Nama Kegiatan</h6>
                    </div>
                    <div class="col-10">
                      <h6>: {{ $activity->activity_name }}</h6>
                    </div>
                  </div>
                  <hr />
                  <div class="row mb-3">
                    <div class="col-12">
                      <label for="message-text" class="">Status</label>
                      <select class="form-select" name="status">
                        <option value="">Pilih Status</option>
                        @foreach(getEvaluationStatus() as $st)
                          <option value="{{ $st['id'] }}" @selected(old('status', $model->status) === $st['id'])>{{ $st['label'] }}</option>
                        @endforeach
                      </select>
                      @error('status')
                      <div class="invalid-feedback d-block">
                        {{ $message }}
                      </div>
                      @enderror
                    </div>
                  </div>
                  <div class="accordion mb-3">
                    <template x-for="(e, index) in evaluationTroubles" :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}`"
                          >
                            <span x-text="`Indentifikasi Masalah ${index+1}`"></span>
                            <template x-if="!!e.id">
                              <div class="ms-3 d-flex gap-2">
                                <span class="badge text-bg-warning" x-text="`Diperbarui Oleh: ${e.updated_by ? e.updated_by.name : '-'}`"></span>
                                <span class="badge text-bg-dark" x-text="`Pada: ${e.updated_at_text}`"></span>
                              </div>
                            </template>
                          </button>
                        </h2>
                        <div :id="`collapse-${index}`" class="accordion-collapse collapse" :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="deleteEvaluation(index)"><i class="ti ti-trash me-2"></i>Hapus Indentifikasi Masalah</a>
                              @endif
                            </div>
                            <div class="mb-3 fv-row">
                              <label class="form-label" :for="`trouble-category-${index}`">Kategori Masalah</label>
                              <select class="form-select"
                                      :name="`evaluationTroubles[${index}][trouble_category_id]`"
                                      x-model="e.trouble_category_id"
                                      :id="`trouble-category-${index}`"
                                      @disabled($disabled)>
                                <option value="" selected disabled>-- Pilih Kategori Masalah --</option>
                                <template x-for="(t, indexT) in troubleCategory" :key="indexT">
                                  <option :value="t.id" x-text="t.name" x-bind:selected="t.id == e.trouble_category_id"></option>
                                </template>
                              </select>
                              <input type="hidden" :name="`evaluationTroubles[${index}][id]`" x-model="e.id" />
                            </div>
                            <div class="mb-3 fv-row">
                              <label class="form-label" :for="`description-${index}`">Deskripsi Masalah</label>
                              <textarea
                                class="form-control"
                                :id="`description-${index}`"
                                :name="`evaluationTroubles[${index}][description]`"
                                x-model="e.description"
                                placeholder="Deskripsi Masalah"
                                @readonly($disabled)
                              ></textarea>
                            </div>
                            <div class="mb-3 fv-row">
                              <label class="form-label" :for="`action_plan-${index}`">Rencana Tindak Lanjut</label>
                              <textarea
                                class="form-control"
                                :id="`action_plan-${index}`"
                                :name="`evaluationTroubles[${index}][action_plan]`"
                                x-model="e.action_plan"
                                placeholder="Rencana Tindak Lanjut"
                                @readonly($disabled)
                              ></textarea>
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                  @if(!$disabled)
                    <a class="btn btn-primary" @click="addEvaluation()"><i class="ti ti-plus me-2"></i>Tambah Indentifikasi Masalah</a>
                  @endif
                </div>
                <input type="hidden" name="program_id" value="{{ $activity->program->id }}" />
                <input type="hidden" name="activity_id" value="{{ $activity->id }}" />
                <input type="hidden" name="id" value="{{ $model->id }}" />
                <input type="hidden" name="matrix3_id" value="{{ $activity->matrix3_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->id && $model->status_evaluation == 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-evaluation') }}" 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>
                  <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_evaluation == 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_evaluation == 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="reject-modal" tabindex="-1" aria-labelledby="exampleModalLabel2">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form action="{{ route('matrix3.reject-evaluation') }}" 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 src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>
  function targetFormData() {
    return {
      evaluationTroubles: @json($evaluationTroubles),
      troubleCategory: @json($troubleCategory),
      init() {
        if(this.evaluationTroubles.length > 0){
          this.evaluationTroubles = this.evaluationTroubles.map((e)=>{
            return {...e, updated_at_text: dayjs(e.updated_at).format('DD MMM YYYY HH:mm:ss')}
          })
        }
        console.log(this.evaluationTroubles)
      },
      addEvaluation() {
        this.evaluationTroubles.push({
          id: null,
          trouble_category_id: '',
          description: '',
          action_plan: ''
        })
      },

      deleteEvaluation(index) {
        if(this.evaluationTroubles[index].id){
          const id = this.evaluationTroubles[index].id
          $('#form-evaluation').append(`<input type="hidden" name="deleted_eval[]" value="${id}"/>`)
        }
        this.evaluationTroubles.splice(index, 1);
      },
    };
  }
</script>
@endpush