@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('AnalyticsM1') }}
          <div class="card w-100 position-relative overflow-hidden">
            <div class="card-body p-4">
              <div x-data="analyticsData()" class="row">
                @if($rads->count() == 0)
                  <x-empty-rad></x-empty-rad>
                @endif
                <div class="col-12 mb-2">
                  <div class="row">
                    <div class="col-6">
                      {{-- <label class="form-label">RAD</label> --}}
                      <select class="form-select rounded-pill" x-model="rad_id" @change="selectRad">
                        <option value="" selected>-- Pilih RAD --</option>
                        @foreach($rads as $r)
                          <option value="{{ $r->id }}">{{ $r->name }} ({{$r->year_start}} - {{ $r->year_end }})</option>
                        @endforeach
                      </select>
                    </div>
                    <div class="col-6">
                      {{-- <label class="form-label">RAD</label> --}}
                      <select class="form-select rounded-pill" x-model="selectedYear" @change="selectYear">
                        <option value="" selected>-- Pilih Tahun --</option>
                        <template x-for="y in range(selectedRad.year_start, selectedRad.year_end)" key="y">
                          <option :value="y" x-text="y" x-bind:selected="y == selectedYear"></option>
                        </template>
                      </select>
                    </div>
                  </div>
                </div>
                <div id="detail-goal" class="col-12 mb-2 pt-4" x-show="selectedRad.id">
                  <h5 class="text-center">Rekapitulasi Matrik 1 SDGs</h5>
                  <div class="mb-4 d-flex justify-content-between align-items-center" x-show="dataMatrix.length > 0">
                    <div class="d-flex gap-2">
                      <div class="d-flex gap-2 align-items-center">
                        <span class="bg-success d-block rounded-1" style="width: 25px;height: 25px"></span>
                        <span>Tercapai</span>
                      </div>
                      <div class="d-flex gap-2 align-items-center">
                        <span class="bg-warning d-block rounded-1" style="width: 25px;height: 25px"></span>
                        <span>Akan Tercapai</span>
                      </div>
                      <div class="d-flex gap-2 align-items-center">
                        <span class="bg-danger d-block rounded-1" style="width: 25px;height: 25px"></span>
                        <span>Perlu Perhatian Khusus</span>
                      </div>
                    </div>
                    <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="exportDataPdf(selectedYear)">PDF</a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="javascript:void(0)" @click="exportData(selectedYear)">Excel</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="table-responsive mb-4 border rounded-1" x-show="dataMatrix.length > 0">
                    <table class="table 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">Kode Indikator</h6>
                        </th>
                        <th rowspan="2">
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Indikator</h6>
                        </th>
                        <th rowspan="2">
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Sumber Data</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">Angka Dasar (Baseline)</h6>
                        </th>
                        <th :colspan="`${selectedRad.year_end - selectedRad.year_start + 1}`">
                          <h6 class="fs-4 fw-semibold mb-0 text-center text-white">Target/Capaian</h6>
                        </th>
                        <th rowspan="2">
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Aksi</h6>
                        </th>
                      </tr>
                      <tr>
                        <template x-for="y in range(selectedRad.year_start, selectedRad.year_end)" key="y">
                          <th >
                            <h6 class="fs-4 fw-semibold mb-0 text-white" x-text="y"></h6>
                          </th>
                        </template>
                      </tr>
                      </thead>
                      <tbody id="matrix-result"></tbody>
                    </table>
                  </div>
                  <div class="d-flex justify-content-end" x-show="dataMatrix.length > 0">
                    <button class="btn btn-primary" x-show="dataMatrix.length > 0" @click="getMultiIndicatorsChart()" data-bs-toggle="modal" data-bs-target="#chart-modal" data-bs-whatever="@mdo">Lihat Semua Grafik Indikator</button>
                  </div>
                  <div class="table-responsive mb-4 border rounded-1" x-show="dataMatrixPerYear.length > 0">
                    <table class="table table-bordered mb-0 align-middle">
                      <thead class="bg-inverse text-white table-dark fs-4">
                        <tr>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white">Kode Indikator</h6>
                          </th>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white">Indikator</h6>
                          </th>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white">Sumber Data</h6>
                          </th>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white">Satuan</h6>
                          </th>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white">Baseline</h6>
                          </th>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white" x-text="`Target SDGs Tahun ${selectedYear}`"></h6>
                          </th>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white" x-text="`Capaian SDGs Tahun ${selectedYear}`"></h6>
                          </th>
                          <th>
                            <h6 class="fs-4 fw-semibold mb-0 text-white">Status</h6>
                          </th>
                        </tr>
                      </thead>
                      <tbody id="matrix-result-year"></tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="chart-modal" tabindex="-1" aria-labelledby="exampleModalLabel1">
    <div class="modal-dialog modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header d-flex align-items-center">
          {{-- <h4 class="modal-title" id="exampleModalLabel1">
            Grafik Capaian
          </h4> --}}
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="chart"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
            Tutup
          </button>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
  function analyticsData() {
    return {
      rads: @json($rads),
      rad_id: '',
      selectedYear: null,
      purposes: [],
      selectedRad: {},
      numberToWords(value) {
        return this.wordMap[value] ?? 'Unknown';
      },
      wordMap: @json(
        collect(range(1, 17))->mapWithKeys(fn($num) => [$num => numberToWords($num)])
      ),
      selectedPurpose: {},
      dataMatrix: [],
      dataMatrixPerYear: [],

      init() {
        // this.rad_id = 1;
        // this.selectedYear = '2024';
        // this.selectRad();
      },

      selectRad() {
        if (this.rad_id) {
          this.selectedRad = this.rads.find((r) => r.id === Number(this.rad_id));
          if (this.selectedYear) {
            this.getMatrix1PerYear();
          } else {
            this.getMatrix1();
          }
        } else {
          this.selectedRad = {};
        }
      },

      selectYear() {
        if (this.rad_id) {
          this.selectedRad = this.rads.find((r) => r.id === Number(this.rad_id));
          if (this.selectedYear) {
            this.getMatrix1PerYear();
          } else {
            this.getMatrix1();
          }
        } else {
          this.selectedRad = {};
        }
      },

      selectPurpose(id) {
        this.selectedPurpose = this.purposes.find((p) => p.id === Number(id));
        if (this.selectedYear) {
          this.getMatrix1PerYear();
        } else {
          this.getMatrix1();
        }
      },

      getPurposes() {
        fetch(`/api/purposes-by-version`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            version: this.selectedRad.metadata_version
          })
        })
          .then(response => response.json())
          .then(res => {
            this.purposes = res.data;
            // this.selectPurpose(1);
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
      },

      getMatrix1() {
        fetch(`/api/matrix1/purpose`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            radId: this.rad_id,
            groupByTarget: true
          })
        })
          .then(response => response.json())
          .then(res => {
            this.dataMatrix = res.data;
            setTimeout(()=>{
              $('#matrix-result').empty();
              let html = ``;
              const _this = this;
              this.dataMatrix.forEach((p,index) => {
                html+=`<tr>
                  <td class="bg-info text-black fw-bold" colspan="${6 + (_this.selectedRad.year_end - _this.selectedRad.year_start + 1)}">Tujuan ${p.purpose.code}. ${p.purpose.name}</td>
                </tr>`
                p.data.forEach((t,indexT) => {
                  html+=`<tr>
                    <td class="text-black" colspan="${6 + (_this.selectedRad.year_end - _this.selectedRad.year_start + 1)}">Target ${t.target.code}. ${t.target.name}</td>
                  </tr>`
                  t.data.forEach((d, idxData) => {
                    html+=`<tr>
                      <td >${d.metadata_indicator.code}</td>
                      <td >${d.metadata_indicator.name}</td>
                      <td >${d.source}</td>
                      <td >${d.unit}</td>
                      <td >${d.baseline}</td>
                      ${d.forms.map((form, idxForm) => {
                        return `<td class="p-0 ${form.status == 1 ? 'bg-success' : form.status == 2 ? 'bg-warning' : form.status == 3 ? 'bg-danger' : ''} text-black"><div class="w-100 d-flex flex-column"><div class="py-2 border-bottom text-center">${form.target || '-'}</div><div class="py-2 text-center">${form.progress || '-'}</div></div></td>`
                      }).join('')}
                      <td class="text-center">
                        <div class="dropdown dropstart">
                          <a href="javascript:void(0)" class="text-muted" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ti ti-dots-vertical fs-6"></i>
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <li>
                              <a class="dropdown-item d-flex align-items-center gap-3 see-chart" data-id="${d.id}" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#chart-modal" data-bs-whatever="@mdo">
                              <i class="fs-4 ti ti-eye"></i>Lihat Grafik
                            </a>
                          </li>
                        </ul>
                      </div>
                    </td>
                    </tr>`
                  })
                })
              })
              $('#matrix-result').html(html);
              $('.see-chart').on('click', function(){
                _this.getChart($(this).data('id'))
              })
            },300)
            this.dataMatrixPerYear = [];
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
      },

      getMatrix1PerYear() {
        fetch(`/api/matrix1/purpose/year`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            radId: this.rad_id,
            selectedYear: this.selectedYear,
            groupByTarget: true
          })
        })
          .then(response => response.json())
          .then(res => {
            this.dataMatrix = [];
            this.dataMatrixPerYear = res.data;
            setTimeout(()=>{
              $('#matrix-result-year').empty();
              let html = ``;
              const _this = this;
              this.dataMatrixPerYear.forEach((p,index) => {
                html+=`<tr>
                  <td class="bg-info text-black fw-bold" colspan="8">Tujuan ${p.purpose.code}. ${p.purpose.name}</td>
                </tr>`
                p.data.forEach((t,indexT) => {
                  html+=`<tr>
                    <td class="text-black" colspan="8">Tujuan ${t.target.code}. ${t.target.name}</td>
                  </tr>`
                  t.data.forEach((d, idxData) => {
                    let svg = '';
                    switch(Number(d.forms[0].status)){
                      case 1:
                        svg = `<svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="#2D9A47"  class="icon icon-tabler icons-tabler-filled icon-tabler-circle">
                          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                          <path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" />
                        </svg>`
                        break;
                      case 2:
                        svg = `<svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="#FDB714" class="icon icon-tabler icons-tabler-filled icon-tabler-triangle-inverted" transform="rotate(30)">
                          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                          <path d="M20.118 3h-16.225a2.914 2.914 0 0 0 -2.503 4.371l8.116 13.549a2.917 2.917 0 0 0 4.987 .005l8.11 -13.539a2.914 2.914 0 0 0 -2.486 -4.386z" />
                        </svg>`
                        break;
                      case 3:
                        svg = `<svg xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="#EA1D2D" class="icon icon-tabler icons-tabler-filled icon-tabler-triangle-inverted">
                          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                          <path d="M20.118 3h-16.225a2.914 2.914 0 0 0 -2.503 4.371l8.116 13.549a2.917 2.917 0 0 0 4.987 .005l8.11 -13.539a2.914 2.914 0 0 0 -2.486 -4.386z" />
                        </svg>`
                        break;
                      default:
                        svg = `<span>Tidak Tersedia</span>`
                        break;
                    }
                    html+=`<tr>
                      <td >${d.metadata_indicator.code}</td>
                      <td >${d.metadata_indicator.name}</td>
                      <td >${d.source}</td>
                      <td >${d.unit}</td>
                      <td >${d.baseline}</td>
                      <td >${d.forms[0].target}</td>
                      <td >${d.forms[0].progress ? Number(d.forms[0].progress).toFixed(2) : '-'}</td>

                      <td class="text-center">
                        ${svg}
                      </td>
                    </td>
                    </tr>`
                  })
                })
              })
              $('#matrix-result-year').html(html);
            },300)
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
      },

      range(start, end, step = 1) {
        const result = [];
        for (let i = start; i <= end; i += step) {
            result.push(i);
        }
        return result;
      },

      getChart(matrixId) {
        fetch(`/api/matrix1/chart`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            id: matrixId
          })
        })
          .then(response => response.json())
          .then(res => {
            Highcharts.chart('chart', {
              chart: {
                type: 'line'
              },
              title: {
                text: 'Grafik Target dan Capaian'
              },
              xAxis: {
                categories: res.data.forms.map((e) => e.year)
              },
              yAxis: {
                title: {
                  text: res.data.unit
                }
              },
              tooltip: {
                shared: true
              },
              series: [{
                name: 'Capaian',
                data: res.data.forms.map((e) => {
                  return {
                    y: Number(e.progress),
                    name: e.year
                  }
                })
              },{
                name: 'Target',
                data: res.data.forms.map((e) => {
                  return {
                    y: Number(e.target),
                    name: e.year
                  }
                })
              }]
            });
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
      },

      getMultiIndicatorsChart() {
        fetch(`/api/matrix1/purpose`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            purposeId: this.selectedPurpose.id,
            radId: this.rad_id,
            groupByTarget: false
          })
        })
          .then(response => response.json())
          .then(res => {
            Highcharts.chart('chart', {
              chart: {
                type: 'line'
              },
              title: {
                text: 'Grafik Capaian Semua Indikator'
              },
              xAxis: {
                categories: res.data[0].forms.map((e) => e.year)
              },
              yAxis: {
                title: {
                  text: ''
                }
              },
              series: res.data.map(e => {
                return {
                  name: `Indikator ${e.metadata_indicator.code}`,
                  data: e.forms.map((f) => {
                    return {
                      y: Number(f.progress),
                      name: f.year
                    }
                  })
                }
              })
            });
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
      },

      exportData(year = null) {
        fetch(`/api/matrix1/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({
            purposeId: this.selectedPurpose.id,
            radId: this.rad_id,
            selectedYear: year,
          })
        })
          .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 = `Matrik 1 Analytics.xlsx`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
          })
          .catch(error => console.error('Failed to download file:', error));
      },
      exportDataPdf(year = null) {
        fetch(`/analytics/matrix1-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: year,
          })
        })
          .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 = `Matrik 1 Analytics${year ? ' '+year:''}.pdf`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
          })
          .catch(error => console.error('Failed to download file:', error));
      },
    };
  }
</script>
@endpush