<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <script>document.write(new Date().getFullYear())</script> &copy; Adminto theme adapted and coded by <a href="https://alexcd2000.com/">AlexCD2000</a> 
            </div>
            <div class="col-md-6">
                <div class="text-md-end footer-links d-none d-sm-block">
                    <a href="javascript:void(0);">About Us</a>
                    <a href="javascript:void(0);">Help</a>
                    <a href="javascript:void(0);">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</footer>
        <!-- Vendor js -->
        <script src="./assets/js/vendor.min.js"></script>

        <!-- knob plugin -->
        <script src="./assets/libs/jquery-knob/jquery.knob.min.js"></script>

        <!--Cada pestaña que tenga sus propios scripts si es que marcan error en la consola...-->

        <!-- App js -->
        <script src="./assets/js/app.min.js"></script>

<script>jQuery(document).ready(function ($) { 
    
    let idinfo='.tabla-ajax td';
    let edicion = false;        
    let fila, columna, valor=""; 
    $(document).click(function(e) {//todos los clicks
    let tipodefault='<input type="text" ';
        //console.log("-------click-----");
        if( $(e.target).children().length > 0 || $(e.target).hasClass("tabledit-input") || $(e.target).hasClass("form-select")  || $(e.target).hasClass("es-link")){
            //console.log( "es un input o un select o un link. Como tiene children el td, no corro nada");//donde diste click
        }else{//esto no corre si haces click sobre un input
            var esto=$(e.target).closest(idinfo);//donde diste click
            //console.log("edicion "+edicion);
            if(edicion == true){//ya hay un inputbox hay que salvarlo antes que nada
                edicion = false;
                //console.log("Voy a salvar y poner edicion "+edicion);
                //solo puede haber un input a la vez
                let key=$(idinfo+" input").closest(".tabla-ajax").attr("pagina");
                //console.log("la key es "+key);
                let fila=$(idinfo+" input").attr("fila"); 
                let columna=$(idinfo+" input").attr("columna"); 
                let valor=$(idinfo+" input").val();
                $(idinfo+" input").parent().html(valor);//regresa al td que si tiene un input
                //console.log("salvar "+fila+columna+valor+edicion);  
                AjaxGuardar(key,columna,fila,valor);
            }

            //crea el input box donde debe
            if ( esto.length === 0 ) {//asi checas que hagas clic en otro lado...
                edicion = false;
                //console.log("No en donde debo sacar el input "+edicion);
            }else{
                //console.log("SI en td");
                let fila=esto.attr("fila"); 
                let columna=esto.attr("columna"); 
                let valor=esto.html();
                //console.log(fila+columna+valor+edicion);  
                if(typeof(columna) != "undefined" && columna !== null && (valor.substr(0,6) != "<input" || valor.substr(0,7) != "<select" || valor.substr(0,9) != "<textarea" || valor.substr(0,3) != "<a " ) ){//isset en jquery y no haga input sobre input          
                    edicion = true;
                    //console.log("input edición "+edicion);  
                    if(columna=="precio" || columna=="descuento" || columna=="ajuste"){tipodefault='<input type="number" ';}
                    esto.html(tipodefault+' fila="'+fila+'" columna="'+columna+'" value="'+valor+'" class="tabledit-input form-control form-control-sm">');
                }else{
                    //console.log("Can't edit this value");
                }   
            }
        }
    });
             
    $(document).on('keypress',function(e) {//tambien salva al hacer enter
        if(e.which == 13) {
            //console.log("---------Enter pressed-------"+edicion);
            if(edicion == true){//ya hay un inputbox hay que salvarlo antes que nada
                edicion = false;
                //console.log("Voy a salvar y poner edicion "+edicion);
                //solo puede haber un input a la vez
                let key=$(idinfo+" input").closest(".tabla-ajax").attr("pagina");
                //console.log("la key es "+key);
                let fila=$(idinfo+" input").attr("fila"); 
                let columna=$(idinfo+" input").attr("columna"); 
                let valor=$(idinfo+" input").val();
                $(idinfo+" input").parent().html(valor);//regresa al td que si tiene un input
                //console.log("salvar "+fila+columna+valor+edicion);  
                AjaxGuardar(key,columna,fila,valor);
            }
        }
    });

    function AjaxGuardar(key,columna,fila,valor){//guarda los valores
        $.post("./Configs.php", {// antes era ./Ajax.php pero mejor este junto el codigo
            key: key,
            columna: columna,
            fila: fila,
            valor: valor
        }, function(data, status) {
            //$("#feedbackAjax").html("salvar "+data);
            //alert("el status es: "+status);
        });
    }
    function AjaxConsulta(key,fila,que,donde){//este no logre hacerlo funcionar porque es asincrono... mejor echo los valores con php...
        //te sirva para traer html desde la base de datos como las opciones de un select o secciones completas... toda la magia la haces en el ajax y ya le haces echo con $("#feedbackAjax").html(AjaxConsulta(key,que))  o logica let var=AjaxConsulta(key,que);
        $.post("./Configs.php", {// antes era ./Ajax.php pero mejor este junto el codigo
            key: key,
            fila: fila,
            que: que
        }, function(data, status) {
            //no puedes usar return porque es asincrono, así que mejor que la función lo ponga donde debe...
            $(donde).html(data);
        });/**/
    }
    
        //esto salva los selects con ajax y no se pelea con los inputbox, corre en paralelo
    $('select.form-select').on('change', function() {
        let key=$(this).closest(".tabla-ajax").attr("pagina");
        //console.log("la key es "+key);
        let fila=$(this).attr("fila"); 
        let columna=$(this).attr("columna"); 
        let valor=$(this).val();
        //alert(key+columna+fila+valor);
        AjaxGuardar(key,columna,fila,valor);
    });
        
    $("td[columna=archivo]").each(function() {//o p o span etc...
        let remplazar = $(this).html();
        if (remplazar.indexOf("multimedia/") >= 0){
            //console.log("remplazar por link "+remplazar);
            remplazar='<button type="button" class="btn btn-info waves-effect waves-light btn-xs es-link" onclick="ActArchivo('+$(this).attr("fila")+');"><i class="mdi mdi-file-upload-outline es-link"></i></button>&nbsp;&nbsp;<a href="'+remplazar+'"  target="_blank" class="es-link">'+remplazar.replaceAll("/multimedia/","")+'</a>';
        }else{
            remplazar='<button type="button" class="btn btn-info waves-effect waves-light btn-xs es-link" onclick="ActArchivo('+$(this).attr("fila")+');"><i class="mdi mdi-file-upload-outline es-link"></i></button>';            
        }
        $(this).html(remplazar);
    });    
    $("td[columna=img]").each(function() {//o p o span etc...
        let remplazar = $(this).html();
        if (remplazar.indexOf("multimedia/") >= 0){
            //console.log("remplazar por link "+remplazar);
            remplazar='<button type="button" class="btn btn-info waves-effect waves-light btn-xs es-link" onclick="ActImg('+$(this).attr("fila")+');"><i class="mdi mdi-file-upload-outline es-link"></i></button>&nbsp;&nbsp;<a href="'+remplazar+'"  target="_blank" class="es-link">'+remplazar.replaceAll("/multimedia/","")+'</a>';
        }else{
            remplazar='<button type="button" class="btn btn-info waves-effect waves-light btn-xs es-link" onclick="ActImg('+$(this).attr("fila")+');"><i class="mdi mdi-file-upload-outline es-link"></i></button>';            
        }
        $(this).html(remplazar);
    });    
});
    function ActArchivo(fila){
        //alert(fila);
        $("td[columna=archivo][fila="+fila+"]").html(`
        <form method="post" enctype="multipart/form-data" class="es-link" style="text-align:center;">
            <input type="hidden" value="`+fila+`" name="idcambiar">
            <input type="hidden" value="File uploaded" name="nombre">
            <input type="file" accept=".pdf" class="es-link" placeholder="file" name="file" style="padding-bottom: 10px;">
            <button type="submit" name="botonnuevo" class="btn btn-success waves-effect waves-light es-link" value="productoImg">Update</button>
        </form>
        `);
    }
    function ActImg(fila){
        //alert(fila);
        $("td[columna=img][fila="+fila+"]").html(`
        <form method="post" enctype="multipart/form-data" class="es-link" style="text-align:center;">
            <input type="hidden" value="`+fila+`" name="idcambiar">
            <input type="hidden" value="File uploaded" name="nombre">
            <input type="file" accept=".jpg,.png" class="es-link" placeholder="file" name="file" style="padding-bottom: 10px;">
            <button type="submit" name="botonnuevo" class="btn btn-success waves-effect waves-light es-link" value="settingImg">Update</button>
        </form>
        `);
    }

</script>   