<?php require_once ("includes/topo.php");  ?>

<div class="content-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12">
                <div class="row">
                    
                
                <div class="col-lg-12">
                    
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Menus</h4>
                                <a href="menu_add.php" class="btn btn-primary btn-sm">Adicionar Menu</a>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-responsive-md" id="tabela-menus">
                                        <thead>
                                            <tr>
                                                <th style="width:50px;">
													<div class="form-check custom-checkbox checkbox-success check-lg me-3">
														<input type="checkbox" class="form-check-input" id="checkAll" required="">
														<label class="form-check-label" for="checkAll"></label>
													</div>
												</th>
                                                <th><strong></strong></th>
                                                <th><strong>ID</strong></th>
                                                <th><strong>Menu PAI</strong></th>
                                                <th><strong>Link</strong></th>
                                                <th><strong>Status</strong></th>
                                                <th><strong></strong></th>
                                            </tr>
                                        </thead>
                                        <tbody>


                                            <?php
                                            //MENUS
                                            $query = $pdo->query("SELECT * FROM menus order by ordem asc");
                                            $menusPai = $query->fetchAll(PDO::FETCH_ASSOC);
                                            for($i=0; $i < @count($menusPai); $i++){
                                                foreach ($menusPai[$i] as $key => $value){}

                                            ?>
                                            <tr class="draggable" data-menu-id="<?php echo $menusPai[$i]['id'] ?>">
                                                <td>
                                                    <i class="fas fa-grip-horizontal"></i>
												</td>
                                                <td> - </td>
                                                <td><strong><?php echo $menusPai[$i]['id'] ?></strong></td>
                                                <td>
													<div class="d-flex align-items-center">
                                                        <a href="menu_update.php?id=<?php echo $menusPai[$i]['id'] ?>">
                                                            <span class="w-space-no"><?php echo $menusPai[$i]['nome'] ?></span>
                                                        </a>
													</div>
												</td>
                                                <td><?php echo $menusPai[$i]['link'] ?></td>
                                                <td><?php echo $menusPai[$i]['ordem'] ?></td>
                                                <td>
													<div class="d-flex">
														<a href="menu_update.php?id=<?php echo $menusPai[$i]['id'] ?>" class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>
													</div>
												</td>
                                            </tr>
                                            <?php } ?>


											
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    
                    
                    
                    
                </div>
            </div>
            
        </div>
    </div>
</div>

<?php require_once ("includes/rodape.php"); ?>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- Script para tornar a tabela ordenável -->
<!-- Script para tornar as linhas da tabela ordenáveis -->
<script>
    $(document).ready(function() {
        // Aplicar o plugin sortable apenas às linhas da tabela
        $("#tabela-menus tbody").sortable({
            axis: "y", // Permita apenas o arrasto vertical
            cursor: "move", // Altere o cursor para indicar que as linhas são arrastáveis
            opacity: 0.5, // Opacidade enquanto está sendo arrastado (opcional)
            handle: ".fa-grip-horizontal", // Especifica o elemento de alça de arrastar
            update: function(event, ui) {
                // Quando a ordem é atualizada
                var menuIds = [];
                $("#tabela-menus tbody tr").each(function() {
                    var menuId = $(this).data("menu-id");
                    menuIds.push(menuId);
                });

                // Enviar os dados para atualizar a ordem no servidor usando AJAX
                $.ajax({
                    url: "includes/atualizar_ordem_menu.php",
                    method: "POST",
                    data: {
                        menuIds: menuIds
                    },
                    success: function(response) {
                        // Tratar a resposta do servidor, se necessário
                    }
                });
            }
        });
    });
</script>




<?php if(!empty($_GET['adicionado']) == "ok" ) { ?>           		
<script>
	window.onload = function() {
		swal({
			title: 'Sucesso',
			text: ("Página criada com sucesso!"),
			type: 'success',
			confirmButtonText: 'Fechar'
		})
	};
</script>
<?php } ?>

<?php if(!empty($_GET['apagou']) == "ok" ) { ?>           		
<script>
	window.onload = function() {
		swal({
			title: 'Apagado!',
			text: ("Serviço apagado com sucesso!"),
			type: 'success',
			confirmButtonText: 'Fechar'
		})
	};
</script>
<?php } ?>