@extends('template')

@section('title')
	HRIS | Home
@stop

@section('top_script')
	@include('home::layouts.top_script')
	<style type="text/css">
		.loading-container {
			padding: 0; 
			background-color: #fff; 
			z-index: 100; 
			height: 450px; 
			opacity: 0.5; 
			position: absolute; 
			font-weight: bold; 
			font-size: 35px; 
			display: table;
		}
		.loading-container span {
			vertical-align: middle; 
			display: table-cell;
		}
		.my-slider .ism-radios label {
			width: 10px !important;
			height: 10px !important;
		}
		.loading-content {
			background-image: url('{{ asset('images/ajax-loader.gif') }}');
		    height: 100%;
		    background-size: 20%;
		    background-position: center center;
		    position: relative;
			display: none;
			background-repeat: no-repeat;			
		}
		.loading-content-cari {
			background-image: url('{{ asset('images/ajax-loader.gif') }}');
		    height: 100%;
		    background-size: 20%;
		    background-position: center center;
		    position: relative;
			display: none;
			background-repeat: no-repeat;			
		}
		.loading-content-plt {
			background-image: url('{{ asset('images/ajax-loader.gif') }}');
		    height: 100px;
		    background-size: 5%;
		    background-position: center center;
		    position: relative;
			display: none;
			background-repeat: no-repeat;			
		}
		table .plt:hover {
			background-color: #3636ff !important;
			color: #ffffff;
			cursor: pointer;
		}
		table .plt_rangkap:hover {
			background-color: #3636ff !important;
			color: #ffffff;
			cursor: pointer;
		}
	</style>
@stop

