@extends('layout')
@section('title', 'Mon espace - '.$member->display_name)

@section('content')
    <section class="wrap space-head">
        <p class="eyebrow">Espace famille</p>
        <h1>{{ $member->display_name }}</h1>
        <p class="muted">
            Renseignez votre fiche et ajoutez vos photos.
            <a href="{{ route('member', $member) }}" target="_blank">Voir la fiche publique →</a>
        </p>
    </section>

    <section class="wrap edit-grid">
        {{-- Photo de profil --}}
        <div class="panel">
            <h2>Photo de profil</h2>
            <div class="avatar-edit">
                @php
                    $portrait = $member->avatar_path
                        ? \Illuminate\Support\Facades\Storage::disk('public')->url($member->avatar_path)
                        : null;
                @endphp
                <div class="avatar">
                    @if ($portrait)
                        <img src="{{ $portrait }}" alt="{{ $member->display_name }}">
                    @else
                        <span class="initials">{{ \Illuminate\Support\Str::substr($member->display_name, 0, 1) }}</span>
                    @endif
                </div>
                <form method="post" action="{{ route('space.avatar', $member) }}" enctype="multipart/form-data" class="stack">
                    @csrf
                    <input type="file" name="avatar" accept="image/*" required>
                    <button type="submit" class="btn small">Mettre à jour</button>
                </form>
            </div>
        </div>

        {{-- Informations --}}
        <div class="panel">
            <h2>Informations</h2>
            <form method="post" action="{{ route('space.update', $member) }}" class="stack">
                @csrf
                @method('PUT')
                @foreach ($fields as $key => $label)
                    <label>
                        <span>{{ $label }}</span>
                        <input type="text" name="{{ $key }}" value="{{ old($key, $member->$key) }}">
                    </label>
                @endforeach
                <label>
                    <span>Souvenirs / texte libre</span>
                    <textarea name="bio" rows="6" placeholder="Racontez…">{{ old('bio', $member->bio) }}</textarea>
                    <small class="muted">Astuce : entourez un mot de *astérisques* pour le mettre en italique. Sautez une ligne pour un nouveau paragraphe.</small>
                </label>
                <button type="submit" class="btn">Enregistrer</button>
            </form>
        </div>
    </section>

    {{-- Galerie --}}
    <section class="wrap">
        <div class="panel">
            <h2>Album ({{ $member->photos->count() }})</h2>

            <form method="post" action="{{ route('space.photos.store', $member) }}" enctype="multipart/form-data" class="add-photos">
                @csrf
                <input type="file" name="photos[]" accept="image/*" multiple required>
                <input type="text" name="caption" placeholder="Légende (optionnelle)">
                <button type="submit" class="btn small">Ajouter</button>
            </form>

            @if ($member->photos->isNotEmpty())
                <div class="edit-gallery">
                    @foreach ($member->photos as $photo)
                        <figure>
                            <img loading="lazy" src="{{ $photo->url }}" alt="{{ $photo->caption }}">
                            @if ($photo->caption)<figcaption>{{ $photo->caption }}</figcaption>@endif
                            <form method="post" action="{{ route('space.photos.destroy', $photo) }}"
                                  onsubmit="return confirm('Supprimer cette photo ?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="del">Supprimer</button>
                            </form>
                        </figure>
                    @endforeach
                </div>
            @else
                <p class="muted">Aucune photo pour le moment.</p>
            @endif
        </div>
    </section>
@endsection