@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('Manajemen Resiko')) }}</h1>
    <div class="mt-1 cmSWBc">Usulan Pegawai terkait Resiko-resiko dalam bekerja</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">MR </h2>
                                <div class="ISnqu">
                                Manajemen Resiko
                                </div>
                            </div>
                            <div class="d-none 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==$data['periode']?'selected':'' }}>
                                        {{ \Carbon\Carbon::parse($date_now)->formatLocalized("%B %Y") }} 
                                    </option>
                                @endfor
								</select>
			                </div>
                        </header>
                    </div>
                    </div>
                    <div class="d-none ugt2L aK2X8b iDdZmf">
                        <div class="container card-body p-2 p-md-3">
                        <div class="_row">
                            <div _class="col-sm-12 row">	
                                
                            </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'
			});
            
            $('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