@section('filter_script')
<script>
	rules={
		all_data:{
			display:'All Data',
			operator:[],
			opsi:[]
		},
	};
	database={
		operator: 'or',
		value: {!!json_encode(array_values($rule??[]))!!}
	};
	var updatedatetime=false;
	function optionWriter(value,show,option=''){
		return '<option value="'+value+'" '+option+'>'+show+'</option>'
	}
	function selectSubjectBuilder(rules,selected='',id='::n::'){
		var html='<select name="rule['+id+'][subject]" class="form-control input-sm select2a inputSubject" placeholder="Search Subject" style="width:100%" required>';
		ruless=Object.entries(rules);
		ruless.forEach(function(x){
			if(selected==x[0]){
				html+=optionWriter(x[0],x[1].display,'selected');
			}else{
				html+=optionWriter(x[0],x[1].display);
			}
		});
		html+='</select>';
		return html;
	}
	function selectOperatorBuilder(rules,selected='',id='::n::', rule={}){
		var html=`<select name="rule[${id}][operator]" class="form-control input-sm select2a inputOperator" placeholder="Select Operator" style="width:100%" required>`;
		if (typeof(rules) == 'object' && rules.length === undefined) {
			for (i in rules) {
				html += `<optgroup label="${i}">`;
				rules[i].forEach(x => {
					if(selected==x[0]){
						html+=optionWriter(x[0],x[1],'selected');
					}else{
						html+=optionWriter(x[0],x[1]);
					}
				});
				html = '</optgroup>';
			}
		} else {
			rules.forEach(function(x){
				if(selected==x[0]){
					html+=optionWriter(x[0],x[1],'selected');
				}else{
					html+=optionWriter(x[0],x[1]);
				}
			});
		}
		html+='</select>';
		return html;
	}
	function selectOpsiBuilder(rules,selected='',id='::n::', rule={}){
		var html=`<select name="rule[${id}][parameter]${rule.type == 'multiple_select'?'[]':''}" class="form-control input-sm select2a inputOpsi" data-placeholder="${rule.placeholder ? rule.placeholder : 'Select value'}" style="width:100%" required ${rule.type == 'multiple_select' ? 'multiple' : ''}>`;
		if (typeof(rules) == 'object' && rules.length === undefined) {
			for (i in rules) {
				html += `<optgroup label="${i}">`;
				rules[i].forEach(x => {
					if (rule.type == 'multiple_select') {
						if(selected.includes(x[0])){
							html += optionWriter(x[0],x[1],'selected');
						}else{
							html += optionWriter(x[0],x[1]);
						}
					} else {
						if(selected==x[0]){
							html += optionWriter(x[0],x[1],'selected');
						}else{
							html += optionWriter(x[0],x[1]);
						}
					}
				});
				html += '</optgroup>';
			}
		} else {
			rules.forEach(function(x){
				if(selected==x[0]){
					html+=optionWriter(x[0],x[1],'selected');
				}else{
					html+=optionWriter(x[0],x[1]);
				}
			});
		}
		html+='</select>';
		return html;
	}
	function inputBuilder(type,value='',id='::n::',rule){
		let input;
		if(type==undefined){
			type='text';
		}
		if(type=='datetime'){
			updatedatetime=true;
			input = `<input type="text" placeholder="${(rule?.placeholder) ? rule.placeholder : rule.display}" class="form-control datetime" name="rule['+id+'][parameter]" value="'+value+'"  required/>`;
		} else {
			input = `<input type="${type}" placeholder="${rule?.placeholder ? rule.placeholder : rule.display}" class="form-control" onchange="$(this).val($(this).val().trim())" name="rule[${id}][parameter]" value="${value}"  required/>`;			
		}
		if (rule?.prepend_text) {
			input = `
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text" id="basic-addon1">${rule.prepend_text}</span>
				</div>
				${input}
			</div>`;
		}
		return input;
	}
	function rowBuilder(val){
		if (val[3]) {
			if (val[1] == '<=') {
				const regExp = /[a-zA-Z]/g;
				const testString = val[2];
				if(regExp.test(testString)){
					$(['#', val[0], '_', 'loe'].join('')).prop('type', 'text');
				}
				$(['#', val[0], '_', 'loe'].join('')).val(val[2]);
			} else if (val[1] == '>=') {
				const regExp = /[a-zA-Z]/g;
				const testString = val[2];
				if(regExp.test(testString)){
					$(['#', val[0], '_', 'boe'].join('')).prop('type', 'text');
				}
				$(['#', val[0], '_', 'boe'].join('')).val(val[2]);
			}
			return '';
		}
		var html=`
		<div class="mt-repeater-cell" style="padding-bottom:10px" data-id="::n::">
			<div class="row">
				<div class="col-md-1">
					<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete mt-repeater-del-right mt-repeater-btn-inline btnDelete">
						<i class="fa fa-times"></i>
					</a>
				</div>
				<div class="col-md-11">
					<div class="row">
						<div class="col-md-4">
							::subjectOption::
						</div>
						<div class="col-md-4 optionCol">
							::operatorOption::
						</div>
						<div class="col-md-4 valCol">
							::otherVal::
						</div>
					</div>
				</div>
			</div>
		</div>`;
		html=html.replace('::subjectOption::',selectSubjectBuilder(rules,val[0]));
		if(Object.keys(rules[val[0]].operator).length>0){//is operator exist
			html=html.replace('::operatorOption::',selectOperatorBuilder(rules[val[0]].operator,val[1],'::n::',rules[val[0]]));
			if(rules[val[0]].opsi.length>0){
				html=html.replace('::otherVal::',selectOpsiBuilder(
					rules[val[0]].opsi,
					val[2]),
					'::n::',
					rules[val[0]]
				);
			}else{
				html=html.replace('::otherVal::',inputBuilder(rules[val[0]].type,val[2],'::n::',rules[val[0]]));
			}
		}else if(Object.keys(rules[val[0]].opsi).length>0){
			html=html.replace(
				'::operatorOption::',
				selectOpsiBuilder(
					rules[val[0]].opsi,
					val[1],
					'::n::',
					rules[val[0]]
				)
			);
			html=html.replace('::otherVal::','');
		}else{
			html=html.replace('::operatorOption::','');
			html=html.replace('::otherVal::','');
		}
		var lastId=$('#repeaterContainer .mt-repeater-cell').last().data('id');
		if(lastId==undefined){lastId=-1};
		html=html.replace(/::n::/g,lastId+1);
		return html;
	}
	function updateColumn(data){
		if(data.length<1){
			return add();
		}
		data.forEach(function(i){
			add(i);
		});
		@if($filter_date ?? false)
		if(data.length<3){
			return add();
		}
		@endif
	}
	function add(newValue){
		if(newValue==undefined){
			var defaultCol=Object.keys(rules)[0];
			var defaultOperator='';
			if(rules[defaultCol].operator[0]){
				defaultOperator=rules[defaultCol].operator[0][0];
			}
			var newValue=[defaultCol,defaultOperator,''];
		}
		$('#repeaterContainer').append(rowBuilder(newValue));
		$('.select2a').select2();
		if(updatedatetime){
			$('.datetime').datetimepicker({
		        format: "dd M yyyy hh:ii",
		        autoclose: true,
		        todayBtn: true,
		        minuteStep:5
		    });
			updatedatetime=false;
		}
	}
	function changeFilterType(value){
        if(value == 'range_date'){
            $("#div_range_date").show();
            $("#date_start").prop('required', true);
            $('#date_end').prop('required',true);
        }else{
            $("#div_range_date").hide();
            $("#date_start").prop('required', false);
            $('#date_end').prop('required',false);
        }
    }

	$(document).ready(function(){
		updateColumn(database.value);
		$('#addNewBtn').on('click',function(){add()});
		$('.form-body').on('click','.btnDelete',function(x){
			$(this).parents('.mt-repeater-cell').first().fadeOut(500,function(){$(this).remove()});
		});
		$('.form-body').on('change','.inputSubject',function(){
			var value=$(this).val();
			var parId=$(this).parents('.mt-repeater-cell').first().data('id');
			if(Object.keys(rules[value].operator).length>0){
				var oprview=selectOperatorBuilder(rules[value].operator,'',parId,rules[value]);
				$(this).parents('.mt-repeater-cell').first().find('.optionCol').show();
				$(this).parents('.mt-repeater-cell').first().find('.optionCol').html(oprview);
				if(rules[value].opsi.length>0){
					var opsiview=selectOpsiBuilder(rules[value].opsi,'',parId,rules[value]);
					$(this).parents('.mt-repeater-cell').first().find('.valCol').html(opsiview);
				}else{
					$(this).parents('.mt-repeater-cell').first().find('.valCol').html(inputBuilder(rules[value].type,'',parId,rules[value]));
				}
				$(this).parents('.mt-repeater-cell').first().find('.valCol').show();
				$('.select2a').select2();
			}else if(Object.keys(rules[value].opsi).length>0){
				var oprview=selectOpsiBuilder(
					rules[value].opsi,
					'',
					parId,
					rules[value]
				);
				$(this).parents('.mt-repeater-cell').first().find('.optionCol').show();
				$(this).parents('.mt-repeater-cell').first().find('.optionCol').html(oprview);
				$(this).parents('.mt-repeater-cell').first().find('.valCol').hide();
				$(this).parents('.mt-repeater-cell').first().find('.valCol').html('');
				$('.select2a').select2();
			}else{
				$(this).parents('.mt-repeater-cell').first().find('.optionCol').hide();
				$(this).parents('.mt-repeater-cell').first().find('.optionCol').html('');
				$(this).parents('.mt-repeater-cell').first().find('.valCol').hide();
				$(this).parents('.mt-repeater-cell').first().find('.valCol').html('');
			}
			if(updatedatetime){
				$('.datetime').datetimepicker({
			        format: "dd M yyyy hh:ii",
			        autoclose: true,
			        todayBtn: true,
			        minuteStep:5
			    });
				updatedatetime=false;
			}
		});
		$('input[name="operator"]').val(database.operator);

		// This card is lazy initialized using data-card="true" attribute. You can access to the card object as shown below and override its behavior
		var card = new KTCard('card-filter');

		// Reload event handlers
		card.on('reload', function (card) {
			location.reload();
		});

		@if($filter_date_today ?? false)
		$('input[name=filter_type]').on('change', function() {
			if ($(this).prop('checked')) {
				if ($(this).val() == 'today') {
					$('#filter-date-range').addClass('d-none');
				} else {
					$('#filter-date-range').removeClass('d-none');
				}
			}
		}).change();
		@endif

		@if ($filter_date_v2 ?? false)
			$('#filter-form').on('submit', function(e) {
				$("form#filter-form input[name=date_start]").val($('form#filter-form input[name=date_start_display]').val().replaceAll('/', '-'));
				$("form#filter-form input[name=date_end]").val($('form#filter-form input[name=date_end_display]').val().replaceAll('/', '-'));
			});
		@endif
	})
