@extends('layouts.vpm-dashboard', ['active' => 'account', 'area' => 'user'])

@section('title', 'Profile photo')
@section('page_title', 'Profile photo')
@section('page_subtitle', 'Upload or remove your profile picture')
@section('parent_title', 'Account')
@section('parent_url', route('app.account'))

@section('content')
<div class="vpm-action-page">
    @include('app.account._back')

    @php
        // Mirrors the controller cap, which is clamped to PHP's upload limit.
        $photoMaxKb = \App\Support\PublicStorage::maxUploadKb(4096);
        $photoMaxLabel = $photoMaxKb >= 1024
            ? round($photoMaxKb / 1024, 1).' MB'
            : $photoMaxKb.' KB';
    @endphp

    <x-vpm.action-hero
        title="Update profile photo"
        text="Choose one image file. JPG, PNG, or WebP — max {{ $photoMaxLabel }}."
    />

    <section class="vpm-panel vpm-action-panel">
        <div class="vpm-panel__body">
            <div class="vpm-account-photo">
                <div class="vpm-account-photo__preview">
                    @if ($user->profilePhotoUrl())
                        <img src="{{ $user->profilePhotoUrl() }}" alt="" class="vpm-account-photo__img">
                    @else
                        <div class="vpm-avatar vpm-avatar--lg">{{ $user->initials() }}</div>
                    @endif
                </div>
                <div class="vpm-account-photo__actions">
                    <form method="POST" action="{{ route('app.account.photo.update') }}" enctype="multipart/form-data">
                        @csrf
                        <label class="vpm-field">
                            <span class="vpm-field__label">Upload new photo</span>
                            <input type="file" name="photo" class="vpm-input vpm-input--file" accept=".jpg,.jpeg,.png,.webp" required>
                        </label>
                        @error('photo')
                            <span class="vpm-field__error" role="alert">{{ $message }}</span>
                        @enderror
                        <x-vpm.button type="submit" variant="primary" class="vpm-btn--sm">Upload photo</x-vpm.button>
                    </form>
                    @if ($user->profile_photo_path)
                        <form method="POST" action="{{ route('app.account.photo.remove') }}">
                            @csrf
                            @method('DELETE')
                            <x-vpm.button type="submit" variant="ghost" class="vpm-btn--sm">Remove photo</x-vpm.button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </section>
</div>
@endsection