<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
  .card-clickable {
    cursor: pointer;
  }

  .dashboard-card {
    color: white;
  }

  .bg-blue {
    background-color: #337ab7;
  }

  .bg-yellow {
    background-color: #f0ad4e;
  }

  .bg-green {
    background-color: #5cb85c;
  }

  .bg-red {
    background-color: #d9534f;
  }

  .card-footer a {
    color: white;
    text-decoration: none;
  }

  .card-footer .fa {
    font-size: 1.2em;
  }

  .fa-5x {
    font-size: 4em;
  }

  .huge {
    font-size: 2.5em;
    font-weight: bold;
  }

  .bg-detail {
    background-color: #F5F5F5;
  }

  .bg-detail .bg_blue_font {
    color: #337ab7;
  }

  .bg-detail .bg_yellow_font {
    color: #f0ad4e;
  }

  .bg-detail .bg_green_font {
    color: #5cb85c;
  }

  .bg-detail .bg_red_font {
    color: #d9534f;
  }
</style>
</head>
<div class="row">
  <div class="col-lg-3 col-md-6">
    <div class="card dashboard-card bg-blue">
      <div class=" card-body">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-comments fa-5x"></i>
          </div>
          <div class="col-8 text-end">
            <div class="huge">0</div>
            <div class="bg-blue">새 쪽지 알림</div>
          </div>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-between align-items-center bg-detail">
        <span class="bg_blue_font">자세히보기</span>
        <i class="fa fa-arrow-circle-right bg_blue_font"></i>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6">
    <div class="card dashboard-card bg-yellow card-clickable" onclick="document.location.href='/admin/customer/service';">
      <div class="card-body">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-plus-square-o fa-5x"></i>
          </div>
          <div class="col-8 text-end">
            <div class="huge"><?= $viewDatas['newServiceCount'] ?></div>
            <div>최근 <?= $viewDatas['interval'] ?>일간 신규서버수</div>
          </div>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-between align-items-center bg-detail">
        <span class="bg_yellow_font">자세히보기</span>
        <i class="fa fa-arrow-circle-right bg_yellow_font"></i>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6">
    <div class="card dashboard-card bg-green">
      <div class="card-body">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-tasks fa-5x"></i>
          </div>
          <div class="col-8 text-end">
            <div class="huge">0</div>
            <div>요청업무 알림</div>
          </div>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-between align-items-center  bg-detail">
        <span class="bg_green_font">자세히보기</span>
        <i class="fa fa-arrow-circle-right bg_green_font"></i>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6">
    <div class="card dashboard-card bg-red card-clickable" onclick="document.location.href='/admin/customer/payment';">
      <div class="card-body">
        <div class="row">
          <div class="col-4">
            <i class="fa fa-support fa-5x"></i>
          </div>
          <div class="col-8 text-end">
            <div class="huge"><?= $viewDatas['unPaidCount'] ?></div>
            <div><?= date("Y-m-d") ?> 금일 기준 미납 서비스</div>
          </div>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-between align-items-center bg-detail">
        <span class="bg_red_font">자세히보기</span>
        <i class="fa fa-arrow-circle-right bg_red_font"></i>
      </div>
    </div>
  </div>
</div>