var pictures = [];
var targetSrc = '/assetsclient/images/pd-image.png';

var penidngMessage = `<div class="penidngMessage">درحال برسی</div>`;
var pendingIcon = `<svg width="24" height="24" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 19.25C15.5563 19.25 19.25 15.5563 19.25 11C19.25 6.44365 15.5563 2.75 11 2.75C6.44365 2.75 2.75 6.44365 2.75 11C2.75 15.5563 6.44365 19.25 11 19.25Z" fill="#FDBA74"/><path d="M11.4168 14.6667C11.4168 14.8968 11.2303 15.0833 11.0002 15.0833C10.77 15.0833 10.5835 14.8968 10.5835 14.6667C10.5835 14.4365 10.77 14.25 11.0002 14.25C11.2303 14.25 11.4168 14.4365 11.4168 14.6667Z" fill="white" stroke="white"/><path d="M11 11.916V6.41602V11.916Z" fill="white"/><path d="M11 11.916V6.41602" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>`;
var confirmMessage = `<div class="confirmedMessage">تایید شد</div>`;
var confirmIcon = `<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="5.25" fill="#00C04D"/><path d="M4.66659 7L6.41659 8.75L9.33325 5.25" stroke="white" stroke-linecap="round"/></svg>`;
var rejectMessage = `<div class="rejectMessage">رد شد</div>`;
var rejectIcon = `<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="5.25" fill="#FF5D5D"/><path d="M9.33341 4.66602L4.66675 9.33268" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.66659 4.66602L9.33325 9.33268" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

$(document).ready(function () {
    $(document).off('click', '.btnUploadingPD').on('click', '.btnUploadingPD', function (event) {
        event.preventDefault();
        const index = $(this).data('index');
        $('input[type="file"][data-index="' + index + '"]').click();
    });

    updateButtons();

    $(document).off('change', '.file-input').on('change', '.file-input', function (e) {
        e.preventDefault();

        const fileInputFile = this.files[0];
        const indexFileValue = $(this).data('index');
        const validExtensions = ['jpg', 'jpeg', 'png'];

        const label = $(`#label_${indexFileValue}`).val();
        const pdBox = $(this).closest('.pdBox');
        const img = pdBox.find('.preview-image');

        if (fileInputFile) {
            const fileName = fileInputFile.name.toLowerCase();
            const extension = fileName.split('.').pop();

            if (validExtensions.includes(extension)) {
                if (fileInputFile.size > 5000000) {
                    showAlertMessage('.alert-msg', 'لطفا فایل حجم کمتر از 5 مگابایت را آپلود کنید.', 3500);
                    $(this).val('');
                    return;
                }

                // خواندن فایل و نمایش آن
                const reader = new FileReader();
                reader.onload = function (event) {
                    img.attr('src', event.target.result);

                    const base64String = event.target.result.split(',')[1];
                    const byteCharacters = atob(base64String);
                    const byteNumbers = new Array(byteCharacters.length);
                    for (let i = 0; i < byteCharacters.length; i++) {
                        byteNumbers[i] = byteCharacters.charCodeAt(i);
                    }
                    const byteArray = new Uint8Array(byteNumbers);
                    const blob = new Blob([byteArray], { type: fileInputFile.type });
                    const newFile = new File([blob], fileInputFile.name, { type: fileInputFile.type });

                    let picturesPart = {
                        Label: label,
                        PictureFile: newFile 
                    };
                    pictures.push(picturesPart);
                };

                reader.readAsDataURL(fileInputFile);

                //uploadFile(fileInputFile, indexFileValue, label);
            } else {
                showAlertMessage('.alert-msg', 'فرمت فایل باید یکی از موارد jpeg, jpg یا png باشد.', 3500);
            }
        }
    });

    $(document).off('click', '.btnDeletingPD').on('click', '.btnDeletingPD', function (event) {
        event.preventDefault();
        const pdBox = $(this).closest('.pdBox');
        const img = pdBox.find('.preview-image');
        const label = pdBox.find('img').data("label");


        swal.fire({
            title: "اخطار",
            text: "آیا میخواهید عکس را حذف کنید؟",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "بله",
            cancelButtonText: "خیر",
            confirmButtonColor: '#84cc16',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {

                if (img.length) {
                    img.attr('src',targetSrc);
                }
                showAlertMessage('.alert-success-msg', 'عکس با موفقیت حذف شد.', 3500);


                pdBox.removeClass('uploaded');
                removeImage(label);

                updateButtons();
            }
        });
    });
});

