@extends('layouts.app')

{{-- page Title --}}
@section('title','Quran')

{{-- vendor scripts --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
@endsection

@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/dashboard-analytics.css')}}">
@endsection

@section('content')

<!-- Dashboard Starts -->
<section class="invoice-list-wrapper">
  <div class="row">
    <div class="col-12 col-sm-3 col-lg-2">
      <div class="form-group">
        <label>Filter</label>
        <fieldset class="form-group position-relative has-icon-left mb-0">
          <select id="project_type" name="project_type" class="select2 form-control filter-change">
            <option>Daftar Ulang</option>
            <option>SPP</option>
          </select>
          <div class="form-control-position">
            <i class="bx bx-edit-alt"></i>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="col-12 col-sm-3 col-lg-2">
      <div class="form-group">
        <label>Rentang Waktu</label>
        <fieldset class="form-group position-relative has-icon-left mb-0">
          <input type="text" id="start_date" class="form-control pickadate filter-change" placeholder="Dari Tanggal" value="{{ date('Y') }}-01-01">
          <div class="form-control-position">
            <i class='bx bx-calendar'></i>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="col-12 col-sm-3 col-lg-2">
      <div class="form-group">
        <label></br></label>
        <fieldset class="form-group position-relative has-icon-left mb-0">
          <input type="text" id="end_date" class="form-control pickadate filter-change" placeholder="Sampai Tanggal" value="{{ date('Y-m-d') }}">
          <div class="form-control-position">
            <i class='bx bx-calendar'></i>
          </div>
        </fieldset>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-content">
          <div class="card-body card-dashboard">
            <div class="d-flex align-items-center">
              <h6>Rincian Dana</h6>
              <i class="bx bx-info-circle" style="margin-bottom: 7px; margin-left: 5px"></i>
            </div>
            <div class="row">
              <div class="col-sm-4">
                <div class="card mb-0 border rounded">
                  <div class="card-header d-flex align-items-center" style="padding: 1rem">
                    <div class="avatar bg-rgba-warning m-0 mr-75" style="border-radius: 10%;">
                      <div class="avatar-content">
                        <i class="bx bx-book-open warning"></i>
                      </div>
                    </div>
                    <label style="margin: auto 0px">Total Pendapatan SPP</label>
                  </div>
                  <div class="card-content">
                    <div class="card-body" style="padding-left: 1rem">
                      <div class="d-flex align-items-end">
                        <div class="registration-content">
                          <h3 class="mb-0" id="total_commitment">@currency(0)</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="card mb-0 border rounded">
                  <div class="card-header d-flex align-items-center" style="padding: 1rem">
                    <div class="avatar bg-rgba-success m-0 mr-75" style="border-radius: 10%;">
                      <div class="avatar-content">
                        <i class="bx bx-flag success"></i>
                      </div>
                    </div>
                    <label style="margin: auto 0px">Total Pendapatan Daftar Ulang</label>
                  </div>
                  <div class="card-content">
                    <div class="card-body" style="padding-left: 1rem">
                      <div class="d-flex align-items-end">
                        <div class="registration-content">
                          <h3 class="mb-0" id="total_realisasi">@currency(0)</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="card mb-0 border rounded">
                  <div class="card-header d-flex align-items-center" style="padding: 1rem">
                    <div class="avatar bg-rgba-info m-0 mr-75" style="border-radius: 10%;">
                      <div class="avatar-content">
                        <i class="bx bx-award info"></i>
                      </div>
                    </div>
                    <label style="margin: auto 0px">Total Pengeluaran</label>
                  </div>
                  <div class="card-content">
                    <div class="card-body" style="padding-left: 1rem">
                      <div class="d-flex align-items-end">
                        <div class="registration-content">
                          <h3 class="mb-0" id="total_pengesahan">@currency(0)</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-3">
      <div class="card">
        <div class="card-content">
          <div class="card-body card-dashboard">
            <div class="d-flex align-items-center mt-1 mb-2">
              <h6>Grafik</h6>
              <i class="bx bx-info-circle" style="margin-bottom: 7px; margin-left: 5px"></i>
            </div>

            <div class="row">
              <div class="col-sm-12 mb-1">
                <div class="card mb-0 border rounded">
                  <div class="card-header d-flex align-items-center" style="padding: 1rem">
                    <div class="avatar bg-rgba-primary m-0 mr-75" style="border-radius: 10%;">
                      <div class="avatar-content">
                        <i class="bx bx-box primary"></i>
                      </div>
                    </div>
                    <label style="margin: auto 0px" id="text-total-donor">Total Pendapatan</label>
                  </div>
                  <div class="card-content">
                    <div class="card-body" style="padding-left: 1rem">
                      <div class="d-flex align-items-end">
                        <div class="registration-content">
                          <h3 class="mb-0" id="total_contributor">@number(0)</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="card mb-0 border rounded">
                  <div class="card-header d-flex align-items-center" style="padding: 1rem">
                    <div class="avatar bg-rgba-danger m-0 mr-75" style="border-radius: 10%;">
                      <div class="avatar-content">
                        <i class="bx bx-briefcase-alt danger"></i>
                      </div>
                    </div>
                    <label style="margin: auto 0px">Total Pengeluaran</label>
                  </div>
                  <div class="card-content">
                    <div class="card-body" style="padding-left: 1rem">
                      <div class="d-flex align-items-end">
                        <div class="registration-content">
                          <h3 class="mb-0" id="total_project">@number(0)</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-9">
      <div class="card">
        <div class="card-content">
          <div class="card-body card-dashboard" style="padding-bottom: 0.7rem;">
            <div class="d-flex align-items-center">
              <h6>Top 6</h6>
              <i class="bx bx-info-circle" style="margin-bottom: 7px; margin-left: 5px"></i>

              <ul class="nav nav-pills ml-2">
                <li class="nav-item">
                  <a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" aria-expanded="true" style="border-radius: 100px">
                    Peringkat Pendapatan
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="profile-tab" data-toggle="pill" href="#profile" aria-expanded="false" style="border-radius: 100px">
                    Peringkat Pengeluaran
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="about-tab" data-toggle="pill" href="#about" aria-expanded="false" style="border-radius: 100px">
                    Peringkat Dana Tersimpan
                  </a>
                </li>
              </ul>
            </div>

            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="home" aria-labelledby="home-tab" aria-expanded="true">
                <div class="table-responsive">
                  <table id="table-marketing-campaigns" class="table table-borderless table-sm mb-0">
                    <thead>
                      <tr>
                        <th>Nama</th>
                        <th>Nilai</th>
                        <th>Bentuk Bantuan</th>
                      </tr>
                    </thead>
                    <tbody id="list_peringkat_donor"></tbody>
                  </table>
                </div>
              </div>
              <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" aria-expanded="false">
                <div class="table-responsive">
                  <table id="table-marketing-campaigns" class="table table-borderless table-sm mb-0">
                    <thead>
                      <tr>
                        <th>Unit Utama</th>
                        <th>Nilai</th>
                        <th>Donor</th>
                      </tr>
                    </thead>
                    <tbody id="list_peringkat_penyerapan"></tbody>
                  </table>
                </div>
              </div>
              <div class="tab-pane" id="about" role="tabpanel" aria-labelledby="about-tab" aria-expanded="false">
                <div class="table-responsive">
                  <table id="table-marketing-campaigns" class="table table-borderless table-sm mb-0">
                    <thead>
                      <tr>
                        <th>Pilar</th>
                        <th>Nilai Komitmen</th>
                        <th>Nilai Realisasi</th>
                        <th>Donor</th>
                      </tr>
                    </thead>
                    <tbody id="list_peringkat_pilar"></tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-content">
          <div class="card-body card-dashboard">
            <div class="d-flex align-items-center">
              <h6>Grafik Realisasi per Unit Utama</h6>
              <i class="bx bx-info-circle" style="margin-bottom: 7px; margin-left: 5px"></i>
            </div>
            <div id="summary-line-chart"></div>
          </div>
        </div>
      </div>
    </div>
</section>
<!-- Dashboard loan end -->
@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/charts/apexcharts.min.js')}}"></script>
<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="{{asset('js/scripts/forms/select/form-select2.js')}}"></script>
<script src="{{asset('js/dashboard.js')}}"></script>


<script>
  $(document).ready(function() {
  })

  $(document).on('change', '.filter-change', function (e) {
    const params = {
      project_type: $("#project_type").val(),
      start_date: $("#start_date").val(),
      end_date: $("#end_date").val(),
    }

    if (params.project_type == 'Pinjaman') {
      $("#text-total-donor").text('Total Lender')
    } else {
      $("#text-total-donor").text('Total Donor')
    }

    filterDashboard(params)
  })

  function filterDashboard(params) {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    $.ajax({
      url: "{{ route('dashboard.filter') }}",
      type: 'POST',
      dataType: "JSON",
      data: { ...params },
      success: function (resp) {
        $("#total_commitment").text(currency(resp.total_commitment))
        $("#total_realisasi").text(currency(resp.total_realisasi))
        $("#total_pengesahan").text(currency(resp.total_pengesahan))

        $("#total_contributor").text(number(resp.total_contributor))
        $("#total_project").text(number(resp.total_project))

        let list_donor = '';
        for (const el of resp.list_peringkat_donor) {
          list_donor += `
            <tr>
              <td>${el.name}</td>
              <td>${currency(el.total_hibah_idr)}</td>
              <td>${el.type}</td>
            </tr>
          `
        }
        
        if (resp.list_peringkat_donor.length == 0) {
          list_donor = '<tr><td colspan="3">No Record Found</td></tr>'
        }

        let list_penyerapan = '';
        for (const el of resp.list_peringkat_penyerapan) {
          list_penyerapan += `
            <tr>
              <td>${el.name}</td>
              <td>${currency(el.total)}</td>
              <td>${el.contributor}</td>
            </tr>
          `
        }
        
        if (resp.list_peringkat_penyerapan.length == 0) {
          list_penyerapan = '<tr><td colspan="3">No Record Found</td></tr>'
        }

        let list_pilar = '';
        for (const el of resp.list_peringkat_pilar) {
          list_pilar += `
            <tr>
              <td>${el.name}</td>
              <td>${currency(el.total_commitment)}</td>
              <td>${currency(el.total_realization)}</td>
              <td>${el.contributor}</td>
            </tr>
          `
        }
        
        if (resp.list_peringkat_pilar.length == 0) {
          list_pilar = '<tr><td colspan="4">No Record Found</td></tr>'
        }

        $("#list_peringkat_donor").html(list_donor)
        $("#list_peringkat_penyerapan").html(list_penyerapan)
        $("#list_peringkat_pilar").html(list_pilar)

        updateSummaryChart(resp.summary)
      },
      error: function(xhr) {}
    });
  }
</script>
@endsection