<div class="content-wrapper">
    <section class="content-header">
        <h1>Editar Rol</h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-10">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <strong><i class="fa fa-shield"></i> Actualizar rol</strong>
                    </div>
                    <div class="panel-body">

                        <?php echo validation_errors('<div class="alert alert-danger">', '</div>'); ?>

                        <form method="post" action="<?php echo base_url('index.php/seguridad/roles/update/'.$rol->id); ?>">

                            <!-- Nombre y Descripción -->
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Nombre del rol</label>
                                        <input type="text" name="nombre" class="form-control"
                                            value="<?php echo set_value('nombre', $rol->nombre); ?>" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Descripción</label>
                                        <input type="text" name="descripcion" class="form-control"
                                            value="<?php echo set_value('descripcion', $rol->descripcion); ?>">
                                    </div>
                                </div>
                            </div>

                            <!-- Permisos por módulo en pestañas -->
                            <div class="form-group">
                                <label><i class="fa fa-key"></i> Permisos</label>

                                <?php
                                // ---------------------------------------------------------
                                // Agrupar permisos: primero por modulo_id, luego por submenu
                                // ---------------------------------------------------------
                                $modulos_map = [
                                    0 => ['codigo' => 'SEG', 'descripcion' => 'SEGURIDAD'],
                                    1 => ['codigo' => 'MNT', 'descripcion' => 'MANTENIMIENTO'],
                                    2 => ['codigo' => 'ALM', 'descripcion' => 'ALMACÉN'],
                                    3 => ['codigo' => 'LOG', 'descripcion' => 'LOGÍSTICA'],
                                    4 => ['codigo' => 'RHM', 'descripcion' => 'RECURSOS HUMANOS'],
                                    5 => ['codigo' => 'VNT', 'descripcion' => 'VENTAS'],
                                    6 => ['codigo' => 'COB', 'descripcion' => 'COBRANZAS'],
                                    7 => ['codigo' => 'CNF', 'descripcion' => 'CONFIGURACIÓN'],
                                ];

                                // Íconos por módulo
                                $iconos_modulo = [
                                    0 => 'fa-shield',
                                    1 => 'fa-cogs',
                                    2 => 'fa-cubes',
                                    3 => 'fa-truck',
                                    4 => 'fa-users',
                                    5 => 'fa-shopping-cart',
                                    6 => 'fa-dollar',
                                    7 => 'fa-building',
                                ];

                                // Agrupar $permisos por modulo_id → submenu
                                $agrupado = [];
                                foreach ($permisos as $p) {
                                    $mid = (int)$p->modulo_id;
                                    $sub = !empty($p->submenu) ? $p->submenu : 'general';
                                    $agrupado[$mid][$sub][] = $p;
                                }
                                ksort($agrupado);

                                $tab_index = 0;
                                ?>

                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" id="tabsPermisos" style="margin-bottom:0;">
                                    <?php foreach ($agrupado as $mid => $subgrupos): ?>
                                        <?php
                                            $modulo_info = isset($modulos_map[$mid]) ? $modulos_map[$mid] : ['codigo' => 'MOD'.$mid, 'descripcion' => 'MÓDULO '.$mid];
                                            $icono = isset($iconos_modulo[$mid]) ? $iconos_modulo[$mid] : 'fa-circle';
                                            $tab_id = 'tab_mod_' . $mid;

                                            // Contar cuántos permisos de este módulo tiene el rol
                                            $total_mod = 0;
                                            $activos_mod = 0;
                                            foreach ($subgrupos as $sub => $items) {
                                                foreach ($items as $p) {
                                                    $total_mod++;
                                                    if (in_array($p->id, $permisosRol)) $activos_mod++;
                                                }
                                            }
                                        ?>
                                        <li class="<?php echo $tab_index === 0 ? 'active' : ''; ?>">
                                            <a href="#<?php echo $tab_id; ?>" data-toggle="tab" title="<?php echo $modulo_info['descripcion']; ?>">
                                                <i class="fa <?php echo $icono; ?>"></i>
                                                <?php echo $modulo_info['descripcion']; ?>
                                                <span class="badge" style="background:<?php echo $activos_mod > 0 ? '#f39c12' : '#aaa'; ?>">
                                                    <?php echo $activos_mod; ?>/<?php echo $total_mod; ?>
                                                </span>
                                            </a>
                                        </li>
                                        <?php $tab_index++; ?>
                                    <?php endforeach; ?>
                                </ul>

                                <!-- Tab content -->
                                <div class="tab-content" style="border:1px solid #ddd; border-top:none; padding:15px; background:#fff;">
                                    <?php
                                    $tab_index = 0;
                                    foreach ($agrupado as $mid => $subgrupos):
                                        $tab_id = 'tab_mod_' . $mid;
                                    ?>
                                    <div class="tab-pane <?php echo $tab_index === 0 ? 'active' : ''; ?>"
                                         id="<?php echo $tab_id; ?>">

                                        <!-- Botón seleccionar/deseleccionar todo el módulo -->
                                        <div style="margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #eee;">
                                            <button type="button" class="btn btn-xs btn-default btn-sel-todo"
                                                    data-modulo="<?php echo $mid; ?>">
                                                <i class="fa fa-check-square-o"></i> Seleccionar todo
                                            </button>
                                            <button type="button" class="btn btn-xs btn-default btn-desel-todo"
                                                    data-modulo="<?php echo $mid; ?>">
                                                <i class="fa fa-square-o"></i> Deseleccionar todo
                                            </button>
                                        </div>

                                        <?php foreach ($subgrupos as $submenu_nombre => $items): ?>
                                            <!-- Subgrupo (submenu) -->
                                            <div class="permiso-subgrupo" style="margin-bottom:14px;">
                                                <div style="background:#f5f5f5; padding:5px 10px; margin-bottom:6px;
                                                            border-left:3px solid #f39c12; font-weight:bold;
                                                            font-size:12px; text-transform:uppercase; color:#555;
                                                            display:flex; align-items:center; justify-content:space-between;">
                                                    <span><?php echo str_replace('_', ' ', $submenu_nombre); ?></span>
                                                    <span>
                                                        <button type="button" class="btn btn-xs btn-link btn-sel-sub" style="padding:0 4px;"
                                                                data-submenu="<?php echo $submenu_nombre; ?>">
                                                            Todo
                                                        </button>
                                                        <button type="button" class="btn btn-xs btn-link btn-desel-sub" style="padding:0 4px;"
                                                                data-submenu="<?php echo $submenu_nombre; ?>">
                                                            Ninguno
                                                        </button>
                                                    </span>
                                                </div>

                                                <div class="row" style="margin:0;">
                                                    <?php foreach ($items as $permiso): ?>
                                                        <div class="col-md-4 col-sm-6"
                                                             data-modulo="<?php echo $mid; ?>"
                                                             data-submenu="<?php echo $submenu_nombre; ?>">
                                                            <div class="checkbox" style="margin:3px 0;">
                                                                <label style="font-weight:normal; font-size:12px;">
                                                                    <input type="checkbox"
                                                                           name="permisos[]"
                                                                           value="<?php echo $permiso->id; ?>"
                                                                           <?php echo in_array($permiso->id, $permisosRol) ? 'checked' : ''; ?>>
                                                                    <?php echo $permiso->nombre; ?>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>

                                    </div><!-- /.tab-pane -->
                                    <?php $tab_index++; endforeach; ?>
                                </div><!-- /.tab-content -->

                            </div><!-- /.form-group permisos -->

                            <div style="margin-top:15px;">
                                <button type="submit" class="btn btn-warning">
                                    <i class="fa fa-save"></i> Actualizar
                                </button>
                                <a href="<?php echo base_url('index.php/seguridad/roles'); ?>" class="btn btn-default">
                                    <i class="fa fa-arrow-left"></i> Cancelar
                                </a>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
