{% extends "Master/MicroTemplate.html.twig" %}

{% block body %}
    {{ parent() }}
    <div class="container-fluid bg-body-tertiary">
        <div class="row flex-center position-relative min-vh-100 g-0 pb-5">
            <div class="col-11 col-sm-10 col-xl-8">
                <div class="card border border-translucent auth-card">
                    <div class="card-body pe-md-0">
                        <div class="row align-items-center gx-0 gy-7">
                            <div class="col-auto bg-body-highlight dark__bg-gray-1100 rounded-3 position-relative overflow-hidden auth-title-box">
                                <div class="position-relative px-4 px-lg-7 pt-7 pb-7 pb-sm-5 text-center text-md-start pb-lg-7 pb-md-7">
                                    <p class="text-body-tertiary fs-8" id="descripción">
                                      {% set text_lateral = settings('themelogin','text_lateral', 0) %}
                                      {{text_lateral}}
                                    </p>
                                    <div>

                                      {# Obtener los valores desde la configuración #}
                                      {% set enlace_factura_script = settings('themelogin', 'enlace_factura_script', '') %}
                                      {% set enlace_facebook = settings('themelogin', 'enlace_facebook', '') %}
                                      {% set enlace_twitter = settings('themelogin', 'enlace_twitter', '') %}
                                      {% set enlace_instagram = settings('themelogin', 'enlace_instagram', '') %}

                                      {# Mostrar los enlaces si están configurados #}
                                      {% if enlace_factura_script %}
                                      <a href="{{ enlace_factura_script }}" rel="nofollow" id="enclaceWeb">
                                        <span class="uil uil-info-circle fs-6"></span>
                                      </a>
                                      {% endif %}

                                      {% if enlace_facebook %}
                                      <a href="{{ enlace_facebook }}" rel="nofollow" title="facebook" id="facebook">
                                        <span class="uil uil-facebook fs-6"></span>
                                      </a>
                                      {% endif %}

                                      {% if enlace_twitter %}
                                      <a href="{{ enlace_twitter }}" rel="nofollow" title="twitter" id="twitter">
                                        <span class="uil uil-twitter fs-6"></span>
                                      </a>
                                      {% endif %}

                                      {% if enlace_instagram %}
                                      <a href="{{ enlace_instagram }}" rel="nofollow" title="instagram" id="instagram">
                                        <span class="uil uil-instagram fs-6"></span>
                                      </a>
                                      {% endif %}


                                    </div>
                                </div>
                                <div class="position-relative z-n1 mb-6 d-none d-md-block text-center">
                                  {% set idfile = settings('themelogin','imagen_lateral', 0) %}
                                  {{ _self.loadLogo(idfile) }}
                                </div>
                            </div>
                            <div class="col mx-auto">
                                <div class="auth-form-box">
                                    <form action="{{ asset('login') }}" method="post" class="form">
                                        {{ formToken() }}
                                        <input type="hidden" name="action" value="login">
                                        <div class="">
                                            <div class="text-center mb-4">
                                                <a href="{{ asset('login') }}" class="d-flex flex-center text-decoration-none mb-4">
                                                    <div class="d-flex align-items-center fw-bolder fs-3 d-inline-block">
                                                        {% set idfile = settings('default','idloginimage', 0) %}
                                                        {{ _self.loadLogo(idfile) }}
                                                    </div>
                                                </a>
                                                <h3 class="text-body-highlight">Iniciar sesión</h3>
                                                <p class="text-body-tertiary">Accede a tu cuenta.</p>
                                            </div>
                                            <div class="mb-3 text-start">
                                                <p class="card-text text-center">{{ trans('login-text') }}</p>
                                                <label class="form-label" for="email">Email</label>
                                                <div class="form-icon-container">
                                                  <input type="text" name="fsNick" class="form-control form-icon-input" maxlength="50" placeholder="{{ trans('user') }}" required autocomplete="off" autofocus />
                                                  <span class="fas fa-user text-body fs-9 form-icon"></span>
                                                </div>
                                            </div>
                                            <div class="mb-3 text-start">
                                                <label class="form-label" for="password">Contraseña</label>
                                                <div class="form-icon-container">
                                                    <input type="password" name="fsPassword" class="form-control form-icon-input" maxlength="50" placeholder="{{ trans('password') }}" required autocomplete="off"/>
                                                    <span class="fas fa-key text-body fs-9 form-icon"></span>
                                                </div>
                                            </div>
                                            <div class="row flex-between-center mb-7">
                                                <div class="col-auto">
                                                    <div class="form-check mb-0">
                                                        <input class="form-check-input" id="basic-checkbox" type="checkbox" checked="checked" />
                                                        <label class="form-check-label mb-0" for="basic-checkbox">Recordarme</label>
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <a href="#" class="fw-semibold" data-bs-toggle="modal" data-target="#newPasswordModal">
                                                        {{ trans('i-forgot-password') }}
                                                    </a>
                                                </div>
                                            </div>    
                                            <button type="submit" class="btn btn-primary w-100 mb-3 fs-8">
                                                {{ trans('login') }}
                                            </button>
                                            <div class="text-center"><a class="fw-semibold" href="crear-cuenta.html">Crear una cuenta</a></div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form action="{{ asset('login') }}" method="post" class="form">
        {{ formToken() }}
        <input type="hidden" name="action" value="change-password">
        <div class="modal fade" id="newPasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-user-lock mr-2"></i> {{ trans('new-password') }}
                        </h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <a href="https://facturascripts.com/publicaciones/he-olvidado-mi-contrasena" rel="nofollow"
                        target="_blank" class="btn btn-block btn-link fs-8 mb-3">
                            {{ trans('need-help-password') }}
                        </a>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-user fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="text" name="fsNewUserPasswd" class="form-control" maxlength="50"
                                    placeholder="{{ trans('user') }}" required autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-key fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="password" name="fsNewPasswd" class="form-control" maxlength="50"
                                    placeholder="{{ trans('new-password') }}" required autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-eye fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="password" name="fsNewPasswd2" class="form-control" maxlength="50"
                                    placeholder="{{ trans('repeat-new-password') }}"
                                    required autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            {{ trans('database') }}
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-database fa-fw" aria-hidden="true"></i>
                                    </span>
                                </span>
                                <input type="password" name="fsDbPasswd" class="form-control"
                                    placeholder="{{ trans('db-password') }}" autocomplete="off"/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">{{ trans('save') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
 
{% block css %}
    {{ parent() }}
    <style>
        body {
            margin: 0px !important;
        }
        .alert {
            margin-bottom: 0px !important;
        }
        .navbar-top {
            display: none;
        }
        @media (min-width: 1400px) {
            .auth-card {
                padding: 0px !important;
            }
        }
    </style>
    {# Añadimos las hojas de estilo de ProTheme para que los estilos del login coincidan #}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
    <link href="{{ asset('Dinamic/Assets/Vendor/glightbox/glightbox.min.css') }}" rel="stylesheet">
    <link href="{{ asset('Dinamic/Assets/Vendor/simplebar/simplebar.min.css') }}" rel="stylesheet">
    <link href="{{ asset('Dinamic/Assets/CSS/theme.min.css') }}" rel="stylesheet" id="style-default">
    <link href="{{ asset('Dinamic/Assets/CSS/custom.css') }}?v=7" rel="stylesheet">
    <link href="{{ asset('Dinamic/Assets/CSS/user.min.css') }}" rel="stylesheet" id="user-style-default">
{% endblock %}

{% macro loadLogo(idfile) %}
    {% set url = 'Dinamic/Assets/Images/logotheme.png' %}
    {% if idfile > 0 %}
        {% set attached = attachedFile(idfile) %}
        {% if attached.filename is not empty %}
            {% set url = attached.url('download-permanent') %}
        {% endif %}
    {% endif %}
    <img class="card-img-top" src="{{ asset(url) }}" alt="FacturaScripts"/>
{% endmacro loadLogo %}