const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

const toastLiveExample = document.getElementById('liveToast')

let delete_object={};
let position = 0;
let success=0;
let active =0;
// if (toastTrigger) {
//   const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
//   toastTrigger.addEventListener('click', () => {
//     toastBootstrap.show()
//   })
// }
function handleHashChange() {
    if (window.location.hash === "#new_course") {
        let btn = document.querySelector("#new-course");
        if (btn) btn.click();
    }
    if (window.location.hash === "#new_module") {
        let btn = document.querySelector("#new-module");
        if (btn) btn.click();
    }
    if (window.location.hash === "#new_sem") {
        let btn = document.querySelector("#new-sem");
        if (btn) btn.click();
    }
    if (window.location.hash === "#new_unit") {
        let btn = document.querySelector("#new-unit");
        if (btn) btn.click();
    }
    if (window.location.hash === "#new_file") {
        let btn = document.querySelector("#new-file");
        if (btn) btn.click();
    }
}
window.addEventListener('hashchange', handleHashChange);

document.addEventListener("DOMContentLoaded", handleHashChange);


function fileAttachment({file_class='#file', field_class='.append-file'}={}){
    let fileSelect = document.querySelector(file_class);

    let appendField = document.querySelector(field_class);
    let file = Array.from(fileSelect.files);
    let appendCard = document.createElement('div');
    let cardHeader = document.createElement('div');
    let ul = document.createElement('ul');

    appendCard.setAttribute('class',  'card my-2');
    cardHeader.setAttribute('class', 'card-header');
    ul.setAttribute('class', 'list-group list-group-flush');
    
    cardHeader.textContent ='Selected file'
    let combinedSize = 0;
    if(file.length > 0){
        file.forEach(selectedFile => {
            let file_name= selectedFile.name;
            let file_size = selectedFile.size;
            let file_type = selectedFile.type;
            let extension = file_name.split('.').pop().toLowerCase();
            combinedSize+=file_size;
            
            let li = document.createElement('li');
            li.setAttribute('class', 'list-group-item');
            let i =document.createElement('i');

        let iconClass = "fa-file";  
        let fileIcons = {
            pdf: "fa-file-pdf",
            doc: "fa-file-word", docx: "fa-file-word",
            xls: "fa-file-excel", xlsx: "fa-file-excel",
            ppt: "fa-file-powerpoint", pptx: "fa-file-powerpoint",
            jpg: "fa-file-image", jpeg: "fa-file-image", png: "fa-file-image", gif: "fa-file-image",
            mp3: "fa-file-audio", wav: "fa-file-audio",
            mp4: "fa-file-video", avi: "fa-file-video",
            zip: "fa-file-archive", rar: "fa-file-archive",
            html: "fa-file-code", css: "fa-file-code", js: "fa-file-code", py: "fa-file-code"
        };
        if (fileIcons[extension]) {
            iconClass = fileIcons[extension];
        }
        i.setAttribute('class', `fa ${iconClass}`)
        
        file_name = `${createSimplename(file_name)}.${extension}`
        li.appendChild(i);
        li.innerHTML += ` • ${file_name} • ${formatFileSize(file_size)}`;
        ul.appendChild(li);
        });
    }else{
        let li = document.createElement('li');
        li.setAttribute('class', 'list-group-item');
        li.textContent = `No selected file`
        ul.appendChild(li);
    }
    appendCard.appendChild(cardHeader);
   
    let li = document.createElement('li');
    li.setAttribute('class', 'list-group-item');

    ul.appendChild(li);

    if(combinedSize>30*1024*1024){
        let lie = document.createElement('li');
        lie.textContent='Error -Total file size is bigger than 25MB';
        lie.setAttribute('class', 'list-group-item text-danger');
        fileSelect.value='';
        ul.appendChild(lie);
    }

    li.textContent = `Total • ${formatFileSize(combinedSize)}`;
    appendCard.appendChild(ul);
    appendField.innerHTML='';
    appendField.appendChild(appendCard);
    
}
function displayExistingFiles(existingFiles = []) {
    let appendField = document.querySelector('.append-file-exist');
    let appendCard = document.createElement('div');
    let cardHeader = document.createElement('div');
    let ul = document.createElement('ul');

    appendCard.setAttribute('class', 'card my-2');
    cardHeader.setAttribute('class', 'card-header');
    ul.setAttribute('class', 'list-group list-group-flush');

    cardHeader.textContent = 'Uploaded Files';
    appendCard.appendChild(cardHeader);

    if (existingFiles.length > 0) {
        existingFiles.forEach(file => {
            let li = document.createElement('li');
            li.setAttribute('class', 'list-group-item');

            let i = document.createElement('i');
            let extension = file.name.split('.').pop().toLowerCase();
            let iconClass = "fa-file";
            let fileIcons = {
                pdf: "fa-file-pdf",
                doc: "fa-file-word", docx: "fa-file-word",
                xls: "fa-file-excel", xlsx: "fa-file-excel",
                ppt: "fa-file-powerpoint", pptx: "fa-file-powerpoint",
                jpg: "fa-file-image", jpeg: "fa-file-image", png: "fa-file-image", gif: "fa-file-image",
                mp3: "fa-file-audio", wav: "fa-file-audio",
                mp4: "fa-file-video", avi: "fa-file-video",
                zip: "fa-file-archive", rar: "fa-file-archive",
                html: "fa-file-code", css: "fa-file-code", js: "fa-file-code", py: "fa-file-code"
            };
            if (fileIcons[extension]) {
                iconClass = fileIcons[extension];
            }
            i.setAttribute('class', `fa ${iconClass}`);

            li.appendChild(i);
            li.innerHTML += ` • <a href="${file.url}" target="_blank">${file.name}</a>`;
            ul.appendChild(li);
        });
    } else {
        let li = document.createElement('li');
        li.setAttribute('class', 'list-group-item');
        li.textContent = 'No uploaded files';
        ul.appendChild(li);
    }

    appendCard.appendChild(ul);
    appendField.innerHTML = ''; // Clear previous content
    appendField.appendChild(appendCard);
}

