@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">
          {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('AnalyticsM3') }}
          <div class="card w-100 position-relative overflow-hidden">
            <div class="card-body p-4">
              <div class="row" x-data="analyticsData()">
                @if(!$selectedRad)
                  <x-empty-rad></x-empty-rad>
                @endif
                <div class="col-12 mb-2">
                  <form action="{{ route('analytics.matrix3') }}" method="get" id="form-search">
                    <input type="hidden" name="selected_rad" value="{{ $rad }}" />
                    <div class="row">
                      <div class="col-5">
                        <select class="form-select rounded-pill" name="rad" id="rad">
                          @foreach($rads as $r)
                            <option value="{{ $r->id }}" @selected($r->id == $selectedRad->id)>{{ $r->name }} ({{$r->year_start}} - {{ $r->year_end }})</option>
                          @endforeach
                        </select>
                      </div>
                      <div class="col-3">
                        <select class="form-select rounded-pill" name="year" id="year">
                          @if($selectedRad)
                            @for($y=$selectedRad->year_start;$y<=$selectedRad->year_end;$y++)
                              <option value="{{ $y }}" @selected($y == $year)>{{ $y }}</option>
                            @endfor
                          @endif
                        </select>
                      </div>
                      @if(in_array(Auth::user()->role_id, [1]))
                        <div class="col-4">
                          <select class="form-select rounded-pill" name="institution" id="institution">
                            <option value="">Pilih Lembaga</option>
                            @foreach($institutions as $ins)
                              <option value="{{ $ins->id }}" @selected(old('institution', $institution_id) == $ins->id)>{{ $ins->name }}</option>
                            @endforeach
                          </select>
                        </div>
                      @endif
                    </div>
                  </form>
                </div>
                <div class="col-12 mb-4 mt-4">
                  <div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-pills nav-fill user-profile-tab border-bottom" role="tablist">
                      <li class="nav-item" role="presentation">
                        <button class="nav-link active position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-6" id="form-tab" data-bs-toggle="pill" data-bs-target="#form" type="button" role="tab" aria-controls="form" aria-selected="true">
                          <span>Capaian</span>
                        </button>
                      </li>
                      <li class="nav-item" role="presentation">
                        <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-6" id="report-tab" data-bs-toggle="pill" data-bs-target="#report" type="button" role="tab" aria-controls="report" aria-selected="false">
                          <span>Laporan Identifikasi Masalah dan Rencana Tindak Lanjut</span>
                        </button>
                      </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content border mt-2">
                      <div class="tab-pane active" id="form" role="tabpanel">
                        <div class="p-3">
                          <div class="mb-4 d-flex justify-content-end align-items-center">
                            <div class="btn-group">
                              <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                Ekspor Data
                              </button>
                              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <li>
                                  <a class="dropdown-item" href="javascript:void(0)" @click="exportFormPdf()">PDF</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="javascript:void(0)" @click="exportForm()">Excel</a>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <div class="table-responsive mb-4 border rounded-1">
                            <table class="table table-sm table-bordered mb-0 align-middle">
                              <thead class="bg-inverse text-white table-dark fs-4">
                              <tr>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">No</h6>
                                </th>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Kegiatan</h6>
                                </th>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Indikator Output</h6>
                                </th>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Satuan</h6>
                                </th>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Tahun Target {{ $year }}</h6>
                                </th>
                                <th colspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-center text-white">Realisasi Target tahun {{ $year }}</h6>
                                </th>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-center text-white">Alokasi Anggaran tahun {{ $year }}</h6>
                                </th>
                                <th colspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-center text-white">Realisasi Anggaran tahun {{ $year }}</h6>
                                </th>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Sumber Pendanaan</h6>
                                </th>
                                <th rowspan="2">
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Lokasi Aktual Pelaksanaan Kegiatan</h6>
                                </th>
                              </tr>
                              <tr>
                                <th>
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Sem I</h6>
                                </th>
                                <th>
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Sem II</h6>
                                </th>
                                <th>
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Sem I</h6>
                                </th>
                                <th>
                                  <h6 class="fs-4 fw-semibold mb-0 text-white">Sem II</h6>
                                </th>
                              </tr>
                              </thead>
                              <tbody>
                              @foreach($data->items() as $d)
                                <tr>
                                  <td class="bg-warning text-black" colspan="12">
                                    <strong class="me-4">{{ $d->institution->name}}</strong>
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan="12">
                                    Pillar: <strong class="text-black">{{ $d->pillar->name}}</strong>
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan="12">
                                    Tujuan: <strong class="text-black">{{ $d->metadataPurpose->name}}</strong>
                                  </td>
                                </tr>
                                <tr>
                                  <td colspan="12">
                                    Indikator SDGs:<br /><strong class="text-black">[{{ $d->metadataIndicator->code }}] {{ $d->metadataIndicator->name }}</strong>
                                  </td>
                                </tr>
                                @foreach($d->programs as $p)
                                  <tr>
                                    <td colspan="12">
                                      Program: <strong class="text-black">{{ $p->program_name}}</strong>
                                    </td>
                                  </tr>
                                  @foreach($p->activities as $key=>$a)
                                    @foreach($a->outputs as $keyO=>$o)
                                      <tr>
                                        @if($keyO === 0)
                                          <td rowspan="{{ count($a->outputs) }}">{{ $key + 1 }}</td>
                                          <td rowspan="{{ count($a->outputs) }}">
                                            <strong>{{ $a->activity_name}}</strong>
                                          </td>
                                        @endif
                                        <td>{{ $o->output_name }}</td>
                                        <td>{{ $o->unit }}</td>
                                        <td class="text-center">{{ $o->realisations[0]->target }}</td>
                                        <td class="text-center">{{ $o->realisations[0]->realisation_target_1 }}</td>
                                        <td class="text-center">{{ $o->realisations[0]->realisation_target_2 }}</td>
                                        <td class="text-end">{{ number_format($o->realisations[0]->funds_allocation, 0, ',', '.') }}</td>
                                        <td>{{ $o->realisations[0]->realisation_funds_1 }}</td>
                                        <td>{{ $o->realisations[0]->realisation_funds_1 }}</td>
                                        <td>{{ $o->source }}</td>
                                        <td>{{ $o->location }}</td>
                                      </tr>
                                    @endforeach
                                  @endforeach
                                @endforeach
                              @endforeach
                              </tbody>
                            </table>
                          </div>
                          {{ $data->links() }}
                        </div>
                      </div>
                      <div class="tab-pane p-3" id="report" role="tabpanel">
                        <div class="mb-4 d-flex justify-content-end align-items-center">
                          <a href="javascript:void(0)" @click="exportReport()" class="btn btn-primary">
                            <i class="ti ti-download fs-4 me-2"></i>Ekspor Data
                          </a>
                        </div>
                        <div class="table-responsive mb-4 border rounded-1">
                          <table class="table table-sm table-bordered mb-0 align-middle">
                            <thead class="bg-inverse text-white table-dark fs-4">
                            <tr>
                              <th rowspan="2">
                                <h6 class="fs-4 fw-semibold mb-0 text-white text-center">Tujuan / Target SDGs</h6>
                              </th>
                              <th colspan="2">
                                <h6 class="fs-4 fw-semibold mb-0 text-white text-center">Identifikasi Masalah</h6>
                              </th>
                              <th rowspan="2">
                                <h6 class="fs-4 fw-semibold mb-0 text-white text-center">Rencana Tindak Lanjut</h6>
                              </th>
                              <th rowspan="2">
                                <h6 class="fs-4 fw-semibold mb-0 text-white text-center">Instansi Pelaksana</h6>
                              </th>
                            </tr>
                            <tr>
                              <th>
                                <h6 class="fs-4 fw-semibold mb-0 text-white text-center">Kategori</h6>
                              </th>
                              <th>
                                <h6 class="fs-4 fw-semibold mb-0 text-white text-center">Deskripsi Masalah</h6>
                              </th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($evaluations as $e)
                              @php $firstMatrik = true; @endphp
                              @foreach($e->matrix3 as $m)
                              @php $firstActivity = true; @endphp
                                @foreach($m->activities as $a)
                                @foreach(($a?->evaluation?->evaluation_troubles ?? []) as $t)
                                    <tr>
                                      @if ($firstActivity && $loop->first)
                                        <td rowspan="{{ $m->activities->sum(fn($a) => $a?->evaluation?->evaluation_troubles ? count($a?->evaluation?->evaluation_troubles) : 0) }}" style="vertical-align: text-top">
                                          <strong>{{ $m->metadataPurpose->name }}</strong><br />
                                          [{{ $m->metadataTarget->code }}] {{ $m->metadataTarget->name }}
                                        </td>
                                        @php $firstActivity = false; @endphp
                                      @endif
                                      <td>{{ $t->trouble->name }}</td>
                                      <td>{{ $t->description }}</td>
                                      <td>{{ $t->action_plan }}</td>
                                      @if ($firstMatrik && $loop->first)
                                        <td rowspan="{{ $e->matrix3->sum(fn($m) => $m->activities->sum(fn($a) => $a?->evaluation?->evaluation_troubles ? count($a?->evaluation?->evaluation_troubles) : 0)) }}" style="vertical-align: text-top">
                                          {{ $e->name }}
                                        </td>
                                        @php $firstMatrik = false; @endphp
                                      @endif
                                    </tr>
                                  @endforeach
                                @endforeach
                              @endforeach
                            @endforeach
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
  document.getElementById('rad').addEventListener('change', function() {
    document.getElementById('form-search').submit();
  });
  document.getElementById('year').addEventListener('change', function() {
    document.getElementById('form-search').submit();
  });
  document.getElementById('institution').addEventListener('change', function() {
    document.getElementById('form-search').submit();
  });
