@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
<h1>Uang Makan Tahun {{date('Y')}}</h1>
@stop

@section('content')
<div class="card card-info">
      <!-- /.card-header -->
      <!-- form start -->
      <form class="form-horizontal" method="post" action="{{url('uang-makan/tahun')}}">
      {{ csrf_field() }}
        <div class="card-body">
          <div class="form-group row">
            
            <div class="col-sm-4">
              <div class="input-group input-group-sm">
              <input class="date form-control" type="text" name="date" required oninvalid="this.setCustomValidity('Tahun Tidak Boleh Kosong')" placeholder="Pilih Tahun">
              <span class="input-group-append">
                <button type="submit" class="btn btn-md btn-info">Submit</button>
              </span>
            </div>
              
            </div>
            
          </div>
        </div>
        <!-- /.card-body -->
        <!-- /.card-footer -->
      </form>
</div>
<div class="row">

		@foreach($model as $model)
	
	<div class="col-md-3 col-sm-6 col-xs-12">
      <div class="info-box">
        <span class="info-box-icon bg-info"><i class="fa fa-envelope"></i></span>
    
        <div class="info-box-content">
          <span class="info-box-text" style="margin-bottom: 5px;">{{bulan($model->bln)}}</span>
          <span class="info-box-number" style="margin-bottom: 10px;">Rp {{rupiah($model->jmlhari*$model->tarif-$model->pph)}}</span>
          <a href="{{url('/uang-makan/detil/'.$model->thn.'/'.$model->bln)}}"><button class="btn btn-outline-info btn-flat btn-xs">Detil <i class="fas fa-arrow-circle-right"></i></button></a>
        </div>
        <!-- /.info-box-content -->
      </div>
      <!-- /.info-box -->
    </div>
    <!-- /.col -->
    	@endforeach
	
</div>
@stop

@section('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
@stop

@section('js')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">

    $('.date').datepicker({  

       format: 'yyyy',
       viewMode: "years", 
       minViewMode: "years",
       autoclose: true

     });  

</script>  
@stop