@if ($user->provider)
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>
        <strong>{{ t('information') }}:</strong> {{ ucfirst($user->provider) }}
        {{ t('account-login-message') }}
    </div>
@else
    <div class="form-card p-4">
        <h4 class="mb-4"><i class="fas fa-key me-2"></i>{{ t('change-password') }}</h4>

        <form action="{{ route('profile.password.update') }}" method="POST" id="passwordForm">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label for="current_password" class="form-label">{{ t('current-password') }} <span
                        class="text-danger">*</span></label>
                <input type="password" class="form-control @error('current_password') is-invalid @enderror"
                    id="current_password" name="current_password" required autocomplete="current-password">
                @error('current_password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">{{ t('new-password') }} <span
                        class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password"
                        name="password" required autocomplete="new-password">
                    <button class="btn btn-outline-secondary toggle-password" type="button">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <small class="form-text text-muted">
                    {{ t('password-requirements') }}
                </small>
                @error('password')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="password_confirmation" class="form-label">{{ t('confirm-new-password') }} <span
                        class="text-danger">*</span></label>
                <div class="input-group">
                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                        id="password_confirmation" name="password_confirmation" required autocomplete="new-password">
                    <button class="btn btn-outline-secondary toggle-password" type="button">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                @error('password_confirmation')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="d-flex justify-content-end gap-2 mt-4">
                <button type="button" class="btn btn-secondary"
                    onclick="document.getElementById('passwordForm').reset()">{{ t('clean') }}</button>
                <button type="submit" class="btn btn-primary" id="passwordSubmitBtn">
                    <i class="fas fa-save me-2"></i>{{ t('update') }}
                </button>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const passwordForm = document.getElementById('passwordForm');
            const passwordSubmitBtn = document.getElementById('passwordSubmitBtn');

            if (!passwordForm || !passwordSubmitBtn) {
                return;
            }

            passwordForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // Butonu devre dışı bırak
                passwordSubmitBtn.disabled = true;
                const originalBtnText = passwordSubmitBtn.innerHTML;
                passwordSubmitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>' +
                    "{{ addslashes(t('updating')) }}";

                // Form verilerini al
                const formData = new FormData(passwordForm);
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute(
                    'content') || '';
                formData.append('_token', csrfToken);

                // Validation hatalarını temizle
                passwordForm.querySelectorAll('.is-invalid').forEach(el => {
                    el.classList.remove('is-invalid');
                });
                passwordForm.querySelectorAll('.invalid-feedback').forEach(el => {
                    el.remove();
                });

                // AJAX isteği gönder
                fetch(passwordForm.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                        credentials: 'same-origin'
                    })
                    .then(async response => {
                        const contentType = response.headers.get('content-type');
                        if (!contentType || !contentType.includes('application/json')) {
                            const text = await response.text();
                            throw new Error('Sunucudan beklenmeyen yanıt alındı.');
                        }

                        const data = await response.json();

                        if (!response.ok) {
                            // Hata yanıtı (422 validation errors veya diğer hatalar)
                            if (data.errors) {
                                // Validation hataları - Laravel formatı
                                Object.keys(data.errors).forEach(field => {
                                    const input = passwordForm.querySelector(
                                        `[name="${field}"]`);
                                    if (input) {
                                        input.classList.add('is-invalid');
                                        const existingFeedback = input.parentNode
                                            .querySelector('.invalid-feedback');
                                        if (existingFeedback) {
                                            existingFeedback.remove();
                                        }
                                        const errorDiv = document.createElement('div');
                                        errorDiv.className = 'invalid-feedback';
                                        errorDiv.textContent = Array.isArray(data.errors[
                                                field]) ?
                                            data.errors[field][0] :
                                            data.errors[field];
                                        input.parentNode.appendChild(errorDiv);
                                    }
                                });

                                // İlk hatayı toast'ta göster
                                const firstError = Object.values(data.errors)[0];
                                const errorMessage = Array.isArray(firstError) ? firstError[0] :
                                    firstError;

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Hata!',
                                    text: errorMessage || data.message ||
                                        'Lütfen formdaki hataları düzeltin.',
                                    timer: 3000,
                                    showConfirmButton: false,
                                    toast: true,
                                    position: 'top-end'
                                });
                            } else if (data.message) {
                                // Genel hata mesajı
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Hata!',
                                    text: data.message,
                                    timer: 3000,
                                    showConfirmButton: false,
                                    toast: true,
                                    position: 'top-end'
                                });
                            } else {
                                throw new Error('Şifre güncellenirken bir hata oluştu.');
                            }
                            return;
                        }

                        // Başarılı durum
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Başarılı!',
                                text: data.message || 'Şifreniz başarıyla güncellendi.',
                                timer: 3000,
                                showConfirmButton: false,
                                toast: true,
                                position: 'top-end'
                            });

                            // Formu temizle
                            passwordForm.reset();
                        } else {
                            throw new Error(data.message ||
                                'Şifre güncellenirken bir hata oluştu.');
                        }
                    })
                    .catch(error => {
                        // Network veya diğer hatalar
                        Swal.fire({
                            icon: 'error',
                            title: 'Hata!',
                            text: error.message || 'Şifre güncellenirken bir hata oluştu.',
                            timer: 3000,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });
                    })
                    .finally(() => {
                        // Butonu tekrar etkinleştir
                        passwordSubmitBtn.disabled = false;
                        passwordSubmitBtn.innerHTML = originalBtnText;
                    });
            });
        });
    </script>
