@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('Peminat Auditor ')) }}</h1>
    <div class="mt-1 cmSWBc">Daftar Minat Pegawai Menjadi Auditor</div> 
@endsection

@section('content_body')
    {{-- 
    <form id="form" method="POST" class="form-horizontal">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">	
    <input type="hidden" name="id" value="{{ $data->id??'' }}">	
        <div class="dQBdyc">
            <div class="wJpH8c zpCp3">
                <article class="GIxHAe">
                    <div class="XLK0Od">
                    <div class="ahh38c">
                    <div class="ugt2L">
                    <div class="N5YmOc kJXJmd mb-2">
                        <header class="mSUZQd d-flex align-items-center">
                            <div class="jbRlDc">
                                <h2 class="fnfC4c">Minat Auditor </h2>
                                <div class="ISnqu">
                                    <span _class="mr-1 _btn py-0 _btn-white _rounded-round text-info" >
                                    <label for="is_minat" class="_d-flex _col-form-label" style="cursor:pointer;">
                                        Apakah Anda berminat menjadi Auditor ?
                                    </label>
                                    </span>
                                </div>
                            </div>
                            <div class="_d-none header-elements text-right switchery-2x">
                                <input type="checkbox" id="is_minat" name="is_minat" class="form-control-switchery" 
                                {{ (!empty($data->id) and $data->status=="1") ?'checked':'' }}/>
			                </div>
                        </header>
                        
                        <div class="{{ empty($data->id)?'d-none':'' }} mt-2 form-group row" data-action="whatapps">
                            <label class="col-lg-3 col-form-label">No Whatapps</label>
                            <div class="col-lg-9">
                                <input name="whatapps" id="whatapps" type="text" placeholder="Silahkan masukkan nomor whatapps anda" 
                                class="form-control" value="{{ $data->notelp??'' }}" required>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="border-top-1 _d-none ugt2L aK2X8b iDdZmf">
                        <div class="container _card-body p-2 p-md-3">
                            <div class="{{ empty($data->id)?'d-none':'' }} _col-sm-12" data-action="auditor">
                                <div class="d-flex align-items-center">
                                        <span class="text-muted">
                                            Berminat sejak : {{ $data->created_at??'' }}
                                        </span>
                                        @if(!empty($data->id))
                                        <a id="btn_save" class="_d-none ml-auto btn _btn-sm btn-primary _round _rounded-round text-white">
                                            <i class="icon-pencil mr-2"></i> Edit
                                        </a>
                                        @else
                                        <a id="btn_save" class="_d-none ml-auto btn _btn-sm btn-primary _round _rounded-round text-white">
                                            <i class="icon-pencil mr-2"></i> Simpan
                                        </a>
                                        @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                    </div>
                </article>
            </div>
        </div>
    </form>
    --}}
    <div class="mt-3 mb-5"> 
        <div class="d-flex mb-2">
            <a  href="{{ route('akun.kontribusi.auditor') }}"
                class="btn btn-sm btn-gtheme bg-transparent font-weight-bold shadow-1 rounded-round ml-auto" 
                data-placement="top" data-popup="tooltip" data-trigger="hover" 
                data-original-title="Minat Anda">
                <i class="mi-add font-weight-bold text-primary"></i>
                Minat Anda
            </a>
        </div>
        <table width="100%" id="table-cont"
            class="table _table-bordered _card-gtheme table-gtheme table-hover-gtheme 
                table-fixed _table-xxs table-overflow-x" 
                 _style="font-size:9px;padding-left:0" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th ></th>
                    <th >NIP</th>
                    <th >Nama</th>
                    <th >Sejak Tanggal</th>
                    <!-- <th ></th> -->
                </tr>
            </thead>
		    <tbody data-link="row" class="rowlinks"></tbody>
        </table>
    </div>
        
	<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/tables/datatables/datatables.min.js') }}"></script>
	<script src="{{ asset('global_assets/js/plugins/extensions/rowlink.js') }}"></script>	 
    <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 src="{{ asset('global_assets/js/plugins/forms/styling/switchery.min.js') }}"></script>
	<script type="text/javascript">
	    $(document).ready(function(){ 
            $('.x_D8JwHb').addClass('D8JwHb');
	    	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'
			});
            
            var elems = Array.prototype.slice.call(document.querySelectorAll('.form-control-switchery'));
                elems.forEach(function(html) {
                    var switchery = new Switchery(html);
                })
            ;

            $('body').on('change', '#is_minat', function(e){
	        	e.preventDefault();
                if( $(this).is(':checked') ){
				    $('[data-action="whatapps"]').removeClass('d-none');
				    $('[data-action="auditor"]').removeClass('d-none');
			    }
                else{
				    $('[data-action="whatapps"]').addClass('d-none');
				    $('[data-action="auditor"]').removeClass('d-none');
                }
                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();
            });
            
	        $('#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.kontribusi.auditor.store') }}",
                    type: 'POST',
                    data: data,
                    contentType: false,
                    cache: false,
                    processData:false,
                })
                .done(function(response) {
                	console.log(response);
                	$.alert(response.content);
                	unblockui(block); 
                    if(response.status==true){
                        setTimeout(function(){  
                            window.location.reload(true);
                        }, 1000 );
                    }
                    //location.reload();
                })
                .fail(function(response) {
                    console.log(response);
					$.alert(response.content);
                	// $.alert('data gagal disimpan');
                });
                e.stopPropagation();
                return false;
            });
            	
            var table = 
            $('#table-cont')    
            .on( 'processing.dt', function ( e, settings, processing ) {
                var $target = $(this),
                    block = $target.closest('.card');	
                if(processing){ blockui(block); } 
                else { unblockui(block); }
            })
            .DataTable({       
                autoWidth 	: false,
                "pageLength": 10,
                dom 		: 	'<"datatable-scroll"tr>'+
                                '<"justify-content-between align-items-center datatable-footer length-right"ip>',
                processing  : true,
                serverSide  : true,
                ajax 		: {
                    "url" 	: "{{ $route_dtTable }}",
                    "type" 	: "POST"
                },
                "ordering"	: false,
                "columnDefs": [
                    { "visible": true, "targets": 0 },
                ],
                columns 	: [	
                    // { 	data: 'id', className:'w-100px text-left', name: 'id'},                    
                    { 	data: null, className:'text-left', orderable:false, "searchable": false,
                        render: function(data, type, row, meta) {
                            var label = "";
                            // if( data.api.hris.personal ){
                            //     label = data.api.hris.personal.nama;
                            // }
                            return label;
                        } 
                    },			
                    { 	data: 'userid', className:'text-left', name: 'userid' }, 
                    { 	data: null, className:'text-left', orderable:false, "searchable": false,
                        render: function(data, type, row, meta) {
                            var label = "";
                            if( data.api.hris !== null ){
                                label = data.api.hris.personal.nama;
                            }
                            return label;
                        } 
                    },	
                    { 	data: null, className:'text-left', orderable:false, "searchable": false,
                        render: function(data, type, row, meta) {
                            var label 	= "" ;
                                label 	+= moment(data.created_at).format('DD MMM YYYY');
                            return label;
                        } 
                    },			
                    // { 	data: 'action', className:'text-center w-125px rowlink-skip'},
                ],	
                "drawCallback": function( settings ) {             
                    var api = this.api();	            
                    api.$('td').not( ".NoClick" ).css('cursor','pointer');
                    api.$('td a').ripple();
                    $('.dataTables_length select').select2({
                        minimumResultsForSearch: Infinity,
                        dropdownAutoWidth: true,
                        width: 'auto',
                        dropdownParent: $('#table_inbox')
                    });
                },
                initComplete: function () {}
            });
	    });
	</script>
@endpush