@section('content')
<section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li class="active"><a href="{{ url('home') }}"><i class="fa fa-home"></i> Home</a></li>
        <li class="pull-right"><small>Selamat Datang, <b class="text-info"></b></small></li>
    </ul>
    <div class="row">
    	<div class="col-sm-12">
            <section class="panel panel-info">
                <header class="panel-heading bg-light">
                    <ul class="nav nav-tabs nav-justified">
						@canatleast(['home.home.chart.all', 'home.home.chart.jabatan', 'home.home.chart.jabatan_pegawai'])
							<li class="active"><a href="#pegawai" data-toggle="tab">Informasi</a></li>
						@endcanatleast
						@can('home.home.lokasi')
							<li><a href="#location" data-toggle="tab">Lokasi</a></li>
						@endcan
						@canatleast(['home.home.cari.pegawai', 'home.home.cari.hut'])
							<li><a href="#search" data-toggle="tab">Cari Pegawai & HUT</a></li>
						@endcanatleast
                    </ul>
                </header>
                <div class="panel-body">
                    <div class="tab-content">
						@canatleast(['home.home.chart.all', 'home.home.chart.jabatan', 'home.home.chart.jabatan_pegawai'])
                        <div class="tab-pane active" id="pegawai">
							@can('home.home.chart.all')
                            <div class="panel-body" style="border-bottom:2px dashed #ccc; padding-left:0;padding-right:0">
                            	<div class="col-md-12 col-xs-12" style="padding-right: 40px; padding-left: 40px;">
                            		<div class="row">
                            			<select class="select2-option pull-right col-md-2 col-xs-4" name="chart_option">
                            				<option value="batang" selected="selected">Batang</option>
                            				<option value="garis">Garis</option>
		                            	</select>
		                            	<select class="select2-option pull-right col-md-2 col-xs-4" name="chart_type">
                            				<option value="pegawai" selected="selected">Pegawai</option>
                            				<option value="usia">Usia</option>
                            				<option value="absensi_kejadian">Absensi Kejadian</option>
                            				<option value="absensi_pegawai">Absensi Pegawai</option>
											<option value="lembur">Lembur</option>
		                            	</select>
                            			<select class="select2-option pull-right col-md-2 col-xs-4" name="tahun">
                            				@for($i=format_date('Y'); $i >= (format_date('Y')-5); $i--)
                            					<option value="{{ $i }}" @if(format_date('Y') == $i) selected="selected" @endif>{{ $i }}</option>
                            				@endfor
		                            	</select>
                            		</div>
                            	</div>
                                <div class="col-md-12 col-xs-12" style="padding: 0; height:450px;">
									<div class="col-md-12 text-center loading-container"><span>PLEASE WAIT ....</span></div>
                            		<div class="col-md-12 col-xs-12" id="chart"></div>
                            	</div>
                            </div>
							@endcan
							@can('home.home.chart.jabatan')
                            <!-- <div class="panel-body" style="border-bottom:2px dashed #ccc; padding-left:0;padding-right:0">
			                    <div class="col-md-12 col-xs-12" id="jabatan-chart"></div>
			                    <div class="col-md-6 col-xs-12">
			                        <ul class="list-group no-radius" id="jab-kosong-hover">
			                            <li id="jab-kosong" class="list-group-item hv-content" style="background-color: black !important; font-weight:bold; color:#fff">
			                                <div class="row">
			                                    <div class="col-md-12">
			                                        <span style="color:#fff;font-size:16px" class="pull-left">JABATAN KOSONG</span>
			                                        <span style="color:#fff;font-size:16px" class="pull-right">{{ format_harga($data['jab_kosong']->count()) }}</span>
			                                    </div>
			                                </div>
			                            </li>
			                        </ul>
			                        <ul class="list-group no-radius">
			                            <li class="list-group-item" style="background-color: rgb(60, 135, 222) !important; font-weight:bold; color:#fff"> 
			                                <span class="pull-right" id="data-jum-dirut">{{ $data['jum_dirut'] }}</span>
			                                DIREKTUR UTAMA
			                            </li> 
			                            <li class="list-group-item" style="background-color: rgb(53, 116, 188) !important; font-weight:bold; color:#fff"> 
			                                <span class="pull-right" id="data-jum-dirbid">{{ $data['jum_dirbid'] }}</span>
			                                DIREKTUR BIDANG
			                            </li>                                 
			                            <li class="list-group-item" style="background-color: rgb(58, 111, 171) !important; font-weight:bold; color:#fff">
			                                <span class="pull-right" id="data-jum-ms">{{ $data['jum_ms'] }}</span>
			                                MANAJER SENIOR
			                            </l>
			                            <li class="list-group-item" style="background-color: rgb(58, 101, 149) !important; font-weight:bold; color:#fff">
			                                <span class="pull-right" id="data-jum-manajer">{{ $data['jum_manajer'] }}</span>
			                                MANAJER
			                            </li>
			                            <li class="list-group-item" style="background-color: rgb(59, 92, 128) !important; font-weight:bold; color:#fff">
			                                <span class="pull-right" id="data-jum-supervisor">{{ $data['jum_supervisor'] }}</span>
			                                SUPERVISOR
			                            </li>
			                            <li class="list-group-item" style="background-color: rgb(56, 75, 95) !important; font-weight:bold; color:#fff">
			                                <span class="pull-right" id="data-jum-ss">{{ $data['jum_ss'] }}</span>
			                                STAF SENIOR
			                            </li>
			                            <li class="list-group-item" style="background-color: rgb(31, 38, 45) !important; font-weight:bold; color:#fff">
			                                <span class="pull-right" id="data-jum-staf">{{ $data['jum_staf'] }}</span>
			                                STAF
			                            </li>
			                            <li class="list-group-item" style="background-color: black !important; font-weight:bold; color:#fff">
			                                <div class="row">
			                                    <div class="col-md-12">
			                                        <span style="color:#fff;font-size:16px" class="pull-left">TOTAL JABATAN</span>
			                                        <span class="pull-right" style="font-size:16px">
			                                            {{ format_harga($data['jum_dirut']+$data['jum_dirbid']+$data['jum_ms']+$data['jum_manajer']+$data['jum_supervisor']+$data['jum_ss']+$data['jum_staf']) }}
			                                        </span>
			                                        <span class="sparkline m-l pull-right" data-type="bar" data-height="18" data-bar-width="15" data-bar-spacing="2" data-bar-color="rgb(56, 255, 51)" style="margin-right:10px;padding:0">
			                                            {{ $data['jum_dirut'] }},{{ $data['jum_dirbid'] }},{{ $data['jum_ms'] }},{{ $data['jum_manajer'] }},{{ $data['jum_supervisor'] }},{{ $data['jum_ss'] }},{{ $data['jum_staf'] }}
			                                        </span>
			                                    </div>
			                                </div>
			                            </li>
			                        </ul>
			                    </div>
			                </div> -->
							@endcan
							@can('home.home.chart.jabatan_pegawai')
                            <div class="panel-body" style="border-bottom:2px dashed #ccc; padding-left:0;padding-right:0">
				                <!-- <div class="col-md-6 col-xs-12" id="jabatan-pegawai"></div> -->
				                <div class="col-md-12 col-xs-12">
				                	<ul class="list-group no-radius" id="jab-kosong-hover" style="margin-bottom: 5px">
										<li id="jumlah-jenis-jabatan" class="list-group-item hv-content" style="background-color: black !important; font-weight:bold; color:#fff">
			                                <div class="row">
			                                    <div class="col-md-12">
			                                        <span style="color:#fff;font-size:11px" class="pull-left">DATA JUMLAH PEGAWAI MENURUT JENIS PEGAWAI SAAT INI</span>
			                                        <span style="color:#fff;font-size:11px" class="pull-right"></span>
			                                    </div>
			                                </div>
			                            </li>
			                            <li id="jab-kosong" class="list-group-item hv-content" style="background-color: black !important; font-weight:bold; color:#fff">
			                                <div class="row">
			                                    <div class="col-md-12">
			                                        <span style="color:#fff;font-size:11px" class="pull-left">JABATAN KOSONG</span>
			                                        <span style="color:#fff;font-size:11px" class="pull-right">{{ format_harga($data['jab_kosong']->count()) }}</span>
			                                    </div>
			                                </div>
			                            </li>
			                        </ul>
									<div class="table-responsive">
										<table class="table table-bordered table-hover m-b-none" width="100%" style="font-size: 11px !important">
											<thead class="bg-black" style="color:#fff">
												<tr>
													<th class="text-center" rowspan="3" style="vertical-align: middle;">Jabatan</th>
													<th class="text-center" rowspan="3" style="vertical-align: middle;">Jumlah Jabatan</th>
													<th class="text-center" colspan="3" style="vertical-align: middle;">Struktural</th>
													<th class="text-center" rowspan="3" style="vertical-align: middle;">Fungsional</th>
													<th class="text-center" rowspan="3" style="vertical-align: middle;">Jumlah Pegawai</th>
												</tr>
												<tr>
													<th class="text-center" rowspan="2" style="vertical-align: middle;">Definitif</th>
													<th class="text-center" colspan="2" style="vertical-align: middle;">Plt / Pjs</th>
												</tr>
												<tr>
													<th class="text-center" style="vertical-align: middle;">Promosi</th>
													<th class="text-center" style="vertical-align: middle;">Rangkap</th>
												</tr>
											</thead>
											<tbody style="font-weight:bold">
																								@foreach($data['rekap'] AS $k => $v)
																										<tr>
														<td>{{ $v['jabatan'] }}</td>
														<td class="text-right">{{ format_harga($v['jumlah_jabatan']) }}</td>
														<td class="text-right">{{ format_harga($v['definitif']) }}</td>
														<td class="text-right" >{{ format_harga($v['plt']) }}</td>
														<td class="text-right" >{{ format_harga($v['plt_rangkap']) }}</td>
														<td class="text-right">{{ format_harga($v['fungsional']) }}</td>
														<td class="text-right">{{ format_harga($v['jumlah_pegawai']) }}</td>
													</tr>
												@endforeach
											</tbody>
											<tfoot class="bg-black" style="color:#fff">
												<tr>
													<th class="text-center">TOTAL</th>
													<th class="text-right">{{ array_sum($jumlah_jabatan) }}</th>
													<th class="text-right">{{ array_sum($definitif) }}</th>
													<th class="text-right">{{ array_sum($plt) }}</th>
													<th class="text-right">{{ array_sum($plt_rangkap) }}</th>
													<th class="text-right">{{ array_sum($fungsional) }}</th>
													<th class="text-right">{{ array_sum($jumlah_pegawai) }}</th>
												</tr>
											</tfoot>
										</table>
									</div>
			                    </div>
			                </div>
							@endcan
                        </div>
						@endcanatleast
						@can('home.home.lokasi')
                        <div class="tab-pane" id="location">
                                                    </div>
						@endcan
						@canatleast(['home.home.cari.pegawai', 'home.home.cari.hut'])
                        <div class="tab-pane" id="search">
							@can('home.home.cari.pegawai')
                            <div class="col-md-6 col-sm-12 col-xs-12">
                                <footer class="panel-footer bg-dark" style="border:1px solid #ccc">
                                    <input type="text" class="form-control" name="search" placeholder="Enter Here...">
                                </footer>
								<footer class="panel-footer" style="padding:0; border:1px solid #ccc">
                                    <a href="javascript:void(0)" class="list-group-item text-ellipsis text-center keterangan-cari" style="font-weight: bold; padding: 2px !important; background-color: #eeeeee; font-size: 10px;">
                                        Masukkan NIP / Nama / Jabatan / Bagian
                                    </a>
                                </footer>
                                <footer class="panel-body slim-scroll list-group" data-height="429px" style="padding:0;border:1px solid #ccc">
                                	<div class="loading-content-cari"></div>
                                	<div class="search-result" style="padding: 0; margin: 0; display: none"></div>
                                </footer>
                            </div>
							@endcan
							@can('home.home.cari.hut')
                            <div class="col-md-6 col-sm-12 col-xs-12">
                                <div id="notifikasi" class="m-l-n-xxs m-r-n-xxs bg-dark" style="color:#fff;font-weight:bold"></div>
                                <!-- <div class="msg_approval"></div> -->
                                <footer class="panel-footer" style="padding:0; border:1px solid #ccc">
                                    <a href="javascript:void(0)" class="list-group-item text-ellipsis text-center keterangan-hut" style="font-weight: bold; padding: 2px !important; background-color: #eeeeee; font-size: 10px;">
                                        Pilih Tanggal yang Bertanda Pada Kalendar
                                    </a>
                                </footer>
                                <footer class="panel-body slim-scroll list-group" data-height="254px" style="padding:0;border:1px solid #ccc;">
                                	<div class="loading-content"></div>
                                	<div class="list-hut" style="padding: 0; margin: 0; display: none"></div>
                                </footer>
                                <!-- <div class="list-group slim-scroll list-hut" data-height="253px" style="padding:0;border:1px solid #ccc"></div> -->
                                <!-- <input type="hidden" id="element-id" value=""> -->
                            </div>                                
							@endcan
                        </div>
						@endcanatleast
                    </div>
                </div>    
            </section>
        </div>
    </div>
