{% extends '../Usuarios/basek.html.twig' %}

{% block title %} KIDS | Bienvenido{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/misJs/Caja/caja.js') }}"></script>
{% endblock %}

{% block menu_p %}
    <div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start"
         class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2">
        <!--begin:Menu link-->
        <span class="menu-link">
            <span class="menu-title">Inscripciones</span>
            <span class="menu-arrow d-lg-none"></span>
        </span>
        <!--end:Menu link-->
        <!--begin:Menu sub-->
        <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown px-lg-2 py-lg-4 w-lg-250px">
            <!--begin:Menu item-->
            <div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start"
                 class="menu-item menu-lg-down-accordion">
                <!--begin:Menu link-->
                <span class="menu-link">
                    <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/docs/keen/html/releases/2023-07-10-050319/core/html/src/media/icons/duotune/communication/com014.svg-->
                    <span class="svg-icon svg-icon-muted svg-icon-2hx">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.0173 9H15.3945C14.2833 9 13.263 9.61425 12.7431 10.5963L12.154 11.7091C12.0645 11.8781 12.1072 12.0868 12.2559 12.2071L12.6402 12.5183C13.2631 13.0225 13.7556 13.6691 14.0764 14.4035L14.2321 14.7601C14.2957 14.9058 14.4396 15 14.5987 15H18.6747C19.7297 15 20.4057 13.8774 19.912 12.945L18.6686 10.5963C18.1487 9.61425 17.1285 9 16.0173 9Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="14" y="4" width="4" height="4" rx="2" fill="currentColor"/>
                            <path d="M4.65486 14.8559C5.40389 13.1224 7.11161 12 9 12C10.8884 12 12.5961 13.1224 13.3451 14.8559L14.793 18.2067C15.3636 19.5271 14.3955 21 12.9571 21H5.04292C3.60453 21 2.63644 19.5271 3.20698 18.2067L4.65486 14.8559Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="6" y="5" width="6" height="6" rx="3" fill="currentColor"/>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                    <span class="menu-title">Preescolar</span>
                    <span class="menu-arrow"></span>
                </span>
                <!--end:Menu link-->
                <!--begin:Menu sub-->
                <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
                    <!--begin:Menu item-->
                    <div class="menu-item">
                        <!--begin:Menu link-->
                        <a class="menu-link" href="#" onclick="formularioMaternal();">
                            <span class="menu-bullet">
                                <span class="bullet bullet-dot"></span>
                            </span>
                            <span class="menu-title">Maternal</span>
                        </a>
                        <!--end:Menu link-->
                    </div>

                    <div class="menu-item">
                        <!--begin:Menu link-->
                        <a class="menu-link" href="#" onclick="formularioKinder();">
                            <span class="menu-bullet">
                                <span class="bullet bullet-dot"></span>
                            </span>
                            <span class="menu-title">Kinder</span>
                        </a>
                        <!--end:Menu link-->
                    </div>
                </div>
                <!--end:Menu sub-->
            </div>
            <!--end:Menu item-->

            <div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start"
                 class="menu-item menu-lg-down-accordion">
                <!--begin:Menu link-->
                <span class="menu-link">
                   <span class="svg-icon svg-icon-muted svg-icon-2hx">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.0173 9H15.3945C14.2833 9 13.263 9.61425 12.7431 10.5963L12.154 11.7091C12.0645 11.8781 12.1072 12.0868 12.2559 12.2071L12.6402 12.5183C13.2631 13.0225 13.7556 13.6691 14.0764 14.4035L14.2321 14.7601C14.2957 14.9058 14.4396 15 14.5987 15H18.6747C19.7297 15 20.4057 13.8774 19.912 12.945L18.6686 10.5963C18.1487 9.61425 17.1285 9 16.0173 9Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="14" y="4" width="4" height="4" rx="2" fill="currentColor"/>
                            <path d="M4.65486 14.8559C5.40389 13.1224 7.11161 12 9 12C10.8884 12 12.5961 13.1224 13.3451 14.8559L14.793 18.2067C15.3636 19.5271 14.3955 21 12.9571 21H5.04292C3.60453 21 2.63644 19.5271 3.20698 18.2067L4.65486 14.8559Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="6" y="5" width="6" height="6" rx="3" fill="currentColor"/>
                        </svg>
                    </span>
                    <span class="menu-title">Basica</span>
                    <span class="menu-arrow"></span>
                </span>
                <!--end:Menu link-->
                <!--begin:Menu sub-->
                <div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
                    <!--begin:Menu item-->
                    <div class="menu-item">
                        <!--begin:Menu link-->
                        <a class="menu-link" href="../../demo6/dist/apps/projects/list.html">
                            <span class="menu-bullet">
                                <span class="bullet bullet-dot"></span>
                            </span>
                            <span class="menu-title">Primaria</span>
                        </a>
                        <!--end:Menu link-->
                    </div>

                    <div class="menu-item">
                        <!--begin:Menu link-->
                        <a class="menu-link" href="../../demo6/dist/apps/projects/list.html">
                            <span class="menu-bullet">
                                <span class="bullet bullet-dot"></span>
                            </span>
                            <span class="menu-title">Secundaria</span>
                        </a>
                        <!--end:Menu link-->
                    </div>
                </div>
                <!--end:Menu sub-->

            </div>
            <!--end:Menu item-->

            <div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start"
                 class="menu-item menu-lg-down-accordion">
                <!--begin:Menu link-->
                <span class="menu-link">
                    <span class="svg-icon svg-icon-muted svg-icon-2hx">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.0173 9H15.3945C14.2833 9 13.263 9.61425 12.7431 10.5963L12.154 11.7091C12.0645 11.8781 12.1072 12.0868 12.2559 12.2071L12.6402 12.5183C13.2631 13.0225 13.7556 13.6691 14.0764 14.4035L14.2321 14.7601C14.2957 14.9058 14.4396 15 14.5987 15H18.6747C19.7297 15 20.4057 13.8774 19.912 12.945L18.6686 10.5963C18.1487 9.61425 17.1285 9 16.0173 9Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="14" y="4" width="4" height="4" rx="2" fill="currentColor"/>
                            <path d="M4.65486 14.8559C5.40389 13.1224 7.11161 12 9 12C10.8884 12 12.5961 13.1224 13.3451 14.8559L14.793 18.2067C15.3636 19.5271 14.3955 21 12.9571 21H5.04292C3.60453 21 2.63644 19.5271 3.20698 18.2067L4.65486 14.8559Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="6" y="5" width="6" height="6" rx="3" fill="currentColor"/>
                        </svg>
                    </span>
                    <span class="menu-title">Bachillerato</span>
                    <span class="menu-arrow"></span>
                </span>
                <!--end:Menu link-->
            </div>
            <!--end:Menu item-->

            <div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start"
                 class="menu-item menu-lg-down-accordion">
                <!--begin:Menu link-->
                <span class="menu-link">
                   <span class="svg-icon svg-icon-muted svg-icon-2hx">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.0173 9H15.3945C14.2833 9 13.263 9.61425 12.7431 10.5963L12.154 11.7091C12.0645 11.8781 12.1072 12.0868 12.2559 12.2071L12.6402 12.5183C13.2631 13.0225 13.7556 13.6691 14.0764 14.4035L14.2321 14.7601C14.2957 14.9058 14.4396 15 14.5987 15H18.6747C19.7297 15 20.4057 13.8774 19.912 12.945L18.6686 10.5963C18.1487 9.61425 17.1285 9 16.0173 9Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="14" y="4" width="4" height="4" rx="2" fill="currentColor"/>
                            <path d="M4.65486 14.8559C5.40389 13.1224 7.11161 12 9 12C10.8884 12 12.5961 13.1224 13.3451 14.8559L14.793 18.2067C15.3636 19.5271 14.3955 21 12.9571 21H5.04292C3.60453 21 2.63644 19.5271 3.20698 18.2067L4.65486 14.8559Z"
                                  fill="currentColor"/>
                            <rect opacity="0.3" x="6" y="5" width="6" height="6" rx="3" fill="currentColor"/>
                        </svg>
                    </span>
                    <span class="menu-title">Bachillerato EU</span>
                    <span class="menu-arrow"></span>
                </span>
                <!--end:Menu link-->
            </div>
            <!--end:Menu item-->
        </div>
        <!--end:Menu sub-->
    </div>

{% endblock %}

{% block body %}


    <!--begin::Chart widget 40-->
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card card-flush border-0 h-md-100">
                <!--begin::Body-->
                <div class="card-body">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header">
                                    <h3 class="card-title">Title</h3>
                                    <div class="card-toolbar">
                                        <button type="button" class="btn btn-sm btn-light">
                                            Action
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body" id="contenedor-pagos">

                                </div>
                                <div class="card-footer">
                                    Footer
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header">
                                    <h3 class="card-title">Title</h3>
                                    <div class="card-toolbar">
                                        <button type="button" class="btn btn-sm btn-light">
                                            Action
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">

                                        <div class="form-group">

                                        <input type="search" class="form-control" id="searchInput" placeholder="Buscar alumno...">
                                        <div class="separator"></div>
                                        <br>
                                        <label for="alumnoSelect">Seleccionar Alumno:</label>
                                        <div class="input-group">
                                            <select class="form-select" id="alumnoSelect">
                                                {% for a in alumno %}
                                                    <option value="{{ a.ideAlu }}"> {{ a.apePat }} {{ a.apeMat }} {{ a.nomAlu }}
                                                        <b>:</b>
                                                        <b>{{ a.cveCtl }}</b></option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div id="loadingSpinner" class="d-none">
                                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </div>

                                        <script>
                                            // Obtener referencias a elementos HTML
                                            const searchInput = document.getElementById("searchInput");
                                            const alumnoSelect = document.getElementById("alumnoSelect");
                                            const loadingSpinner = document.getElementById("loadingSpinner");

                                            // Copia de seguridad de la lista de opciones originales del select
                                            const opcionesOriginales = [...alumnoSelect.options];

                                            // Manejar el evento de entrada de texto (search)
                                            searchInput.addEventListener("input", function () {
                                                const query = searchInput.value.toLowerCase();

                                                // Filtrar las opciones del select según la consulta de búsqueda
                                                const opcionesFiltradas = opcionesOriginales.filter(opcion => {
                                                    const textoOpcion = opcion.textContent.toLowerCase();
                                                    return textoOpcion.includes(query);
                                                });

                                                // Ocultar el select mientras se carga
                                                alumnoSelect.style.display = "none";

                                                // Mostrar el spinner de carga
                                                loadingSpinner.classList.remove("d-none");

                                                // Simular una demora (reemplaza esto con tu solicitud AJAX real)
                                                setTimeout(function () {
                                                    // Limpiar el select actual
                                                    alumnoSelect.innerHTML = "";

                                                    // Agregar las opciones filtradas al select
                                                    opcionesFiltradas.forEach(opcion => {
                                                        alumnoSelect.appendChild(opcion.cloneNode(true));
                                                    });

                                                    // Mostrar el select nuevamente
                                                    alumnoSelect.style.display = "block";

                                                    // Ocultar el spinner de carga
                                                    loadingSpinner.classList.add("d-none");
                                                }, 10000); // Simulación de una demora de 2 segundos (ajusta el tiempo según tus necesidades)
                                            });
                                        </script>
                                        <br>

                                        <button id="buscarAlumno" class="badge badge-light col-sm-2">Buscar</button>
                                    </div>
                                </div>

                                <br>

                                    <div class="row">

                                        <div class="form-group">

                                            <input type="number" class="form-control form-control-lg " placeholder="Matricula..." id="searchMatricula" onkeyup="validarMatricula(event)">
                                            <div class="separator"></div>
                                         </div>
                                     </div>

                                <div class="card-footer">
                                    Footer
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Body-->
            </div>
        </div>
    </div>



{% endblock %}

{% block footer %}
    <!--begin::Footer-->
    <div id="kt_app_footer" class="app-footer py-2 py-lg-4">
        <!--begin::Footer container-->
        <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack">
            <!--begin::Copyright-->
            <div class="text-dark order-2 order-md-1">
                <span class="text-muted fw-semibold me-1">2023&copy;</span>
                <a href="https://keenthemes.com" target="_blank" class="text-gray-800 text-hover-primary">Keenthemes</a>
            </div>
            <!--end::Copyright-->
            <!--begin::Menu-->
            <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                <li class="menu-item">
                    <a href="https://keenthemes.com" target="_blank" class="menu-link px-2">About</a>
                </li>
                <li class="menu-item">
                    <a href="https://devs.keenthemes.com" target="_blank" class="menu-link px-2">Support</a>
                </li>
                <li class="menu-item">
                    <a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/"
                       target="_blank" class="menu-link px-2">Purchase</a>
                </li>
            </ul>
            <!--end::Menu-->
        </div>
        <!--end::Footer container-->
    </div>
    <!--end::Footer-->
{% endblock %}