@php
echo "<pre>";
	//print_r($fieldsList);
	//print_r($results);
	
	$results_obj = $results;
echo "</pre>";

use \Str as Str;

$RowId=(string)Str::uuid();
$UniqueReferenceId = '';

// Get UniqueReferenceId from existing document upload fields
foreach($fieldsList as $field) {
	if($field->DisplayType == 16) { // Document upload type
		$columnName = $field->ColumnName;
		try {
			$existingValue = $results_obj->$columnName ?? '';
			if(!empty($existingValue)) {
				// Get UniqueReferenceId from first file
				$fileIds = array_filter(array_map('trim', explode(',', $existingValue)));
				if(!empty($fileIds)) {
					$firstFile = DB::table('TemporaryFiles')
						->where('TemporaryFilesId', $fileIds[0])
						->where('DeletedStatus', 0)
						->first(['UniqueReferenceId']);
					if($firstFile) {
						$UniqueReferenceId = $firstFile->UniqueReferenceId;
						break;
					}
				}
			}
		} catch(\Exception $e) {}
	}
}

// If no existing UniqueReferenceId found, generate new one
if(empty($UniqueReferenceId)) {
	$UniqueReferenceId = (string)Str::uuid();
}

//$PanelType=0;



try
{
	$AllowedTypes=[];
	$AllowedResults=DB::table('AllowedFileTypes')->where('ActiveStatus',1)->where('FileType',1)->get(['FileExtention']);

	foreach($AllowedResults as $Ar)
	{
		$AllowedTypes[]=$Ar->FileExtention;
	}
}
catch(\Exception $e)
{
	$AllowedTypes=['text/html','text/plain'];
}

$acceptedFileTypes=json_encode($AllowedTypes);
$ValidateacceptedFileTypes=implode(",",$AllowedTypes);


try
{
	$AllowedImageTypes=[];
	$AllowedResults=DB::table('AllowedFileTypes')->where('ActiveStatus',1)->where('FileType',2)->get(['FileExtention']);


	foreach($AllowedResults as $Ar)
	{
		$AllowedImageTypes[]=$Ar->FileExtention;
	}
}
catch(\Exception $e)
{
	$AllowedImageTypes=['image/gif','image/jpeg','image/png','image/webp'];
}

$acceptedImageTypes=json_encode($AllowedImageTypes);


@endphp