</section>

<div id="plt-modal" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:75%;">
        <div class="modal-content">
            <div class="modal-header" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <button class="close" type="button">×</button>
                <h4 class="modal-title" style="font-weight: bold">Daftar Plt.</h4>
            </div>
            <div class="modal-body" style="padding:20px 20px 0 20px">
            	<div class="row">
					<div class="col-md-12 col-xs-12">
						<div class="table-responsive">
							<table class="table table-hover table-striped table-bordered" style="margin-bottom: 0px; font-size: 11px !important">
								<thead style="background-color: black; color: #fff">
									<tr>
										<th class="text-center">No</th>
										<th class="text-center">Jabatan</th>
										<th class="text-center">Nama</th>
										<th class="text-center">TMT</th>
									</tr>
								</thead>
								<tbody id="table-modal-plt" >
									<tr>
										<td class="loading-content-plt" colspan="4"></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
            	</div>
            </div>
            <div class="modal-footer" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <button class="btn btn-danger close" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="modal-jabatan-kosong" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:90%;">
        <div class="modal-content">
            <div class="modal-header" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <button class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title" style="font-weight: bold">Daftar & Jumlah Jabatan Kosong</h4>
            </div>
            <div class="modal-body" style="padding:20px 20px 0 20px">
            	<div class="row">
					<div class="col-md-9 col-xs-12">
						<div class="table-responsive">
							<div class="text-center" style="font-weight: bold; font-size: 14px; color: #000; margin-bottom: 10px">Daftar Jabatan Kosong</div>
							<table class="table table-hover table-striped table-bordered" style="margin-bottom: 0px; font-size: 11px !important">
								<thead style="background-color: black; color: #fff">
									<tr>
										<th class="text-center">No</th>
										<th class="text-center">Jabatan</th>
										<th class="text-center">Nama</th>
										<th class="text-center">TMT</th>
									</tr>
								</thead>
								<tbody>
																@if($data['jab_kosong']->count() > 0)
									@foreach ($data['jab_kosong']->get() as $key => $value)
																				<tr>
											<td class="text-center">{{ $key+1 }}</td>
											<td>{{ $value->nama_jabatan }}</td>
											<td>{!! (!empty($value->nama_pegawai) ? $value->nama_pegawai : '<span style="color:#bbb">(belum ada pejabat)</span>') !!}</td>
											<td>{!! (!empty($value->tmt) ? tanggalIndo2($value->tmt) : '<span style="color:#bbb">-</span>') !!}</td>
										</tr>
									@endforeach
								@else
									<tr>
										<td class="text-center" colspan="4">Tidak ada jabatan kosong.</td>
									</tr>
								@endif
								</tbody>
							</table>
						</div>
					</div>
					<div class="col-md-3 col-xs-12">
						<div class="table-responsive">
							<div class="text-center" style="font-weight: bold; font-size: 14px; color: #000; margin-bottom: 10px">Jumlah Jabatan Kosong</div>
							<table class="table table-hover table-striped table-bordered" style="margin-bottom: 0px; color: black; font-size: 11px !important">
								<thead style="background-color: black; color: #fff">
									<tr>
										<th class="text-center">No</th>
										<th class="text-center">Jenis Jabatan</th>
										<th class="text-center">Jumlah</th>
									</tr>
								</thead>
								<tbody>
									@if($data['jab_kosong']->count() > 0)
																				@foreach($data_layer as $k => $v)
																						<tr>
												<td class="text-center">{{ $i+1 }}</td>
												<td>{{ $k }}</td>
												<td class="text-right">{{ count($v) }}</td>
											</tr>
																					@endforeach
									@else
										<tr>
											<td class="text-center" colspan="4">Tidak ada jabatan kosong.</td>
										</tr>
									@endif
								</tbody>
								<tfoot style="background-color: rgb(53, 116, 188); color: #fff">
									@if($data['jab_kosong']->count() > 0)
										<tr>
											<th colspan="2" class="text-center">Jumlah</th>
											<th class="text-right">{{ array_sum($jumlah_kosong) }}</th>
										</tr>
									@else
										<tr>
											<th colspan="2" class="text-center">Jumlah</th>
											<th class="text-right">0</th>
										</tr>
									@endif
								</tfoot>
							</table>
						</div>
					</div>
            	</div>
            </div>
            <div class="modal-footer" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
            	@can('home.home.excel_j_kosong')
            		<button type="button" class="btn btn-success" id="export-jab-kosong"><i class="fa fa-download"></i> Excel</button>
            	@endcan
                <a class="btn btn-danger" data-dismiss="modal" href="#">Close</a>
            </div>
        </div>
    </div>
