@extends('akun.layout')

@push('stylesheet')
<style type="text/css">
	.a_create_container {
		color: #202124!important;
	    box-shadow: 0 4px 4px 0 rgba(60,64,67,0.3), 0 8px 12px 6px rgba(60,64,67,0.15)!important;
	    background-color: #f1f3f4;
	}
	.img-kartu{
		height:215px!important;
	}
    .select2-container {
        text-align: right!important;
    }
    .modal-xl {
        max-width: 100%;
    }
    @media (min-width: 992px){
        .modal-xl {
            max-width: 90%;
        }
    }
    .modal-body {
        max-height: calc(100vh - 125px); /*75vh; */
        overflow-y: auto;
    }
</style>
@endpush

@section('content_header') 
    <h1 class="x7WrMb">{{ ucwords(strtolower('Data Absensi')) }}</h1>
    <div class="mt-1 cmSWBc">Info Kehadiran Pegawai per Periode</div>
@endsection

@section('content_body')
    <form id="form" method="POST" class="form-horizontal">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">	
        <div class="dQBdyc">
            <div class="wJpH8c zpCp3">
                <article class="GIxHAe">
                    <div class="XLK0Od">
                    <div class="ahh38c">
                    <div class="ugt2L">
                    <div class="N5YmOc kJXJmd">
                        <header class="mSUZQd">
                            <div class="jbRlDc">
                                <h2 class="fnfC4c">Laporan Ringkas</h2>
                                <div class="ISnqu">
                                    Periode : 
                                    {{ \Carbon\Carbon::parse($value['tgl_masuk'])->formatLocalized("%d %B %Y") }} -
                                    {{ \Carbon\Carbon::parse($value['tgl_selesai'])->formatLocalized("%d %B %Y") }}
                                </div>
                            </div>
                            <div class="header-elements text-right">
								<select class="form-control text-right" name="select_date" id="select_date" data-fouc>
                                @for ($i = 1; $i <= 12; $i++)
                                    @php 
                                        $m              = sprintf('%02d', $i);
                                        $date_now       = date("Y-$m-20");
                                        $date_before    = date("Y-m-21", strtotime($date_now. ' -1 Months'));  // date("Y-$m-21", strtotime("-1 Months","Y-$m-21"));
                                    @endphp
									<option value="{{ $m  }}" {{ $m==$value['periode']?'selected':'' }}>
                                        {{ \Carbon\Carbon::parse($date_now)->formatLocalized("%B %Y") }}  
                                        {{-- 
                                        {{ \Carbon\Carbon::parse($date_before)->formatLocalized("%d %B") }}
                                        {{ \Carbon\Carbon::parse($date_now)->formatLocalized("%d %B") }}      
                                        --}}                                   
                                    </option>
                                @endfor
								</select>
			                </div>
                        </header>
                    </div>
                    </div>
                    <div class="ugt2L aK2X8b iDdZmf">
                        <div class="container card-body p-2 p-md-3">
                        <div class="_row">
                            <div _class="col-sm-12 row">	
                                
                                <table width="100%" 
                                    class="table _table-bordered card-gtheme table-gtheme table-hover-gtheme 
                                        table-fixed table-xxs datatable-responsive table-responsive 
                                        table-overflow-x" 
                                    _style="font-size:9px;padding-left:0" cellpadding="0" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center" rowspan="2">HADIR HARI KERJA</th>
                                            <th style="text-align: center" rowspan="2">TRS</th>
                                            <th style="text-align: center" rowspan="2">MKN</th>
                                            <th style="text-align: center" colspan="9">KETIDAKHADIRAN</th>
                                            <th style="text-align: center" colspan="2">TIDAK ABSEN</th>
                                            <th style="text-align: center" rowspan="2">TERLAMBAT</th>
                                            <th style="text-align: center" rowspan="2">PULANG AWAL</th>
                                            <th style="text-align: center" rowspan="2">JAM EFEKTIF</th>
                                        </tr>
                                        <tr>
                                            <!--<th style="text-align: center" width="5%">LIBUR</th>-->
                                            <th style="text-align: center" >SD</th>
                                            <th style="text-align: center" >IR</th>
                                            <th style="text-align: center" >IT</th>
                                            <th style="text-align: center" >CR</th>
                                            <th style="text-align: center" >TR</th>
                                            <th style="text-align: center" >IP</th>
                                            <th style="text-align: center" >A</th>
                                            <th style="text-align: center" >T</th>
                                            <th style="text-align: center" >PA</th>
                                            <th style="text-align: center" >TAD</th>
                                            <th style="text-align: center" >TAP</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    @if(count($kartu) > 0)
                                                                                @foreach($kartu as $key => $value)
                                                                                        <tr>
                                            {{--
                                                <td align="center">{{ $i }}</td>
                                                <td align="center">{{ $value->nip }}</td>
                                                <td>{{ $value->nama }}</td>
                                                <td>{{ $value->jabatan }}</td>
                                            --}}
                                                <td align="center">
                                                                                                        {{ !empty($jum_ker) ? $jum_ker : NULL }}
                                                </td>
                                                <!--<td align="center">
                                                                                                        {{ (!empty($value->libur) ? $value->libur : NULL) }}
                                                </td>-->
                                                <td align="center">
                                                                                                        {{ $transport }}
                                                    {{-- (in_array($value->layer,[3,4])) ? '0' : $transport --}}
                                                </td>
                                                <td align="center">
                                                                                                        {{ ($makan) }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($value->sd) ? $value->sd : NULL) }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($value->ir) ? $value->ir : NULL) }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($value->it) ? $value->it : NULL) }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($value->cr) ? $value->cr : NULL) }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($jum_tr) ? $jum_tr : NULL) }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($value->ip) ? $value->ip : NULL) }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($jum_a)) ? $jum_a : NULL }}
                                                </td>

                                                <td align="center">
                                                                                                        {{ (!empty($jum_t)) ? $jum_t : NULL }}
                                                </td>
                                                <td align="center">
                                                                                                        {{ (!empty($jum_pa)) ? $jum_pa : NULL }}
                                                </td>
                                                <td align="center">
                                                                                                                                                            {{ (!empty($jum_tad) ? $jum_tad : NULL) }}
                                                </td>
                                                <td align="center">
                                                                                                                                                            {{ (!empty($jum_tap) ? $jum_tap : NULL) }}
                                                </td>
                                                <td align="center" width="5%">
                                                                                                        {{ ($jum_t+$jum_it).'/'.sec_to_time($value->terlambat) }}
                                                </td>
                                                <td align="center" width="5%">
                                                                                                        {{ ($jum_pa+$jum_ip).'/'.sec_to_time($value->pulang_cepat) }}
                                                </td>
                                                <td align="center" width="5%">
                                                                                                        {{ sec_to_time($value->jam_efektif) }}
                                                </td>
                                            </tr>
                                                                                    @endforeach
                                    @endif
                                    </tbody> 
                                    <tfoot>
                                        <tr>
                                            <th class="_text-right" colspan="17">
                                                <small class="text-small text-muted" _style="font-size: 10px">
                                                    <strong class="text-dark">SD</strong>: Sakit dengan Surat Dokter.  
                                                    <strong class="text-dark ml-2">IR</strong>: Tidak Masuk Kerja dengan Keterangan.  
                                                    <strong class="text-dark ml-2">IT</strong>: Terlambat dengan Keterangan.  
                                                    <strong class="text-dark ml-2">CR</strong>: Cuti Resmi.  
                                                    <strong class="text-dark ml-2">TR</strong>: Tugas Resmi.  
                                                    <strong class="text-dark ml-2">IP</strong>: Pulang Awal dengan Keterangan.  
                                                    <strong class="text-dark ml-2">A</strong>: Tidak Masuk tanpa Keterangan.  
                                                    <strong class="text-dark ml-2">T</strong>: Terlambat tanpa Keterangan.  
                                                    <strong class="text-dark ml-2">PA</strong>: Pulang Awal tanpa Keterangan.  
                                                    <strong class="text-dark ml-2">TAD</strong>: Tidak Absen Datang.  
                                                    <strong class="text-dark ml-2">TAP</strong>: Tidak Absen Pulang
                                                </small>
                                            </th>
                                        </tr>
                                    </tfoot>  
                                </table>

                            </div>
                            <div class="_d-none col-sm-12">
                                <div class="form-group row my-3">
                                    <div class="col-lg-12 _text-right">	
                                        <a  href="javascript:void(0)" data-href="{{ route('akun.absen.rinci') }}"
                                            id="btn-absen-rinci"
                                            class="py-2 btn btn-sm btn-gtheme bg-white font-weight-bold border-1 rounded-round" 
                                            data-placement="top" data-popup="tooltip" data-trigger="hover" 
                                            data-original-title="Detail Laporan">
                                            <i class="mi-add font-weight-bold text-primary mr-2"></i>
                                            Detail Laporan
                                        </a>								
                                        <a id="btn_save" class="d-none btn _btn-sm btn-primary _round _rounded-round text-white">
                                            <i class="icon-pencil mr-2"></i> Simpan
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                    </div>
                </article>
            </div>
        </div>
    </form>
    
	<div class="modal fade" id="ajaxModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-xl">
	        <div class="modal-content card-gtheme border-0 p-0">
                <div class="RZBuIb c8DD0" aria-hidden="true">
                    <div id="modalprogressbar" role="modalprogressbar" class="sZwd7c B6Vhqe qdulke jK7moc">
                        <div class="xcNBHc um3FLe"></div>
                        <div jsname="cQwEuf" class="w2zcLc Iq5ZMc"></div>
                        <div class="MyvhI TKVRUb" jsname="P1ekSe"><span class="l3q5xe SQxu9c"></span></div>
                        <div class="MyvhI sUoeld"><span class="l3q5xe SQxu9c"></span></div>
                    </div>
                </div>
	            <div class="d-none modal-header bg-white py-2">
	                <h4 class="modal-title" id="modelHeading"></h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          				<span aria-hidden="true">&times;</span>
        			</button>
	            </div>
	            <div class="modal-body _pt-0">
					<form id="ModalForm" name="ModalForm" class="form-horizontal">
						<div id="modal-content"></div>
					</form>
				</div>
	            <div class="py-2 bg-white modal-footer _d-flex justify-content-between align-items-center">
                    <span></span>
                    <button type="button" class="btn btn-light rounded-round" data-dismiss="modal" aria-label="Close">
                        <i class="mi-close mr-1"></i>
						Close
        			</button>
                    <button type="submit" class="d-none btn btn-primary rounded-round" id="saveBtn" value="create" disabled>
						<i class="icon-pencil mr-1"></i>
						Simpan
                    </button>
				</div>
	        </div>
	    </div>
	</div>
