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

use \Str as Str;

$RowId=(string)Str::uuid();
$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="ConfigCreate" class="simple-example" id="ConfigCreate" 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}}">
		<input type="hidden" id="{{$GetPrimaryKeyName}}" name="{{$GetPrimaryKeyName}}" value="{{$RowId}}">

		@if($PanelType==1)
		<x-createviewlayouts.panelstab  :fieldslist="$fieldsList"/>
		<div class="tab-content" id="simpletabContent">
			<x-createviewlayouts.panelscontent  :fieldslist="$fieldsList" :moduleid="$ModuleId" :paneltype="$PanelType"/>
		</div>
		@else
		<div id="toggleAccordion" class="accordion">
			<x-createviewlayouts.panelscontent  :fieldslist="$fieldsList" :moduleid="$ModuleId" :paneltype="$PanelType"/>
		</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>
				</div>
			</div>
		</div>

	</form>

	<x-createviewlayouts.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();

		});

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


		source=$('#CreateViewSource').val();
		// uploadFile();
		// return false;
		var ModuleId = $('#CreateViewModuleId').val();
		var searchForm = JSON.stringify($('#ConfigCreate').serializeArray());

		var formData = {
			ModuleId: ModuleId,
			source: "Create",
			data: searchForm
		};

		$.ajax({
			url: "{{ url('ConfigInsertData') }}",
			type: 'POST',
			data: formData,
			dataType: "json",
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			beforeSend:function(){
				$('#ShowResults').html('');
 				// console.log("cleared");
 				disableSubmitButton();
 			},
 			success: function() {
 			},
 			complete:function(response)
 			{
 				console.log(response);
 				var txt = response.responseJSON;

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

 					if(source=="popUpCreate")
 					{
 						window.close();
 						return false;
 					}
 					var url="../ListView/"+ModuleId+"";
 					var href="{{'"+url+"'}}";
 					window.location.href = url;
 				}else{
 					Snackbar.show({
 						text:  txt.Message, 
 						pos: 'top-right',
 						actionTextColor: '#fff',
 						backgroundColor: '#e7515a'
 					});
 					enableSubmitButton();
 				}
 			}
 		});
	}

	// uploadFile =()=>
	// {
	// 	moduleid=$('#CreateViewModuleId').val();
	// 	formdata=document.getElementById('ConfigCreate');
	// 	myform =new FormData(formdata);

	// 	// console.clear();
	// 	// console.log(myform);
	// 	// return false;

	// 	$.ajax({
	// 		type:"post",
	// 		url:"{{url('UploadFiles')}}",
	// 		data:myform,
	// 		cache:false,
	// 		processData:false,
	// 		contentType:false,
	// 		mimeType:"multipart/form-data",
	// 		headers:{'X-CSRF_TOKEN':$('meta[name="csrf-token"]').attr('content')},
	// 		dataType: "json",
	// 		async: false, 
	// 		beforeSend:function()
	// 		{
	// 			// $('#mySubBtn').prop('disabled', true);
	// 			disableSubmitButton();
	// 		},
	// 		success:function(response)
	// 		{

	// 			$('#UniqueReferenceId').val(response.id);
	// 		},
	// 		error:function(error)
	// 		{
	// 			alert("error:"+JSON.stringify(error));
	// 		}
	// 	});
	// }

	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();
    UniqueReferenceId = $('#UniqueReferenceId').val();

    FilePond.registerPlugin(
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview,
        FilePondPluginImageExifOrientation,
        FilePondPluginFileValidateSize,
        FilePondPluginImageCrop,
        FilePondPluginImageResize,
        FilePondPluginImageTransform
    );

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

    allFileInputs.map(function () {
        const pond = FilePond.create(this, {
            allowMultiple: true,
            allowReorder: true,
            allowImagePreview: false,     // keep UI tiny
            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");
    
    FilePond.setOptions({
        server: {
            url: `{{ url('UploadFiles')}}?ModuleId=${ModuleId}&UniqueReferenceId=${UniqueReferenceId}`,
            process: {
                headers: { 'X-CSRF-TOKEN': csrf },
            },
        }
    });

    // refresh AFTER uploads
    const debouncedRefresh = debounce(() => {
        loadExistingFiles(ModuleId, UniqueReferenceId);
    }, 300);

    document.addEventListener('FilePond:processfile', (e) => {
        console.log('File uploaded successfully', e);
        enableSubmitButton();
        debouncedRefresh();
    });

    document.addEventListener('FilePond:processfiles', (e) => {
        console.log('All files processed', e);
        debouncedRefresh();
    });

    document.addEventListener('FilePond:addfilestart', () => {
        disableSubmitButton();
    });

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

    // Optionally load once on init
    loadExistingFiles(ModuleId, UniqueReferenceId);
};

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

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;');
}

function renderNameList(list, containerId, moduleId, uniqueReferenceId) {
    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 => {
        // Use the server-provided name and ID
        const name = file.FileName || 'Unknown File';
        const fileId = file.TemporaryFilesId; // The ID for the delete action

        if (!fileId) return ''; // Don't render an item if it has no ID

        return `
            <li title="${escapeHtml(name)}">
                ${escapeHtml(name)}
                <span 
                    class="delete-file-btn" 
                    onclick="deleteFile('${fileId}', '${moduleId}', '${uniqueReferenceId}')"
                >
                    &times;
                </span>
            </li>
        `;
    }).join('');

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


function deleteFile(fileId, moduleId, uniqueReferenceId) {
    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 to show the change
                loadExistingFiles(moduleId, uniqueReferenceId);
            } 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 loadExistingFiles(ModuleId, UniqueReferenceId) {
    $.ajax({
        url: `{{ url('GetUploadedFiles')}}?ModuleId=${encodeURIComponent(ModuleId)}&UniqueReferenceId=${encodeURIComponent(UniqueReferenceId)}`,
        type: 'GET',
        success: function(response) {
            console.log('Existing files:', response);

            // For each FilePond input, render names into its paired "-names" div
            allFileInputs.each(function () {
                const inputId = $(this).attr('id');
                const containerId = `${inputId}-names`;
                renderNameList(response, containerId, ModuleId, UniqueReferenceId);
            });
        },
        error: function(xhr) {
            console.log('Error loading existing files:', xhr);
        }
    });
}


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

</script>