</div>

<div id="modal-jumlah-jenis-pegawai" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:90%;">
        <div class="modal-content">
            <div class="modal-header" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <button class="close" data-dismiss="modal" type="button">×</button>
                <h5 class="modal-title" style="font-weight: bold">DATA JUMLAH PEGAWAI MENURUT JENIS PEGAWAI</h5>
            </div>
            <div class="modal-body" style="padding:20px 20px 0 20px">
            	<div class="row">
					<div class="col-md-12 col-xs-12">
						<div class="table-responsive">
							<table class="table table-hover table-bordered" style="margin-bottom: 0px; font-size: 11px !important; width: 100%">
								<thead class="bg-black" style="color:#fff">
							        <tr>
							            <th class="text-center" style="vertical-align: middle;" rowspan="2" width="2%">NO</th>
							            <th class="text-center" style="vertical-align: middle;" rowspan="2" colspan="3">BAGIAN</th>
							            <th class="text-center" style="vertical-align: middle;" rowspan="2" width="7%">DIREKSI</th>
							            <th class="text-center" style="vertical-align: middle;" colspan="2" width="7%">PEGAWAI PERUSAHAAN</th>
							            <th class="text-center" style="vertical-align: middle;" colspan="2" width="7%">CALON PEGAWAI PERUSAHAAN</th>
							            <th class="text-center" style="vertical-align: middle;" colspan="2" width="7%">KONTRAK</th>
							            <th class="text-center" style="vertical-align: middle;" rowspan="2" width="7%">JUMLAH</th>
							        </tr>
							        <tr>
							        	<th style="vertical-align: middle;" class="text-center">struktural</th>
							        	<th style="vertical-align: middle;" class="text-center">fungsional</th>
							        	<th style="vertical-align: middle;" class="text-center">struktural</th>
							        	<th style="vertical-align: middle;" class="text-center">fungsional</th>
							        	<th style="vertical-align: middle;" class="text-center">struktural</th>
							        	<th style="vertical-align: middle;" class="text-center">fungsional</th>
							        </tr>
							    </thead>
							    <tbody id="body-jenis-peg"></tbody>
							    <tfoot id="footer-jenis-peg"></tfoot>
							</table>
						</div>
					</div>
            	</div>
            </div>
            <div class="modal-footer" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <a class="btn btn-danger" data-dismiss="modal" href="#">Close</a>
            </div>
        </div>
    </div>