@endsection

@push('scripts')
    <script src="{{ asset('global_assets/js/plugins/forms/validation/validate.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/forms/selects/select2.min.js') }}"></script>
	<script src="{{ asset('global_assets/js/plugins/pickers/daterangepicker.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/forms/inputs/inputmask.js') }}"></script>
	<script src="{{ asset('global_assets/js/plugins/forms/inputs/formatter.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('global_assets/js/plugins/fancybox/lib/jquery.mousewheel-3.0.6.pack.js') }}"></script>
	<script type="text/javascript">
	    $(document).ready(function(){ 
	    	var validator = $('#form').validate({
	            ignore 		: 'input[type=hidden], .select2-search__field', // ignore hidden fields
	            errorClass 	: 'validation-invalid-label',
	            highlight: function(element, errorClass, validClass) {
	                $(element).removeClass(errorClass);
	            },
	            unhighlight: function(element, errorClass, validClass) {
	                $(element).removeClass(errorClass);
	            },
	            errorPlacement: function(error, element) {
	                if (element.parents().hasClass('form-check')) {
	                    error.appendTo( element.parents('.form-check').parent() );
	                }
	                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
	                    error.appendTo( element.parent() );
	                }
	                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
	                    error.appendTo( element.parent().parent() );
	                }
	                else {
	                    error.insertAfter(element);
	                }
	            }
	        });

	        function fancy (url) {
	            $.fancybox.open({
	                autoSize    : false,
	                width       : "100%",
	                height      : "100%",
	                href        : url,
	                type        : 'iframe',
	                padding     : 5
	            });
	        }

	        $('.form-input-styled').uniform({
	            fileButtonClass: 'action btn btn-sm bg-blue'
	        });

	        $('.form-check-input').uniform({
	            wrapperClass: 'border-primary-600 text-primary-800'
	        });

	        $('#select_date').select2({
                minimumResultsForSearch: Infinity,
                width   : "150px",
                // dir     : "rtl"
            })            
	        .on('change', function(e) {
	        	e.preventDefault();
	        	$('#form').submit();
                e.stopPropagation();
                return false;
	        });

		    $('.daterange-single').datepicker({
	            dateFormat 		: 'dd-mm-yy',
	            showButtonPanel	: true,
	            isRTL			: $('html').attr('dir') == 'rtl' ? true : false,
	            uiLibrary 		: 'bootstrap4', 
	            size 			: 'small',
	            iconsLibrary 	: 'fontawesome'
			});
			
			/*
	        $('#btn_save')
	        .on('click', function(e) {
	        	e.preventDefault();
	        	$('#form').submit();
                e.stopPropagation();
                return false;
	        });
			$('#form').submit(function(e) {
                e.preventDefault();
                var $target = $(this),
				    block = $target.closest('section');  
					blockui(block); 
				if(! $target.valid()) {
					unblockui(block);
					$.alert("Data belum Valid, Silahkan cek kembali data isian Anda!!!");
					return false;
				}
				    
                var data = new FormData(this);
                $.ajax({
                    url: "{{ route('akun.store') }}",
                    type: 'POST',
                    data: data,
                    contentType: false,
                    cache: false,
                    processData:false,
                })
                .done(function(response) {
                	console.log(response);
                	$.alert(response.message);
                	unblockui(block); 
                	setTimeout(function(){  
		                //window.location.reload(true);
		            }, 7000 );
                    //location.reload();
                })
                .fail(function(response) {
                    console.log(response);
					$.alert(response.message);
                	// $.alert('data gagal disimpan');
                });
                e.stopPropagation();
                return false;
            });
            */
            $('body').on('click', '#btn-absen-rinci', function(e){
	        	e.preventDefault();
                $('#modal-content').load( "{{ route('akun.absen.rinci') }}" ,
				    { select_date : $('#select_date').val() },    
                    function(data, status, jqXGR) { 
                        $('#modelHeading').html("Detail Kehadiran <span class='d-block text-muted font-size-sm'>"+$('.ISnqu').text()+"</span>");
                        $('#ajaxModal').modal('show');  
                });
                e.stopPropagation();
                return false;
            });
                
            $('#ajaxModal').on('hidden.bs.modal', function (event) {
                $('#modal-content').empty();
            });
	    });
	</script>
@endpush