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

<head>
    <title>Consultar horario |
        <?= $user->facultad['facultad'] ?? 'General' ?>
    </title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/plain; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?php include_once "import/html_css_files.php"; ?>
</head>
<style>
    #jsonOutput {
        background-color: #f4f4f4;
        padding: 10px;
        border-radius: 4px;
        overflow-x: auto;
    }
</style>
<!--  -->

<body style="display: block;">
    <?php
    include('include/constantes.php');
    include("import/html_header.php");

    html_header("Logs");
    ?>
    <?= "<!-- $user -->" ?>
    <main class="container content content-margin" id="local-app">
        <div class="table-responsive">
            <table class="table table-hover table-striped table-bordered table-sm">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col" class="text-center align-middle px-2">Fecha</th>
                        <th scope="col" class="text-center align-middle px-2" width="10%">Hora</th>
                        <th scope="col" class="text-center align-middle px-2">Clave</th>
                        <th scope="col" class="text-center align-middle px-2">Profesor</th>
                        <th scope="col" class="text-center align-middle px-2" width="7%">Horario</th>
                        <th scope="col" class="text-center align-middle px-2">IP</th>
                        <th scope="col" class="text-center align-middle px-2">Navegador</th>
                        <th scope="col" class="text-center align-middle px-2">Información</th>
                        <th scope="col" class="text-center align-middle px-2">Detalle</th>
                        <th scope="col" class="text-center align-middle px-2">Horario web</th>
                    </tr>
                </thead>
                <tbody>
                    <?
                    global $db;
                    $registros = $db
                        ->where('momento::DATE = ' . (isset($_GET['fecha']) ? "'{$_GET['fecha']}'" : 'CURRENT_DATE'))
                        ->orderBy('momento', 'desc')
                        ->get('log_registro');

                    foreach ($registros as $log) {
                        ?>
                        <tr class="<?= $log['success'] ? '' : 'table-danger' ?>" data-id="<?= $log['log_id'] ?>">
                            <td class="text-center align-middle px-2">
                                <?= substr($log['momento'], 0, 10) ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?= substr($log['momento'], 11, 8) ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?= $log['clave'] ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?= $log['profesor'] ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?
                                if ($log['horarios'] == null) {
                                    echo "N/A";
                                } else {
                                    ?>
                                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#horarioModal"
                                        data-horario='<?= json_encode($log['horarios'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>'>
                                        Horario
                                    </button>
                                    <?
                                }
                                ?>
                            </td>

                            <td class="text-center align-middle px-2">
                                <?= $log['ip'] ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?= $log['navegador'] ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?= $log['informacion'] ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?= $log['detalle'] ?>
                            </td>
                            <td class="text-center align-middle px-2">
                                <?
                                if ($log['horario_web'] == null) {
                                    echo "N/A";
                                } else {
                                    ?>
                                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#horarioModal"
                                        data-horario='<?= json_encode($log['horario_web'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>'>
                                        Horario
                                    </button>
                                    <?
                                }
                                ?>
                            </td>
                        </tr>
                        <?
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </main>
    <!-- Horario Modal -->
    <div class="modal fade" id="horarioModal" tabindex="-1" role="dialog" aria-labelledby="horarioModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="horarioModalLabel">Horario</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <pre id="jsonOutput"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <?
    include "import/html_footer.php";
    ?>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="https://unpkg.com/petite-vue"></script>
<script>
    $(document).ready(function () {
        $('#horarioModal').on('show.bs.modal', function (event) {
            const button = $(event.relatedTarget);
            const horario = button.data('horario');
            const modal = $(this);

            // Ensure horario is an object
            let parsedHorario;
            if (typeof horario === 'string') {
                parsedHorario = JSON.parse(JSON.parse(horario, (key, value) => {
                    if (typeof value === 'string') {
                        return value.replace(/\\n/g, '\n');
                    }
                    return value;
                }));
            } else {
                parsedHorario = horario;
            }

            const formattedHorario = formatJson(parsedHorario);
            modal.find('#jsonOutput').html(formattedHorario);
        });
    });


    function formatJson(jsonObject) {
        let formatted = '';

        if (Array.isArray(jsonObject)) {
            formatted += '<ol>';
            for (let i = 0; i < jsonObject.length; i++) {
                formatted += '<li>';
                formatted += formatJson(jsonObject[i]);
                formatted += '</li>';
            }
            formatted += '</ol>';
        } else if (typeof jsonObject === 'object') {
            formatted += '<ol>';
            for (let key in jsonObject) {
                formatted += '<li><strong>' + key + ':</strong> ';
                formatted += formatJson(jsonObject[key]);
                formatted += '</li>';
            }
            formatted += '</ol>';
        } else {
            formatted += jsonObject;
        }

        return formatted;
    }


</script>

</html>