@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
<h1>Remunerasi</h1>
@stop

@section('content')
<div class="card card-info">
      <!-- /.card-header -->
      <!-- form start -->
      <form class="form-horizontal" method="post" action="{{url('remunerasi/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->bulan)}}</span>
          <span class="info-box-number" style="margin-bottom: 10px;">Rp {{rupiah($remunerasi)}}</span>
          <a href="{{url('/remunerasi/detil/'.$model->tahun.'/'.$model->bulan)}}"><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 -->
    
    <div class="modal fade" id="modal{{$model->id}}">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Detil Remunerasi {{bulan($model->bulan)}} {{$model->tahun}}</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
            	<table class="table table-striped table-sm">
        			<tr><td>Tunjangan</td><td>: &nbsp;Rp {{rupiah($model->tunjangan)}}</td></tr>
        			<tr><td>Persentase Potongan</td><td>: &nbsp;{{$model->potongan}} %</td></tr>
        			<tr><td>Total Potongan</td><td>: &nbsp;Rp {{rupiah($model->jumlah_potongan)}}</td></tr>
        			<tr><th>Tunjangan Bersih</th><td>: &nbsp;Rp {{rupiah($remunerasi)}}</td></tr>
            	</table>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
    <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
	
	@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