$(document).ready(function () {

    // Seleccionar todo el módulo
    $(document).on('click', '.btn-sel-todo', function () {
        var mid = $(this).data('modulo');
        $('[data-modulo="' + mid + '"] input[type="checkbox"]').prop('checked', true);
        actualizarBadge(mid);
    });

    // Deseleccionar todo el módulo
    $(document).on('click', '.btn-desel-todo', function () {
        var mid = $(this).data('modulo');
        $('[data-modulo="' + mid + '"] input[type="checkbox"]').prop('checked', false);
        actualizarBadge(mid);
    });

    // Seleccionar todo el subgrupo
    $(document).on('click', '.btn-sel-sub', function () {
        var sub = $(this).data('submenu');
        $('[data-submenu="' + sub + '"] input[type="checkbox"]').prop('checked', true);
        var mid = $('[data-submenu="' + sub + '"]').first().data('modulo');
        actualizarBadge(mid);
    });

    // Deseleccionar todo el subgrupo
    $(document).on('click', '.btn-desel-sub', function () {
        var sub = $(this).data('submenu');
        $('[data-submenu="' + sub + '"] input[type="checkbox"]').prop('checked', false);
        var mid = $('[data-submenu="' + sub + '"]').first().data('modulo');
        actualizarBadge(mid);
    });

    // Actualizar badge al hacer click en cualquier checkbox
    $(document).on('change', 'input[type="checkbox"][name="permisos[]"]', function () {
        var mid = $(this).closest('[data-modulo]').data('modulo');
        actualizarBadge(mid);
    });

    // Función para actualizar el badge del tab
    function actualizarBadge(mid) {
        var $checks  = $('[data-modulo="' + mid + '"] input[type="checkbox"]');
        var total    = $checks.length;
        var activos  = $checks.filter(':checked').length;
        var $badge   = $('#tab_mod_' + mid).prev().find('.badge, li.active .badge');

        // Buscar el badge en el tab correspondiente
        $('#tabsPermisos a[href="#tab_mod_' + mid + '"] .badge')
            .text(activos + '/' + total)
            .css('background', activos > 0 ? '#f39c12' : '#aaa');
    }

});
</script>