@extends('templates.master')

@section('content')

<div class="row mb-4">
  <div class="col">
    <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center py-2 text-center text-md-start">
      <div class="flex-grow-1 mb-1 mb-md-0">
        <h1 class="h3 fw-bold mb-2">
          Dashboard
        </h1>
        <h2 class="h6 fw-medium fw-medium text-muted mb-0">
          Selamat Datang <a class="fw-semibold" href="#">Admin</a>, Sistem Aplikasi Kopsyah Rabani.
        </h2>
      </div>
    </div>
  </div>
</div>

<!-- Overview -->
<div class="row items-push">
  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">29.032</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Anggota</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="far fa-user fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">12</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Jumlah User</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="far fa-gem fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">Rp. 290.320.000</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Simpanan Pokok</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="fa fa-hand-holding-usd fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">Rp. 9.597.128.200</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Simpanan Wajib</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="fa fa-hand-holding-usd fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">Rp. 8.697.146.960</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Simpanan Sukarela</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="far fa-gem fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">Rp. 3.757.167.050</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Simpanan Berencana</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="far fa-gem fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">Rp. 77.666.463.795</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Aset</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="far fa-gem fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">Rp. 5.110.000.000</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Siberani</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="far fa-gem fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4 col-xxl-3">
    <div class="block block-rounded d-flex flex-column h-100 mb-0">
      <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
        <dl class="mb-0">
          <dt class="fs-3 fw-medium">Rp. 69.710.868.000</dt>
          <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">Piutang</dd>
        </dl>
        <div class="item item-rounded-lg bg-body-light">
          <i class="far fa-gem fs-3 text-primary"></i>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- END Overview -->
@endsection