@extends('master.layout')

@section('extended_css')
	<!-- jvectormap -->
    <!--<link rel="stylesheet" href="{!! url('plugins/jvectormap/jquery-jvectormap-1.2.2.css') !!}">-->
	<!-- Date Picker -->
    <link rel="stylesheet" href="{!! url('plugins/datepicker/datepicker3.css') !!}">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="{!! url('plugins/daterangepicker/daterangepicker-bs3.css') !!}">
	<!-- Morris chart -->
    <!--<link rel="stylesheet" href="{!! url('plugins/morris/morris.css') !!}">-->

    <style type="text/css">
      .background-dashboard {
        position: absolute;height: 92%;width: 100%;display: block;
        padding: 0px;
      }
      .img-dashboard {
        background-image : url('{{ url("dist/img/background/Backgrounddashboard.jpg") }}');
        background-size: cover;
        width: 100%;
        height: 100%;
        background-position-y : center;
        background-position-x : -50px;
      }
      .small-box h3 {
        font-size: 34px !important;
        margin: 0px;
        font-weight: 600 !important
      }
      .small-box p {
        font-size: 24px !important;
      }
    </style>
@stop

@section('content')
  <div class="background-dashboard">
    <div class="img-dashboard"></div>
  </div>
	<section class="content-header">
		<h1>
			Dashboard
			<small>Control panel</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Home</a></li>
			<li class="active">Dashboard</li>
		</ol>
	</section>
  <section class="content">
    <div class="row">
      @if(Sentinel::getUser()->level_user == 7 || Sentinel::getUser()->level_user == 6)
        <div class="col-lg-4 col-xs-6">
      @else
        <div class="col-lg-3 col-xs-6">
      @endif
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>Pengguna</h3>
            <p>Puskesmas</p>
          </div>
          <div class="icon">
            <i class="fa fa-user"></i>
          </div>
          <a href="{!! route('pusatKesehatan') !!}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      @if(Sentinel::getUser()->level_user == 7 || Sentinel::getUser()->level_user == 6)
        <div class="col-lg-4 col-xs-6">
      @else
        <div class="col-lg-3 col-xs-6">
      @endif
        <div class="small-box bg-green">
          <div class="inner">
            <h3>Pengguna</h3>
            <p>KUA</p>
          </div>
          <div class="icon">
            <i class="fa fa-user"></i>
          </div>
          <a href="{!! route('usrKua') !!}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      @if(Sentinel::getUser()->level_user == 7 || Sentinel::getUser()->level_user == 6)
        <div class="col-lg-4 col-xs-6">
      @else
        <div class="col-lg-3 col-xs-6">
      @endif
        <div class="small-box bg-yellow">
          <div class="inner">
            <h3>Pasangan</h3>
            <p>Keluarga Sehat</p>
          </div>
          <div class="icon">
            <i class="fa fa-male" style="font-size: 70px;left: -17px;position: relative;"></i>
            <i class="fa fa-female" style="margin-left: -42px;font-size: 70px;position: relative;right: -7px;"></i>
          </div>
          <a href="{{ route('dtPernikahan') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      @if(Sentinel::getUser()->level_user != 7 && Sentinel::getUser()->level_user != 6)
        <div class="col-lg-3 col-xs-6">
          <div class="small-box bg-red">
            <div class="inner">
              <h3>1000</h3>
              <p>HPK</p>
            </div>
            <div class="icon">
              <i class="fa fa-book"></i>
            </div>
            <a href="{{ route('1000hpk') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
      @endif
    </div>
  </section>
@stop
@section('script')
	<!-- Sparkline -->
    <script src="{!! url('plugins/sparkline/jquery.sparkline.min.js') !!}"></script>
	<!-- daterangepicker -->
    <script src="{!! url('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js') !!}"></script>
    <script src="{!! url('plugins/daterangepicker/daterangepicker.js') !!}"></script>
    <!-- datepicker -->
    <script src="{!! url('plugins/datepicker/bootstrap-datepicker.js') !!}"></script>
	<!-- Morris.js charts -->
    <!--<script src="{!! url('https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js') !!}"></script>-->
    <!--<script src="{!! url('plugins/morris/morris.min.js') !!}"></script>-->
    <!-- jvectormap -->
    <!--<script src="{!! url('plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') !!}"></script>-->
    <!--<script src="{!! url('plugins/jvectormap/jquery-jvectormap-world-mill-en.js') !!}"></script>-->
    <!-- jQuery Knob Chart -->
    <!--<script src="{!! url('plugins/knob/jquery.knob.js') !!}"></script>-->
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    <!--<script src="{!! url('dist/js/pages/dashboard.js') !!}"></script>-->
    <!-- AdminLTE for demo purposes -->
    <!--<script src="{!! url('dist/js/demo.js') !!}"></script>-->
@stop