@extends('layouts.platform')

@section('title', __('pages.personal_info.profile_photo.title') . ' — ' . __('platform.brand_name'))

@section('content')
    <x-platform.account-edit-layout
        :title="__('pages.personal_info.profile_photo.title')"
        :description="__('pages.personal_info.profile_photo.description')"
    >
        <form
            method="POST"
            action="{{ route('personal-info.profile-photo.update') }}"
            enctype="multipart/form-data"
            x-data="{
                preview: @js($avatarUrl),
                initial: @js($avatarInitial),
                syncAvatar(url = null) {
                    window.dispatchEvent(new CustomEvent('platform-avatar-changed', {
                        detail: { url, initial: this.initial },
                    }));
                },
                onFile(e) {
                    const file = e.target.files[0];
                    if (!file) return;
                    this.preview = URL.createObjectURL(file);
                    this.syncAvatar(this.preview);
                },
            }"
        >
            @csrf
            @method('PATCH')

            <x-platform.account-form-card>
                <div class="account-photo">
                    <div class="account-photo__preview">
                        <template x-if="preview">
                            <img :src="preview" alt="" class="account-photo__image">
                        </template>
                        <template x-if="!preview">
                            <span class="account-photo__initial" x-text="initial"></span>
                        </template>
                    </div>

                    <label class="account-photo__upload">
                        <input type="file" name="avatar" accept="image/*" class="sr-only" @change="onFile">
                        <span class="platform-btn-secondary">
                            {{ $avatarUrl ? __('pages.personal_info.profile_photo.change') : __('pages.personal_info.profile_photo.upload') }}
                        </span>
                    </label>
                </div>
            </x-platform.account-form-card>

            <x-platform.form-actions />
        </form>
    </x-platform.account-edit-layout>
@endsection