</script>
@endsection
@section('filter_view')

<form action="{{$filter_action ?? '#'}}" method="post" id="filter-form">
	<div class="card card-custom mb-4" id="card-filter">
		<div class="card-header">
			<div class="card-title">
				<h3 class="card-label">{{$filter_title}}</h3>
			</div>
			@if(!($hide_filter_button??false))
			<div class="card-toolbar">
				<a href="#" class="btn btn-icon btn-sm btn-hover-light-primary mr-1" data-card-tool="toggle" data-toggle="tooltip" data-placement="top" title="Sembunyikan">
					<i class="ki ki-arrow-down icon-nm"></i>
				</a>
				<a href="#" class="btn btn-icon btn-sm btn-hover-light-primary mr-1" data-card-tool="reload" data-toggle="tooltip" data-placement="top" title="Perbarui Laman">
					<i class="ki ki-reload icon-nm"></i>
				</a>
			</div>
			@endif
		</div>
		<div class="card-body">
			<div class="form-body collapse show">
				@if($filter_date ?? false)
					@if($filter_date_today ?? false)
					<div class="form-group row">
	                    <label class="col-1 col-form-label"></label>
	                    <div class="col-9 col-form-label">
	                        <div class="radio-inline">
	                            <label class="radio radio-primary">
	                                <input type="radio" name="filter_type" @if($is_today ?? false) checked @endif id="filter-date-type" value="today">
	                                <span></span> Hari Ini
	                            </label>
	                            <label class="radio radio-primary">
	                                <input type="radio" name="filter_type" @if(!($is_today ?? false)) checked @endif id="filter-date-type" value="range_date">
	                                <span></span> Rentang Tanggal
	                            </label>
	                        </div>
	                    </div>
	                </div>
	                @endif
					<div class="row" id="filter-date-range">
						<div class="col-2 text-right pt-3">Dari Tanggal:</div>
						<div class="col-3">
							<div class="input-group">
								<input type="hidden" name="rule[9998][subject]" value="transaction_date">
								<input type="hidden" name="rule[9998][operator]" value=">=">
								<input type="date" name="rule[9998][parameter]" class="form-control" id="transaction_date_boe" @if(!$is_today ?? false) required @endif>
								<input type="hidden" name="rule[9998][hide]" value="1">
								<div class="input-group-append">
									<span class="input-group-text"><i class="fa fa-calendar"></i></span>
								</div>
							</div>
						</div>
						<div class="col-2 text-right pt-3">Sampai Tanggal:</div>
						<div class="col-3">
							<div class="input-group">
								<input type="hidden" name="rule[9999][subject]" value="transaction_date">
								<input type="hidden" name="rule[9999][operator]" value="<=">
								<input type="date" name="rule[9999][parameter]" class="form-control" id="transaction_date_loe" @if(!$is_today ?? false) required @endif>
								<input type="hidden" name="rule[9999][hide]" value="1">
								<div class="input-group-append">
									<span class="input-group-text"><i class="fa fa-calendar"></i></span>
								</div>
							</div>
						</div>
					</div>
					<hr>
				@endif

				@if ($filter_date_v2 ?? false)
					<div class="form-group row">
                        <label class="col-2 col-form-label">Tipe Filter</label>
                        <div class="col-9 col-form-label" style="margin-left: -4%">
                            <div class="radio-inline">
                            	@if (!($hide_filter_all_day ?? false))
	                                <label class="radio radio-primary">
	                                    <input type="radio" name="filter_type" @if( ($filter_type ?? false) == 'all_day') checked @endif value="all_day" onclick="changeFilterType(this.value)"/>
	                                    <span></span>All Day</label>
                            	@endif
                                <label class="radio radio-primary">
                                    <input type="radio" name="filter_type" @if( ($filter_type ?? false) == 'today') checked @endif value="today" onclick="changeFilterType(this.value)"/>
                                    <span></span>Hari Ini</label>
                                <label class="radio radio-primary">
                                    <input type="radio" name="filter_type" @if( ($filter_type ?? false) == 'range_date') checked @endif value="range_date" onclick="changeFilterType(this.value)"/>
                                    <span></span>Rentang Tanggal</label>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="div_range_date" @if( ($filter_type ?? true) != 'range_date') style="display: none" @endif>
                    	@php
                    		$date_start = !empty($date_start) ? date('d/F/Y', strtotime($date_start)) : date('d/F/Y');
                    		$date_end 	= !empty($date_end) ? date('d/F/Y', strtotime($date_end)) : date('d/F/Y');
                    	@endphp
                        <div class="col-2"></div>
                        <div class="col-3" style="margin-left: -4%">
                            Dari Tanggal:
                            <div class="input-group">
                                <input type="text" name="date_start_display" class="form-control" id="date_start" value="{{ $date_start }}" autocomplete="off">
                                <input type="hidden" name="date_start" value="">
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            Sampai Tanggal:
                            <div class="input-group">
                                <input type="text" name="date_end_display" class="form-control" id="date_end" value="{{ $date_end }}" autocomplete="off">
                                <input type="hidden" name="date_end" value="">
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
				@endif

				@if (!($hide_filter_condition??false))
				<div class="form-group mt-repeater">
					<div data-repeater-list="conditions">
						<div data-repeater-item class="mt-repeater-item" id="repeaterContainer">
						</div>
					</div>
					<div class="form-action row">
						<div class="col-md-12">
							<button class="btn btn-success mt-repeater-add" type="button" id="addNewBtn">
								<i class="fa fa-plus"></i> Tambah Filter
							</button>
						</div>
					</div>
					<hr>
					<div class="form-action row" style="margin-top:15px">
						<div class="col-md-5">
							<select name="operator" class="form-control input-sm " placeholder="Search Rule" required>
								<option value="and" @if (isset($operator) && $operator == 'and') selected @endif>Semua filter harus terpenuhi</option>
								<option value="or" @if (isset($operator) && $operator == 'or') selected @endif>Salah satu filter harus terpenuhi</option>
							</select>
						</div>
						<div class="col-md-4">
							{{ csrf_field() }}
							<button type="submit" class="btn btn-warning">{!!$filter_button ?? '<i class="fa fa-search"></i> Cari'!!}</button>
						</div>
					</div>
				</div>
				@else
				<div class="form-action row" style="margin-top:15px">
					<div class="col-md-4">
						{{ csrf_field() }}
						<button type="submit" class="btn btn-warning">{!!$filter_button ?? '<i class="fa fa-search"></i> Cari'!!}</button>
					</div>
				</div>
				@endif
			</div>

		</div>
	</div>
</form>
@if(isset($rule) && !($hide_record_total??false))
<div class="alert alert-block alert-info fade show">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
	<h4 class="alert-heading">Data ditemukan : <strong id="list-filter-result-counter">{{$total??'counting...'}}</strong></h4>
	<form action="{{ url('#') }}" method="post" class="form-inline">
		{{csrf_field()}}
		<button class="btn btn-sm btn-warning" name="clear" value="session">Reset</button>
	</form>
</div>
@endif
@endsection