@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('ActionPlanM4') }}
          <div class="card w-100 position-relative overflow-hidden">
            <div class="card-body p-4">
              <div class="row" x-data="analyticsData()">
                <div class="col-12 mb-3 d-flex justify-content-end align-items-center">
                  <div class="d-flex justify-content-end align-items-center gap-2">
                    <a href="javascript:void(0)" @click="exportForm()"  class="btn btn-light">
                      <i class="ti ti-download fs-4 me-2"></i>Eksport Data
                    </a>
                    @if(!in_array(Auth::user()->role_id, [1,6]))
                      <a href="{{ route('matrix4.add') }}" class="btn btn-primary">
                        <i class="ti ti-plus fs-4 me-2"></i>Tambah Data
                      </a>
                    @endif
                  </div>
                </div>
                <div class="col-12 mb-2">
                  <form action="{{ route('matrix4') }}" method="get" id="form-search">
                    <div class="row">
                      <div class="col-3">
                        <div class="input-group">
                          <span class="input-group-text rounded-start-pill bg-transparent">
                            <i class="ti ti-search"></i>
                          </span>
                          <input name="s" type="text" value="{{ $q }}" class="form-control rounded-end-pill" placeholder="Cari Indikator...">
                        </div>
                      </div>
                      <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>
                      @if(in_array(Auth::user()->role_id, [1,6]))
                        <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">
                  <div class="table-responsive mb-4 border rounded-1">
                    <table class="table table-sm 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">Program</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 Capaian</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">Jangka Waktu Penerapan (tahun)</h6>
                        </th>
                        <th rowspan="2">
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Target Jangka Panjang (tahun)</h6>
                        </th>
                        <th colspan="{{ count(range($selectedRad->year_start,$selectedRad->year_end)) }}">
                          <h6 class="fs-4 fw-semibold mb-0 text-center text-white">Target</h6>
                        </th>
                        <th rowspan="2">
                          <h6 class="fs-4 fw-semibold mb-0 text-white">Alokasi Pendanaan (Rp)</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">Aksi</h6>
                        </th>
                      </tr>
                      <tr>
                        @foreach(range($selectedRad->year_start,$selectedRad->year_end) as $k=>$v)
                          <th >
                            <h6 class="fs-4 fw-semibold mb-0 text-white">{{ $v }}</h6>
                          </th>
                        @endforeach
                      </tr>
                      </thead>
                      <tbody>
                      @foreach($data->items() as $d)
                        <tr>
                          <td class="bg-warning text-black" colspan="{{ count(range($selectedRad->year_start,$selectedRad->year_end))+10 }}">
                            <strong class="me-4">{{ $d->institution->name}}</strong>
                            @if($d->status == 0)
                              <span class="badge text-bg-light">Menunggu Konfirmasi</span>
                            @endif
                            @if($d->status == 1)
                              <span class="badge text-bg-success">Disetujui</span>
                            @endif
                            @if($d->status == 2)
                              <span class="badge text-bg-danger">Ditolak</span>
                            @endif
                          </td>
                        </tr>
                        <tr>

                        </tr>
                        @if($d->matrix4_category_id == 0 || $d->matrix4_activity_id == 0 || $d->matrix4_code_pojk_id == 0)

                        @else
                          <tr>
                            <td colspan="{{ count(range($selectedRad->year_start,$selectedRad->year_end))+9 }}">
                              Kategori: <strong class="text-black">{{ $d->category_->name}}</strong>
                            </td>
                          </tr>
                          <tr>
                            <td colspan="{{ count(range($selectedRad->year_start,$selectedRad->year_end))+9 }}">
                              Uraian Kegiatan Usaha Berkelanjutan: <strong class="text-black">{{ $d->activity_->name}}</strong>
                            </td>
                          </tr>
                          <tr>
                            <td colspan="{{ count(range($selectedRad->year_start,$selectedRad->year_end))+9 }}">
                              Kode disesuaikan dengan Lampiran POJK 51/2017: <strong class="text-black">{{ $d->pojk_->name}}</strong>
                            </td>
                          </tr>
                        @endif
                        <tr>
                          <td colspan="{{ count(range($selectedRad->year_start,$selectedRad->year_end))+9 }}">
                            Tujuan: <strong class="text-black">{{ $d->metadataIndicator->metadataTarget->metadataPurpose->name}}</strong>
                          </td>

                        </tr>
                        <tr>
                          <td colspan="{{ count(range($selectedRad->year_start,$selectedRad->year_end))+9 }}">
                            Indikator SDGs:<br /><strong class="text-black">[{{ $d->metadataIndicator->code }}] {{ $d->metadataIndicator->name }}</strong>
                            <div class="d-flex gap-2 mt-2">
                              <a class="btn btn-info btn-sm"
                                 href="{{ route('matrix4.view', [$d->id]) }}"><i
                                  class="ti ti-eye me-2"></i>Lihat</a>
                              @if(!in_array(Auth::user()->role_id, [1,6]))
                                <a class="btn btn-warning btn-sm"
                                   href="{{ route('matrix4.edit', [$d->id]) }}"><i
                                    class="ti ti-edit me-2"></i>Sunting</a>
                                <a class="btn btn-danger btn-sm delete-confirmation"  data-action="{{ route('matrix4.delete') }}" data-id="{{ $d->id }}" data-label="Anda yakin ingin menghapus data ini?" href="javascript:void(0)">
                                  <i class="ti ti-trash me-2"></i>Hapus
                                </a>
                              @endif
                            </div>
                          </td>
                        </tr>
                        @foreach($d->programs as $key=>$a)
                          @foreach($a->activities as $keyO=>$o)
                            <tr>
                              @if($keyO === 0)
                                <td rowspan="{{ count($a->activities) }}">{{ $key + 1 }}</td>
                                <td rowspan="{{ count($a->activities) }}"><strong>{{ $a->program_name}}</strong></td>
                              @endif
                              <td>{{ $o->activity_name }}</td>
                              <td>{{ $o->indicator }}</td>
                              <td>{{ $o->unit }}</td>
                              <td>{{ $o->target_year }}</td>
                              <td>{{ $o->long_target_year }}</td>
                              @foreach($o->realisations as $r)
                                <td class="text-center">{{ $r->target}}</td>
                              @endforeach
                              <td class="text-end">{{ number_format($o->indicative_funds_allocation, 0, ',', '.') }}</td>
                              <td>{{ $o->source }}</td>
                              <td class="text-center">
                              </td>
                            </tr>
                          @endforeach
                        @endforeach
                      @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
                {{ $data->links() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
  document.getElementById('rad').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: '',

      init() {
        this.rad_id = @json($selectedRad->id);
      },

      exportForm() {
        fetch(`/api/matrix4/export`, {
          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
          })
        })
          .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 4 Data.xlsx`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
          })
          .catch(error => console.error('Failed to download file:', error));
      },
    }
  }
</script>
@endpush