@extends('layouts.app')
@section('title')
Dashborad
@endsection
@push('css')
    @include('layouts.datatables_css')
@endpush
@push('js')
    @include('layouts.datatables_js')
    <script type="text/javascript">
    	const token = "{{ csrf_token() }}";
    	const unitName = "{{ $id['unit_name'] }}"
    	var dtb1 = $('#table1').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: "{{ route('dashboard.form-datatable') }}",
                type: "POST",
                data: function (d) {
                    for(var i=0,l=d.columns.length;i<l;i++){if(!d.columns[i].search.value){delete d.columns[i].search;}if(d.columns[i].searchable === true){delete d.columns[i].searchable;}if(d.columns[i].orderable === true){delete d.columns[i].orderable;}if(d.columns[i].data === d.columns[i].name){delete d.columns[i].name;}}

                    delete d.search.regex;
                },
                headers: {'X-CSRF-TOKEN': token}
            },
             "columns":[
                {name: "unit_name", data: function(r){return unitName;}, title: "Unit Layanan", class: "text-center", searchable: 0, orderable: 0},
                {name: "year_implementation", data: "year_implementation", title: "Tahun Pelaksanaan", class: "text-center"},
                {name: "f01", data: function(r){return zero(r.f01); }, title: "Nilai F-01", class: "text-center", searchable: 0},
                {name: "f02", data: function(r){return zero(r.f02); }, title: "Nilai F-02", class: "text-center", searchable: 0},
                {name: "f03", data: function(r){return zero(r.f03); }, title: "Nilai F-03", class: "text-center", searchable: 0},
                {name: "ipp", data: function(r){return zero(r.ipp); }, title: "IPP", class: "text-center", searchable: 0}
            ],
            dom: dtbdom,
            stateSave: false,
            order: [[1, 'desc']],
            buttons: [
            	{
                    'extend': 'colvis',
                    'text': 'Pilih Kolom',
                    'className': 'btn rounded btn-dark btn-sm mr-2 text-uppercase'
                },
                {
                    'extend': 'collection',
                    'text': 'Ekspor',
                    'className': 'btn rounded btn-info btn-sm mr-2 text-uppercase',
                    'buttons': [
                        {
                            'extend': 'excel',
                            'text': '<span class="far fa-file-excel"></span> Excel',
                            'className': 'btn btn-success'
                        },
                        {
                            'extend': 'pdf',
                            'text': '<span class="far fa-file-pdf"></span> PDF',
                            'className': 'btn btn-danger'
                        }
                    ]
                },
                {
                    'extend': 'print',
                    'text': '<span class="fas fa-print mr-2"></span>PRINT',
                    'className': 'btn rounded btn-primary btn-sm mr-2'
                },
                {
                    'extend': 'reload',
                    'text': '<i class="fas fa-sync mr-2"></i>RELOAD',
                    'className': 'btn rounded btn-warning btn-sm'
                }
            ],
            language: dtblg,
            initComplete: function (s) { genDatatableLook('#table1'); },
            drawCallback: function (s) { genDatatableLook('#table1'); }
        });
    </script>
@endpush
@section('content')
<section class="section">
    <div class="card mb-3" style="border-radius: .75rem !important;">
        <div class="card-header">
            <h4 style="font-size:18px;"><span class="fas fa-fire mr-3 text-danger" style="font-size:16px;"></span>Dashboard</h4>
            <div class="card-header-form">
                <button type="button" class="btn btn-icon btn-primary"><span class="fas fa-bell"></span></button>
            </div>
        </div>
    </div>
    <div class="section-body">
    	<div class="row">
    		<div class="col-lg-3 col-md-6 col-sm-6 col-12">
    			<div class="card card-statistic-1">
    				<div class="card-icon bg-primary">
    					<i class="far fa-user"></i>
    				</div>
    				<div class="card-wrap">
    					<div class="card-header">
    						<h4>Total Pengguna</h4>
    					</div>
    					<div class="card-body">
    						{{ $counts['users'] }}
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="col-lg-3 col-md-6 col-sm-6 col-12">
    			<div class="card card-statistic-1">
    				<div class="card-icon bg-danger">
    					<i class="fas fa-file-export"></i>
    				</div>
    				<div class="card-wrap">
    					<div class="card-header">
    						<h4>Total F-03 Dibagikan</h4>
    					</div>
    					<div class="card-body">
    						{{ $counts['f03shared'] }}
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="col-lg-3 col-md-6 col-sm-6 col-12">
    			<div class="card card-statistic-1">
    				<div class="card-icon bg-warning">
    					<i class="fas fa-file-signature"></i>
    				</div>
    				<div class="card-wrap">
    					<div class="card-header">
    						<h4>Total F-03 Terisi</h4>
    					</div>
    					<div class="card-body">
    						{{ $counts['f03filled'] }}
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="col-lg-3 col-md-6 col-sm-6 col-12">
    			<div class="card card-statistic-1">
    				<div class="card-icon bg-info">
    					<i class="fas fa-restroom"></i>
    				</div>
    				<div class="card-wrap">
    					<div class="card-header">
    						<h4>Total Responden</h4>
    					</div>
    					<div class="card-body">
    						{{ $counts['respondents'] }}
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
        @if ($configs['EXCLUDE-F03-DENOMINATOR'])
        <div class="alert alert-info alert-has-icon">
            <div class="alert-icon"><i class="far fa-lightbulb"></i></div>
            <div class="alert-body">
                <div class="alert-title">Info</div>
                Pengaturan <strong>Pengecualian Form F-03</strong> sedang <strong>AKTIF</strong>.<br>Perhitungan IPP tanpa menggunakan hasil perhitungan Form F-03.
            </div>
        </div>
        @endif
    	<div class="card">
    		<div class="card-header py-3" style="min-height: unset;">
    			<h4>Indeks Pelayanan Publik</h4>
    		</div>
    		<div class="card-body py-1 px-0">
    			<table id="table1" class="table table-borderless border-striped border-hover"></table>
    		</div>
    	</div>
    </div>
</section>
@endsection