@extends('auth.layouts.app')

@section('title', 'Actualizar Contraseña')

@section('content')
<h4 class="mb-1 fw-semibold">Actualizar Contraseña</h4>
<p class="mb-4">Ingresa tu nueva contraseña de acceso</p>
<form method="POST" action="{{ isset($token) ? route('password.update') : route('change.password.update') }}">
    @csrf
    @if(isset($token))
        {{-- Campos para recuperación de contraseña --}}
        <input type="hidden" name="token" value="{{ $token }}">
        <input type="hidden" name="email" value="{{ $email }}">
    @else
        {{-- Campo para primer cambio de contraseña --}}
        <input type="email" name="current_email" value="{{auth()->user()->email}}" autocomplete="username" style="display:none;"/>
    @endif
    <div class="mb-3 form-password-toggle">
        <label class="form-label" for="password">Nueva contraseña</label>
        <div class="input-group input-group-merge">
            <input type="password" id="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password"
                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
            <span class="input-group-text cursor-pointer">
                <i id="icon-password" class="ti ti-eye-off"></i>
            </span>
        </div>
        @error('password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="mb-3 form-password-toggle">
        <label class="form-label" for="password-confirm">Confirmar contraseña</label>
        <div class="input-group input-group-merge">
            <input type="password" id="password-confirm" class="form-control"
                    name="password_confirmation" required autocomplete="new-password"
                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
            <span class="input-group-text cursor-pointer">
                <i id="icon-password-confirm" class="ti ti-eye-off"></i>
            </span>
        </div>
    </div>

    <div class="mb-3">
        <small class="text-muted">
            <i class="ti ti-info-circle me-1"></i>
            La contraseña debe tener al menos una mayúscula, una minúscula, un número y un símbolo.
        </small>
    </div>

    <button class="btn btn-primary d-grid w-100 mb-3" type="submit">
        Actualizar Contraseña
    </button>
</form>
@endsection

@section('js')
    <script>
        // Manejar envío del formulario cuando viene con token (recuperación)
        $(document).ready(function() {
            const hasToken = $('input[name="token"]').length > 0;
            if (hasToken) {

                $('form').on('submit', function(e) {
                    e.preventDefault();
                    const formData = $(this).serialize();
                    const formAction = $(this).attr('action');

                    $.ajax({
                        url: formAction,
                        type: 'POST',
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                            if (data.success) {
                                Swal.fire({
                                    title: '¡Éxito!',
                                    text: data.message,
                                    icon: 'success',
                                    confirmButtonText: 'Ir al Login',
                                    allowOutsideClick: false,
                                    timer: 2000,
                                    timerProgressBar: true
                                }).then(() => {
                                    window.location.href = data.redirect;
                                });
                            } else {
                                Swal.fire({
                                    title: 'Error',
                                    text: data.message || 'Hubo un problema al actualizar la contraseña',
                                    icon: 'error'
                                });
                            }
                        },
                        error: function(xhr) {
                            let errorMsg = 'Hubo un problema al procesar la solicitud';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMsg = xhr.responseJSON.message;
                            }
                            Swal.fire({
                                title: 'Error',
                                text: errorMsg,
                                icon: 'error'
                            });
                        }
                    });
                });
            } else {
                console.log('Modo cambio normal (sin token)');
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
            // Mostramos las alertas existentes primero
            var successMessage  = "{{ session('success') }}";
            var errorMessage    = "{{ session('error') }}";
            var warningMessage  = "{{ session('warning') }}";
            if (warningMessage) {
                Swal.fire({
                    title: '¡Atención!',
                    text: warningMessage,
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
            if (errorMessage) {
                Swal.fire({
                    title: '¡Error!',
                    text: errorMessage,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
            if (successMessage) {
                Swal.fire({
                    title: '¡Éxito!',
                    text: successMessage,
                    icon: 'success',
                    confirmButtonText: 'OK'
                });
            }
        });

        function togglePassword(fieldId) {
            const passwordField = document.getElementById(fieldId);
            const icon = document.getElementById('icon-' + fieldId);

            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                icon.className = 'ti ti-eye';
            } else {
                passwordField.type = 'password';
                icon.className = 'ti ti-eye-off';
            }
        }
    </script>
@endsection