<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$jml_data = sizeof($data);

$jml_kolom = '12';
$jml_kata = 15;
$font_size = 45;
$height = 60;
$width = 65;

if($jml_data > 45)
{
  $jml_kolom = '3';
  $jml_kata = 10;
  $font_size = 25;
}
else if($jml_data > 30)
{
  $jml_kolom = '4';
  $jml_kata = 10;
  $font_size = 30;
}
else if($jml_data > 15)
{
  $jml_kolom = '6';
  $jml_kata = 13;
} 

?>

<div class="card" id="content-box-1">
  <div class="card-header" style="background: linear-gradient(135deg, #4CAF50, #2E7D32); padding-top: 3px; padding-bottom: 1px"> 
    <center>
      <h3>ANTRIAN PASIEN</h3>
    </center>
  </div>
</div>

<div class="row">

  <?php if(empty($data)){ ?>    
    <div class="col-12">
      <div class="info-box">
        <div class="info-box-content">
          <center>
            <p style="font-size: 25px; line-height: 1;">BELUM ADA PASIEN</p>
          </center>
        </div>
      </div>
    </div>
  <?php } else { ?>

    <?php foreach ($data as $key){ ?>         
      <div class="col-<?php echo $jml_kolom ?>">
        <div class="info-box" style="min-height: 10px; padding: 5px; margin-bottom: 5px; height: <?php echo $height ?>px">
          <span style="width: <?php echo $width ?>px" class="info-box-icon bg-primary elevation-1"><?php echo $key->urut ?></span>
          <div class="info-box-content">
            <span style="font-size: <?php echo $font_size ?>px; line-height: 1;"><?php echo strtoupper(substr($key->nama, 0, $jml_kata)) ?></span>
          </div>
        </div>
      </div>
    <?php } ?>      
  <?php } ?>

</div>

<script type="text/javascript">
  $(document).ready(function(){
    $('#jadwal_pagi').html('<?php if($jumlah_pendaftar->jadwal_pagi != 0){ echo $jumlah_pendaftar->jadwal_pagi; } else echo 0; ?>');
    $('#jadwal_sore').html('<?php if($jumlah_pendaftar->jadwal_sore != 0){ echo $jumlah_pendaftar->jadwal_sore; } else echo 0; ?>');
  })  
</script>