<div class="wide-xl mx-auto">
    <!-- Header @s -->
    <div class="nk-block-head nk-block-head-lg">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h3 class="nk-block-title page-title">Usuarios</h3>
                <div class="nk-block-des text-soft">
                    <nav>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"><?= APP_NAME ?></a></li>
                            <li class="breadcrumb-item"><a href="#">Configuración</a></li>
                            <li class="breadcrumb-item active">Usuarios</li>
                        </ul>
                    </nav>
                </div>
            </div><!-- .nk-block-head-content -->
        </div><!-- .nk-block-between -->
    </div><!-- .nk-block-head -->
    <!-- Header @e -->

    <!-- Body @s -->
    <div class="nk-block nk-block-lg">
        <div class="card">
            <div class="card-inner">
                <!-- @s -->
                <table class="nowrap table" id="table-config-users" data-export-title="Acciones"></table>
                <!-- @e -->
            </div>
        </div>
    </div>
    <!-- Body @e -->
</div>

<!-- Modal @s -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="userModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <form id="userForm">
                <div class="modal-header">
                    <h5 class="modal-title">Actualizar usuario</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="user_id">
                    <!-- Tabs -->
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a href="#user-info" class="nav-link active" data-bs-toggle="tab">Información</a>
                        </li>
                        <li class="nav-item">
                            <a href="#user-permissions" class="nav-link" data-bs-toggle="tab">Permisos Específicos</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <!-- Tab 1: Información -->
                        <div class="tab-pane active" id="user-info">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Nombre</label>
                                    <input type="text" name="name" id="name" class="form-control"
                                           autocomplete="given-name">
                                </div>
                                <div class="col-md-6">
                                    <label for="lastname" class="form-label">Apellido(s)</label>
                                    <input type="text" name="lastname" id="lastname" class="form-control"
                                           autocomplete="additional-name">
                                </div>
                                <div class="col-md-12">
                                    <label for="email" class="form-label">Correo</label>
                                    <input type="email" name="email" id="email" class="form-control"
                                           autocomplete="email">
                                </div>
                                <div class="col-md-12">
                                    <label for="phone" class="form-label">Teléfono</label>
                                    <div class="form-control-wrap">
                                        <div class="input-group">
                                            <input aria-labelledby="phone" type="tel" name="country_code" class="form-control" autocomplete="tel-country-code" value="52">
                                            <input aria-labelledby="phone" type="tel" name="telephone_number" id="phone" class="form-control" autocomplete="tel-national">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <label for="profile" class="form-label">Perfil</label>
                                    <select name="profile" id="profile" class="form-select"></select>
                                </div>
                            </div>
                        </div>

                        <!-- Tab 2: Permisos Específicos -->
                        <div class="tab-pane" id="user-permissions">
                            <div class="alert alert-info">
                                <i class="fe fe-info me-2"></i>
                                <strong>Información:</strong> Los permisos específicos sobrescriben los permisos del
                                perfil asignado.
                                Si no configura permisos específicos, el usuario heredará los permisos de su perfil.
                            </div>

                            <div class="form-check mb-3">
                                <input type="checkbox" class="form-check-input" id="hasCustomACL" name="hasCustomACL">
                                <label class="form-check-label" for="hasCustomACL">
                                    <strong>Este usuario tiene permisos personalizados</strong>
                                </label>
                            </div>

                            <div id="custom-acl-container" style="display: none;">

                                <div class="border" style="max-height: 500px; overflow-y: auto;">
                                    <ul class="demo-accordion accordionjs m-0" data-bs-active-index="false">
                                        <?php foreach ($_groups as $group): ?>
                                            <li>
                                                <div><h3><?= $group['title'] ?></h3></div>
                                                <div>
                                                    <div class="table-responsive-xl">
                                                        <table class="table">
                                                            <thead>
                                                            <tr>
                                                                <th>Nombre</th>
                                                                <th>Módulo</th>
                                                                <th>Acciones</th>
                                                                <th>Estado</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <?php foreach ($group['menu'] as $group_item): ?>
                                                                <?php if (isset($group_item['module'])): ?>

                                                                    <?php foreach ($group_item['module'] as $module_item): ?>
                                                                        <tr>
                                                                            <td><?= $module_item['folder']['name'] ?></td><!-- Nombre -->
                                                                            <td>
                                                                                <em class="<?= $group_item['icon'] ?>"></em> <?= $group_item['name'] ?>
                                                                            </td><!-- Modulo -->
                                                                            <td>
                                                                                <div class="btn-group" role="group" aria-label="<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>">
                                                                                    <input type="checkbox" class="btn-check" name="<?= $module_item['folder']['folder'] ?>" id="all_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>" autocomplete="off">
                                                                                    <label class="btn btn-outline-primary" for="all_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>">Todo</label>

                                                                                    <input type="checkbox" class="btn-check" name="acl[<?= $group['id'] ?>][<?= $module_item['folder']['folder'] ?>][]" id="read_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>" autocomplete="off" value="read">
                                                                                    <label class="btn btn-outline-primary" for="read_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>">Leer</label>

                                                                                    <input type="checkbox" class="btn-check" name="acl[<?= $group['id'] ?>][<?= $module_item['folder']['folder'] ?>][]" id="create_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>" autocomplete="off" value="create">
                                                                                    <label class="btn btn-outline-primary" for="create_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>">Guardar</label>

                                                                                    <input type="checkbox" class="btn-check" name="acl[<?= $group['id'] ?>][<?= $module_item['folder']['folder'] ?>][]" id="delete_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>" autocomplete="off" value="delete">
                                                                                    <label class="btn btn-outline-primary" for="delete_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>">Eliminar</label>

                                                                                    <input type="checkbox" class="btn-check" name="acl[<?= $group['id'] ?>][<?= $module_item['folder']['folder'] ?>][]" id="update_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>" autocomplete="off" value="update">
                                                                                    <label class="btn btn-outline-primary" for="update_<?= $module_item['folder']['folder'] ?>_<?= $group['id'] ?>">Actualizar</label>
                                                                                </div>
                                                                            </td><!-- Acciones -->
                                                                            <td>
                                                                                <span class="badge bg-success permission-status" data-module="<?= $module_item['folder']['folder'] ?>" data-group="<?= $group['id'] ?>">
                                                                                    Heredado
                                                                                </span>
                                                                            </td><!-- Estado -->
                                                                        </tr>
                                                                    <?php endforeach; ?>

                                                                <?php else: ?>
                                                                    <tr>
                                                                        <td><?= $group_item['name'] ?></td><!-- Nombre -->
                                                                        <td>
                                                                            <em class="icon <?= $group_item['icon'] ?>"></em> <?= $group_item['name'] ?>
                                                                        </td><!-- Módulo -->
                                                                        <td>
                                                                            <div class="btn-group" role="group" aria-label="<?= $group_item['folder'] ?>_<?= $group['id'] ?>">
                                                                                <input type="checkbox" class="btn-check"
                                                                                       name="<?= $group_item['folder'] ?>"
                                                                                       id="all_<?= $group_item['folder'] ?>_<?= $group['id'] ?>"
                                                                                       autocomplete="off">
                                                                                <label class="btn btn-outline-primary"
                                                                                       for="all_<?= $group_item['folder'] ?>_<?= $group['id'] ?>">Todo</label>

                                                                                <input type="checkbox" class="btn-check"
                                                                                       name="acl[<?= $group['id'] ?>][<?= $group_item['folder'] ?>][]"
                                                                                       id="read_<?= $group_item['folder'] ?>_<?= $group['id'] ?>"
                                                                                       autocomplete="off" value="read">
                                                                                <label class="btn btn-outline-primary"
                                                                                       for="read_<?= $group_item['folder'] ?>_<?= $group['id'] ?>">Leer</label>

                                                                                <input type="checkbox" class="btn-check"
                                                                                       name="acl[<?= $group['id'] ?>][<?= $group_item['folder'] ?>][]"
                                                                                       id="create_<?= $group_item['folder'] ?>_<?= $group['id'] ?>"
                                                                                       autocomplete="off"
                                                                                       value="create">
                                                                                <label class="btn btn-outline-primary"
                                                                                       for="create_<?= $group_item['folder'] ?>_<?= $group['id'] ?>">Guardar</label>

                                                                                <input type="checkbox" class="btn-check"
                                                                                       name="acl[<?= $group['id'] ?>][<?= $group_item['folder'] ?>][]"
                                                                                       id="delete_<?= $group_item['folder'] ?>_<?= $group['id'] ?>"
                                                                                       autocomplete="off"
                                                                                       value="delete">
                                                                                <label class="btn btn-outline-primary"
                                                                                       for="delete_<?= $group_item['folder'] ?>_<?= $group['id'] ?>">Eliminar</label>

                                                                                <input type="checkbox" class="btn-check"
                                                                                       name="acl[<?= $group['id'] ?>][<?= $group_item['folder'] ?>][]"
                                                                                       id="update_<?= $group_item['folder'] ?>_<?= $group['id'] ?>"
                                                                                       autocomplete="off"
                                                                                       value="update">
                                                                                <label class="btn btn-outline-primary"
                                                                                       for="update_<?= $group_item['folder'] ?>_<?= $group['id'] ?>">Actualizar</label>
                                                                            </div>
                                                                        </td><!-- Acciones -->
                                                                        <td>
                                                                            <span class="badge bg-success permission-status" data-module="<?= $group_item['folder'] ?>" data-group="<?= $group['id'] ?>">
                                                                                Heredado
                                                                            </span>
                                                                        </td><!-- Estado -->
                                                                    </tr>
                                                                <?php endif; ?>
                                                            <?php endforeach; ?>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </li>
                                        <?php endforeach; ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dim btn-outline-danger" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-dim btn-outline-success" data-modal-action="submit">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal @e -->

