@extends('voyager::master')
@section('content')
@include('layout.header')
<link rel="stylesheet" type="text/css" href="/assets/global.css">
<div style="margin-top: 20px">
  <div style="padding:13px">
    <div class="row">
      <div class="col-md-4">
        <div class = "counter-box colored-blue">
           <i class = "fa fa-group"> </i> <span class = "counter">{{number_format($jumlah_driver)}}</span>  
           <center><p>Jumlah Driver</p></center>
           
       </div>  
      </div>
      <div class="col-md-4">
        <div class = "counter-box colored-green">
           <i class = "fa fa-group"> </i> <span class = "counter">{{number_format($totalUsiaDiAtas50)}}</span>  
           <center><p>Jumlah Driver 50 Tahun Ke atas</p></center>
           
       </div>  
      </div>
      <div class="col-md-1">
      </div>    
    </div>
  </div>
  <div class="card" style="padding:10px">
    <table id="example" class="table table-striped table-hover" style="width:100%;">
      <thead>
        <tr>
          <th>No</th>
          <th>Foto</th>
          <th>Nama Lengkap</th>
          <th>Usia</th>
          <th>Nomor Handphone</th>
          <th>Alamat Lengkap</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
      
    </table>
  </div>
</div>
@include('layout.footer')

<script type="text/javascript">
  $('#example').DataTable({
    processing: false,
    serverSide: false,
    pageLength: 50,
    ajax: '/admin/data_driver',
    columns: [
    {
      render: function(data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
      }
    },
    {
  render: function(data, type, row) {
    // Mengambil lima karakter pertama dari URL foto
    let result_url = row.photo;

    // Menentukan URL foto yang akan digunakan
    var img;
    if (result_url === 'https') {
      img = row.photo;
    } else {
      // Jika URL tidak dimulai dengan 'https', tambahkan prefix 'http://operation.sigapps.com/'
      img = 'http://operation.sigapps.com/' + row.photo;
    }

    // Mengembalikan tag <img> dengan URL yang ditentukan
    return '<img src="' + img + '" class="img img-thumbnail" />';
  }
},

    {
      render: function(data, type, row) {
        return row.full_name
      }
    },
   {
    render: function(data, type, row) {
        var today = new Date();
        var birthday = new Date(row.birthdate);
        var year = 0;
        
        if (today.getMonth() < birthday.getMonth() || (today.getMonth() == birthday.getMonth() && today.getDate() < birthday.getDate())) {
            year = 1;
        }
        
        var age = today.getFullYear() - birthday.getFullYear() - year;

        // Memberikan warna merah jika usia di atas 55 tahun, jika di atas 50 tahun beri warna orange
        var colorStyle = '';
        if (age > 55) {
            colorStyle = 'color: red; font-weight: bold;';
        } else if (age > 50) {
            colorStyle = 'color: orange; font-weight: bold;';
        }

        // Mengembalikan HTML dengan warna yang ditentukan
        return '<span style="' + colorStyle + '">' + age + '</span>';
    }
},


    {
      data: 'phone_number'
    },
    {
      data: 'home_address'
    }
    ],
  });
</script>
</head>

@endsection