function formatFileSize(bytes) {
    if (bytes < 1024) return bytes + " B";
    else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
    else if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(2) + " MB";
    else return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB";
}

function createSimplename(str){
    let nameArr = str.split('.');
    str=nameArr.slice(0, -1).join('');
    let length = str.length;
    if(length>10){
        str= str.slice(0, 10);
        return `${str}...`
    }

    return str
}

function writeDb(data, url, ui_manipulate){
    if(active>0){
        createBootstrapToast(['Please wait the previous request to be completed first before making another request', position, 'text-danger']);
        return;
    }else{
        ui_manipulate.progress.style.width ='0%'  
    }
    active += 1;
    
    let xhr = new XMLHttpRequest();
    xhr.timeout = 90000;
    xhr.upload.onprogress=function(event){
        if(event.lengthComputable){
            let percentComplete = (event.loaded/event.total)*100;
            ui_manipulate.progress.style.width=`${percentComplete}%`;
            ui_manipulate.progress.textContent=`${percentComplete.toFixed(1)}% uploaded`;
        }
    }
    xhr.onprogress =function(event){
        if(event.lengthComputable){
            let percentComplete =(event.loaded/event.total)*100;
            ui_manipulate.progress.style.width=`${percentComplete}%`;
            ui_manipulate.progress.textContent=`${percentComplete.toFixed(1)}% processed`;
        }
    }
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onload= function(){
        active=0;
        if(xhr.status >=200 && xhr.status <=300){
            // console.log(xhr.responseText);
            try {

               let responseData= JSON.parse(xhr.responseText);
               //createBootstrapToast([responseData.data.message, position, responseData.data.color]);
               createBootstrapToast([responseData.data.message, position, responseData.data.color]);
               
               if(responseData.status=='success'){
                afterUploadAction(ui_manipulate.inputs);
                if(ui_manipulate.func){
                    fileAttachment({file_class:'#file-e',field_class:'.append-file-edit'});
                   }
                success+=1;
                }else{
                    ui_manipulate.inputs.forEach(ui=>{
                        if(ui){
                        ui.classList.add('border-danger');
                        }
                    })
                };
                
                if(responseData.redirect){
                    let countdown = 10;
                    let message = document.getElementById("redirectMessage");
                     message.innerText = `Redirecting in ${countdown} seconds...`;

                    let interval = setInterval(() => {
                            countdown--;
                            message.innerText = `Redirecting in ${countdown} seconds...`;
                            if (countdown === 0) {
                                clearInterval(interval);
                                if(responseData.redirect=='empty'){
                                window.location.href =  window.location.href;
                                }else{
                                window.location.href = responseData.redirect;
                                }
                            }
                        }, 1000);
                    

                }
            } catch (error) {
                console.log(error)
                
            }
        }else{
            createBootstrapToast([`HTTP Error:-, ${xhr.status}`, position, 'text-danger']);
        }
    }
    xhr.ontimeout=function(){
        active=0
        createBootstrapToast([`Time out, check internet connection and ty again`, position, 'text-danger']);
    }
    xhr.onerror=function(){
        active=0;
        createBootstrapToast([`Network error`, position, 'text-danger']);
    }
    xhr.send(JSON.stringify(data));
}

