@extends('layouts.app')

@section('title', __('profile.edit_profile'))
@section('page_heading', __('profile.edit_profile'))


@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.profile.security') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-shield me-1"></i>{{ __('profile.security_settings') }}
    </a>
</div>

@include('layouts.partials.workspace-page-styles')

@php
    $currentEmailValue = old('email', $user->email);
    $showCurrentPasswordField = $currentEmailValue !== $user->email || $errors->has('current_password');
@endphp

<div class="app-grid gap-4">
    {{-- Avatar app-card --}}
    <div class="xl:col-span-3 lg:col-span-4">
        <div class="workspace-shell h-full">
            <div class="workspace-body flex flex-col items-center text-center gap-3">
                <div class="profile-avatar-wrap">
                    @if($user->avatar)
                        <img id="avatar-preview" src="{{ $user->avatar_url }}" alt="{{ $user->name }}"
                             class="rounded-full profile-avatar-img">
                    @else
                        <div id="avatar-preview-placeholder" class="profile-avatar-placeholder">
                            <i class="fa-solid fa-user"></i>
                        </div>
                        <img id="avatar-preview" src="" alt="" class="rounded-full profile-avatar-img hidden">
                    @endif
                </div>
                <div>
                    <div class="font-bold text-sm">{{ $user->name }}</div>
                    <div class="text-slate-500 dark:text-slate-400" style="font-size:.82rem">{{ $user->email }}</div>
                </div>
                <div class="flex flex-col gap-2 w-full">
                    <span class="app-badge w-full py-2 {{ $user->two_factor_email_enabled ? 'app-badge--success' : 'app-badge--secondary' }}">
                        <i class="fa-solid fa-envelope-circle-check me-1"></i>{{ __('profile.email_two_factor') }}:
                        {{ $user->two_factor_email_enabled ? __('profile.enabled') : __('profile.disabled') }}
                    </span>
                    <span class="app-badge w-full py-2 {{ $user->two_factor_app_enabled ? 'app-badge--success' : 'app-badge--secondary' }}">
                        <i class="fa-solid fa-phone me-1"></i>{{ __('profile.google_authenticator') }}:
                        {{ $user->two_factor_app_enabled ? __('profile.enabled') : __('profile.disabled') }}
                    </span>
                </div>
                <a href="{{ route('dashboard.profile.security') }}" class="app-btn app-btn--secondary app-btn--sm w-full">
                    <i class="fa-solid fa-shield me-1"></i>{{ __('profile.security_settings') }}
                </a>
            </div>
        </div>
    </div>

    {{-- Edit form --}}
    <div class="xl:col-span-9 lg:col-span-8">
        <div class="workspace-shell">
            <div class="workspace-body">
                <div class="collection-card__header mb-4">
                    <div class="collection-card__intro">
                        <span class="collection-card__icon"><i class="fa-solid fa-user-gear"></i></span>
                        <div class="collection-card__title">
                            <h2>{{ __('profile.profile_information') }}</h2>
                            <p>{{ __('profile.profile_edit_form_text') }}</p>
                        </div>
                    </div>
                </div>

                <form action="{{ route('dashboard.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf @method('PUT')

                    <div class="app-grid gap-4">
                        <div class="md:col-span-6">
                            <label class="app-label font-bold required">{{ __('profile.full_name') }}</label>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}"
                                   class="app-input @error('name') app-input--invalid @enderror" required>
                            @error('name')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="md:col-span-6">
                            <label class="app-label font-bold required">{{ __('profile.email_address') }}</label>
                            <input type="email" id="profile_email" name="email"
                                   value="{{ $currentEmailValue }}"
                                   data-original-email="{{ $user->email }}"
                                   class="app-input @error('email') app-input--invalid @enderror" required>
                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ __('profile.email_change_password_hint') }}</div>
                            @error('email')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="md:col-span-6 {{ $showCurrentPasswordField ? '' : 'hidden' }}" id="current_password_field_wrapper">
                            <label class="app-label font-bold">{{ __('profile.current_password') }}</label>
                            <input type="password" name="current_password"
                                   class="app-input @error('current_password') app-input--invalid @enderror">
                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ __('profile.current_password_for_email_only') }}</div>
                            @error('current_password')<div class="app-field-error">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-span-12">
                            <label class="app-label font-bold">{{ __('profile.avatar') }}</label>
                            <input type="file" name="avatar" id="avatar_input" accept=".png,.jpg,.jpeg"
                                   class="app-input @error('avatar') app-input--invalid @enderror">
                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ __('profile.profile_avatar_hint') }}</div>
                            @error('avatar')<div class="app-field-error block">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <div class="flex justify-end gap-2 mt-5">
                        <a href="{{ route('dashboard.home') }}" class="app-btn app-btn--secondary">{{ __('dashboard.Cancel') }}</a>
                        <button type="submit" class="app-btn app-btn--primary">{{ __('profile.save_changes') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.profile-avatar-wrap { position: relative; }
.profile-avatar-img  { width: 96px; height: 96px; object-fit: cover; border: 3px solid #e2e8f0; }
.profile-avatar-placeholder {
    width: 96px; height: 96px; border-radius: 50%;
    background: #f1f5f9; border: 3px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #94a3b8;
}
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Toggle current-password field on email change
    const emailInput = document.getElementById('profile_email');
    const wrapper    = document.getElementById('current_password_field_wrapper');
    if (emailInput && wrapper) {
        const toggle = () => wrapper.classList.toggle('hidden', emailInput.value.trim() === emailInput.dataset.originalEmail.trim());
        emailInput.addEventListener('input', toggle);
        toggle();
    }

    // Live avatar preview
    const avatarInput       = document.getElementById('avatar_input');
    const avatarPreview     = document.getElementById('avatar-preview');
    const avatarPlaceholder = document.getElementById('avatar-preview-placeholder');
    if (avatarInput && avatarPreview) {
        avatarInput.addEventListener('change', function () {
            const file = this.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = e => {
                avatarPreview.src = e.target.result;
                avatarPreview.classList.remove('hidden');
                if (avatarPlaceholder) avatarPlaceholder.classList.add('hidden');
            };
            reader.readAsDataURL(file);
        });
    }
});
</script>
@endsection