@extends('kpi._layout')

@push('stylesheet')
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
	<style>
		.daterangepicker .ranges ul {
			width:100%;
		}
		.daterangepicker .ranges ul li {
			/* width:100%; */
			text-align: center;
			border: 1px solid #ccc!important;
			/* padding: 0.01em 16px; */
			border-radius: 8px;
			margin: 0.5em 1em;
		}
	</style>
@endpush

@section('header')  
@if(!empty($permit))
		
	<div class="pt-2 _bg-transparent page-header page-header-light">
		<div class="pt-1 pb-2 page-header-content header-elements-md-inline">
			<div class="pt-1 x_page-title d-flex align-items-center">
				<span class="_btn btn-icon btn-sm bg-transparent">
					<img src="{{ asset('global_assets/images/icon/slack_96.png') }}" width="42" height="42" class="mr-2" alt="">
				</span>
				<h4 class="_mb-0 font-weight-semibold text-dark">
					<span >{{ $Title }}</span>
					<span class="d-block text-muted font-size-sm align-middle">{{ $subTitle }}</span>
				</h4>
			</div>
		</div>
	</div>
@endif
@endsection

@section('content') 
@if(empty($permit))
	<div class="flex-fill">
		<div class="text-center mb-3">
			<h1 class="error-title offline-title">Error Page</h1>
			<h5>Maaf, Halaman yang anda cari tidak ditemukan.. </h5>
		</div>
	</div>
@else	
	
	
	<div class="card card-gtheme p-0 mb-1 card-collapsed">
		<div class="card-header bg-light header-elements-inline _px-4 pr-4 pb-2">		
			<h6 class="card-title media-body data-collapse">Pencarian </h6>
			<span class="filter_gantt data-collapse"><div class="mx-2 text-muted">{{ date('01/m/Y') }} - {{ date('d/m/Y') }}</div></span>
            <div class="header-elements">
                <div class="list-icons">
                   <a class="list-icons-item action-collapse" data-action="collapse"></a>
                </div>
            </div>
		</div>
		<div class="card-body p-4">			
		<form id="search_gantt" method="post" action="{{ route('kpi.perform.gantt.data') }}">
			<div class="form-group row pt-0 pb-1 mb-0">
				<label class="col-md-2 col-form-label">Supervisor</label>
				<div class="col-md-6">					
					<select name="spv" class="form-control-select2-gantt" data-placeholder="Pilih Supervisor  ...">
						<option value="">&nbsp;</option>
						@foreach($spv as $key => $value)
							<option value="{{ $value->roleuser->nip }}" 
								data-id="{{ $value->roleuser->spv_id }}"
								data-nama="{{ $value->roleuser->jabatan->namajabatan }}">
								{{-- $value->roleuser->nama --}}{{ $value->roleuser->jabatan->namajabatan }}
							</option>
						@endforeach
					</select>
				</div>
			</div>	
			<div class="form-group row pt-0 pb-1 mb-0">
				<label class="col-md-2 col-form-label">Tanggal Input</label>
				<div class="col-md-6">
					<input type="text" name="daterange" value="{{ date('01/m/Y') }} - {{ date('d/m/Y') }}"  
					class="daterange-basic form-control" placeholder="Tanggal Disposisi SPV">
				</div>
				<div class="col-md-4">
					<label for="DateCheck" class="d-flex col-form-label">
						<span class="mr-1 btn py-0 btn-white rounded-round text-info" style="cursor:pointer;">
							Include Date
						</span>
						<input type="checkbox" id="DateCheck" name="DateCheck" class="form-control-switchery" />
                    </label> 
				</div>
			</div>
			<div class="form-group row pt-2 pb-1 mb-0">
				<div class="col-md-6">
					<button type="submit" class="btn btn-sm btn-primary">submit</button>
				</div>
			</div>	
		</form>
		</div>
	</div>
	
	<div class="_card">
		<div id="gantt_itsupport" style='width:100%; height:calc(100vh - 240px);'></div>
	</div>
@endif
@endsection

