<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Gestión de módulos</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">Sistema</li>
                    <li class="breadcrumb-item">Configuración</li>
                    <li class="breadcrumb-item active">Gestión de módulos</li>
                </ol>
            </div>

        </div>
    </div>
</div>

<div class="card">
    <div class="border">
        <ul class="nav nav-pills custom-hover-nav-tabs">
            <li class="nav-item">
                <a href="#modulos-container" data-bs-toggle="tab" aria-expanded="false" class="nav-link active" id="modulos-tab">
                    <i class="fa-solid fa-gears nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Módulos</h5>
                </a>
            </li>
            <li class="nav-item">
                <a href="#edit-modulo-container" data-bs-toggle="tab" aria-expanded="true" class="nav-link disabled" id="editar-modulo-tab">
                    <i class="fa-solid fa-gear nav-icon nav-tab-position"></i>
                    <h5 class="nav-titl nav-tab-position m-0">Edición</h5>
                </a>
            </li>
            <li class="nav-item ms-auto" id="btns-nuevo-modulo">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" id="btn-agregar-modulo" type="button">
                        <i class="fas fa-plus"></i>
                        <span>Nuevo módulo</span>
                    </button>
                </div>
            </li>
            <li class="nav-item ms-auto d-none" id="btns-guardar-modulo">
                <div class="h-100 pe-1 d-flex align-items-center">
                    <button class="btn btn-sm btn-primary btn-rounded waves-effect waves-light" id="btn-guardar-modulo" type="submit" form="modulo-form">
                        <i class="fas fa-save"></i>
                        <span>Guardar</span>
                    </button>
                    <button class="btn btn-sm btn-danger btn-rounded waves-effect waves-light ms-2" id="btn-cancelar-modulo" type="button">
                        <i class="fas fa-times"></i>
                        <span>Cancelar</span>
                    </button>
                </div>
            </li>
        </ul>
    </div>
    <div class="card-body pt-1">
        <div class="tab-content text-muted">
            <div class="tab-pane show active pt-2" id="modulos-container">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <table class="table table-bordered" id="modulos-tbl" style="text-align:center; width:100% !important;">
                            <thead>
                                <th>N°</th>
                                <th>Título</th>
                                <th>Descripción</th>
                                <th class="text-center">Contenedor</th>
                                <th>Acciones</th>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="edit-modulo-container">
                <form id="modulo-form" name="modulo-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <label for="txt-titulo-modulo" class="form-label">Título <span class="required">*</span></label>
                            <input type="text" id="txt-titulo-modulo" name="txt-titulo-modulo" class="form-control form-control-sm" required placeholder="Ingrese el título">
                            <div class="invalid-feedback">
                                Por favor ingrese el título
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4 mayusculas">
                            <label for="txt-contenedor-modulo" class="form-label">Contenedor <span class="required">*</span></label>
                            <input type="text" id="txt-contenedor-modulo" name="txt-contenedor-modulo" class="form-control form-control-sm" required placeholder="Ingrese el título" pattern="^[-a-zA-Z0-9@\.+_]+$">
                            <div class="invalid-feedback">
                                Por favor ingrese el contenedor
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <label for="txt-descripcion-modulo" class="form-label">Descripción</label>
                            <textarea class="form-control form-control-sm" id="txt-descripcion-modulo" name="txt-descripcion-modulo" rows="2" required></textarea>
                            <div class="invalid-feedback">
                                Por favor ingrese la descripción
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-12 mt-2">
                            <ul class="nav nav-pills arrow-navtabs nav-secondary bg-light mb-3" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#apartados-container" role="tab">
                                        <span class="d-block d-sm-none"><i class="fas fa-user-cog"></i></span>
                                        <span class="d-none d-sm-block" id="spn-title-apartados">Apartados</span>
                                    </a>
                                </li>
                                <li class="nav-item ms-auto">
                                    <div class="h-100 d-flex pe-1 align-items-center">
                                        <button type="button" class="btn btn-primary btn-sm" id="btn-crear-apartado" data-bs-toggle="tooltip" data-bs-placement="top" title="Crear apartado">
                                            <i class="fas fa-plus"></i> Apartado
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm ms-2 d-none" id="btn-regresar-apartado" data-bs-toggle="tooltip" data-bs-placement="top" title="Regresar">
                                            <i class="fa-solid fa-chevron-left"></i> Regresar
                                        </button>
                                    </div>
                                </li>
                            </ul>
                            <div class="tab-content text-muted">
                                <div class="tab-pane active" id="apartados-container" role="tabpanel">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <table class="table table-bordered" id="apartados-tbl" style="text-align:center; width:100% !important;">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center">#</th>
                                                        <th class="text-center">Icono</th>
                                                        <th class="text-center">Tipo</th>
                                                        <th>Título</th>
                                                        <th>Descripción</th>
                                                        <th class="text-center">Archivo</th>
                                                        <th class="text-center">Sub apartados</th>
                                                        <th class="text-center">Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

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