<style>
	.form-group
	{
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.fieldset
	{
		border: 1px dotted;
		border-radius: 5px;
		margin:14px 0px;
		padding:0px; 
	}
	.legend
	{
		/*position: relative;
		top: -18px;
		background: #fff;
		width: inherit;*/
		font-size: 16px;
	}
</style>

<!-- <form name="ConfigCreate" class="simple-example statbox widget box box-shadow" id="ConfigCreate" action="javascript:void(0);"  method="post" enctype="multipart/form-data"  novalidate > -->
	<form name="ConfigEdit" class="simple-example" id="ConfigEdit" action="javascript:void(0);"  method="post" enctype="multipart/form-data"  novalidate >

		<input type="hidden" name="ModuleId" id="CreateViewModuleId" value="{{$ModuleId}}" >
		<input type="hidden" id="UniqueReferenceId" name="UniqueReferenceId" value='{{$UniqueReferenceId}}'>
		<input type="hidden" id="FormRowId" name="FormRowId" value="{{$RowId}}">

		@if($PanelType==1)
		<x-editviewlayouts.panelstab  :fieldslist="$fieldsList"/>
		<div class="tab-content" id="simpletabContent">
			<x-editviewlayouts.panelscontent  :fieldslist="$fieldsList" :moduleid="$ModuleId" :paneltype="$PanelType" :results="$results"/>
		</div>
		@else
		<div id="toggleAccordion" class="accordion">
			<x-editviewlayouts.panelscontent  :fieldslist="$fieldsList" :moduleid="$ModuleId" :paneltype="$PanelType" :results="$results"/>
		</div>
		@endif


		<div class="row">
			<div class="col-md-12 text-center">

				<div class="form-group">
					<button type="button" id="mySubBtn" class="btn btn-primary" >Submit</button>
					<button type="button" class="btn btn-primary" onclick="redirectToDetailView()" >Cancel</button>
				</div>

			</div>
		</div>

	</form>

	<form id="ConfigAudit" name="ConfigAudit">
		<input type="hidden" name="RowId" id="RowId" value="{{$RowId}}" >
		<input type="hidden" name="ModuleId" id="EditViewModuleId" value="{{$ModuleId}}" >
		@foreach($fieldsList as $fieldList)
		@php
		$field_name=$fieldList->ColumnName;
		try{
		$LabelValue = $results_obj->$field_name;
	}
	catch(\Exception $e){
	$LabelValue="";
	echo $e;
}
@endphp
<input type="hidden" name="{{$field_name}}" id="{{$field_name}}" class="form-control" value="{{$LabelValue}}" >
@endforeach
</form>

<x-editviewlayouts.searchmodal />

<script>
	$(document).ready(function()
	{	
		var forms = document.getElementsByClassName('simple-example');
		var invalid = $('.simple-example .invalid-feedback');
		var subbutton=document.getElementById("mySubBtn");

		var validation = Array.prototype.filter.call(forms, function(form) 
		{
			subbutton.addEventListener('click', function(event) 
			{
				if (form.checkValidity() === false) 
				{
					event.preventDefault();
					event.stopPropagation();
			// invalid.css('display', 'block');

			Snackbar.show({
				text: 'Please fill all the mandatory field!',
				pos: 'top-right',
				actionTextColor: '#fff',
				backgroundColor: '#e7515a'
			});
		} 
		else
		{
			// alert('form Valid');
			SubmitForm();
		}
		form.classList.add('was-validated');

	}, false);
		});



		addFilePondImage();
		addFilePondFile();

	});

	


	addFilePondImage=()=>
	{
		allFileInputs=$('input[filetype="image"]');
		ModuleId=$('#CreateViewModuleId').val();

		UniqueReferenceId=$('#UniqueReferenceId').val();
		FilePond.registerPlugin(
			FilePondPluginFileValidateType,
			FilePondPluginImageExifOrientation,
			FilePondPluginImagePreview,
			FilePondPluginImageCrop,
			FilePondPluginImageResize,
			FilePondPluginImageTransform,
			);


		allFileInputs.map(function(){
			const pond=FilePond.create(this,{imagePreviewHeight: 170,stylePanelLayout: 'compact circle',});


			acceptedImageTypes=JSON.parse('');

			pond.setOptions({
				acceptedFileTypes: acceptedImageTypes
			});
			try
			{
				FilePond.registerPlugin(
					FilePondPluginFileValidateType
					);
			}
			catch(e){}

			pond.setOptions({
				allowFileValidateType: true,
				fileValidateTypeLabelExpectedTypes: 'Invalid File type'
			});
		})


		var element = document.querySelector('meta[name="csrf-token"]');
		var csrf = element && element.getAttribute("content");
		FilePond.setOptions({
			server: {
				url: `{{ url('UploadFiles')}}?ModuleId=${ModuleId}&UniqueReferenceId=${UniqueReferenceId}`,
				process: {
					headers: {
						'X-CSRF-TOKEN': csrf 
					},
				},
			}
		});


		document.addEventListener('FilePond:addfilestart',()=>{
			console.log('file upload started');
			disableSubmitButton();
		})

		document.addEventListener('FilePond:processfile', (e) => {
			// console.log('FilePond ready for use', e.detail);
			console.log('file Uploaded');

			console.log(e);

			enableSubmitButton();
		});


		
	}


	addFilePondFile = () => {
    allFileInputs = $('input[filetype="fileInput"]');
    
    ModuleId = $('#CreateViewModuleId').val();
    
    FilePond.registerPlugin(
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize,
        FilePondPluginImageCrop,
        FilePondPluginImageResize,
        FilePondPluginImageTransform
    );

    acceptedFileTypes = JSON.parse('');
    acceptedImageTypes = JSON.parse('');
    allAcceptedTypes = [...acceptedFileTypes, ...acceptedImageTypes];

    allFileInputs.map(function () {
        const inputElement = this;
        const existingUniqueRefId = $(this).data('existing-unique-ref');
        
        // Use existing UniqueReferenceId if available, otherwise use the one from form
        const UniqueReferenceId = existingUniqueRefId || $('#UniqueReferenceId').val();
        
        const pond = FilePond.create(inputElement, {
            allowMultiple: true,
            allowReorder: true,
            allowImagePreview: false,
            maxFileSize: '10MB',
            maxFiles: 10,
            stylePanelLayout: 'compact',
            labelIdle: '<span class="filepond-btn">Choose files</span>'
        });

        pond.setOptions({
            acceptedFileTypes: allAcceptedTypes,
            allowFileValidateType: true,
            allowFileSizeValidation: true,
            fileValidateTypeLabelExpectedTypes: 'Invalid file type. Allowed types: documents and images',
            fileValidateTypeLabelExpectedTypesMap: {
                'image/jpeg': '.jpg',
                'image/png': '.png',
                'image/gif': '.gif',
                'image/webp': '.webp',
                'text/plain': '.txt',
                'text/html': '.html',
                'application/pdf': '.pdf',
                'application/msword': '.doc',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document': '.docx'
            }
        });

        var element = document.querySelector('meta[name="csrf-token"]');
        var csrf = element && element.getAttribute("content");
        
        // Store UniqueReferenceId for this specific pond instance
        pond.setOptions({
            server: {
                url: `{{ url('UploadFiles')}}?ModuleId=${ModuleId}&UniqueReferenceId=${UniqueReferenceId}`,
                process: {
                    headers: { 'X-CSRF-TOKEN': csrf },
                },
            }
        });

        const inputId = $(inputElement).attr('id');
        const debouncedRefresh = debounce(() => {
            loadExistingFilesEdit(ModuleId, UniqueReferenceId, inputId);
        }, 300);

        pond.on('processfile', (error, file) => {
            if (!error) {
                console.log('File uploaded successfully:', file);
                enableSubmitButton();
                debouncedRefresh();
            }
        });

        pond.on('processfiles', () => {
            console.log('All files processed');
            debouncedRefresh();
        });

        pond.on('addfilestart', () => {
            disableSubmitButton();
        });

        pond.on('processfileerror', (error, file) => {
            console.log('File upload error:', error);
            enableSubmitButton();
            Snackbar.show({
                text: 'File upload failed. Please try again.',
                pos: 'top-right',
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
            debouncedRefresh();
        });
    });
};

// Function to delete file in edit view
function deleteFileEdit(fileId, moduleId, uniqueReferenceId, inputId) {
    if (!confirm('Are you sure you want to delete this file?')) {
        return;
    }

    $.ajax({
        url: `{{ url('DeleteUploadedFile') }}`,
        type: 'POST',
        data: {
            TemporaryFilesId: fileId
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        dataType: 'json',
        beforeSend: function() {
            disableSubmitButton();
        },
        success: function(response) {
            if (response.Status === 'Success') {
                Snackbar.show({
                    text: 'File deleted successfully.',
                    pos: 'top-right'
                });
                // Refresh the file list
                loadExistingFilesEdit(moduleId, uniqueReferenceId, inputId);
            } else {
                Snackbar.show({
                    text: response.Message || 'Failed to delete file.',
                    pos: 'top-right',
                    actionTextColor: '#fff',
                    backgroundColor: '#e7515a'
                });
            }
        },
        error: function(xhr) {
            console.error('Error deleting file:', xhr);
            Snackbar.show({
                text: 'An error occurred while deleting the file.',
                pos: 'top-right',
                actionTextColor: '#fff',
                backgroundColor: '#e7515a'
            });
        },
        complete: function() {
            enableSubmitButton();
        }
    });
}

// Function to load existing files in edit view
function loadExistingFilesEdit(ModuleId, UniqueReferenceId, inputId) {
    $.ajax({
        url: `{{ url('GetUploadedFiles')}}?ModuleId=${encodeURIComponent(ModuleId)}&UniqueReferenceId=${encodeURIComponent(UniqueReferenceId)}`,
        type: 'GET',
        success: function(response) {
            console.log('Existing files:', response);
            const containerId = `${inputId}-names`;
            renderNameListEdit(response, containerId, ModuleId, UniqueReferenceId, inputId);
        },
        error: function(xhr) {
            console.log('Error loading existing files:', xhr);
        }
    });
}

// Function to render file list in edit view
function renderNameListEdit(list, containerId, moduleId, uniqueReferenceId, inputId) {
    const el = document.getElementById(containerId);
    if (!el) return;

    if (!list || !list.length) {
        el.innerHTML = '<span class="text-muted" style="font-size:12px;">No files uploaded yet</span>';
        return;
    }

    const itemsHtml = list.map(file => {
        const name = file.FileName || 'Unknown File';
        const fileId = file.TemporaryFilesId;

        if (!fileId) return '';

        return `
            <li title="${escapeHtml(name)}">
                <a href="{{ url('DownloadFiles') }}/${fileId}" target="_blank" rel="noopener">
                    ${escapeHtml(name)}
                </a>
                <span 
                    class="delete-file-btn" 
                    onclick="deleteFileEdit('${fileId}', '${moduleId}', '${uniqueReferenceId}', '${inputId}')"
                >
                    &times;
                </span>
            </li>
        `;
    }).join('');

    el.innerHTML = `<ul class="list-unstyled mb-0">${itemsHtml}</ul>`;
}

// Debounce function
function debounce(fn, wait) {
    let t;
    return (...args) => {
        clearTimeout(t);
        t = setTimeout(() => fn.apply(this, args), wait);
    };
}

// HTML escape function
function escapeHtml(str) {
    if (str == null) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

	disableSubmitButton=()=>$('#mySubBtn').prop('disabled', true);
	enableSubmitButton=()=>$('#mySubBtn').prop('disabled', false);



	async function SubmitForm(){

		// try{
		// 	res=await checkButtonType();
		// }catch(e){
		// 	return false;
		// }

		var myform = document.getElementById("ConfigEdit");
		var data = new FormData(myform);


		var searchForm = JSON.stringify($('#ConfigEdit').serializeArray());
		var oldData = JSON.stringify($('#ConfigAudit').serializeArray());

		var ModuleId = $('#EditViewModuleId').val();
		var RowId = $('#RowId').val();

		var formData = {
			ModuleId: ModuleId,
			RowId: RowId,
			source: "Edit",
			data: searchForm,
			data_old: oldData
		};


		// console.log("Saving... \n"+searchForm+"Updating... \n"+oldData+"ModuleId - "+ModuleId+"RowId - "+RowId);
		$.ajax({
			url: '{{url("SaveEditView")}}',
			type: 'POST',
			data: formData,
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			dataType: 'json',
			success: function(response) {},
			complete:function(response){

				var txt = response.responseJSON;
				if(txt.Status =="Success"){
					Snackbar.show({
						text: txt.Message,
						pos: 'top-right',
					});

					var url="../../ListView/"+ModuleId+"";
					var href="{{'"+url+"'}}";
					window.location.href = url;

				}else{

					Snackbar.show({
						text: txt.Message,
						pos: 'top-right',
						actionTextColor: '#fff',
						backgroundColor: '#e7515a'
					});
				}
			}
		}); 
	}

	redirectToDetailView=()=>
	{
		console.log('clicked')
		console.log(history);
		// $('#mySubBtn').prop('disabled',true);
		// var ModuleId = $('#EditViewModuleId').val();
		// var RowId = $('#RowId').val();
		// window.location=`{{url('ShowDetailView')}}/${ModuleId}/${RowId}`;
		history.back();
	}

</script>