@extends('layouts.main')
@section('content')
  @push('style')
    <link rel="stylesheet" href="{{asset('assets/css/toastr.min.css')}}">
  @endpush  
  <div class="content__header content__boxed overlapping">
    <div class="content__wrap">
      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
          <li class="breadcrumb-item"><a href="javascript:(0)">Home</a></li>
          <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
        </ol>
      </nav>
      <!-- END : Breadcrumb -->
      <h1 class="page-title mb-0 mt-2">Dashboard</h1>
      <p class="lead"></p>
    </div>
  </div>

  <div class="content__boxed">
    <div class="content__wrap">
      <div class="row">
        <div class="col-sm-12">
          <div class="row">
            <div class="col-md-12 col-sm-12">
              <div class="row">
                <div class="col-sm-3">
                  <div class="card bg-red text-white overflow-hidden mb-3">
                    <div class="p-3 pb-2">
                      <h5 class="mb-3"><i class="pli-shop-2 text-reset text-opacity-75 fs-2 me-2"></i> Jumlah Customer</h5>
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="row">
                            <div class="col-sm-12 text-center">
                              <span class="fw-bold fs-2">{{ $totalCustomer }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="card bg-pink text-white overflow-hidden mb-3">
                    <div class="p-3 pb-2">
                      <h5 class="mb-3"><i class="pli-shop-2 text-reset text-opacity-75 fs-2 me-2"></i> Jumlah Produk</h5>
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="row">
                            <div class="col-sm-12 text-center">
                              <span class="fw-bold fs-2">{{ $totalProduct }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="card bg-orange text-white overflow-hidden mb-3">
                    <div class="p-3 pb-2">
                      <h5 class="mb-3"><i class="pli-financial text-reset text-opacity-75 fs-2 me-2"></i> Jumlah Transaksi (Bulan {{ $bulan }})</h5>
                      <div class="row">
                        <div class="col-sm-6">
                          <div class="row">
                            <div class="col-sm-6">
                              <div class="me-auto">Draft :</div>
                            </div>
                            <div class="col-sm-6 text-end">
                              <span class="fw-bold">{{ $totalTrxOnDraft }}</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="row">
                            <div class="col-sm-6">
                              <div class="me-auto">Process :</div>
                            </div>
                            <div class="col-sm-6 text-end">
                              <span class="fw-bold">{{ $totalTrxOnProcess }}</span>
                            </div>
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="row">
                            <div class="col-sm-6">
                              <div class="me-auto">Selesai :</div>
                            </div>
                            <div class="col-sm-6 text-end">
                              <span class="fw-bold">{{ $totalTrxOnDone }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="card bg-green text-white overflow-hidden mb-3">
                    <div class="p-3 pb-2">
                      <h5 class="mb-3"><i class="demo-psi-basket-coins text-reset text-opacity-75 fs-2 me-2"></i> Inflow</h5>
                      <ul class="list-group list-group-borderless">
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                          <div class="me-auto">Kas Besar</div>
                          <span class="fw-bold">0</span>
                        </li>
                        <li class="list-group-item p-0 text-reset d-flex justify-content-between align-items-start">
                          <div class="me-auto">Kas Kecil</div>
                          <span class="fw-bold">0</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- <div class="col-sm-3">
                  <div class="card bg-pink text-white overflow-hidden mb-3 p-3"> 
                    <div class="form-group pt-1">
                      <label class="form-label"><b>Filter Tahun</b></label>
                      <select id="filterTahun" class="form-control">
                        <option selected disabled>--Pilih Tahun--</option>
                        @for ($i = date("Y") - 5; $i < date("Y") + 1; $i++)
                          <option {{$tahun == $i ? 'selected' : '' }} value="{{$i}}">{{$i}}</option>                        
                        @endfor
                      </select>
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="py-2">
          <hr style="border: 1px dashed white;">
        </div>
        <!-- <div class="col-sm-12">
          <div class="card">
            <div class="card bg-blue" style="min-height:5px; border-radius:1px;"></div>
            <div class="card-body">
              <div class="py-2">
                <h4>Dalam Pengembangan..</h4>
              </div>
              <div id="chartInvoice"></div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
@endsection

@push('script')
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/toastr.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
  $("#filterBulan, #filterTahun").change(function(){
    let tahun = $("#filterTahun").val()

    if(tahun !== null){
      let url = new URL(location.href)
      url.searchParams.set('tahun', tahun)
      location.href = url.toString()
    }
  })
</script>
<script>
  @if(session()->has('success'))
    toastr.success('{{ session('success') }}', 'BERHASIL'); 
  @elseif(session()->has('error'))
    toastr.error('{{ session('error') }}', 'GAGAL'); 
  @endif
</script>
@endpush