</script>
<script>
  function analyticsData() {
    return {
      rad_id: '',
      selectedYear: null,

      init() {
        this.rad_id = @json($selectedRad?->id ?? null);
        this.selectedYear = @json($year);
        console.log(this.rad_id, this.selectedYear);
      },

      exportForm() {
        fetch(`/api/matrix3/export-form`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            radId: this.rad_id,
            selectedYear: this.selectedYear,
          })
        })
          .then(response => {
            if (!response.ok) throw new Error('Failed to download file');
            return response.blob();
          })
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `Form 3 Analytics.xlsx`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
          })
          .catch(error => console.error('Failed to download file:', error));
      },
      exportFormPdf() {
        fetch(`/analytics/matrix3-pdf`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/pdf',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            radId: this.rad_id,
            year: this.selectedYear,
          })
        })
          .then(response => {
            if (!response.ok) throw new Error('Failed to download file');
            return response.blob();
          })
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `Form 3 Analytics.pdf`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
          })
          .catch(error => console.error('Failed to download file:', error));
      },

      exportReport() {
        fetch(`/api/matrix3/export-report`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            radId: this.rad_id,
            selectedYear: this.selectedYear,
          })
        })
          .then(response => {
            if (!response.ok) throw new Error('Failed to download file');
            return response.blob();
          })
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `Laporan Identifikasi Masalah Form 3.xlsx`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
          })
          .catch(error => console.error('Failed to download file:', error));
      },
    }
  }
</script>
@endpush