<?php include_once "./Configs.php"; ?>
<!DOCTYPE html>
<html lang="en">
<?php
$titulo="Products";    
include_once "./Head.php"; ?>
    <!-- body start AQUI va el theme mode-->
<?php 
if($usuario["layout"] == 'horizontal'){
?>    
    <body class="loading" data-layout-mode="horizontal" data-layout='{"mode": "<?php echo $usuario["theme"]; ?>", "width": "fluid", "menuPosition": "fixed", "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": false}'>    
<?php 
}else{
?>    
    <body class="loading" data-layout='{"mode": "<?php echo $usuario["theme"]; ?>", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "<?php echo $usuario["theme"]; ?>", "size": "default", "showuser": true}, "topbar": {"color": "light"}, "showRightSidebarOnPageLoad": true}'>
<?php 
}
?>    
        <div id="wrapper">
<?php  include_once "./Header.php"; ?>
<?php  include_once "./Menu.php"; ?>
            <div class="content-page">
                <div class="content">

                    <!-- Start Content-->
                    <div class="container-fluid">

                        <!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box page-title-box-alt">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Adminto</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li>
                    <li class="breadcrumb-item active">Editable</li>
                </ol>
            </div>
            <h4 class="page-title"><?php echo $titulo; ?></h4>
        </div>
    </div>
