@extends('layouts.arte-sacra.theme')
@section('title', 'Redefinir Senha')

@section('content')
    <div class="container mt-5 mb-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card shadow p-4 rounded-4 border-0">
                    <h4 class="text-center mb-4">🔐 Redefinir sua Senha</h4>

                    <form method="POST" action="{{ route('paginas.cultura.arteSacra.updatePassword') }}" id="resetPasswordForm">
                        @csrf

                        <input type="hidden" name="redirect_to" value="{{ url()->previous() }}">

                        <div class="mb-3">
                            <label for="new_password" class="form-label">Nova Senha <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control @error('new_password') is-invalid @enderror"
                                    name="new_password" id="new_password" required minlength="8">
                                <span class="input-group-text" onclick="togglePassword('new_password')">
                                    <i class="bi bi-eye" id="eye_new_password"></i>
                                </span>
                            </div>
                            @error('new_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="new_password_confirmation" class="form-label">Confirmar Senha <span
                                    class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password"
                                    class="form-control @error('new_password_confirmation') is-invalid @enderror"
                                    name="new_password_confirmation" id="new_password_confirmation" required>
                                <span class="input-group-text" onclick="togglePassword('new_password_confirmation')">
                                    <i class="bi bi-eye" id="eye_new_password_confirmation"></i>
                                </span>
                            </div>

                            <div class="invalid-feedback" id="passwordMismatch" style="display: none;">
                                As senhas não coincidem.
                            </div>

                            @error('new_password_confirmation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <button type="submit" class="btn btn-primary w-100 mt-3">Atualizar Senha</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <script>
        const password = document.getElementById('new_password');
        const confirmPassword = document.getElementById('new_password_confirmation');
        const mismatchWarning = document.getElementById('passwordMismatch');
        const form = document.getElementById('resetPasswordForm');

        function togglePassword(fieldId) {
            const field = document.getElementById(fieldId);
            const icon = document.getElementById('eye_' + fieldId);
            if (field.type === 'password') {
                field.type = 'text';
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            } else {
                field.type = 'password';
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }
        }

        function checkPasswordsMatch() {
            if (password.value !== confirmPassword.value) {
                mismatchWarning.style.display = 'block';
                confirmPassword.classList.add('is-invalid');
                return false;
            } else {
                mismatchWarning.style.display = 'none';
                confirmPassword.classList.remove('is-invalid');
                return true;
            }
        }

        confirmPassword.addEventListener('input', checkPasswordsMatch);
        password.addEventListener('input', checkPasswordsMatch);

        form.addEventListener('submit', function(e) {
            if (!checkPasswordsMatch()) {
                e.preventDefault();
            }
        });
    </script>
@endsection