<div class="modal fade" id="apartado-mdl" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Configuración de apartado</h4>
                <button class="btn-close" aria-label="Close" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-1">
                <form id="apartado-form" name="apartado-form" accept-charset="utf-8" method="POST" class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <label class="form-label">Icono <span class="required">*</span></label>
                            <div class="dropdown d-grid" style="padding-top: 0 !important;">
                                <button class="btn btn-sm btn-outline-primary dropdown-toggle p-1 form-control form-control-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="" style="font-size: 18.5px; margin: 4px 0;" id="icono-apartado"></i>
                                </button>
                                <div class="dropdown-menu p-2" style="min-width: 450px;">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <label for="txt-buscador-icono" class="form-label">Buscar icono</label>
                                            <input type="text" id="txt-buscador-icono" name="txt-buscador-icono" class="form-control form-control-sm" placeholder="Texto a buscar">
                                        </div>
                                    </div>
                                    <div class="row mt-2" id="iconos-container">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 col-xl-8">
                            <label for='txt-titulo-apartado' class="form-label">Título <span class="required">*</span></label>
                            <input type="text" id="txt-titulo-apartado" name="txt-titulo-apartado" class="form-control" required>
                            <div class="invalid-feedback">
                                Ingrese el título
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl-4">
                            <label for="cbo-tipo-apartado" class="form-label">Tipo <span class="required">*</span></label>
                            <div class="form-group has-validation">
                                <select name="cbo-tipo-apartado" id="cbo-tipo-apartado" class="form-select form-select-sm" required>
                                    <option value="" selected disabled>seleccione</option>
                                    <option value="V">Vista</option>
                                    <option value="M">Manual</option>
                                </select>
                                <div class="invalid-feedback">
                                    Por favor seleccione un tipo
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 col-xl-8">
                            <label for="txt-archivo-apartado" class="form-label">Nombre de archivo <span class="required">*</span></label>
                            <!-- No permitir espacios en blanco -->
                            <input type="text" id="txt-archivo-apartado" name="txt-archivo-apartado" placeholder="" title="" class="form-control form-control-sm" required pattern="^[a-zA-Z0-9_\-]+$" autocomplete="off" />
                            <div class="invalid-feedback">
                                Ingrese el nombre del archivo
                            </div>
                        </div>
                        <div class="col-lg-12 col-xl-12">
                            <label for='txt-descripcion-apartado' class="form-label">Descripción <span class="required">*</span></label>
                            <textarea type="text" id="txt-descripcion-apartado" name="txt-descripcion-apartado" class="form-control form-control-sm" required rows="2"></textarea>
                            <div class="invalid-feedback">
                                Por favor ingrese la descripción
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm" type="submit" form="apartado-form">Guardar</button>
                <button class="btn btn-secondary btn-sm" type="button" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<?php
$jsModules = [
    'modulosPage'
];
