Guardar cambios consolidar grupos docentes y clave de grupo

resources/views/livewire/grupo-docente.blade.php

@@ -53,14 +53,17 @@
     </div>
 
     {{-- Tabla docentes asignados --}}
-    <table id="tcont" class="table table-striped table-bordered table-hover" style="width:100%;">
+        <table id="tcont2" class="table table-striped table-bordered table-hover" style="width:100%;">
             <thead>
                 <tr>
                     <th>Id</th>
                     <th>Materia</th>
                     <th>Ciclo</th>
                     <th>Docente asignado</th>
+                    @hasrole('Coordinación académica')
                     <th>Opciones</th>
+                                @endhasrole
+
                 </tr>
             </thead>
             <tbody>
@@ -80,26 +83,110 @@
                                 <span class="badge badge-secondary">Sin docente</span>
                             @endif
                         </td>
-                        <td>
-                            @if($docenteAsignado)
-                                @can('grupo.destroy')
-                                <button wire:click="eliminar({{ $docenteAsignado->id }})"
-                                    style="border:none; background:none;">
-                                    <i class="fa-solid fa-circle-xmark fa-xl" style="color:#e66565;"></i>
-                                </button>
-                                @endcan
-                            @endif
-                        </td>
+
+
+                                @hasrole('Coordinación académica')
+                                <td>
+                                    @if($docenteAsignado)
+                                    <button
+                                        onclick="confirmarEliminar({{ $docenteAsignado->id }}, {{ $materia->id }}, '{{ $usr?->name }} {{ $usr?->apellidoPaterno }}', '{{ $materia->name }}')"
+                                        style="border:none; background:none;">
+                                        <i class="fa-regular fa-circle-user-circle-minus fa-2xl" style="color: rgb(255, 0, 0);"></i>
+                                    </button>
+                                    @endif
+                            </td>
+
+                                @endhasrole
+
                     </tr>
                 @empty
-                    <tr><td colspan="5">Sin materias en este plan.</td></tr>
+                    <tr>Sin materias en este plan.</tr>
                 @endforelse
             </tbody>
     </table>
+
 </div>
 
+
 @push('scripts')
 <script>
+
+
+document.addEventListener('DOMContentLoaded', initTable);
+
+document.addEventListener('livewire:init', () => {
+    // ✅ Este hook es el correcto para Livewire v3
+    Livewire.hook('commit', ({ component, succeed }) => {
+        succeed(() => {
+            setTimeout(() => initTable(), 50);
+        });
+    });
+});
+
+    function confirmarEliminar(docenteId, materiaId, nombreDocente, nombreMateria) {
+        Swal.fire({
+            title: "¿Eliminar docente?",
+            html: `¿Deseas quitar a <b>${nombreDocente}</b> de <b>${nombreMateria}</b>?`,
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonText: "Sí, eliminar",
+            cancelButtonText: "Cancelar",
+            confirmButtonColor: '#e74a3b',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                @this.eliminar(docenteId, materiaId);
+            }
+        });
+    }
+
+    function initTable() {
+    // ✅ Destroy correcto
+    if ($.fn.DataTable.isDataTable('#tcont2')) {
+        $('#tcont2').DataTable().destroy();
+        $('#tcont2').empty(); // limpia el DOM completamente
+    }
+
+    new DataTable('#tcont2', {
+        retrieve: true, // ✅ evita el error de reinicialización
+        responsive: true,
+        order: [],
+        language: {
+            "decimal": "",
+            "emptyTable": "No hay información",
+            "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
+            "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
+            "infoFiltered": "(Filtrado de _MAX_ total entradas)",
+            "infoPostFix": "",
+            "thousands": ",",
+            "lengthMenu": "Mostrar _MENU_ Entradas",
+            "loadingRecords": "Cargando...",
+            "processing": "Procesando...",
+            "search": "Buscar:",
+            "zeroRecords": "Sin resultados encontrados"
+        },
+        lengthMenu: [
+            [10, 25, 50, -1],
+            ['10 filas', '25 filas', '50 filas', 'Todos']
+        ],
+        layout: {
+            topStart: {
+                buttons: ['colvis', 'pageLength']
+            },
+            topEnd: ['search'],
+            bottomStart: [{
+                buttons: [
+                    { extend: 'excel', title: 'Excel' },
+                    { extend: 'pdfHtml5', title: 'PDF' },
+                    { extend: 'print' }
+                ]
+            }, 'info'],
+        }
+    });
+
+    $("#tcont2_wrapper").removeClass("form-inline");
+    $("#tcont2_wrapper").addClass("w-100");
+}
+
     document.addEventListener('livewire:init', () => {
         Livewire.on('open-modal-docente', () => {
             $('#modalDocente').modal('show');
@@ -108,7 +195,5 @@
             $('#modalDocente').modal('hide');
         });
     });
-
-
 </script>
 @endpush