var indexCount = 0;
function uploadFile(file, indexId, label) {
    const formData = new FormData();
    //177 must be replaced with employeeId
    formData.append('command.EmployeeId', 177);
    formData.append('command.Label', label);
    formData.append('command.PictureFile', file);

    const pdBox = $('input[data-index="' + indexId + '"]').closest('.pdBox');
    const spinner = pdBox.find('.spinner-loading-progress');

    const percentageText = pdBox.find('.percentageText');

    spinner.show();
    $('#createUploadingFiles').prop('disabled', true).addClass('disable');

    const xhr = new XMLHttpRequest();
    xhr.open('POST', saveUploadFileModalAjax, true);
    xhr.setRequestHeader('RequestVerificationToken', antiForgeryToken);

    const uploadStartTime = new Date().getTime();
    let simulatedProgress = 0;
    let actualProgress = 0;
    let isUploadComplete = false;

    // Simulate progress every 20ms, gradually increasing the bar until the actual progress is reached
    const progressInterval = setInterval(function () {
        if (simulatedProgress < actualProgress && !isUploadComplete) {
            simulatedProgress += 1; // Gradually increase simulated progress
            spinner.css('width', `${simulatedProgress}%`);
            percentageText.text(`${simulatedProgress}%`);
        }

        if (simulatedProgress >= 100) {
            clearInterval(progressInterval); // Stop once the progress hits 100%
        }
    }, 30); // Increases by 1% every 20ms, making it smooth

    // Actual upload progress listener
    xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
            actualProgress = Math.round((e.loaded / e.total) * 100);

            // If the actual progress is slow, allow the simulated progress to match it naturally
            if (actualProgress >= simulatedProgress) {
                simulatedProgress = actualProgress;
                spinner.css('width', `${simulatedProgress}%`);
                percentageText.text(`${simulatedProgress}%`);
            }
        }
    });

    // On upload completion
    xhr.onload = function () {
        spinner.css('transition', 'all 2s ease-in');

        const uploadEndTime = new Date().getTime();
        const timeDiff = uploadEndTime - uploadStartTime;
        const minUploadTime = 2500; // Minimum of 2 seconds for the whole process

        const response = JSON.parse(xhr.responseText);
        isUploadComplete = true; // Mark the upload as complete

        const delayTime = Math.max(minUploadTime - timeDiff, 0);

        setTimeout(function () {
            clearInterval(progressInterval); // Clear the interval when done
            simulatedProgress = 100;
            spinner.css('width', '100%');
            percentageText.text('100%');

            if (xhr.status === 200 && response.isSuccedded) {
                indexCount++;
                const reader = new FileReader();
                reader.onload = function (e) {
                    const pdBox = $('input[data-index="' + indexId + '"]').closest('.pdBox');
                    const img = pdBox.find('.preview-image');
                    img.attr('src', e.target.result);
                    updateButtons();
                    pdBox.find('.btnDeletingPD').addClass("unsubmitted");
                    pdBox.addClass("uploaded");
                    checkStep5();

                    // Verify the correct hidden input is selected
                    const label = pdBox.find('img').data("label");

                    let picturesPart = {
                        Label: label,
                        PictureFile: img.attr('src')
                    };
                    pictures.push(picturesPart);
                };



                reader.readAsDataURL(file);
            } else {
                showAlertMessage('.alert-msg', response.message || 'Error uploading file', 3500);
                $('input[type="file"][data-index="' + indexId + '"]').val('');
            }

            spinner.css('width', '0%'); // Reset the progress bar
            spinner.hide();
        }, delayTime); // Ensure a minimum of 2 seconds for the full process
    };

    // Handle upload error
    xhr.onerror = function () {
        clearInterval(progressInterval); // Stop progress on error
        showAlertMessage('.alert-msg', 'مشکلی در آپلود فایل به وجود آمد.', 3500);
        $('input[type="file"][data-index="' + indexId + '"]').val('');
        spinner.css('width', '0%');
        spinner.hide();
        handleActiveUploads();
    };

    xhr.send(formData);

}

function showAlertMessage(selector, message, timeout) {
    $(selector).show();
    $(selector + ' p').text(message);
    setTimeout(function () {
        $(selector).hide();
        $(selector + ' p').text('');
    }, timeout);
}

//function removeEmployeeDocumentByLabel(indexId, employeeId) {
//    const label = $(`#label_${indexId}`).val();
//    const pdBox = $('input[data-index="' + indexId + '"]').closest('.pdBox');


//    $.ajax({
//        url: deleteFileAjaxUrl,
//        method: 'POST',
//        //177 must be replaced with workshopId

//        data: { label: label, employeeId: employeeId, workshopId: 177 },
//        headers: { 'RequestVerificationToken': antiForgeryToken },
//        success: function (response) {
//            console.log(response);
//            if (response.isSuccedded) {
//                showAlertMessage('.alert-success-msg', 'تصویر موجود با موفقیت حذف شد.', 3500);
//                $(`#label_${indexId}`).val('');
//                pdBox.find('.btnDeletingPD').removeClass("Unsubmitted");
//                updateButtons();

//            } else {
//                showAlertMessage('.alert-success-msg', response.message, 3500);
//            }
//        },
//        error: function (response) {
//            showAlertMessage('.alert-msg', response.message, 3500);
//        }
//    });
//}

function removeImage(label) {
     $('.pdBox').each(function () {
        var imgSrc = $(this).find('.pdImageBox .preview-image').attr('src');
         var deleteButton = $(this).find('.btnDeletingPD');

        if (imgSrc === targetSrc) {
            deleteButton.addClass('disable');
        } else {
            deleteButton.removeClass('disable');
         }

         
     });
     pictures = pictures.filter(image => image.Label !== label);
}

function updateButtons() {
    $('.pdBox').each(function () {
        var imgSrc = $(this).find('.pdImageBox .preview-image').attr('src');
        var deleteButton = $(this).find('.btnDeletingPD');

        if (imgSrc === targetSrc) {
            deleteButton.addClass('disable');
        } else {
            deleteButton.removeClass('disable');
        }
    });
}

function checkStep5() {
    const saveData = $('.saveData');
    const importantUploadedCount = $(".pdBox.important.uploaded").length;

    const importantCount = $(".pdBox.important").length;
    const cantSave = importantUploadedCount !== 0 && importantUploadedCount !== importantCount;
    const canSave = importantUploadedCount === 0 || importantUploadedCount === importantCount;

    if (cantSave) {
        saveData.addClass("disable");
    } else if (canSave) {
        saveData.removeClass("disable");
    }
}