@endif

<!-- Two Factor Authentication -->
<div class="form-card p-4">
    <h4 class="mb-4"><i class="fas fa-shield-alt me-2"></i>{{ t('two-factor-authentication') }}</h4>

    <div class="d-flex justify-content-between align-items-center">
        <div class="flex-grow-1">
            <p class="text-muted mb-0">
                {{ t('two-factor-authentication-description') }}
            </p>
        </div>
        <div class="ms-4">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" role="switch" id="twoFactorToggle"
                    {{ $user->two_factor_enabled ? 'checked' : '' }}
                    style="width: 3rem; height: 1.5rem; cursor: pointer;">
                <label class="form-check-label visually-hidden" for="twoFactorToggle">
                    {{ t('two-factor-authentication') }}
                </label>
            </div>
        </div>
    </div>

    <div class="mt-3">
        <small class="text-muted">
            <i class="fas fa-info-circle me-1"></i>
            <span id="twoFactorStatus">
                {{ $user->two_factor_enabled ? t('two-factor-authentication-enabled') : t('two-factor-authentication-disabled') }}
            </span>
        </small>
    </div>
</div>



<!-- Account Information -->
<div class="form-card p-4 account-info">
    <h4 class="mb-4"><i class="fas fa-info-circle me-2"></i>{{ t('account-information') }}</h4>

    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label">{{ t('registration-date') }}</label>
            <p class="form-control-plaintext">{{ $user->created_at->format('d.m.Y H:i') }}</p>
        </div>

        <div class="col-md-6 mb-3">
            <label class="form-label">{{ t('last-update') }}</label>
            <p class="form-control-plaintext">{{ $user->updated_at->format('d.m.Y H:i') }}</p>
        </div>

        @if ($user->provider)
            <div class="col-md-6 mb-3">
                <label class="form-label">{{ t('login-method') }}</label>
                <p class="form-control-plaintext">
                    <i class="fab fa-{{ $user->provider === 'google' ? 'google' : 'facebook' }} me-2"></i>
                    {{ ucfirst($user->provider) }}
                </p>
            </div>
        @endif
    </div>
</div>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        const twoFactorToggle = document.getElementById('twoFactorToggle');
        const twoFactorStatus = document.getElementById('twoFactorStatus');

        if (!twoFactorToggle) {
            return;
        }

        twoFactorToggle.addEventListener('change', function() {
            const isEnabled = this.checked;
            const originalState = !isEnabled; // Toggle değişmeden önceki durum

            // Toggle'ı geçici olarak devre dışı bırak
            twoFactorToggle.disabled = true;

            // Loading durumu göster
            const originalStatusText = twoFactorStatus.textContent;
            twoFactorStatus.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>' +
                "{{ addslashes(t('updating')) }}";

            // AJAX isteği gönder
            fetch("{{ route('profile.two-factor.toggle') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                            ?.getAttribute('content') || ''
                    },
                    body: JSON.stringify({
                        enabled: isEnabled
                    }),
                    credentials: 'same-origin'
                })
                .then(async response => {
                    const contentType = response.headers.get('content-type');
                    if (!contentType || !contentType.includes('application/json')) {
                        throw new Error('Sunucudan beklenmeyen yanıt alındı.');
                    }

                    const data = await response.json();

                    if (!response.ok) {
                        // Hata durumunda toggle'ı geri al
                        twoFactorToggle.checked = originalState;

                        Swal.fire({
                            icon: 'error',
                            title: 'Hata!',
                            text: data.message ||
                                '2FA durumu güncellenirken bir hata oluştu.',
                            timer: 3000,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });

                        twoFactorStatus.textContent = originalStatusText;
                        return;
                    }

                    // Başarılı durum
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Başarılı!',
                            text: data.message || (isEnabled ?
                                '2FA başarıyla aktif edildi.' :
                                '2FA başarıyla kapatıldı.'),
                            timer: 3000,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });

                        // Durum metnini güncelle
                        twoFactorStatus.textContent = isEnabled ?
                            "{{ addslashes(t('two-factor-authentication-enabled')) }}" :
                            "{{ addslashes(t('two-factor-authentication-disabled')) }}";
                    } else {
                        // Beklenmeyen durum
                        twoFactorToggle.checked = originalState;
                        twoFactorStatus.textContent = originalStatusText;

                        Swal.fire({
                            icon: 'error',
                            title: 'Hata!',
                            text: data.message ||
                                '2FA durumu güncellenirken bir hata oluştu.',
                            timer: 3000,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });
                    }
                })
                .catch(error => {
                    // Network veya diğer hatalar - toggle'ı geri al
                    twoFactorToggle.checked = originalState;
                    twoFactorStatus.textContent = originalStatusText;

                    Swal.fire({
                        icon: 'error',
                        title: 'Hata!',
                        text: error.message || '2FA durumu güncellenirken bir hata oluştu.',
                        timer: 3000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                })
                .finally(() => {
                    // Toggle'ı tekrar etkinleştir
                    twoFactorToggle.disabled = false;
                });
        });
    });

    // Şifre Göster/Gizle İşlemi
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function() {
            const input = this.parentElement.querySelector('input');
            const icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
</script>