@push('scripts')
	<!-- Theme JS files -->
    	<script src="{{ asset('global_assets/js/plugins/forms/styling/switchery.min.js') }}"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
		{{--<script src="{{ asset('global_assets/js/plugins/pickers/daterangepicker.js') }}"></script>
		 
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/extensions/fixed_header.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/extensions/col_reorder.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/tables/datatables/extensions/responsive.min.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/extensions/rowlink.js') }}"></script>
		<script src="{{ asset('global_assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
		--}}
	<!-- /theme JS files -->

	<script src="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=20180322"></script>
	<link rel="stylesheet" href=" https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css?v=20180322">
	{{-- 
    <link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">
    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
	--}}
	<script type="text/javascript">
	$(document).ready(function() {
        gantt.config.date_format    = "%Y-%m-%d %H:%i:%s";
        gantt.config.readonly       = true;
        gantt.config.open_tree_initially = false;
        gantt.config.columns=[
            {name:"text",       label:"Permohonan",  tree:true, width:'*' , align: "left" , min_width: 200, resize:true },
            // {name:"start_date", label:"Mulai", align: "center" },
            {name:"duration",   label:"Durasi",   align: "center" },
            // {name:"add",        label:"" }
        ];
		gantt.config.scale_height = 60;
		gantt.config.scales = [
			{unit: "month", step: 1, format: "%F, %Y"},
			{unit: "week", step: 1, format: function (date) {
				return "Week #" + gantt.date.getWeek(date);
			}},
			// {unit: "day", step: 1, format: "%d (%D)", css: function(date) {
			// if(!gantt.isWorkTime({ date: date, unit: "day"})){
			// 		return "weekend"
			// 	}
			// }}
		];
        gantt.init("gantt_itsupport");
        // gantt.load("{{ route('kpi.perform.gantt.data') }}");
        // gantt.eachTask(function(task){
        //     task.$open = true;
        // });
		// gantt.load("{{ route('kpi.perform.gantt.data') }}", function(){
		// });
        // gantt.render();	
		            
		$.ajax({
            type    : "POST",
            url     : "{{ route('kpi.perform.gantt.data') }}",
            data    : {'params':null},
            success: function (result)
            {      
				var daterange = $('[name=daterange]').val();    
				if( result.data==false){
					swal.fire({
					title	: "Peringatan",
					text	: "Data Layanan "+daterange+" tidak ditemukan",
					// type	: "warning",
					icon	: "warning"
				}).then(function() {
					// location.reload();
				});
				}
				else {
					gantt.clearAll(); 
					gantt.parse(result); 
					// gantt.render();
					block.find('.action-collapse').click();	
					gantt.refreshData();
					var spvname = $('[name=spv]').find(":selected").data("nama");
					if( spvname==null){
						spvname = '';
					}
					$(".filter_gantt").empty().append('<div class="">'+
						'<span class="_d-block font-weight-bold">'+spvname+'</span>'+
						'<span class="mx-2 text-muted">'+daterange+'</span>'+
					'</div>');
				}    	
            }
        });

		$('.data-collapse')
            .css('cursor', 'pointer')
            .click(function() {
				$(this).closest('.card').find('.action-collapse').click();
            })
        ;

		var elems = Array.prototype.slice.call(document.querySelectorAll('.form-control-switchery'));
            elems.forEach(function(html) {
                var switchery = new Switchery(html);
            })
        ;
		
		$('select[name=spv]')
        .select2({
            theme 				: "bootstrap",
			allowClear 			: true,
            dropdownAutoWidth	: true,
			dropdownPosition 	: 'below',
			minimumResultsForSearch: Infinity,
            dropdownParent 		: $('#search_gantt')
        })
		.on('change', function(){
			var val 	= $(this).val();
        	var id 	= $(this).find(":selected").data("id");
			return false;
		});	

		$('.daterange-basic').daterangepicker({
			opens 		: 'left',
            applyClass 	: 'bg-slate-600',
            cancelClass	: 'btn-light',
            locale		: {
                format: 'DD/MM/YYYY'
            },			
			ranges: {
				'Today': [moment(), moment()],
				'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				'Last 7 Days': [moment().subtract(6, 'days'), moment()],
				'Last 30 Days': [moment().subtract(29, 'days'), moment()],
				'This Month': [moment().startOf('month'), moment().endOf('month')],
				'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
			}
        },
        function(start, end) {
        	var callback = start.format('DD/MM/YYYY') + ' - ' + end.format('DD/MM/YYYY');
        	//console.log(callback);
            //$('.daterange-basic span').html(start.format('DD/MM/YYYY') + ' &nbsp; - &nbsp; ' + end.format('DD/MM/YYYY'));
            //$.jGrowl('Date range has been changed', { header: 'Update', theme: 'bg-primary', position: 'center', life: 1500 });
            $('.daterange-basic').val(callback);
            // table.draw();
        });
		
		$(document).on('submit','#search_gantt', function(e){
                e.preventDefault();
                var $form   = $(this),
                    block   = $form.closest('.card'),
                    clps   	= $form.closest('.action-collapse'),
                    url     = $form.attr( "action" ),
                    data    = $form.serializeArray(),
                    valid   = true; 
				blockui(block);
				/*
				var dp = new gantt.dataProcessor("{{ route('kpi.perform.gantt.data') }}");
				dp.init(gantt);				
				dp.attachEvent("onBeforeUpdate", function (id, status, data) {
					if (!data.text) {
						dhtmlx.message("The event's text can't be empty!");
						return false;
					}
					return true;
				});

				var dp = gantt.createDataProcessor({
					url 	: "{{ route('kpi.perform.gantt.data') }}",
					mode 	: "REST-JSON",
					payload : {
						data: data
					}
				});

				*/
				             
                $.ajax({
                    type    : "POST",
                    url     : url,
                    data    : data,
                    success: function (result)
                    {           
						// console.log(result);
						if( result.data==false){
							swal.fire({
							title	: "Peringatan",
							text	: "Data tidak ditemukan",
							// type	: "warning",
							icon	: "warning"
							}).then(function() {
								// location.reload();
							});
						}
						else {
							if( $('#DateCheck').is(':checked') ){
								gantt.config.scales = [
									{unit: "month", step: 1, format: "%F, %Y"},
									{unit: "week", step: 1, format: function (date) {
										return "Week #" + gantt.date.getWeek(date);
									}},
									{unit: "day", step: 1, format: "%d (%D)", css: function(date) {
									if(!gantt.isWorkTime({ date: date, unit: "day"})){
											return "weekend"
										}
									}}
								];
							}
							else{
								gantt.config.scales = [
									{unit: "month", step: 1, format: "%F, %Y"},
									{unit: "week", step: 1, format: function (date) {
										return "Week #" + gantt.date.getWeek(date);
									}},
									// {unit: "day", step: 1, format: "%d (%D)", css: function(date) {
									// if(!gantt.isWorkTime({ date: date, unit: "day"})){
									// 		return "weekend"
									// 	}
									// }}
								];

							}
							gantt.clearAll(); 
							gantt.parse(result); 
							// gantt.render();
							block.find('.action-collapse').click();	
							gantt.refreshData();
							var spvname = $('[name=spv]').find(":selected").data("nama");
							if( spvname==null){
								spvname = '';
							}
							var daterange = $('[name=daterange]').val();
							$(".filter_gantt").empty().append('<div class="">'+
									'<span class="_d-block font-weight-bold">'+spvname+'</span>'+
									'<span class="mx-2 text-muted">'+daterange+'</span>'+
								'</div>'
							);
						}          
                        // swal.fire({
						// title	: "Information",
						// text	: "Data berhasil Disimpan",
						// type	: "success"
                        // }).then(function() {
                        //     location.reload();
                        // });	
                    }
                });
				unblockui(block); 
				// setTimeout(function(){ 
				// 	block.find('.action-collapse').click();
				// 	// clps.click(); //trigger('click');
				// }, 3000);
				/* */                
                e.stopPropagation();
                return false;
        });

	});
	</script>
@endpush