{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template core/login

    Moodle template for the login page.

    Context variables required for this template:
    * autofocusform: Auto focus on form ?,
    * canloginasguest - Is guest login allowed?,
    * canloginbyemail - Is login by email allowed?,
    * cansignup - Signup allowed?,
    * cookieshelpicon - cookies help icon details
    * error - Any errors in the form?,
    * forgotpasswordurl - Forgot password url,
    * hasidentityproviders - Flag, set to true to hide identity providers,
    * hasinstructions - Flag, set to true to show instructions,
    * identityproviders - List of identiy providers,
    * instructions - Instructions,
    * instructionsformat - Format of instructions,
    * loginurl - Login url,
    * rememberusername - Remeber username?,
    * passwordautocomplete - Allow password autocomplete?,
    * signupurl - Signup url,
    * cookieshelpiconformatted - Formatted html of cookies help icon,
    * errorformatted - Formatted error,
    * logourl - Flag, logo url,
    * sitename - Name of site,
    * logintoken - Random token to protect login request.

    Example context (json):
    {
        "autofocusform": false,
        "canloginasguest": "1",
        "canloginbyemail": false,
        "cansignup": true,
        "cookieshelpicon": {
            "heading": "Cookies must be enabled in your browser",
            "text": "<div class=\"no-overflow\">Two cookies are used on this site. Both died..</div>",
            "icon": {
                "attributes": [
                    {
                        "name": "class",
                        "value": "iconhelp"
                    },
                    {
                        "name": "alt",
                        "value": "Help with Cookies must be enabled in your browser"
                    },
                    {
                        "name": "title",
                        "value": "Help with Cookies must be enabled in your browser"
                    },
                    {
                        "name": "src",
                        "value": "http://localhost/stable_master/theme/image.php?theme=boost&component=core&image=help"
                    }
                ]
            },
            "linktext": null,
            "title": "Help with Cookies must be enabled in your browser",
            "url": "http://localhost/stable_master/help.php?component=core&identifier=cookiesenabled&lang=en",
            "ltr": true
        },
        "error": "",
        "forgotpasswordurl": "http://localhost/stable_master/login/forgot_password.php",
        "hasidentityproviders": false,
        "hasinstructions": true,
        "identityproviders": [],
        "instructions": "For full access to this site, you first need to create an account.",
        "instructionsformat": "1",
        "loginurl": "http://localhost/stable_master/login/index.php",
        "rememberusername": true,
        "passwordautocomplete": false,
        "signupurl": "http://localhost/stable_master/login/signup.php",
        "cookieshelpiconformatted": "",
        "errorformatted": "",
        "logourl": false,
        "sitename": "Beer & Chips",
        "logintoken": "randomstring"
    }
}}