function afterUploadAction(ui){
    ui.forEach(elem=>{
        if(elem){
        elem.classList.remove('border-danger')
        elem.value='';
        }
    })
}

function createBootstrapToast(data){
    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(createToastBootstrap(data[0], data[1], data[2]))
    toastBootstrap.show() ;
    position+=15;
    if(position>50){
        position=0;
      }
}

function organizeRetrievedData(){

}

function handleReceivedHtmlData(){

}

function renderPage(){
    
    if(success>0){
    window.location.hash='';
    let targetUrl = window.location.href
    targetUrl= targetUrl.replace('#', '')
    window.location.href=targetUrl
    }
    success=0

}

function addCourse({url, loc='str', type='course', action='add_course'}={}){
    let courseInput = document.querySelector('#course-name');
    let access = document.querySelector('#course-type');
    let notes = document.querySelector('#course-note');
    let progressBar = document.querySelector('.progress-bar');
    let code;
    if(action=='edit_course'){
        courseInput = document.querySelector('#edit-name');
        access = document.querySelector('#edit-type');
        notes = document.querySelector('#edit-note');
        progressBar = document.querySelector('#progress-bar');
        code = document.querySelector('#code');
        loc= (document.querySelector('#edit-status'))?document.querySelector('#edit-status').value:loc;
    }
    let courseValue= courseInput.value.trim();
    let accessValue=  access.value.trim();
    //let notesValue= notes.value.trim();
    if(active>0){
        createBootstrapToast(['Please wait for the previous request to be completed first', position, 'text-danger']);
        return;
    }else{
        progressBar.style.width ='0%'
    }
    if(courseValue.length<1 || accessValue.length<1){
        if(courseInput.value==''){
        courseInput.classList.add('border-danger');
        }
        if(access.value==''){
        access.classList.add('border-danger');
        }
        createBootstrapToast(['Error all field are required', position, 'text-danger'])
      
      return; 
    }
    let data ={
        action : action,
        data:{
            name : courseInput.value.trim(),
            access : access.value.trim(),
            note: notes?notes.value.trim():null,
            loc: loc,
            type: type,
            code: code?code.value.trim():false,
        }
    }
    let html_dt = {
        inputs:
        [
        courseInput, access, notes
        ],
        progress: progressBar
}

    writeDb(data, url, html_dt)
}

function editCourse(array){
       let  name= document.querySelector('#edit-name')  ;      
       let  type= document.querySelector('#edit-type');        
       let  note= document.querySelector('#edit-note');
       let  code= document.querySelector('#code');
       let  stat= document.querySelector('#edit-status');
       name.value = array.name;    
       type.value = array.type;     
       note.value = array.info;    
       code.value = array.code;   
       if(stat){ 
       stat.value = array.status; 
       }   
       
    }
function delete_data(arr){
    document.querySelector('.name-label').textContent=arr.name;
    delete_object=arr;
}
function delete_data_file(arr){
    document.querySelector('.name-label-file').textContent=arr.name;
    delete_object=arr;
}

    
function initiate_delete(data, act){
    let happen;
    if(act){
        happen = act
    }else{
        happen ='delete_folder'
    }
    if(active>0){
        createBootstrapToast(['Please wait for the previous request to be completed first', position, 'text-danger']);
        return;
    }else{
        data.progress.style.width ='0%'
    }
    let code =delete_object.code;
    let attachment={
        action : happen,
        data:{
            code:code
        }
    }
    let html_dt = {
        inputs:
        [
        data.url
        ],
        progress: data.progress
}
    writeDb(attachment, data.url.value, html_dt)
}