</div>

<div id="modal-lokasi" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" style="width:25%;">
        <div class="modal-content">
            <div class="modal-header" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5">
                <button class="close" data-dismiss="modal" type="button">×</button>
                <h4 class="modal-title" id="jenis-jabatan">Daftar Jenis Jabatan</h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Jenis Jabatan</th>
                            <th class="text-right">Jumlah</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Direktur Utama</td>
                            <td id="1" class="text-right"></td>
                        </tr>
                        <tr>
                            <td>Direktur Bidang</td>
                            <td id="2" class="text-right"></td>
                        </tr>
                        <tr>
                            <td>Manajer Senior</td>
                            <td id="3" class="text-right"></td>
                        </tr>
                        <tr>
                            <td>Manajer</td>
                            <td id="4" class="text-right"></td>
                        </tr>
                        <tr>
                            <td>Supervisor</td>
                            <td id="5" class="text-right"></td>
                        </tr>
                        <tr>
                            <td>Staf Senior</td>
                            <td id="6" class="text-right"></td>
                        </tr>
                        <tr>
                            <td>Staf</td>
                            <td id="7" class="text-right"></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Total</th>
                            <th id="total" class="text-right"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer" style="border-radius:6px;color:#3a87ad; background-color:#f5f5f5; margin-top:0">
                <a class="btn btn-danger" data-dismiss="modal" href="#">Close</a>
            </div>
        </div>
    </div>
</div>
@stop

@section('bottom_script')
	@include('home::layouts.bottom_script')
@stop