<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Codigos pase | Base Admin Web</title>
    <link rel="stylesheet" th:href="@{/assets/plugins/global/plugins.bundle.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.bundle.css}">
</head>
<body id="kt_body" class="app-default" th:attr="data-pass-codes-list-url=@{/admin/pass-codes/list}">
<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
    <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
        <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <div class="d-flex flex-column flex-column-fluid">
                    <div class="app-header d-flex align-items-stretch border-bottom border-gray-200 bg-white shadow-sm">
                        <div class="app-container container-xxl d-flex align-items-center justify-content-between w-100 py-4">
                            <div>
                                <div class="fs-2 fw-bold text-gray-900">Base Admin Web</div>
                                <div class="text-gray-500 fs-7">Panel administrativo inicial</div>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <div class="text-end">
                                    <div class="fw-semibold text-gray-800" th:text="${user.displayName}">Administrador Base</div>
                                    <div class="text-gray-500 fs-8" th:text="${user.username}">admin</div>
                                </div>
                                <form th:action="@{/logout}" method="post" class="m-0">
                                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                                    <button type="submit" class="btn btn-light-danger btn-sm">Cerrar sesion</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="app-toolbar py-6 py-lg-8 bg-light-primary">
                        <div class="app-container container-xxl d-flex flex-stack flex-wrap">
                            <div>
                                <h1 class="text-gray-900 fw-bold mb-2">Codigos pase</h1>
                                <div class="text-gray-700 fs-6">Genera codigos aleatorios y consulta si ya fueron escaneados.</div>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <a th:href="@{/dashboard}" class="btn btn-primary btn-sm">Dashboard</a>
                                <span class="badge badge-primary fs-7 fw-bold px-4 py-3">Rol activo: ADMIN</span>
                            </div>
                        </div>
                    </div>

                    <div class="app-content flex-column-fluid">
                        <div class="app-container container-xxl py-10">
                            <div th:if="${successMessage}" class="alert alert-success mb-8" th:text="${successMessage}"></div>
                            <div th:if="${errorMessage}" class="alert alert-danger mb-8" th:text="${errorMessage}"></div>

                            <div class="card card-flush mb-10">
                                <div class="card-header border-0 pt-6">
                                    <div class="card-title">
                                        <h2 class="fw-bold mb-0">Nuevo codigo pase</h2>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <form th:action="@{/admin/pass-codes}" method="post" class="row g-5 align-items-end">
                                        <div class="col-md-8">
                                            <label class="form-label fw-semibold">Nombre</label>
                                            <input type="text" name="name" class="form-control form-control-solid"
                                                   placeholder="Ej. Acceso evento principal" required maxlength="120">
                                        </div>
                                        <div class="col-md-4">
                                            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                                            <button type="submit" class="btn btn-primary btn-sm w-100">Generar codigo</button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="card card-flush">
                                <div class="card-header border-0 pt-6">
                                    <div class="card-title">
                                        <h2 class="fw-bold mb-0">Codigos registrados</h2>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="table-responsive">
                                        <table class="table table-row-dashed align-middle gs-0 gy-4">
                                            <thead>
                                            <tr class="fw-bold text-gray-500">
                                                <th>Nombre</th>
                                                <th>Codigo</th>
                                                <th>Fecha creacion</th>
                                                <th>Estatus</th>
                                                <th>Escaneado</th>
                                                <th>Fecha escaneo</th>
                                                <th class="text-end">Acciones</th>
                                            </tr>
                                            </thead>
                                            <tbody id="pass-codes-table-body">
                                            <tr th:if="${#lists.isEmpty(passCodes)}">
                                                <td colspan="7" class="text-gray-500">Aun no hay codigos pase registrados.</td>
                                            </tr>
                                            <tr th:each="passCode : ${passCodes}">
                                                <td class="fw-semibold text-gray-800" th:text="${passCode.name}">Nombre</td>
                                                <td>
                                                    <span class="badge badge-light-dark fs-7 fw-bold"
                                                          th:text="${passCode.code}">ABC123</span>
                                                </td>
                                                <td th:text="${#temporals.format(passCode.createdAt.atZone(T(java.time.ZoneId).systemDefault()), 'dd/MM/yyyy HH:mm')}">
                                                    09/06/2026 11:00
                                                </td>
                                                <td>
                                                    <span class="badge fs-7 fw-bold"
                                                          th:classappend="${passCode.status.name() == 'ACTIVO'} ? 'badge-light-success' : 'badge-light-warning'"
                                                          th:text="${passCode.status}">ACTIVO</span>
                                                </td>
                                                <td>
                                                    <span class="badge fs-7 fw-bold"
                                                          th:classappend="${passCode.scanned} ? 'badge-light-warning' : 'badge-light-primary'"
                                                          th:text="${passCode.scanned} ? 'Si' : 'No'">No</span>
                                                </td>
                                                <td th:text="${passCode.scannedAt != null ? #temporals.format(passCode.scannedAt.atZone(T(java.time.ZoneId).systemDefault()), 'dd/MM/yyyy HH:mm') : '-'}">
                                                    -
                                                </td>
                                                <td class="text-end">
                                                    <button type="button"
                                                            class="btn btn-light-primary btn-sm btn-qr-pass-code"
                                                            th:attr="data-code=${passCode.code},data-name=${passCode.name},data-status=${passCode.status}">
                                                        <i class="ki-duotone ki-scan-barcode fs-3">
                                                            <span class="path1"></span>
                                                            <span class="path2"></span>
                                                            <span class="path3"></span>
                                                            <span class="path4"></span>
                                                        </i>
                                                        Ver QR
                                                    </button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <div class="card card-flush mt-10">
                                <div class="card-header border-0 pt-6">
                                    <div class="card-title">
                                        <h2 class="fw-bold mb-0">API de escaneo</h2>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="text-gray-700 fs-7 mb-3">
                                        1. Login escaner: POST <code>/api/auth/login</code>
                                    </div>
                                    <div class="text-gray-700 fs-7 mb-3">
                                        <code>{"username":"scanner","password":"Scanner123*"}</code>
                                    </div>
                                    <div class="text-gray-700 fs-7 mb-3">
                                        2. Escanear: POST <code>/api/pass-codes/scan</code> con header
                                        <code>Authorization: Bearer TOKEN</code>
                                    </div>
                                    <div class="text-gray-700 fs-7 mb-3">
                                        <code>{"code":"CODIGO_GENERADO"}</code>
                                    </div>
                                    <div class="text-gray-500 fs-8">
                                        Solo usuarios con rol SCANNER pueden iniciar sesion por API y escanear codigos.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="kt_modal_pass_code_qr" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <div class="modal-content">
            <div class="modal-header pb-0 border-0 justify-content-end">
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                </div>
            </div>
            <div class="modal-body scroll-y mx-5 mx-xl-15 my-7 pt-0">
                <div class="text-center mb-8">
                    <h2 class="fw-bold mb-3">Codigo QR del pase</h2>
                    <div class="text-gray-500 fs-6">Escanea este codigo para validar el acceso.</div>
                </div>
                <div class="d-flex flex-column align-items-center gap-5">
                    <div class="border border-dashed border-gray-300 rounded p-5 bg-light">
                        <div id="pass_code_qr_container"></div>
                    </div>
                    <div class="w-100">
                        <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
                            <span class="badge badge-light-dark fs-7 fw-bold" id="pass_code_qr_code">CODIGO</span>
                            <span class="badge fs-7 fw-bold badge-light-success" id="pass_code_qr_status">ACTIVO</span>
                        </div>
                        <div class="text-center">
                            <div class="text-gray-500 fs-7 mb-1">Nombre del pase</div>
                            <div class="fs-4 fw-bold text-gray-900" id="pass_code_qr_name">Nombre</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer flex-center border-0 pt-0 pb-10">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/assets/plugins/global/plugins.bundle.js}"></script>
<script th:src="@{/assets/js/scripts.bundle.js}"></script>
<script th:src="@{/assets/js/vendor/qrcode.min.js}"></script>
<script th:src="@{/assets/js/pass-codes.js}"></script>
</body>
</html>