function display_edit_file(arr){
    let file_name= document.querySelector('#file-name-e');
    let file_note= document.querySelector('#file-note-e');
    let file_type= document.querySelector('#file-type-e');
    let file_code= document.querySelector('#code-edit-d');
    file_name.value=arr.name;
    file_note.value=arr.notes;
    file_type.value=arr.type;
    file_code.value=arr.code;
    displayExistingFiles([{name: arr.name, size: 0, type:'file', url: arr.base_url}])
    
}
function add_documents(inputs){
    
    let name= inputs.data.name;
    let note= inputs.data.notes;
    let access= inputs.data.access;
    let files= inputs.data.files;

    let nameValue= name.value.trim();
    let notesValue= note.value.trim();
    let accessValue = access.value.trim();
    let filesValue = files.files;
    
    if(active>0){
        createBootstrapToast(['Please wait the previous request to be completed first before making another request', position, 'text-danger']);
        return;
    }else{
        inputs.alert.pBar.style.width ='0%'
        
    }

    if(nameValue==''){
        name.classList.add('border-danger');
    }else{
        name.classList.remove('border-danger');
    }
    if(notesValue==''){
        note.classList.add('border-danger');
    }else{
        note.classList.remove('border-danger');
    }
    if(accessValue==''){
        access.classList.add('border-danger');
    }else{
        access.classList.remove('border-danger');
    }
    if(filesValue.length==0){
        inputs.alert.file_cont.classList.add('border-danger');
    }else{
        inputs.alert.file_cont.classList.remove('border-danger');
    }
    if(nameValue==''||notesValue=='' ||accessValue=='' ||filesValue.length==0){
        createBootstrapToast(['Error - Some fields have errors', position, 'text-danger']);
        return;
    }
    let act = 'add_document';
    let locs= null;
    if(inputs.action=='edit_file'){
        locs = inputs.data.code.value
        act=inputs.action;
    }else{
        locs=inputs.data.loc.trim()
    }
    
   
    let file_list = [];
    let readFile = (file, index) => {
        let reader = new FileReader();

        reader.onloadend = function () {
            let base64String = reader.result.split(',')[1]; // Remove base64 prefix

            file_list.push({
                filename: file.name,
                filetype: file.type,
                filedata: base64String
            });
            
            if (file_list.length === filesValue.length) {
                let json_data={
                    action: act,
                    data:{
                        'name' : nameValue,
                        'notes': notesValue,
                        'access': accessValue,
                        'files_a':inputs.action=='edit_file'?file_list[0]:file_list,
                        'type' :'document',
                        'loc' : locs
                    }
                }
             let htm_data ={
                'inputs': [name, note, access, inputs.alert.file_cont, files],
                'progress': inputs.alert.pBar,
                'func': true,
             }

            writeDb(json_data, inputs.alert.url, htm_data);
            
            }
        };

        reader.readAsDataURL(file); 
    };

    for (let i = 0; i < filesValue.length; i++) {
        readFile(filesValue[i], i);
    }    
}

function createToastBootstrap(message, position, color){
    let toastContainer = document.createElement('div');
    let liveToast = document.createElement('div');
    let toastHeader = document.createElement('div');
    let tostBody = document.createElement('div');
    let strong = document.createElement('strong');
    let small = document.createElement('small');
    let button = document.createElement('button');

    toastContainer.setAttribute('class', 'toast-container position-fixed end-0 p-3');
    toastContainer.style.bottom = `${position}%`;

    liveToast.setAttribute('class', `toast ${color}`);
    liveToast.id= `liveToast-${position}`;
    liveToast.role ='alert';
    liveToast.ariaAtomic =true;
    liveToast.ariaLive='assertive';
    toastHeader.setAttribute('class', 'toast-header');
    tostBody.setAttribute('class', 'toast-body');
    strong.classList.add('me-auto');
    button.classList.add('btn-close');
    button.setAttribute('type', 'button');
    button.setAttribute("data-bs-dismiss", "toast");
    button.ariaLabel='close';

    strong.textContent= 'Archive says!';
    small.textContent='now';

    tostBody.textContent=message;

    toastHeader.appendChild(strong);
    toastHeader.appendChild(small);
    toastHeader.appendChild(button);
    liveToast.appendChild(toastHeader);
    liveToast.appendChild(tostBody);

    toastContainer.appendChild(liveToast)
    document.querySelector('body').appendChild(toastContainer);
    return liveToast;
}


