<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">Configuración</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">Módulos</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 card-bordered card-preview">
            <div class="card-inner">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a href="#tab1" class="nav-link active" data-bs-toggle="tab">Módulos</a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab2" class="nav-link" data-bs-toggle="tab">Menu desplegable</a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab3" class="nav-link" data-bs-toggle="tab">Menu simple</a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab4" class="nav-link" data-bs-toggle="tab">Grupos</a>
                    </li>
                    <li class="nav-item">
                        <a href="#tab5" class="nav-link" data-bs-toggle="tab">Vista Previa</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <table class="nowrap table" id="table-config-modules"></table>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <table class="nowrap table" id="table-config-menu-desplegable" data-export-title="Acciones"></table>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <table class="nowrap table" id="table-config-menu-simple" data-export-title="Acciones"></table>
                    </div>
                    <div class="tab-pane" id="tab4">
                        <table class="nowrap table" id="table-config-groups" data-export-title="Acciones"></table>
                    </div>
                    <div class="tab-pane" id="tab5">

                        <div>
                            <label for="" class="form-label">Módulos y Submódulos (ACL)</label>
                            <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 scope="col">Nombre</th>
                                                            <th scope="col">Modulo</th>
                                                            <th scope="col">Acciones</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): ?>
                                                                    <p class=""></p>
                                                                    <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="<?= $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 -->
                                                                    </tr>
                                                                <?php endforeach; ?>

                                                            <?php else: ?>
                                                                <tr>
                                                                    <td><?= $group_item['name'] ?></td>
                                                                    <!-- Nombre -->
                                                                    <td>
                                                                        <em class="<?= $group_item['icon'] ?>"></em> <?= $group_item['name'] ?>
                                                                    </td><!-- Modulo -->
                                                                    <td>
                                                                        <div class="btn-group" role="group"
                                                                             aria-label="<?= $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 -->
                                                                </tr>
                                                            <?php endif; ?>
                                                        <?php endforeach; ?>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Body @e -->
</div>

<!-- Módulos @s -->
<div class="modal fade" id="moduleModal" aria-hidden="true" aria-labelledby="moduleModalLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="moduleModalLabel">Registrar Módulo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <form id="moduleForm">
                    <input type="hidden" name="module_id">
                    <div class="form-group">
                        <label for="name" class="form-label">Nombre:<em class="text-danger">*</em></label>
                        <input type="text" name="name" id="name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="directory" class="form-label">Directorio:</label>
                        <input type="text" name="directory" id="directory" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label for="file" class="form-label">Archivo:</label>
                        <input type="text" name="file" id="file" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label for="folder" class="form-label">URI:</label>
                        <input type="text" name="folder" id="folder" class="form-control" readonly>
                    </div>
                    <div class="form-group mb-0">
                        <label for="description" class="form-label">Descripción:</label>
                        <textarea name="description" id="description" class="form-control"></textarea>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-outline-success" data-modal-action="submit">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- Menu desplegable @s -->
<div class="modal fade" id="dropdownMenuModal" aria-hidden="true" aria-labelledby="dropdownMenuModalLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dropdownMenuModalLabel">Registrar Menu desplegable</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="dropdownMenuForm">
                    <input type="hidden" name="dropdown_menu_id">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="name" class="form-label">Nombre:<em class="text-danger">*</em></label>
                            <input type="text" name="name" id="name" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label for="icon" class="form-label">Icono:<em class="text-danger">*</em></label>
                            <input type="text" name="icon" id="icon" class="form-control">
                        </div>
                        <div class="col-md-12">
                            <div class="form-label">Visibilidad</div>
                            <input type="hidden" name="display" value="false">
                            <label class="custom-control custom-switch">
                                <input type="checkbox" name="display" class="custom-control-input" value="true" checked id="checkDropDownMenuForm">
                                <label class="custom-control-label" for="checkDropDownMenuForm">Indica si el menu se mostrara o no en la barra lateral.</label>
                            </label>
                        </div>
                    </div>
                    <!--  -->
                    <div class="border p-3" style="min-height: 200px; max-height: 300px; overflow-y: auto;">
                        <div class="repeater">
                            <div class="form-group" data-repeater-list="module">
                                <div data-repeater-item>
                                    <div class="">
                                        <div class="row">
                                            <div class="col-sm-7">
                                                <label for="folder" class="form-label">Módulo:<em class="text-danger">*</em></label>
                                                <select name="folder" id="folder" class="form-control form-select select2" data-bs-placeholder="Seleccionar módulo">
                                                    <option label="Seleccionar módulo"></option>
                                                    <?php foreach ($modules as $module): ?>
                                                        <option value="<?= $module['id'] ?>"><?= $module['name'] ?> (<?= $module['folder'] ?>)</option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                            <div class="col-sm-3">
                                                <div class="form-label">Visibilidad</div>
                                                <label class="custom-control custom-switch">
                                                    <input type="checkbox" name="display" id="display_module" class="custom-control-input" value="true" checked>
                                                    <label class="custom-control-label" for="display_module"></label>
                                                </label>
                                            </div>
                                            <div class="col-sm-2 align-self-end">
                                                <a href="javascript:void(0);" data-repeater-delete class="btn btn-dim btn-outline-danger mt-3">
                                                    <i class="icon ni ni-trash"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group my-3">
                                <a href="javascript: void(0);" data-repeater-create class="btn btn-outline-success">
                                    <em class="icon ni ni-plus"></em>&nbsp;Agregar
                                </a>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-outline-success" data-modal-action="submit">Guardar</button>
            </div>
        </div>
    </div>
