@extends('layouts.app')

@section('content')
    <div class="d-flex flex-center flex-column flex-column-fluid">
        <div class="w-lg-600px p-10 p-lg-15 mx-auto">
            <form class="form w-100" data-kt-redirect-url="{{ route('login') }}" id="kt_new_password_form" method="POST"
                action="{{ route('password.update') }}">
                @csrf
                <input type="hidden" name="token" value="{{ $token }}">

                <h1 class="text-blue fs-3qx mb-3">Nueva contraseña</h1>

                <div class="text-gray fw-semibold fs-3 mb-5">
                    ¿Ya has restablecido tu contraseña?
                    <a href="{{ route('login') }}" class="link-primary fw-bold">
                        Iniciar sesión
                    </a>
                </div>

                <div id="form_errors" class="alert alert-danger d-none"></div>

                <div class="fv-row mb-10">
                    <label class="form-label fw-bold text-gray-900 fs-6">Email</label>
                    <input class="form-control form-control-solid" type="email" value="{{ $email ?? old('email') }}"
                        required readonly placeholder="" name="email" id="email">
                </div>

                <div class="mb-10 fv-row">
                    <label class="form-label fw-bold text-dark fs-6">Contraseña</label>
                    <div class="position-relative">
                        <input class="form-control form-control-lg form-control-solid" type="password" placeholder=""
                            name="password" id="password" autocomplete="off">
                        <span
                            class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 toggle-password">
                            <i class="far fa-eye"></i>
                        </span>
                    </div>
                    <div class="d-flex align-items-center mt-3" id="password_meter">
                        <div class="flex-grow-1 bg-secondary rounded h-5px me-2 meter-bar"></div>
                        <div class="flex-grow-1 bg-secondary rounded h-5px me-2 meter-bar"></div>
                        <div class="flex-grow-1 bg-secondary rounded h-5px me-2 meter-bar"></div>
                        <div class="flex-grow-1 bg-secondary rounded h-5px meter-bar"></div>
                    </div>
                    <div class="text-muted mt-1" id="password_meter_text">
                        Usa 8+ caracteres con letras, números y símbolos.
                    </div>
                </div>

                <div class="fv-row mb-10">
                    <label class="form-label fw-bold text-dark fs-6">Confirmar contraseña</label>
                    <div class="position-relative">
                        <input class="form-control form-control-lg form-control-solid" type="password" placeholder=""
                            name="password_confirmation" id="password_confirmation" autocomplete="off">
                        <span
                            class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2 toggle-password">
                            <i class="far fa-eye"></i>
                        </span>
                    </div>
                </div>

                <div class="fv-row mb-10">
                    <div class="form-check form-check-custom form-check-solid form-check-inline">
                        <input class="form-check-input" type="checkbox" name="toc" value="1" id="toc">
                        <label class="form-check-label fw-semibold text-gray-700 fs-6" for="toc">
                            Estoy de acuerdo y acepto los
                            <a href="#" class="ms-1 link-primary">Terminos y condiciones</a>.
                        </label>
                    </div>
                </div>

                <div class="text-center">
                    <button type="button" id="kt_new_password_submit" class="btn btn-lg btn-iniciar fw-bold">
                        <span class="indicator-label">
                            Cambiar Contraseña
                        </span>
                        <span class="indicator-progress" style="display:none;">
                            Cambiando...
                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {

            $('#password').on('keyup', function() {
                var password = $(this).val();
                var score = 0;
                var bars = $('#password_meter .meter-bar');
                var meterText = $('#password_meter_text');

                bars.removeClass('strength-weak strength-medium strength-strong bg-secondary');

                if (!password) {
                    meterText.text('Usa 8+ caracteres con letras, números y símbolos.');
                    bars.addClass('bg-secondary');
                    return;
                }

                // Calcula el score
                if (password.length >= 8) score++;
                if (/[a-z]/.test(password)) score++;
                if (/[A-Z]/.test(password)) score++;
                if (/[0-9]/.test(password)) score++;
                if (/[^a-zA-Z0-9]/.test(password)) score++;

                var numBars = Math.min(score, 4);

                if (score <= 2) {
                    bars.slice(0, numBars).addClass('strength-weak');
                    meterText.text('Contraseña Débil');
                } else if (score <= 4) {
                    bars.slice(0, numBars).addClass('strength-medium');
                    meterText.text('Contraseña Media');
                } else {
                    bars.slice(0, numBars).addClass('strength-strong');
                    meterText.text('Contraseña Fuerte');
                }

                bars.slice(numBars).addClass('bg-secondary');
            });
            $('.toggle-password').on('click', function() {
                var input = $(this).siblings('input');
                var icon = $(this).find('i');

                if (input.attr('type') === 'password') {
                    input.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    input.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });

            $('#kt_new_password_submit').on('click', function(e) {
                e.preventDefault();

                var password = $('#password').val();
                var passwordConfirmation = $('#password_confirmation').val();
                var tocChecked = $('#toc').is(':checked');
                var email = $('#email').val();
                var errorMessages = [];

                var emailDomain = '';
                if (email.includes('@')) {
                    var parts = email.split('@')[1].split('.');
                    if (parts.length > 0) {
                        emailDomain = parts[0];
                    }
                }

                if (!password) {
                    errorMessages.push('La contraseña es requerida.');
                } else {
                    if (password.length < 8) errorMessages.push(
                        'La contraseña debe tener al menos 8 caracteres.');
                    if (password === email) errorMessages.push(
                        'La contraseña no puede ser igual a tu correo electrónico.');
                    if (emailDomain && password.toLowerCase().includes(emailDomain.toLowerCase())) {
                        errorMessages.push('La contraseña no puede contener el dominio de tu correo (' +
                            emailDomain + ').');
                    }
                }

                if (!passwordConfirmation) {
                    errorMessages.push('La confirmación de la contraseña es requerida.');
                } else if (password !== passwordConfirmation) {
                    errorMessages.push('La contraseña y su confirmación no coinciden.');
                }

                if (!tocChecked) {
                    errorMessages.push('Debes aceptar los Términos y Condiciones.');
                }

                var errorContainer = $('#form_errors');
                if (errorMessages.length > 0) {
                    errorContainer.html('<ul>' + errorMessages.map(m => '<li>' + m + '</li>').join('') +
                        '</ul>').removeClass('d-none');
                    return;
                }
                errorContainer.addClass('d-none');

                var button = $(this);
                var form = $('#kt_new_password_form');
                var formData = form.serialize();
                var url = form.attr('action');
                var redirectUrl = form.data('kt-redirect-url');

                button.prop('disabled', true);
                button.find('.indicator-label').hide();
                button.find('.indicator-progress').show();

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        Swal.fire({
                            text: "¡Has restablecido exitosamente tu contraseña!",
                            icon: "success",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, entendido",
                            customClass: {
                                confirmButton: "btn btn-iniciar"
                            }
                        }).then(function(result) {
                            if (result.isConfirmed && redirectUrl) {
                                location.href = redirectUrl;
                            }
                        });
                    },
                    error: function(jqXHR) {
                        var message =
                            "Lo sentimos, ocurrió un error inesperado. Inténtalo de nuevo.";
                        if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                            message = jqXHR.responseJSON.message;
                        }
                        Swal.fire({
                            text: message,
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, entendido",
                            customClass: {
                                confirmButton: "btn btn-iniciar"
                            }
                        });
                    },
                    complete: function() {
                        button.prop('disabled', false);
                        button.find('.indicator-label').show();
                        button.find('.indicator-progress').hide();
                    }
                });
            });
        });
    </script>
@endsection

<style>
    .meter-bar {
        transition: background-color 0.3s ease;
    }

    .strength-weak {
        background-color: #ffc700 !important;
    }

    .strength-medium {
        background-color: #ffa500 !important;
    }

    .strength-strong {
        background-color: #50cd89 !important;
    }

    .toggle-password {
        cursor: pointer;
    }
</style>