@extends('layouts.container')
@section('title', 'Laporan Penerbitan Sertifikat')
@section('title_description', '')
@section('css')
	<link href="{{asset('/engine/multiSelect/css/multi-select.css') }}" media="screen" rel="stylesheet" type="text/css">
	<link href="{{asset('/engine/adminLTE/dist/css/skins/skin-black.min.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{asset('/engine/iCheck/flat/flat.css') }}" rel="stylesheet" type="text/css" />
	<link href="{{asset('/engine/jquery/themes/admin-theme/jquery-ui.min.css') }}" rel="stylesheet" type="text/css" />

@endsection
@section('body-class', 'skin-black')
@section('content')
	<div class="box box-info">
		<div class="box-header with-border">
			<h3 class="box-title">Pilih Jenis Serkom dan Tanggal Untuk Menentukan Laporan</h3>
		</div>
		{{ Form::open(array('route' => 'kipd-laporanserkom-result', 'class' => 'filter-laporan form-horizontal', 'role' => 'form','method' => 'PUT')) }}
			<div class="box-body">
				<div class="form-group">
					<label for="type" class="col-sm-4 control-label">Jenis Serkom</label>
					<div class="col-sm-4">
						<select id="type" name="type" class="form-control">
							<option value="new">Spesialis</option>
							<option value="renew">Renewal Spesialis</option>
							<option value="newsub">Sub Spesialis</option>
							<option value="renewsub">Renewal Sub Spesialis</option>
							<option value="newfellowship">Fellowship</option>
							<option value="renewfellowship">Renewal Fellowship</option>
							<option value="newkompetensi">Kompetensi Tambahan Sub Spesialis</option>
							<option value="renewkompetensi">Renewal Kompetensi Tambahan Sub Spesialis</option>
						</select>
					</div>
				</div>
					<div class="col-md-6">
						<div class="form-group">
							{{ Form::label('from', 'Mulai Dari Tanggal') }}
							<span class="input-group">
								{{ Form::text('from', old('from'), array('class' => 'form-control datepicker')) }}
								<span class="input-group-addon">
									<i class="fa fa-calendar"></i>
								</span>
							</span>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							{{ Form::label('to', 'Sampai Tanggal') }}
							<span class="input-group">
								{{ Form::text('to', old('to'), array('class' => 'form-control datepicker')) }}
								<span class="input-group-addon">
									<i class="fa fa-calendar"></i>
								</span>
							</span>
						</div>
					</div>
				</div>
			<div class="box-footer">
				<div class="form-group">
					<div class=" col-sm-10">
						{{ Form::submit('Tampilkan Data Laporan', array('class' => 'btn btn-success')) }}
					</div>
				</div>
			</div>
		{{ Form::close() }}
	</div>
	<div id="laporan-modal-lg" class="modal fade laporan-modal-lg" tabindex="-1" role="dialog" aria-labelledby="laporanModal">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				Loading...
			</div>
		</div>
	</div>
	<div id="laporan-modal-detail-lg" class="modal fade laporan-modal-detail-lg" tabindex="-1" role="dialog" aria-labelledby="laporanDetailModal">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				Loading...
			</div>
		</div>
	</div>
@endsection
@section('js')
	<script src="{{asset('/engine/iCheck/icheck.min.js') }}" type="text/javascript"></script>
	<script src="{{asset('/engine/fastclick/fastclick.min.js') }}"></script>
		<script src="{{asset('/engine/jquery/js/jquery-ui.min.js') }}"></script>
	<script src="{{asset('/engine/slimScroll/jquery.slimscroll.min.js') }}" type="text/javascript"></script>
	<script>
		$(function() {
		    $( ".datepicker").datepicker({
				dateFormat: "yy-mm-dd",
				changeMonth: true,
				changeYear: true
			});
			
			$('.filter-laporan').submit(function(e) {
				e.preventDefault();
				$('.laporan-modal-lg').modal('show');
			});

			$('.modal').on('show.bs.modal', function (event) {
				var idx = $('.modal:visible').length;
				$(this).css('z-index', 1040 + (10 * idx));
			}).on('shown.bs.modal', function (event) {
				var idx = ($('.modal:visible').length) - 1;
				$('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx)).addClass('stacked');
			}).on('hidden.bs.modal', function () {
				$('.modal:visible').length && $(document.body).addClass('modal-open');
			});

			$('.laporan-modal-lg').on('show.bs.modal', function (event) {
				$form = $('.filter-laporan');
				var dataLaporan = {
					'type' : $('#type').val(),
					'from' : $('#from').val(),
					'to' : $('#to').val(),
					'_method' : $("input[name='_method']").val(),
					'_token' : $("input[name='_token']").val()
				};

				var modal = $(this);
				modal.find('.modal-content').html('Loading...');
				$.ajax({
					url : $form.attr('action'),
					data: dataLaporan,
					method: 'POST'
				}).done(function(e) {
					modal.find('.modal-content').html(e);

					$('#btnPrintLaporan').click(function(e) {
						e.preventDefault();
							
                        var url =
                            '{{ URL::route('kipd-laporanserkom-export-excel', ['type' => ':type', 'from' => ':from', 'to' => ':to']) }}/'
                        url = url.replace(":type", $('#type').val());
                        url = url.replace(':from', $('#from').val());
                        url = url.replace(':to', $('#to').val())


                        window.open(url)
					});
				});

			});

			$('.laporan-modal-detail-lg').on('show.bs.modal', function (event) {
				var button = $(event.relatedTarget);
				var f = button.data('detail');
				var detailLaporan = {
					'type' : $('#type').val(),
					'from' : $('#from').val(),
					'to' : $('#to').val(),
					'_method' : $("input[name='_method']").val(),
					'_token' : $("input[name='_token']").val()
				};

				var modal_detail = $(this);
				modal_detail.find('.modal-content').html('Loading...');
				$.ajax({
					url : '{{ URL::route('kipd-laporanserkom-result-detail') }}',
					data: detailLaporan,
					method: 'POST'
				}).done(function(e) {
					modal_detail.find('.modal-content').html(e);

					$('#btnPrintLaporanDetail').click(function(e) {
						e.preventDefault();
						var url =
                            '{{ URL::route('kipd-laporanserkom-export-excel-detail', ['type' => ':type', 'from' => ':from', 'to' => ':to']) }}/'
                        url = url.replace(":type", $('#type').val());
                        url = url.replace(':from', $('#from').val());
                        url = url.replace(':to', $('#to').val())


                        window.open(url)
					});
				});
			});
		});
	</script>
@endsection