</div>
<!-- Menu desplegable @e -->

<!-- Menu simple @s -->
<div class="modal fade" id="menuSimpleModal" aria-hidden="true" aria-labelledby="menuSimpleModalLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="menuSimpleModalLabel">Registrar Menu simple</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="menuSimpleForm">
                    <input type="hidden" name="simple_menu_id">
                    <div class="form-group">
                        <label for="name" class="form-label">Nombre:<em class="text-danger">*</em></label>
                        <input type="text" name="name" id="name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="icon" class="form-label">Icono:<em class="text-danger">*</em></label>
                        <input type="text" name="icon" id="icon" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="folder" class="form-label">URI:<em class="text-danger">*</em></label>
                        <select name="folder" id="folder" class="form-control form-select select2" data-bs-placeholder="Seleccionar módulo">
                            <option label="Seleccione"></option>
                            <?php foreach ($modules as $module): ?>
                                <option value="<?= $module['id'] ?>"><?= $module['name'] ?> (<?= $module['folder'] ?>)</option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="form-label">Visibilidad</div>
                        <label class="custom-control custom-switch">
                            <input type="checkbox" name="display" class="custom-control-input" value="true" checked>
                            <label class="custom-control-label">Indica si el menu se mostrara o no en la barra lateral.</label>
                        </label>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-outline-success" data-modal-action="submit">Guardar</button>
            </div>
        </div>
    </div>
</div>
<!-- Menu simple @e -->

<!-- Grupos @s -->
<div class="modal fade" id="groupsModal" aria-hidden="true" aria-labelledby="groupsModalLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="groupsModalLabel">Registrar Grupo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="groupsForm">
                    <input type="hidden" name="group_menu_id">

                    <div class="row mb-3">
                        <div class="form-group">
                            <label class="form-label" for="title">Nombre:<em class="text-danger">*</em></label>
                            <input type="text" name="title" id="title" class="form-control">
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="order">Orden:</label>
                            <input type="text" name="order" id="order" class="form-control">
                            <div class="form-text">Este campo determina el orden en el que los grupos se mostrarán en la
                                lista de opciones de la izquierda. Cuanto más bajo sea el número, más arriba aparecerá
                                el grupo.</div>
                        </div>

                        <div class="form-group">
                            <div class="form-label">Visibilidad</div>
                            <label class="custom-control custom-switch">
                                <input type="checkbox" name="display" class="custom-control-input" value="true" checked>
                                <label class="custom-control-label">Indica si el menu se mostrara o no en la barra lateral.</label>
                            </label>
                        </div>
                    </div>
                    <!--  -->
                    <div class="border p-3" style="min-height: 200px; max-height: 300px; overflow-y: auto;">
                        <div class="repeater">
                            <div class="form-group" data-repeater-list="menu">
                                <div data-repeater-item>
                                    <div class="">
                                        <div class="row">
                                            <div class="col-sm-10">
                                                <label for="item" class="form-label">Menu:<em class="text-danger">*</em></label>
                                                <select name="item" id="item" class="form-control form-select select2" data-bs-placeholder="Seleccionar menu">
                                                    <option label="Seleccionar menu"></option>
                                                    <?php foreach ($items as $item): ?>
                                                        <option value="<?= $item['id'] ?>"><?= $item['name'] ?>(<?= $item['slm']['type'] === 'dropdown_menu' ? 'Menú desplegable' : 'Menú simple' ?>)</option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                            <div class="col-sm-2 align-self-end">
                                                <a href="javascript:void(0);" data-repeater-delete class="btn btn-outline-danger mt-3">
                                                    <i class="icon ni ni-trash"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group my-3">
                                <a href="javascript: void(0);" data-repeater-create class="btn btn-outline-success">
                                    <em class="icon ni ni-plus"></em> Agregar
                                </a>
                            </div>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-outline-success" data-modal-action="submit">Guardar</button>
            </div>
        </div>
    </div>
</div>
<!-- Grupos @e -->