function sendEmail(data) {
    let url = data['url'];
    let name= data['name'];
    let subject= data['subject'];
    let email= data['email'];
    let phone= data['phone'];
    let message= data['message'];
    if(name.value.trim()==''){
        name.classList.add('border-danger');
    }else{
        name.classList.remove('border-danger');
    }
    if(subject.value.trim()==''){
        subject.classList.add('border-danger');
    }else{
        subject.classList.remove('border-danger');
    }
    if(email.value.trim()==''){
        email.classList.add('border-danger');
    }else{
        email.classList.remove('border-danger');
    }
    if(phone.value.trim()==''){
        phone.classList.add('border-danger');
    }else{
        phone.classList.remove('border-danger');
    }
    if(message.value.trim()==''){
        message.classList.add('border-danger');
    }else{
        message.classList.remove('border-danger');
    }

    if(name.value.trim()==''|| subject.value.trim()==''|| email.value.trim()==''|| phone.value.trim()==''||message.value.trim()==''){
        createBootstrapToast(['Error all field are required', position, 'text-danger'])
        return;
    }
    let data_up ={
        action : 'send_email',
        data:{
            name : name.value.trim().split(' ')[0],
            email : email.value.trim(),
            phone: phone.value.trim(),
            subject: subject.value.trim(),
            message: message.value.trim(),
        }
    }
    let html_dt = {
        inputs:
        [
        name, phone, email, subject, message
        ],
        progress: data['prog']
}

    writeDb(data_up, url, html_dt)
}

function register_user(data){
    let name= data['full_name'];
    let username= data['user_name'];
    let email = data['email'];
    let phone = data['phone'];
    let password= data['password'];
    let confirmPassword= data['c_password'];
    let url= data['url'].value;

    if(name.value.trim()==''){
        name.classList.add('border-danger');
    }else{
        name.classList.remove('border-danger');
    }
    if(username.value.trim()==''){
        username.classList.add('border-danger');
    }else{
        username.classList.remove('border-danger');
    }
    if(email.value.trim()==''){
        email.classList.add('border-danger');
    }else{
        email.classList.remove('border-danger');
    }
    if(phone.value.trim()==''){
        phone.classList.add('border-danger');
    }else{
        phone.classList.remove('border-danger');
    }
    if(password.value.trim()==''){
        password.classList.add('border-danger');
    }else{
        password.classList.remove('border-danger');
    }
    if(confirmPassword.value.trim()==''){
        confirmPassword.classList.add('border-danger');
    }else{
        confirmPassword.classList.remove('border-danger');
    }

    if(name.value.trim()=='' || username.value.trim()=='' || email.value.trim()==''
    || phone.value.trim()=='' || password.value.trim()=='' || confirmPassword.value.trim()==''){
        createBootstrapToast(["All field are required", position, 'text-danger'])
        return;
    }
    if(password.value.trim()!==confirmPassword.value.trim() || password.value.length<6){
        createBootstrapToast(["Your passwords fields have errors", position, 'text-danger'])
        return;
    }
    let data_up ={
        action : 'register',
        data:{
            name : name.value.trim(),
            email : email.value.trim(),
            phone: phone.value.trim(),
            username: username.value.trim().replaceAll(' ', '_').toLowerCase(),
            password: password.value.trim(),
            confirmPassword: confirmPassword.value.trim(),
        }
    }
    let html_dt = {
        inputs:
        [
        name, phone, email, username, password, confirmPassword
        ],
        progress: data['prog']
}

    writeDb(data_up, url, html_dt)
}

function login(data){
    let name= data['name'];
    let password= data['password'];
    let url= data['url'];
    if(name.value.trim()==''){
        name.classList.add('border-danger');
    }else{
        name.classList.remove('border-danger');
    }
    if(password.value.trim()==''){
        password.classList.add('border-danger');
    }else{
        password.classList.remove('border-danger');
    }
    if(name.value.trim()==''|| password.value.trim()==''){
        createBootstrapToast(["All field are required", position, 'text-danger'])
        return;
    }
    let data_up ={
        action : 'login',
        data:{
            name : name.value.trim(),
            password: password.value.trim(),
        }
    }
    let html_dt = {
        inputs:
        [
        name, password
        ],
        progress: data['prog']
    }

    writeDb(data_up, url, html_dt);

}

