@if($setting['form-method'] =='native')
<style>
:root{--id-bg:#f5f7fb;--id-card:#fff;--id-border:#e4e9f1;--id-text:#172033;--id-muted:#667085;--id-primary:#4f46e5;--id-green:#10b981;--id-dark:#111827;--id-shadow:0 8px 28px rgba(15,23,42,.06)}
.interface-builder{background:var(--id-bg);padding:18px;border-radius:18px;color:var(--id-text)}
.id-top{background:#fff;border:1px solid var(--id-border);border-radius:16px;padding:14px 16px;box-shadow:var(--id-shadow);position:sticky;top:8px;z-index:40}
.id-top-title{font-size:18px;font-weight:750}.id-top-sub{font-size:12px;color:var(--id-muted)}
.id-actions .btn{border:0;border-radius:10px;padding:9px 15px;font-weight:650}.id-actions .btn-light{border:1px solid var(--id-border)}
.id-steps{display:flex;gap:8px;margin:16px 0;overflow:auto}.id-step{flex:1;min-width:145px;border:1px solid var(--id-border);background:#fff;border-radius:13px;padding:12px 14px;cursor:pointer;transition:.2s}.id-step.active{border-color:#a5b4fc;background:#eef2ff}.id-step-num{width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;background:#f2f4f7;color:#667085;font-weight:700;margin-right:8px}.id-step.active .id-step-num{background:var(--id-primary);color:#fff}.id-step-title{font-size:13px;font-weight:700}.id-step-desc{font-size:11px;color:var(--id-muted);margin-left:38px}
.id-panel{display:none}.id-panel.active{display:block}.id-card{background:var(--id-card);border:1px solid var(--id-border);border-radius:16px;padding:20px;box-shadow:var(--id-shadow);margin-bottom:16px}.id-card-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:750;margin-bottom:4px}.id-card-desc{font-size:12px;color:var(--id-muted);margin-bottom:18px}.id-icon{width:34px;height:34px;border-radius:10px;background:#eef2ff;color:var(--id-primary);display:grid;place-items:center}
.interface-builder label{font-weight:650;color:#344054;font-size:13px;margin-bottom:7px}.interface-builder .form-control{border:1px solid #dce2eb;border-radius:10px;min-height:42px;box-shadow:none}.interface-builder .form-control:focus{border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.11)}
.id-code{background:var(--id-dark)!important;color:#d1fae5!important;border:0!important;border-radius:12px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;line-height:1.55}.id-proc-box{padding:16px;border:1px solid var(--id-border);border-radius:14px;background:#f8fafc}.id-proc-actions{display:flex;gap:8px;align-items:center;margin-top:12px}.id-btn{border:0!important;border-radius:10px!important;font-weight:650!important;padding:9px 15px!important}.id-primary{background:var(--id-primary)!important;color:#fff!important}.id-success{background:var(--id-green)!important;color:#fff!important}.id-muted{color:var(--id-muted);font-size:12px}.id-nav{display:flex;justify-content:space-between;gap:10px;margin-top:14px}.id-nav .btn{border-radius:10px;font-weight:650}.id-param-wrap{background:#f8fafc;border:1px solid var(--id-border);border-radius:14px;padding:14px;min-height:90px}.id-param-wrap .form-group{margin-bottom:12px}.id-param-wrap .form-group:last-child{margin-bottom:0}.id-result-tabs{display:flex;gap:6px;margin-bottom:12px}.id-result-tab{border:1px solid var(--id-border);background:#fff;border-radius:9px;padding:7px 11px;font-size:12px;font-weight:650;cursor:pointer}.id-result-tab.active{background:#eef2ff;color:var(--id-primary);border-color:#c7d2fe}.id-result-pane{display:none}.id-result-pane.active{display:block}
#response-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--id-border);border-radius:12px;overflow:hidden}#response-table th{background:#f8fafc;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#667085}#response-table td,#response-table th{padding:10px 12px;border-color:var(--id-border)}#response-table tbody tr:hover{background:#f8fafc}
.id-check{display:flex;align-items:center;gap:8px;background:#ecfdf3;color:#047857;border:1px solid #bbf7d0;border-radius:10px;padding:10px 12px;font-size:12px;margin-top:12px}
@media(max-width:767px){.interface-builder{padding:10px}.id-top{position:static}.id-actions{margin-top:10px}.id-card{padding:15px}.id-step{min-width:130px}.id-nav{flex-direction:column}.id-nav .btn{width:100%}}
</style>
<div class="card"><div class="card-body">
@endif
<div class="interface-builder">
{!! Form::open(array('url'=>'interfacedata?return='.$return, 'class'=>'form-horizontal sximo-form validated','files'=>true,'parsley-validate'=>'','novalidate'=>' ','id'=>'interfacedataFormAjax')) !!}
<input type="hidden" name="action_task" value="save" />
<div class="id-top"><div class="row align-items-center"><div class="col-md-7"><div class="id-top-title">Interface Builder</div><div class="id-top-sub">Konfigurasi endpoint, stored procedure, parameter, dan response dalam satu alur.</div></div><div class="col-md-5 text-right id-actions"><a href="javascript://ajax" onclick="ajaxViewClose('#{{ $pageModule }}')" class="btn btn-light">✕ Batal</a> <button type="submit" class="btn btn-primary" name="apply">{{ Lang::get('core.sb_apply') }}</button> <button type="submit" class="btn btn-success" name="save">{{ Lang::get('core.sb_save') }}</button></div></div></div>
<div class="id-steps">
<div class="id-step active" data-step="1"><span class="id-step-num">1</span><span class="id-step-title">Info</span><div class="id-step-desc">Identitas interface</div></div>
<div class="id-step" data-step="2"><span class="id-step-num">2</span><span class="id-step-title">Procedure</span><div class="id-step-desc">Pilih sumber data</div></div>
<div class="id-step" data-step="3"><span class="id-step-num">3</span><span class="id-step-title">Test</span><div class="id-step-desc">Isi parameter & jalankan</div></div>
<div class="id-step" data-step="4"><span class="id-step-num">4</span><span class="id-step-title">Response</span><div class="id-step-desc">Mapping & preview</div></div>
</div>
<div class="id-panel active" data-panel="1"><div class="id-card"><div class="id-card-title"><span class="id-icon">⚙</span>Informasi Interface</div><div class="id-card-desc">Berikan nama dan deskripsi agar interface mudah ditemukan dan dipahami.</div>
{!! Form::hidden('id', $row['id']) !!}<div class="row"><div class="col-md-6"><label for="title">Title</label><input type="text" name="title" id="title" value="{{ $row['title'] }}" class="form-control" placeholder="Contoh: Data Produksi Harian"></div><div class="col-md-6"><label for="description">Description</label><input type="text" name="description" id="description" value="{{ $row['description'] }}" class="form-control" placeholder="Deskripsi singkat interface"></div></div>{!! Form::hidden('createdOn',$row['createdOn']) !!}{!! Form::hidden('updatedOn',$row['updatedOn']) !!}<div class="id-nav"><span></span><button type="button" class="btn id-primary" data-next="2">Lanjut ke Procedure →</button></div></div></div>
<div class="id-panel" data-panel="2"><div class="id-card"><div class="id-card-title"><span class="id-icon">▣</span>Sumber Data</div><div class="id-card-desc">Tentukan endpoint dan stored procedure yang akan digunakan interface.</div><div class="row"><div class="col-md-5"><label for="endpoint">Endpoint</label><input type="text" name="endpoint" id="endpoint" value="{{ $row['endpoint'] }}" class="form-control" placeholder="/api/production"></div><div class="col-md-7"><label for="procedure">Stored Procedure</label><select name="procedure" id="procedure" class="select2"></select><div class="id-proc-actions"><button type="button" class="btn id-btn id-primary" id="load-procedure">↻ Muat Parameter</button><span class="id-muted">Pilih procedure lalu muat parameternya.</span></div></div></div><div class="id-nav"><button type="button" class="btn btn-light" data-prev="1">← Kembali</button><button type="button" class="btn id-primary" data-next="3">Lanjut ke Test →</button></div></div></div>
<div class="id-panel" data-panel="3"><div class="id-card"><div class="id-card-title"><span class="id-icon">⚡</span>Test Procedure</div><div class="id-card-desc">Parameter akan dibuat otomatis dari stored procedure. Isi nilainya lalu jalankan untuk melihat hasil nyata.</div><div class="id-param-wrap" id="form-container"></div><div class="id-proc-actions"><button type="button" class="btn id-btn id-success" id="run-procedure">▶ Run Procedure</button><span class="id-muted" id="run-status">Belum dijalankan</span></div></div><div class="id-card"><div class="id-card-title"><span class="id-icon">{ }</span>Request JSON</div><div class="id-card-desc">Parameter mentah yang digunakan sebagai referensi.</div><textarea name="request" rows="12" id="request" class="form-control id-code">{{ $row['request'] }}</textarea></div><div class="id-nav"><button type="button" class="btn btn-light" data-prev="2">← Procedure</button><button type="button" class="btn id-primary" data-next="4">Lihat Response →</button></div></div>
<div class="id-panel" data-panel="4"><div class="id-card"><div class="id-card-title"><span class="id-icon">↳</span>Response</div><div class="id-card-desc">Periksa struktur response dan gunakan hasilnya untuk konfigurasi interface.</div><div class="id-result-tabs"><button type="button" class="id-result-tab active" data-result="preview">Data Preview</button><button type="button" class="id-result-tab" data-result="mapping">Key Response</button><button type="button" class="id-result-tab" data-result="raw">Raw JSON</button></div><div class="id-result-pane active" data-result-pane="preview"><div class="table-responsive"><table id="response-table" class="table table-striped"></table></div></div><div class="id-result-pane" data-result-pane="mapping"><label>Key Response JSON</label><textarea name="keyresponse" rows="12" id="keyresponse" class="form-control id-code"></textarea></div><div class="id-result-pane" data-result-pane="raw"><label>Response JSON</label><textarea name="response" rows="12" id="response" class="form-control id-code">{{ $row['response'] }}</textarea></div><div class="id-check">✓ Setelah response sesuai, klik <strong>Save</strong> di kanan atas untuk menyimpan konfigurasi.</div><div class="id-nav"><button type="button" class="btn btn-light" data-prev="3">← Test Lagi</button><span></span></div></div></div>
{!! Form::close() !!}</div>
@if($setting['form-method'] =='native')</div></div>@endif
@include('sximo.module.template.ajax.formjavascript')

<script type="text/javascript">
$(document).ready(function() { 
	 
	
	 // Get Store Procedure List
	$('#procedure').select2({
		width: '100%',
		placeholder: 'Select a procedure',
		ajax: {
			url: '{{ url("interfacedata/getStoreProcedureList") }}',
			dataType: 'json',
			delay: 250,
			processResults: function (data) {
				return {
					results: data.data.map(function (procedure) {
						return { id: procedure, text: procedure };
					})
				};
			},
			cache: true
		}
	});
	

    // Set default if row['procedure'] exists
    @if(isset($row['procedure']) && $row['procedure'] != '')
        (function(){
            var proc = {!! json_encode($row['procedure']) !!};
            // Create a new option and select it for Select2
            var option = new Option(proc, proc, true, true);
            $('#procedure').append(option).trigger('change');
			loadprocedurepro(proc); // Load parameters for the default procedure
			loadprocedureparam(proc); // Load form for the default procedure
        })();
    @endif

	$('#load-procedure').on('click', function () {
		var procedureName = $('#procedure').val();
		if (procedureName) {
			loadprocedurepro(procedureName);
			loadprocedureparam(procedureName);
		} else {
			notyMessageError('Please select a procedure first.');
		}
	});

	// Get Stored Procedure Parameters when a procedure is selected
	$('#procedure').on('select2:select', function (e) {
		var procedureName = e.params.data.id;
		loadprocedurepro(procedureName);
	});

	function loadprocedurepro(procedureName){
		$.ajax({
			url: '{{ url("interfacedata/getStoredProcedureParameters") }}',
			data: { procedureName: procedureName },
			dataType: 'json',
			success: function (data) {
				if (data.status === 'success') {
					var parameters = data.data;
					var requestField = $('#request');
					requestField.val(JSON.stringify(parameters, null, 2));				
				} else {
					notyMessageError(data.message);
				}
			},
			error: function () {
				notyMessageError('Failed to fetch stored procedure parameters.');
			}
		});
	}

	// Create form from parameters when a procedure is selected
	$('#procedure').on('select2:select', function (e) {	
		var procedureName = e.params.data.id;	
		loadprocedureparam(procedureName);
		
	});

	function loadprocedureparam(procedureName){
		$.ajax({
			url: '{{ url("interfacedata/getStoredProcedureParameters") }}',
			data: { procedureName: procedureName },
			dataType: 'json',
			success: function (data) {
				if (data.status === 'success') {
					var parameters = data.data;
					var formContainer = $('#form-container');
					formContainer.empty(); // Clear previous form fields

					parameters.forEach(function (param) {
						var formGroup = $('<div class="ib-param form-group row"></div>');
						var inputType = 'text'; // Default input type
						if (param.DATA_TYPE) {
							var dataTypeInfo = $('<small class="text-muted"></small>').text(' (' + param.DATA_TYPE + ')');
							if (param.DATA_TYPE.toLowerCase() === 'int' || param.DATA_TYPE.toLowerCase() === 'bigint') {
								inputType = 'number';
							} else if (param.DATA_TYPE.toLowerCase() === 'date') {
								inputType = 'date';
							} else if (param.DATA_TYPE.toLowerCase() === 'datetime') {
								inputType = 'datetime-local';
							}
						}
						var label = $('<label class="control-label col-md-2"></label>').text(param.PARAMETER_NAME);
						var inputDiv = $('<div class="col-md-10"></div>');
						var input = $('<input type="' + inputType + '" class="form-control form-control-sm">').attr('name', param.PARAMETER_NAME);

						inputDiv.append(input);
						formGroup.append(label).append(inputDiv);
						formContainer.append(formGroup);
					});
				} else {
					notyMessageError(data.message);
				}
			},
			error: function () {
				notyMessageError('Failed to fetch stored procedure parameters.');
			}
		});
	}

	//run procedure
	$('#run-procedure').on('click', function () {
		//loading
		$(this).prop('disabled', true).addClass('is-running').html('<span class="run-icon">◌</span> Running...'); $('#run-status').show();

		var procedureName = $('#procedure').val();
		var formData = $('#form-container').find('input').serializeArray();
		var requestData = {};
		formData.forEach(function (item) {
			requestData[item.name] = item.value;
		});

		$.ajax({
			url: '{{ url("interfacedata?action_task=runStoredProcedure") }}',
			type: 'POST',
			data: {
				procedureName: procedureName,
				parameters: requestData,
				_token: '{{ csrf_token() }}'
			},
			dataType: 'json',
			success: function (data) {
				$('#run-procedure').prop('disabled', false).removeClass('is-running').html('<span class="run-icon">▶</span> Run Procedure'); $('#run-status').hide();
				if (data.status === 'success') {
					$('#keyresponse').val(JSON.stringify(data.data, null, 2));
					$('#response').val(JSON.stringify(Object.keys(data.data[0]), null, 2));

					// Populate the response table id response-table
					$('#response-table').empty(); // Clear previous table data
					if (data.data.length > 0) {
						var tableHeader = '<thead><tr>';
						Object.keys(data.data[0]).forEach(function (key) {
							tableHeader += '<th>' + key + '</th>';
						});
						tableHeader += '</tr></thead>';
						$('#response-table').append(tableHeader);

						var tableBody = '<tbody>';
						data.data.forEach(function (row) {
							tableBody += '<tr>';
							Object.values(row).forEach(function (value) {
								tableBody += '<td>' + value + '</td>';
							});
							tableBody += '</tr>';
						});
						tableBody += '</tbody>';
						$('#response-table').append(tableBody);
					} else {
						$('#response-table').html('<tr><td colspan="100%">No data returned.</td></tr>');
					}

					notyMessage(data.message);
				} else {
					notyMessageError(data.message);
				}
			},
			error: function () {
				$('#run-procedure').prop('disabled', false).removeClass('is-running').html('<span class="run-icon">▶</span> Run Procedure'); $('#run-status').hide();
				notyMessageError('Failed to run stored procedure.');
			}
		});
	});

				
	var form = $('#interfacedataFormAjax'); 
	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 = $('#interfacedataTable').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>		 
<script>
(function($){
  function goToStep(step){
    step = parseInt(step,10);
    $('.id-step').removeClass('active');
    $('.id-step[data-step="'+step+'"]').addClass('active');
    $('.id-panel').removeClass('active');
    $('.id-panel[data-panel="'+step+'"]').addClass('active');
    window.scrollTo({top:0,behavior:'smooth'});
  }
  $(document).on('click','.id-step',function(){ goToStep($(this).data('step')); });
  $(document).on('click','[data-next]',function(){ goToStep($(this).data('next')); });
  $(document).on('click','[data-prev]',function(){ goToStep($(this).data('prev')); });
  $(document).on('click','.id-result-tab',function(){
    var target=$(this).data('result');
    $('.id-result-tab').removeClass('active');
    $(this).addClass('active');
    $('.id-result-pane').removeClass('active');
    $('[data-result-pane="'+target+'"]').addClass('active');
  });
  $('#procedure').on('select2:select',function(){
    setTimeout(function(){ goToStep(3); },350);
  });
  $('#load-procedure').on('click',function(){
    setTimeout(function(){
      if($('#procedure').val()) goToStep(3);
    },500);
  });
  $('#run-procedure').on('click',function(){
    $('#run-status').text('Menjalankan procedure…').show();
    setTimeout(function(){ goToStep(4); },700);
  });
})(jQuery);
</script>