@if($setting['form-method'] =='native')
<div class="card">
	<div class="card-body">
@endif
		<div class="form-ajax-box">
		{!! Form::open(array('url'=>'masterapisap?return='.$return, 'class'=>'form-horizontal  sximo-form validated','files' => true , 'parsley-validate'=>'','novalidate'=>' ','id'=> 'masterapisapFormAjax')) !!}

			<div class="toolbar-nav">	
				<div class="row">	
					
					<div class="col-md-6">
						<a href="javascript://ajax" onclick="ajaxViewClose('#{{ $pageModule }}')" class="tips btn btn-sm btn-danger  " title="{{ __('core.btn_back') }}" ><i class="fa  fa-times"></i></a>
					</div>
					<div class="col-sm-6 text-right">	
						<div class="btn-group">
							<button type="submit" class="btn btn-sm  btn-primary " name="apply"> {{ Lang::get('core.sb_apply') }} </button>
							<button type="submit" class="btn btn-sm btn-success" name="save">  {{ Lang::get('core.sb_save') }} </button>
						</div>	
					</div>	
							
				</div>
			</div>	
				<div class="row">

			
			<div class="col-md-12">
						<fieldset><legend> Master API SAP</legend>
				{!! Form::hidden('id', $row['id']) !!}					
							<div class="form-group row  " >
										<label for="title" class=" control-label col-md-4 "> Title </label>
										<div class="col-md-8">
											<input  type='text' name='title' id='title' value='{{ $row['title'] }}' 
								class='form-control form-control-sm ' /> 
											</div> 
											
										</div>
										<div class="form-group row  " >
										<label for="description" class=" control-label col-md-4 "> Description </label>
										<div class="col-md-8">
											<input  type='text' name='description' id='description' value='{{ $row['description'] }}' 
								class='form-control form-control-sm ' /> 
											</div> 
											
										</div>
									  <div class="form-group row  " >
										<label for="Hostname" class=" control-label col-md-4 "> Hostname </label>
										<div class="col-md-8">
										  <input  type='text' name='hostname' id='hostname' value='{{ $row['hostname'] }}' 
						     class='form-control form-control-sm ' /> 
										 </div> 
										 
									  </div>
									  
									
									  <div class="form-group row  " >
										<label for="Endpoint" class=" control-label col-md-4 "> Endpoint </label>
										<div class="col-md-8">
										  <input  type='text' name='endpoint' id='endpoint' value='{{ $row['endpoint'] }}' 
						     class='form-control form-control-sm ' /> 
										 </div> 
										 
									  </div> 					
									  <div class="form-group row  " >
										<label for="Username" class=" control-label col-md-4 "> Username </label>
										<div class="col-md-8">
										  <input  type='text' name='username' id='username' value='{{ $row['username'] }}' 
						     class='form-control form-control-sm ' /> 
										 </div> 
										 
									  </div> 					
									  <div class="form-group row  " >
										<label for="Password" class=" control-label col-md-4 "> Password </label>
										<div class="col-md-8">
										  <input  type='text' name='password' id='password' value='{{ $row['password'] }}' 
						     class='form-control form-control-sm ' /> 
										 </div> 
										 
									  </div> 					
									  <div class="form-group row  " >
										<label for="Cds" class=" control-label col-md-4 "> Cds </label>
										<div class="col-md-8">
										  <input  type='text' name='cds' id='cds' value='{{ $row['cds'] }}' 
						     class='form-control form-control-sm ' /> 
										 </div> 
										 
									  </div> 					
									  <div class="form-group row  " >
										<label for="Filter" class=" control-label col-md-4 "> Filter </label>
										<div class="col-md-8">

										<!-- buat inputan bisa custom lebih dari 1 filter menggunakan javascript hasilnya bisa join seperti ini COMPANYCODE;eq;'SGN';and;FISCALYEAR;eq;'2026';and;PERIOD;ge;'1';and;PERIOD;le;'7' ada pilihan = atau != atau > atau < between atau lainnya-->
										<div class="input-group">
											<input type="text" name="filterInput" id="filterInput" class="form-control form-control-sm" placeholder="Enter filter">
											<select id="filterOperator" class="form-control form-control-sm">
												<option value="eq">=</option>
												<option value="ne">!=</option>
												<option value="gt">&gt;</option>
												<option value="lt">&lt;</option>
												<option value="ge">&gt;=</option>
												<option value="le">&lt;=</option>
												<option value="between">between</option>
												<option value="like">like</option>
											</select>
											<div class="input-group-append">
												<button type="button" class="btn btn-sm btn-primary" id="addFilterBtn">Add Filter</button>
											</div>
										</div>
										<br>
										<div id="filterList" class="mb-2">
											<!-- List of added filters will appear here -->
										</div>
										<script>
											document.getElementById('addFilterBtn').addEventListener('click', function() {
												var filterInput = document.getElementById('filterInput').value;
												var filterOperator = document.getElementById('filterOperator').value;
												if (filterInput) {
													var filterList = document.getElementById('filterList');
													var filterItem = document.createElement('div');
													//khusus untuk filter operator between, kita akan menambahkan input tambahan untuk nilai kedua dengan tambahan ge dan le
													if (filterOperator === 'between') {
															filterItem.textContent = filterInput + ';ge;' + "'val_" + filterInput + "_1';and;" + filterInput + ';le;' + "'val_" + filterInput + "_2'";
													} else if(filterOperator === 'like') {
														filterItem.textContent = filterInput + ';' + filterOperator+ ';' + "'%val_" + filterInput + "%'";
													} else {
														filterItem.textContent = filterInput + ';' + filterOperator+ ';' + "'val_" + filterInput + "'";
													}
													//buat badge untuk item filter
													filterItem.className = 'badge badge-secondary mr-1 mb-1 filter-item';
													filterList.appendChild(filterItem);

													//clear the input field after adding the filter
													document.getElementById('filterInput').value = '';
													//focus back to the input field
													document.getElementById('filterInput').focus();

													// Update the hidden textarea with the combined filters
													updateFilterTextarea();
													
													// Add a remove button to each filter item
													var removeBtn = document.createElement('i');
													removeBtn.className = 'fa fa-times ml-2';
													removeBtn.style.cursor = 'pointer';
													removeBtn.style.color = 'red';
													removeBtn.addEventListener('click', function() {
														filterList.removeChild(filterItem);
														updateFilterTextarea();
													});
												    filterItem.appendChild(removeBtn);
												}
											});

											function updateFilterTextarea() {
												var filters = [];
												document.querySelectorAll('#filterList .filter-item').forEach(function(item) {
													filters.push(item.textContent);
												});
												document.getElementById('filter').value = filters.join(';and;');
											}

											//menambahkan item jika {{ $row['filter'] }} ada isinya
											var initialFilter = `{{ $row['filter'] }}`;
											if (initialFilter) {
												var filterList = document.getElementById('filterList');
												var filterItems = initialFilter.split(';and;');
												//ubah &#039; menjadi '
												filterItems = filterItems.map(function(item) {
													return item.replace(/&#039;/g, "'");
												});
												filterItems.forEach(function(filter) {
													var filterItem = document.createElement('div');
													filterItem.textContent = filter;
													filterItem.className = 'badge badge-secondary mr-1 mb-1 filter-item';
													filterList.appendChild(filterItem);

													// Add a remove button to each filter item
													var removeBtn = document.createElement('i');
													removeBtn.className = 'fa fa-times ml-2';
													removeBtn.style.cursor = 'pointer';
													removeBtn.style.color = 'red';
													removeBtn.addEventListener('click', function() {
														filterList.removeChild(filterItem);
														updateFilterTextarea();
													});
												    filterItem.appendChild(removeBtn);
												});
											}

										</script>


										<textarea name='filter' rows='5' id='filter' class='form-control form-control-sm '  style='background: #333;color: greenyellow;'
				           >{{ $row['filter'] }}</textarea> 
										 </div> 
										 
									  </div> {!! Form::hidden('createdOn', $row['createdOn']) !!}{!! Form::hidden('updatedOn', $row['updatedOn']) !!}</fieldset></div>									
				
			<input type="hidden" name="action_task" value="save" />				
						


			

			
		{!! Form::close() !!}
		</div>

@if($setting['form-method'] =='native')

	</div>
</div>
@endif

@include('sximo.module.template.ajax.formjavascript')

<script type="text/javascript">
$(document).ready(function() { 
	 
	
	 
				
	var form = $('#masterapisapFormAjax'); 
	form.parsley();
	form.submit(function(){
		
		if(form.parsley().isValid()){			
			var options = { 
				dataType:      'json', 
				beforeSubmit :  function(){
				},
				success: function(data) {
					if(data.status == 'success')
					{
						ajaxViewClose('#{{ $pageModule }}');
						var table = $('#masterapisapTable').DataTable();
						table.ajax.reload();
						notyMessage(data.message);	
						$('#sximo-modal').modal('hide');	
					} else {
						notyMessageError(data.message);	
						return false;
					}
				}  
			}  
			$(this).ajaxSubmit(options); 
			return false;
						
		} else {
			return false;
		}		
	
	});

});

</script>