@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Tables</a></li>
    <li class="breadcrumb-item active" aria-current="page">Perbandingan Nilai Transaksi</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Perbandingan Nilai Transaksi</h6>
        <div class="input-group input-daterange col-md-6 col-xs-auto" style="margin-bottom: 1%">
          <input type="text" class="form-control" id="min" autocomplete="off">
          <div class="input-group-addon">to</div>
          <input type="text" class="form-control" id="max" autocomplete="off">
          <span style="margin-left: 3%">
            <button class="form-control btn-primary" id="filter" value="filter">filter</button>
          </span>
          <span class="ml-3">
            <button class="form-control btn-primary" id="excel" value="excel">Download Excel</button>
          </span>
        </div>
        <div id="Chart1" class="mx-auto"></div>
      </div>
    </div>
  </div>
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Perbandingan Nilai Transaksi</h6>
        <div class="table-responsive">
            <table class="table table-hover" id="table_nilai">
              <thead>
                <tr>
                  <th>Hari Ke</th>
                  <th>Nama Hari</th>
                  <th class="text-left font-weight-bold">Total Nilai Transaksi Tahun ini</th>
                  <th>Nama Hari</th>
                  <th class="text-left font-weight-bold">Total Nilai Transaksi Tahun lalu</th>
                  <th class="text-left font-weight-bold">Perbandingan</th>
                </tr>
              </thead>
              <tbody id="tbody_table">
                @foreach ($data as $item)   
                <tr>
                  <th>{{$item->label}}</th>
                  <th>{{$item->dayNameThisYear}}</th>
                  <td class="text-left">{{'Rp. '.noformat($item->tahun_ini)}}</td>
                  <th>{{$item->dayNameLastYear}}</th>
                  <td class="text-left">{{'Rp. '.noformat($item->tahun_lalu)}}</td>
                  <td class="text-left"><span class="@persenan_class($item->tahun_ini-$item->tahun_lalu)">@persenan_icon($item->tahun_ini-$item->tahun_lalu) @plusminus(persenanBanding($item->tahun_ini,$item->tahun_lalu,false))%</span></td>
                </tr>
                @endforeach
              </tbody>
            </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('assets/plugins/progressbar-js/progressbar.min.js') }}"></script>
@endpush

@push('custom-scripts')
@include('pppaid.daily_donation.script')
@endpush