function forgotPassword(data){
    let name= data['name'];
    let proG= data['proG'];
    let url= data['url'].value;
    if(name.value.trim()==''){
        name.classList.add('border-danger');
    }else{
        name.classList.remove('border-danger');
    }
    if(name.value.trim()==''){
        createBootstrapToast(["All field are required", position, 'text-danger'])
        return;
    }
    let data_up ={
        action : 'forgot_password',
        data:{
            name : name.value.trim(),
        }
    }
    let html_dt = {
        inputs:
        [
        name
        ],
        progress: proG
    }

    writeDb(data_up, url, html_dt);

}

let userEdata;


function displaySelectedImage(file, imageCrop, imageModal, url, idpassed){

    var myModal = new bootstrap.Modal(imageModal);
    let savePhoto = imageModal.querySelector('#save-photo');
    let croper;
    let filevalue=file.files[0];
    if(!filevalue){
        return;
    }
    let filename=filevalue.name;
    
    if(filevalue){

        myModal.show();
        
        let fileReader = new FileReader();
        fileReader.onload=(e)=>{
            imageCrop.src= e.target.result;
            
        }
        fileReader.readAsDataURL(filevalue);
        
    }
 

    imageModal.addEventListener('shown.bs.modal', ()=>{
        croper= new Cropper(imageCrop, {
            aspectRatio: 1,
            viewMode: 3,
            preview: '.preview-field'
    })
    })

    imageModal.addEventListener('hidden.bs.modal', ()=>{
        croper.destroy();
        croper = null;
    });
    savePhoto.addEventListener('click', ()=>{
        if (croper && croper.getCroppedCanvas()) {
        canvas = croper.getCroppedCanvas({
            width: 200,
            height: 200,
        });
        }
        else{
            createBootstrapToast(["Please wait for cropper to load", position, 'text-danger'])
            return
        }
        canvas.toBlob((blob)=>{
            // url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                var base64data = reader.result;
				let filedata= base64data.split(',')[1];
                
                let data_up ={
                    action : 'edit_user_profile',
                    data:{
                        file_data: {
                            data: filedata,
                            name: filename
                        },
                        id: idpassed
                    },
                }
                
                let html_dt = {
                    inputs:
                    [file],
                    progress: document.querySelector('#img-prog')
                }
            
                writeDb(data_up, url, html_dt);

            }
        });
    });

}

function  updateProfilePhoto(){

}

function userEditData(data){
    userEdata= data;
    let icon= document.querySelector('.u-icon');
    let image= document.querySelector('.u-image');
    if(data.profile!==0){
        icon.classList.remove('d-none');
        image.classList.add('d-none');
    }else{
        image.classList.remove('d-none');
        icon.classList.add('d-none');  
    }
    let nameField= document.querySelector('#full-name');
    let userfield= document.querySelector('#user-name');
    let emailField= document.querySelector('#user-email');
    let phoneField= document.querySelector('#user-phone');
    nameField.value= data.name
    userfield.value= data.username
    phoneField.value= data.phone
    emailField.value= data.email

}

function handleUpdateField(data){
    let fieldData=data.field;
    let fieldDataOpt=data.fieldoptional;
    let field = data.title;
    let action =  data.action;
    let url = data.url;
    
    let proG = data.proG;
    let id = userEdata.id;
    if(fieldData.value.trim()==""){
        createBootstrapToast([`Empty ${field} `, position, 'text-danger'])
        return;
    }
    // console.log(userEdata[field])
    if(fieldData.value.trim()==userEdata[field]){
        createBootstrapToast([`This value is already saved try another one`, position, 'text-danger'])
        return;
    }
    
    let data_up ={
        action : 'edit_user_data',
        data:{
            name : fieldData.value.trim(),
            field : field,
            id:  id
        },
        
    }
    
    let html_dt = {
        inputs:
        [
        fieldData
        ],
        progress: proG
    }
    if(field=='password'){
        if(fieldDataOpt.value.trim()==""){
            createBootstrapToast([`Empty confirm ${field} `, position, 'text-danger'])
            return;
        }
         data_up ={
            action : 'edit_user_data',
            data:{
                name : fieldData.value.trim(),
                name2 : fieldDataOpt.value.trim(),
                field : field,
                id:  id
            },
            
        }
        
         html_dt = {
            inputs:
            [
            fieldData, fieldDataOpt
            ],
            progress: proG
        }  
    }
    writeDb(data_up, url, html_dt);
}