</div>     
<!-- end page title --> 
                        
                                                                  
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <?php if(isset($_GET['search']) ){?><h4>(filter for single item is active, to view all go to this tab via the menu)</h4><?php }?>        
                                        <p class="sub-header">Inline edit like a spreadsheet, just click the cell, type and click somewhere else or press enter.</p>
                                        <p><?php if(isset($warning) ){echo $warning;} ?></p>                                        
                                        <style>/**/.table-responsive .row { width: 99% !important; }
                                            select, input{min-width:150px !important;}</style>
                                        <div class="table-responsive">
                                        <!--<table id="selection-datatable" class="table table-bordered dt-responsive nowrap tabla-ajax" pagina="product-view.php">-->
                                        <!--<table id="datatable-buttons" class="table table-centered mb-0 tabla-ajax" pagina="product-view.php">Con botones de copy y PDF...-->
                                            <table id="" class="table table-bordered table-bordered dt-responsive nowrap tabla-ajax" pagina="product-view.php">                                            
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Delete</th>                                                        <th>Name</th>
                                                        <th>Description</th>
                                                        <th>Category</th>
                                                        <th>Sub category</th>
                                                        <th>Sub-sub category</th>
                                                        <th>Manufacturer</th>
                                                        <th>Taxless price</th>
                                                        <th>Discount</th>
                                                        <th>File</th>
                                                        <th>Attributes</th>
                                                    </tr>
                                                </thead>
                                            
                                                <tbody>
    <?php echo tablaBDD("amr_products"); ?>
                                                </tbody>
                                            </table>
    <script>jQuery(document).ready(function ($) { 
        /*Reemplaza textos por selects /**/
        selectsCategos();
        $('td[columna=categoria1] select').on('change', function() {
            //resetea hijos
            let key=$(this).closest(".tabla-ajax").attr("pagina");
            let fila=$(this).attr("fila"); 
            let columna="categoria2"; 
            let valor="";
            //alert("reset de "+key+columna+fila+valor);
            AjaxGuardar(key,columna,fila,valor);
            columna="categoria3"; 
            AjaxGuardar(key,columna,fila,valor);
            
            window.location.replace("./product-view.php");
            
            //rehacer select hijo, no lo logre haer funcionar aun, el refresh mejor...
            let padre=$(this).val();//nivel
            $("td[columna=categoria2][fila="+fila+"]").attr("padre",padre);//padre del siguiente    
            $("td[columna=categoria3][fila="+fila+"]").attr("padre","6.66");//padre del nieto    
            
            let select = `<select class="form-select" fila="`+fila+`" columna="`+columna+`">
            <option disabled selected>----</option>
            `;
            $("td[columna=categoria3][fila="+fila+"]").html(select+'</select>');
            
            <?php echo categosJS(); ?>
            for (var i = 0,  l1 = categos.length; i < l1; i++) {
                if(categos[i][0]*1===padre*1){
                    select += '<option value="'+categos[i][2]+'" ';
                    select += '>'+categos[i][1]+'</option>';
                }
            }
            select += '</select>';
            $("td[columna=categoria2][fila="+fila+"]").html(select);
        });
        $('td[columna=categoria2] select').on('change', function() {
            //resetea hijos
            let key=$(this).closest(".tabla-ajax").attr("pagina");
            let fila=$(this).attr("fila"); 
            let columna="categoria3"; 
            let valor="";
            //alert("reset de "+key+columna+fila+valor);
            AjaxGuardar(key,columna,fila,valor);
            window.location.replace("./product-view.php");
            
            //rehacer select hijo, no lo logre haer funcionar aun, el refresh mejor...
            let padre=$(this).val();//nivel
            $("td[columna="+columna+"][fila="+fila+"]").attr("padre",padre);//padre del siguiente    
            
            let select = `<select class="form-select" fila="`+fila+`" columna="`+columna+`">
            <option disabled selected>----</option>
            `;
            <?php echo categosJS(); ?>
            for (var i = 0,  l1 = categos.length; i < l1; i++) {
                if(categos[i][0]*1===padre*1){
                    select += '<option value="'+categos[i][2]+'" ';
                    select += '>'+categos[i][1]+'</option>';
                }
            }
            select += '</select>';
            $("td[columna="+columna+"][fila="+fila+"]").html(select);
        });
            
        function selectsCategos(){
        <?php echo categosJS(); ?>
        $("td[columna=categoria1]").each(function() {//o p o span etc...
            let valor = $(this).html();
  //          if(valor.substr(0,7) == "<select"){valor=$(this).children().val();}
            let fila = $(this).attr("fila");
            let columna = $(this).attr("columna");

            let padre=0;//nivel
            $("td[columna=categoria2][fila="+fila+"]").attr("padre",'66.6');//padre del siguiente    
            
            let select = `<select class="form-select" fila="`+fila+`" columna="`+columna+`">
            <option disabled selected>----</option>
            `;
            for (var i = 0,  l1 = categos.length; i < l1; i++) {
                if(categos[i][0]*1===padre*1){
                    select += '<option value="'+categos[i][2]+'" ';
                    if(categos[i][2]*1===valor*1){
                        select += 'selected';
                        $("td[columna=categoria2][fila="+fila+"]").attr("padre",categos[i][2]);//padre del siguiente    
                    }
                    select += '>'+categos[i][1]+'</option>';
                }
            }
            select += '</select>';
            $(this).html(select);
        });
        $("td[columna=categoria2]").each(function() {//o p o span etc...
            let valor = $(this).html();
//            if(valor.substr(0,7) == "<select"){valor=$(this).children().val();}
            //alert(valor);
            let fila = $(this).attr("fila");
            let columna = $(this).attr("columna");
            let padre=$(this).attr("padre");
            $("td[columna=categoria3][fila="+fila+"]").attr("padre",'66.6');//padre del siguiente    
            
            let select = `<select class="form-select" fila="`+fila+`" columna="`+columna+`">
            <option disabled selected>----</option>
            `;
            for (var i = 0,  l1 = categos.length; i < l1; i++) {
                if(categos[i][0]*1===padre*1){
                    select += '<option value="'+categos[i][2]+'" ';
                    if(categos[i][2]==valor*1){
                        select += 'selected';
                        $("td[columna=categoria3][fila="+fila+"]").attr("padre",categos[i][2]);//padre del siguiente                    
                    }
                    select += '>'+categos[i][1]+'</option>';
                }
            }
            select += '</select>';
            $(this).html(select);
        });
        $("td[columna=categoria3]").each(function() {//o p o span etc...
            let valor = $(this).html();
//            if(valor.substr(0,7) == "<select"){valor=$(this).children().val();}
            let fila = $(this).attr("fila");
            let columna = $(this).attr("columna");
            let padre=$(this).attr("padre");
            
            let select = `<select class="form-select" fila="`+fila+`" columna="`+columna+`">
            <option disabled selected>----</option>
            `;
            for (var i = 0,  l1 = categos.length; i < l1; i++) {
                if(categos[i][0]*1===padre*1){
                    select += '<option value="'+categos[i][2]+'" ';
                    if(categos[i][2]*1==valor*1){
                        select += 'selected';
                    }
                    select += '>'+categos[i][1]+'</option>';
                }
            }
            select += '</select>';
            $(this).html(select);
        });            
        }
            
        function AjaxGuardar(key,columna,fila,valor){//guarda los valores
        $.post("./Configs.php", {
            key: key,
            columna: columna,
            fila: fila,
            valor: valor
        }, function(data, status) {
            //$("#feedbackAjax").html("salvar "+data);
            //alert("el status es: "+status);
        });
    }

        selectsFabricante();
        function selectsFabricante(){
            <?php echo fabricanteJS(); ?>
            $("td[columna=fabricante]").each(function() {//o p o span etc...
                let valor = $(this).html();
      //          if(valor.substr(0,7) == "<select"){valor=$(this).children().val();}
                let fila = $(this).attr("fila");
                let columna = $(this).attr("columna");

                let select = `<select class="form-select" fila="`+fila+`" columna="`+columna+`">
                <option disabled selected>----</option>
                `;
                for (var i = 0,  l1 = fabricante.length; i < l1; i++) {
                        select += '<option value="'+fabricante[i][0]+'" ';
                        if(fabricante[i][0]*1===valor*1){
                            select += 'selected';
                        }
                        select += '>'+fabricante[i][1]+'</option>';
                }
                select += '</select>';
                $(this).html(select);
            });
        }
            
        //al hacer click en el input o que haya un boton de editar...
        
    });</script>
                                        </div> <!-- end .table-responsive-->
                                    </div> <!-- end card-body -->
                                </div> <!-- end card -->
                            </div> <!-- end col -->
                        </div> <!-- end row -->

                                
                    </div> <!-- container -->

                </div> <!-- content -->
<?php  include_once "./Footer.php"; ?>
        <!-- Table Editable plugin-->
        <script src="./assets/libs/jquery-tabledit/jquery.tabledit.min.js"></script>
        <!-- Table editable init-->
        <!--<script src="./assets/js/pages/tabledit.init.js"></script>-->


        <!-- third party js - Para las tablas que hacen el PDF-->
        <script src="./assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
        <script src="./assets/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
        <script src="./assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
        <script src="./assets/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
        <script src="./assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
        <script src="./assets/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
        <script src="./assets/libs/datatables.net-buttons/js/buttons.html5.min.js"></script>
        <script src="./assets/libs/datatables.net-buttons/js/buttons.flash.min.js"></script>
        <script src="./assets/libs/datatables.net-buttons/js/buttons.print.min.js"></script>
        <script src="./assets/libs/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
        <script src="./assets/libs/datatables.net-select/js/dataTables.select.min.js"></script>
        <script src="./assets/libs/pdfmake/build/pdfmake.min.js"></script>
        <script src="./assets/libs/pdfmake/build/vfs_fonts.js"></script>
        <!-- third party js ends -->

        <!-- Datatables init -->
        <script src="./assets/js/pages/datatables.init.js"></script>
                
            </div>
        </div>        
    </body>
</html>