<!-- Modal @s -->
<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="filterModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Filtro Avanzado</h6>
                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name" class="form-label">Nombre</label>
                                <input type="text" name="name" id="name" class="form-control datatable-input" data-col-index="0" data-es-field="name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email" class="form-label">Correo</label>
                                <input type="email" name="email" id="email" class="form-control datatable-input" data-col-index="1" data-es-field="email">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="status" class="form-label">Estatus</label>
                                <select class="form-control form-select datatable-input select2" data-bs-placeholder="Select" name="status" id="status" data-col-index="5" data-es-field="status">
                                    <option label="Seleccione"></option>
                                    <option value="active">Activo</option>
                                    <option value="inactive">Inactivo</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="profile" class="form-label">Perfil</label>
                                <select class="form-control form-select datatable-input select2" data-bs-placeholder="Select" id="profile" data-col-index="3" data-es-field="profile.keyword">
                                    <option label="Seleccione"></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="timestamp" class="form-label">Fecha de Registro</label>
                                <input type="date" name="timestamp" id="timestamp" class="form-control datatable-input" data-col-index="4" data-es-field="timestamp">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-modal-action="filter">
                    <i class="fa fa-filter me-2" aria-hidden="true"></i>Filtrar
                </button>
                <button class="btn btn-danger" onclick="Users.filterReset()">
                    Restablecer
                </button>
                <button class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal @e -->