@extends('layouts.dashboard')

@section('page_title', __('My Profile'))
@section('title', __('My Profile'))

@section('content')
<div class="row g-4">
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body">
                <img src="{{ $user->avatarUrl() }}" class="rounded-circle mb-3" width="120" height="120" alt="{{ $user->name }}" style="object-fit:cover;">
                <h5 class="mb-1">{{ $user->name }}</h5>
                <p class="text-muted small mb-0">{{ $user->email }}</p>
            </div>
        </div>
    </div>

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

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">{{ __('Profile Information') }}</h5>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Full Name') }}</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $user->name) }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Email') }}</label>
                            <input type="email" class="form-control" value="{{ $user->email }}" readonly disabled>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('Phone') }}</label>
                            <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone', $user->phone) }}">
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('Bio') }}</label>
                            <textarea name="bio" rows="3" class="form-control @error('bio') is-invalid @enderror" maxlength="2000">{{ old('bio', $bio ?? '') }}</textarea>
                            @error('bio')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('Avatar') }}</label>
                            <input type="file" name="avatar" class="form-control @error('avatar') is-invalid @enderror" accept="image/*">
                            <small class="text-muted">{{ __('JPG, PNG up to 2MB.') }}</small>
                            @error('avatar')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- The password is changed on the security screen, which asks for
                 the current one first — it is not repeated here. --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <h5 class="fw-bold mb-1">{{ __('Password & security') }}</h5>
                        <p class="text-muted small mb-0">{{ __('Change your password, set up two-factor authentication and review recent sign-ins.') }}</p>
                    </div>
                    <a href="{{ route('security.index') }}" class="btn btn-outline-primary">
                        <i class="bi bi-shield-lock me-1"></i>{{ __('Account security') }}
                    </a>
                </div>
            </div>

            <div class="text-end">
                <button class="btn btn-primary"><i class="bi bi-check2 me-1"></i> {{ __('Save Changes') }}</button>
            </div>
        </form>
    </div>
</div>
@endsection