<div class="m-y-0 hidden-sm-down"></div>
<div class="card rbLogin">
    <div class="card-block">
        <div class="card-title text-xs-center hidden">
            {{#logourl}}
                <h2><img src="{{logourl}}" title="{{sitename}}" alt="{{sitename}}"/></h2>
            {{/logourl}}
            {{^logourl}}
                <h2>{{sitename}}</h2>
            {{/logourl}}

        </div>

        {{#cansignup}}
            <div class="sr-only">
                <a href="{{signupurl}}">{{#str}} tocreatenewaccount {{/str}}</a>
            </div>
        {{/cansignup}}

        {{#error}}
            <div class="loginerrors m-t-1">
                <a href="#" id="loginerrormessage" class="accesshide">{{error}}</a>
                <div class="alert alert-danger" role="alert">{{error}}</div>
            </div>
        {{/error}}

        <div class="custom-login">
            <div class="login-container">
                <!-- Columna izquierda -->
                <div class="left-column">
                    <div class="logo-section">
                        <img src="https://www.campuscrecer.pe/theme/eguru/img/icon-login.png" class="iconLogin" alt="Eguru">
                    </div>
                    <h2>Ingresa al Campus Crecer</h2>
                    <p class="login-subtitle">Ingresa tus credenciales para iniciar tu aprendizaje.</p>
                </div>

                <!-- Columna derecha -->
                <div class="right-column">
                    <form class="login-form" action="{{loginurl}}" method="post" id="login" {{^passwordautocomplete}}autocomplete="off"{{/passwordautocomplete}}>
                        <input id="anchor" type="hidden" name="anchor" value="">
                        <script>document.getElementById('anchor').value = location.hash;</script>
                        <input type="hidden" name="logintoken" value="{{logintoken}}">

                        <!-- Alert de error de política -->
                        <div id="policy-error" class="alert alert-danger" style="display: none;" role="alert">
                            Debe aceptar la política de privacidad
                        </div>

                        <!-- Campos de entrada -->
                        <div class="form-field">
                            <div class="input-container">
                              <span class="material-icons" style="color:#0e1d61">account_circle</span>
                                <input type="text"
                                       name="username"
                                       id="username"
                                       class="form-input"
                                       value="{{username}}"
                                       placeholder="Correo electrónico"
                                       required>
                            </div>
                        </div>

                        <div class="form-field">
                            <div class="input-container">
                              <span class="material-icons" style="color:#0e1d61">password</span>
                                <input type="password"
                                       name="password"
                                       id="password"
                                       class="form-input"
                                       placeholder="Contraseña"
                                       required
                                       {{^passwordautocomplete}}autocomplete="off"{{/passwordautocomplete}}>
                                <button type="button" class="password-toggle">
                                    <!--img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%23666666'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E"
                                         alt="Mostrar contraseña"-->
                                         <span class="material-icons">visibility</span>
                                </button>
                            </div>
                        </div>

                        <!-- Política de privacidad -->
                        <div id="privacy-policy-section" class="privacy-policy-section" style="display: none;">
                            <div class="form-check">
                                <input type="checkbox"
                                       name="privacy_policy"
                                       id="privacy-policy"
                                       value="1"
                                       class="form-check-input">
                                <label class="form-check-label" for="privacy-policy">
                                    Declaro que he leído y acepto expresamente la <a href="https://www.crecerseguros.pe/wp-content/uploads/2024/11/Politicas_de_datos_2024_V3.pdf" target="blank" class="policy-link">política de privacidad</a> de Crecer Seguros, y autorizo expresamente el <a href="https://www.crecerseguros.pe/wp-content/uploads/2025/01/Envio-de-Comunicaciones-con-fines-educativos_Usuarios-Nuevos-y-registrados-.pdf" target="blank">envío de comunicaciones</a> con fines educativos.
                                </label>
                            </div>
                        </div>

                        <!-- Botón de ingreso -->
                        <button type="submit" class="login-button" id="loginbtn">Ingresar</button>

                        <!-- Enlace de recuperación -->
                        <div class="forgot-password">
                            <a href="{{forgotpasswordurl}}">¿Olvidaste tu contraseña?</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script>
        document.querySelector('.password-toggle')?.addEventListener('click', function() {
            const passwordInput = document.querySelector('#password');
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
        });
        </script>

    </div>
</div>

{{#cansignup}}
<!--div class="custom-signuppanel">
    <div class="card">
        <div class="card-block">
            <div class="card-title">
                <h2>{{#str}}firsttime{{/str}}</h2>
            </div>
            <div>
            {{{instructions}}}
            {{#cansignup}}
                <form class="m-t-1" action="{{signupurl}}" method="get" id="signup">
                    <button type="submit" class="btn btn-secondary">{{#str}}startsignup{{/str}}</button>
                </form>
            {{/cansignup}}
            </div>
        </div>
    </div>
</div-->
{{/cansignup}}

{{#hasinstructions}}
<div class="row">
    <div class="col-xl-6 push-xl-3 m-2-md col-sm-8 push-sm-2">

    </div>
</div>
{{/hasinstructions}}

{{#js}}
    require(['jquery', 'core/notification'], function($, Notification) {
        // Verificar política cuando se carga la página y cuando cambia el username
        function checkPolicy() {
            var username = $('#username').val();
            if (username) {
                $.ajax({
                    url: M.cfg.wwwroot + '/theme/eguru/login/check_policy.php',
                    method: 'POST',
                    data: { username: username },
                    success: function(response) {
                        $('#privacy-policy-section').hide();
                        $('#privacy-policy').prop('required', false);

                        if (response === '0') {
                            $('#privacy-policy-section').show();
                            $('#privacy-policy').prop('required', true);
                        }
                    }
                });
            }
        }

        // Handler del formulario
        $('#login').on('submit', function(e) {
            e.preventDefault();

            var username = $('#username').val();
            var password = $('#password').val();
            var logintoken = $('input[name="logintoken"]').val();
            var privacyAccepted = $('#privacy-policy').is(':checked');
            var policyVisible = $('#privacy-policy-section').is(':visible');

            $('#policy-error').hide();

            if (!username || !password) {
                Notification.alert('Error', 'Por favor complete todos los campos');
                return false;
            }

            if (policyVisible && !privacyAccepted) {
                $('#policy-error').show();
                return false;
            }

            // Prepare form data
            var formData = new FormData();
            formData.append('user', username);
            formData.append('pass', btoa(btoa(password) + logintoken));

            // Solo agregar privacy_policy si la sección está visible
            if (policyVisible) {
                formData.append('privacy_policy', privacyAccepted ? 1 : 0);
            }

            // Submit login
            $.ajax({
                url: M.cfg.wwwroot + '/theme/eguru/login/index.php',
                method: 'POST',
                data: {
                    user: username,
                    pass: btoa(btoa(password) + logintoken),
                    privacy_policy: policyVisible ? (privacyAccepted ? 1 : 0) : undefined,
                    logintoken: logintoken
                },
                success: function(response) {
                    try {
                        console.log('Server response:', response);
                        if (response.status === 0) {
                            window.location.href = M.cfg.wwwroot + '/my/mycourses.php';
                        } else if (response.status === 2) {
                            $('#privacy-policy-section').show();
                            $('#policy-error').show();
                        } else {
                            Notification.alert('Error', response.message || 'Error en la autenticación');
                        }
                    } catch (e) {
                        console.error('Error processing response:', e);
                        Notification.alert('Error', 'Error en la respuesta del servidor');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Server error:', error);
                    console.error('Status:', status);
                    console.error('Response:', xhr.responseText);
                    Notification.alert('Error', 'Error de conexión con el servidor');
                }
            });
        });

        // Toggle password visibility
        $('.password-toggle').on('click', function() {
            var passwordInput = $('#password');
            var type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
            passwordInput.attr('type', type);
        });

        // Verificar política inicial
        checkPolicy();

        // Re-verificar cuando cambia el username
        $('#username').on('change blur', checkPolicy);
    });
{{/js}}