function searchUserInterphase(data){
    let searchTerm = data.term.trim(); 
    let searchField= data.ui;
    searchField.innerHTML='';
    let words = searchTerm.toLowerCase().split(" "); 
    let smallAlert= document.createElement('h6');
    smallAlert.classList.add('text-danger', 'text-center', 'my-2');
    smallAlert.textContent="... No matching data!"
    if(searchTerm.length<1){
        searchField.appendChild(smallAlert);
        console.log('nothing');
        return
    }
    let filteredData = flatData
        words.forEach(word => {
            filteredData = filteredData.filter(item => 
                Object.values(item).some(value => 
                    String(value).toLowerCase().includes(word)
                )
            );
        });
        
       
    if(filteredData.length >0){
        filteredData.forEach(ecahfound=>{
            if(ecahfound.type){
                searchField.appendChild(createListgroup(ecahfound, 'Folder', data.url))
            }else
            if(ecahfound.notes){
                let ext =ecahfound.original_name?ecahfound.original_name.split('.').pop():''
                
               searchField.appendChild(createListgroup(ecahfound, 'Document', data.url, ext))
            }else
            if(ecahfound.phone){
                searchField.appendChild(createListgroup(ecahfound, 'User', data.url))
            }else{
                
            }
        })
    };
    if(filteredData.length==0 || searchField.innerHTML==""){
        searchField.appendChild(smallAlert);
    }

}

function createListgroup(datas, title, url, ext){
    let divMain = document.createElement('div');
    divMain.setAttribute('class', 'list-group my-2');    
    let header= document.createElement('h6');
    header.textContent=title;
    let link = document.createElement('a');
    link.setAttribute('class', 'list-group-item list-group-item-action p-3');
    let icon= document.createElement('i');
    link.appendChild(icon)
    if(title=='Document'){
        if(ext=='zip'){
            link.href=`${url}/${datas.location}?zip=${url}/read/${datas.code}`;
        }else{
            link.href=`${url}/read/${datas.code}`;
        }
    link.target='';
    icon.setAttribute('class', 'fa fa-file mx-2');
    }else if(title=='User'){
    link.href=`${url}/${datas.username}`;
    icon.setAttribute('class', 'fa fa-user mx-2');

    }else{
    link.href=`${url}/${datas.code}`;
    icon.setAttribute('class', 'fa fa-folder mx-2');
    }

    link.insertAdjacentText('beforeend', ` • ${datas.name}`)
    divMain.appendChild(header)
    divMain.appendChild(link)
    return divMain;
}

function allowfileDisplay({
        url = "https://docs.google.com/gview?url=",
        allowed_trial = 5, 
        loader="",
        iframe_error= "",
        trials=0,
        loaded= false,
        }) 
        {
        $("iframe").remove();
        $("body").append(`
        <iframe
            src = "${url}"
            width="100%" 
            height="100vh" 
            frameborder="0" 
            onload=""
            id="iframe">
        </iframe>
        `)
        
        $(loader).show();
        
        $("iframe").off('load').on('load', () => {
            loaded = true;
            $(iframe_error).hide();
            $(loader).hide();
            console.log('Iframe loaded!');
        })

        setTimeout(() => {
            if (!loaded) {
                console.log('Content loading failed!');
                
                $(loader).hide();
                $(iframe_error).show();
                let trialId = setTimeout(() => {
                    
                    if (trials <= allowed_trial && !loaded) {
                        console.log('Retrying to reload content...')
                        allowfileDisplay({
                            url: url,
                            allowed_trial: allowed_trial,
                            trials : trials+=1,
                            loader:loader,
                            iframe_error:iframe_error
                        });
                    }

                    if (trials > allowed_trial) {
                        loaded = true;
                        let refresh = confirm('Retry failed.. Do you wish to reload the page?')
                        if (refresh) window.location.href = " ";
                    };
                }, 500);

            }
        }, 15000);
    };