<?php include_once "./Configs.php"; ?>
<!DOCTYPE html>
<html lang="en">
<?php
$titulo="Projects";    
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">
<!--inicia contenido-->
                <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);">Pages</a></li>
                    <li class="breadcrumb-item active">Project</li>
                </ol>
            </div>
                    <h4 class="page-title"><?php echo $titulo;?></h4>
                    <p><?php if(isset($warning) ){echo $warning;} ?></p>                                        
        </div>
    </div>
</div>     
<!-- end page title --> 

                        
                        <div class="row">
                            <div class="col-sm-4">
                                <a href="./project-new.php" class="btn btn-purple rounded-pill w-md waves-effect waves-light mb-3"><i class="mdi mdi-plus"></i> Create Project</a>
                            </div>
                            <div class="col-sm-8">
                                <div class="float-end">
                                    <div class="row g-2 align-items-center mb-2 mb-sm-0">
                                            <div class="col-auto">
                                                <div class="d-flex">
                                                    <label class="d-flex align-items-center">Phase
                                                        <select name="fase" class="form-select form-select-sm d-inline-block ms-2">
                                                            <option value="All" selected>All Projects</option>
                                                            <option value="Completed">Completed</option>
                                                            <option value="In progress">In progress</option>
                                                            <option value="Draft">Draft</option>
                                                            <option value="Cancelled">Cancelled</option>
                                                        </select>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-auto">
                                                <div class="d-flex">
                                                    <label class="d-flex align-items-center">Sort
                                                        <select name="ordenar" class="form-select form-select-sm d-inline-block ms-2">
                                                            <option disabled selected>Choose one</option>
                                                            <option value="nombre">Name</option>
                                                            <option value="fase">Status</option>
                                                            <option value="last">Last update</option>
                                                        </select>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div><!-- end col-->
                        </div>
                        <!-- end row -->


                        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th colspan="2">#</th>
                                        <th>Last update</th>
                                        <th>Project Name</th>
                                        <th style="width:250px;">Description</th>
                                        <th>Status</th>
                                        <th>Assigned</th>
                                    </tr>
                                </thead>
                                <tbody class="proyectos">
                                    <?php echo tablaBDD("amr_projects"); ?>                                    
                                </tbody>
                            </table>
    <script>jQuery(document).ready(function ($) { 
        /*Filtrar por fase */
        $('select[name=fase]').on('change', function() {
            $(".proyectos tr").hide();
            let filtro=$(this).val();
            if(filtro=="All"){
                $(".proyectos tr").show();                
            }else{
                $("tr[fase='"+filtro+"']").show();                
            }
        });
        $('select[name=ordenar]').on('change', function() {
            let attr=$(this).val();
            let asc=1;//si es -1 es desc, 1 asc
            if(attr == 'last'){asc=-1;}
            var tb = $('tbody.proyectos');
            var rows = tb.find('tr');
            rows.sort(function(a, b) {
                var keyA = $(a).attr(attr);
                var keyB = $(b).attr(attr);
                if (keyA < keyB) return -1*asc;
                if (keyA > keyB) return 1*asc;//asi es asc o voteas los 1 y -1
                return 0;
            });
            $.each(rows, function(index, row) {
                tb.append(row);
            });
        });
    });</script>                            
                        </div>
                    </div>
                </div>

            </div><!-- end col -->
                        </div>
                        <!-- end row -->

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

                </div> <!-- content -->
<!--termina contenido--> 
<?php  include_once "./Footer.php"; ?>
            </div>
        </div>        
    </body>
</html>