PAAD
/
paad


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auditoría asistencial</title>
    <?php
    include 'import/html_css_files.php';
    ?>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
</head>

<body>
    <?
    $redirect = $_SERVER['PHP_SELF'];
    include "import/html_header.php";
    global $user;

    html_header(
        is_null($user->facultad['facultad_id']) ? "Puestos" : "Puestos de la {$user->facultad['facultad']}",
        "Sistema de gestión de checador",
    );
    if (!is_null($user->facultad['facultad_id'])) {
        ?>

        <main class="container-fluid px-4 mt-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;"
            v-scope="{new_puesto: null}">

            <div class="alert alert-success" role="alert" v-if="message">
                {{message}}
            </div>

            <?
            if ($user->acceso == 'w') {
                ?>
                <div class="marco text-right">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nuevo-puesto">
                        <span class="ing-mas"></span>
                        Agregar puesto
                    </button>
                </div>

                <?
            }
            ?>

            <div class="d-flex flex-wrap marco justify-content-around">
                <div class="accordion col-10 mx-auto my-5" id="puestos"
                    v-scope="{selected_carrera_id: -1, current_materia: null, current_encargado: null}"
                    v-if="puestos.length">

                    <div class="card mb-3 shadow-lg" v-for="(puesto, index) in puestos" :key="puesto.puesto_id">
                        <!-- Card Header -->
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <button class="btn btn-link text-white flex-grow-1 text-left" type="button"
                                data-toggle="collapse" :data-target="`#puesto-${puesto.puesto_id}`" aria-expanded="true"
                                :aria-controls="`puesto-${puesto.puesto_id}`">
                                {{puesto.nombre}}
                            </button>
                            <button type="button" class="btn btn-outline-light" data-target="#eliminar-puesto"
                                data-toggle="modal" @click="to_delete = puesto">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>

                        <div :id="`puesto-${puesto.puesto_id}`" class="collapse"
                            :aria-labelledby="`puesto-${puesto.nombre}`" data-parent="#puestos">
                            <div class="card-body">
                                <!-- Encargado -->
                                <div class="form-row justify-content-around align-items-center mb-2">
                                    <label :for="`encargado-${puesto.puesto_id}`" class="col-2 barra-right">
                                        Encargado del área
                                    </label>
                                    <div id="encargados" class="datalist datalist-select mb-1 col-9">
                                        <div class="datalist-input" v-if="puesto.encargado">
                                            ({{puesto.encargado.usuario_clave}}) {{ puesto.encargado.usuario_nombre }}
                                        </div>
                                        <div class="datalist-input" v-else>
                                            Selecciona un encargado
                                        </div>
                                        <span class="icono ing-buscar"></span>
                                        <ul style="display:none">
                                            <li class="datalist-option" v-for="usuario in usuarios"
                                                :key="usuario.usuario_id" :data-id="usuario.usuario_id"
                                                style=" white-space: nowrap;" @click="puesto.encargado = usuario"
                                                :class="{'selected': puesto.encargado?.usuario_id == usuario.usuario_id}">
                                                (<small> {{usuario.usuario_clave}} </small>) {{ usuario.usuario_nombre }}
                                            </li>
                                        </ul>
                                        <input type="hidden" id="encargado_id" name="id">
                                    </div>
                                </div>
                                <hr>

                                <div class="form-row justify-content-around align-items-center mb-2"
                                    v-show="carreras.length">
                                    <label :for="`carrera-${puesto.puesto_id}`" class="col-2 barra-right">
                                        Carrera
                                    </label>
                                    <div id="dlCarreras" class="datalist datalist-select mb-1 col-9">
                                        <div class="datalist-input">
                                            Selecciona una carrera
                                        </div>
                                        <span class="icono ing-buscar"></span>
                                        <ul style="display:none">
                                            <li class="datalist-option" data-id="0" @click="selected_carrera_id = 0">
                                                Todas las carreras
                                            </li>
                                            <li class="datalist-option" v-for="carrera in carreras"
                                                :key="carrera.carrera_id" :data-id="carrera.carrera_id"
                                                style=" white-space: nowrap;"
                                                @click="selected_carrera_id = carrera.carrera_id">
                                                (<small> {{carrera.clave_carrera}} </small>) {{ carrera.carrera_nombre }}
                                            </li>
                                        </ul>
                                        <input type="hidden" id="carrera_id" name="id">
                                    </div>
                                </div>
                                <div class="form-row justify-content-around align-items-center"
                                    v-scope="{to_add_materia: null}">
                                    <label :for="`materias-${puesto.puesto_id}`" class="col-2 barra-right">
                                        Materias
                                    </label>
                                    <input name="materia" placeholder="Seleccione una materia" list="datalist-materias"
                                        class="form-control col-9 " v-model="current_materia" @input="to_add_materia = materias.find(m => current_materia == `${m.clave_materia} - ${m.materia_nombre}`);
                                if (to_add_materia) {
                                    if (puesto.materias.find(p => p.materia_id == to_add_materia.materia_id)) {
                                        console.log('La materia ya está asignada');
                                        current_materia = null;
                                        return;
                                    }
                                    puesto.materias.push(to_add_materia);
                                    materias.splice(materias.indexOf(to_add_materia), 1);
                                    current_materia = null;
                                }" :disabled="selected_carrera_id == -1" v-model="current_materia"
                                        :id="`materias-${puesto.puesto_id}`" autocomplete="off">
                                </div>
                                <datalist id="datalist-materias">
                                    <option
                                        v-for="materia in materias.filter(m => selected_carrera_id == 0 || m.carrera_id == selected_carrera_id).filter(m => !puesto.materias.find(p => p.materia_id == m.materia_id))"
                                        :value="`${materia.clave_materia} - ${materia.materia_nombre}`">
                                </datalist>

                                <hr>
                                <style>
                                    .list-group-item-action:hover {
                                        background-color: rgba(255, 0, 0, 0.1);
                                        /* Light red tint on hover for better feedback */
                                    }

                                    .list-group-item-action:active {
                                        background-color: rgba(255, 0, 0, 0.2);
                                        /* Slightly darker red tint when active */
                                    }
                                </style>
                                <fieldset class="container mt-4">
                                    <legend class="text-center mb-3">
                                        Materias Asignadas <span class="badge badge-info">{{puesto.materias.length}}</span>
                                    </legend>

                                    <!-- Assigned Subjects List -->
                                    <ul class="list-group shadow-sm" v-if="puesto.materias.length"
                                        style="max-height: 250px; overflow-y: auto;">
                                        <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                                            v-for="materia in puesto.materias" :key="materia.materia_id"
                                            @click="puesto.materias.splice(puesto.materias.indexOf(materia), 1); materias.push(materia)"
                                            style="cursor: pointer; transition: background-color 0.3s ease;">

                                            <span class="flex-grow-1">
                                                {{materia.clave_materia}} - {{materia.materia_nombre}}
                                            </span>

                                            <!-- Delete icon - assuming using FontAwesome, replace with your icon system if different -->
                                            <i class="fas fa-trash-alt text-danger ml-3" style="cursor: pointer;"></i>
                                        </li>
                                    </ul>

                                    <!-- Empty State Alert -->
                                    <div class="alert alert-light text-center" role="alert" v-else>
                                        No hay materias asignadas
                                    </div>
                                </fieldset>


                            </div>
                            <div class="card-footer d-flex justify-content-between align-items-center">
                                <!-- <small class="text-muted">Última actualización: {{ puesto.lastUpdate | formatDate }}</small> -->
                                <button type="button" class="btn btn-primary"
                                    @click="actualizarPuesto(puesto.puesto_id, puesto.materias, puesto.encargado?.usuario_id)">
                                    {{ puesto.encargado ? 'Guardar cambios' : 'Guardar sin encargado' }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="alert alert-dark" role="alert">
                        No hay puestos registrados
                    </div>
                </div>
            </div>

            <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="nuevo-puesto">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header text-white">
                            <h5 class="modal-title">Agregar un nuevo puesto</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true" class="text-white">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <fieldset>
                                <legend>Nombre del puesto</legend>
                                <div class="form-row">
                                    <input type="text" class="form-control" v-model="new_puesto"
                                        placeholder="Área del puesto">
                                </div>
                            </fieldset>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-danger" data-dismiss="modal"
                                @click="new_puesto = null">Cancelar</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"
                                @click="nuevoPuesto(new_puesto); new_puesto = null">Guardar</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="eliminar-puesto">
                <div class="modal-dialog modal-dialog-centered" role="document" v-if="to_delete">
                    <div class="modal-content">
                        <div class="modal-header text-white">
                            <h5 class="modal-title">Eliminar puesto</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true" class="text-white">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <fieldset>
                                <legend>¿Estás seguro de que deseas eliminar el puesto?</legend>
                                <p>Esta acción no se puede deshacer. Se perderán las asignaciones de materias y de
                                    encargado.</p>
                            </fieldset>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-danger" data-dismiss="modal"
                                @click="new_puesto = null">Cancelar</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal"
                                @click="eliminarPuesto(to_delete.puesto_id)">Eliminar</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <?
    } else {
        ?>
        <main class="container mt-5" style="min-height: 70vh;">
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <div class="card">
                        <div class="card-header text-white bg-danger">
                            Sin Facultad Asociada
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Atención</h5>
                            <p class="card-text">No tienes una facultad asociada a tu perfil. El rol
                                <?= $user->rol['rol'] ?> no tiene acceso a esta sección.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    <? }
    include "import/html_footer.php"; ?>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/datepicker-es.js"></script>
    <script src="js/datalist.js"></script>
    <script src="js/puestos.js?<?= rand(0, 2) ?>" type="module"></script>
    <script src="js/scrollables.js"></script>
    <script>
        $(document).ready(function () {
            $('.collapse').collapse
        });
    </script>
</body>

</html>