@extends('layout')
@section('title', 'Fiche de '.$ind->display_name)
@section('robots', 'noindex, nofollow')

@section('content')
    <section class="wrap space-head">
        <p class="eyebrow">Fiche d'identification</p>
        @php
            // Qui remplit ? La page sert au membre pour SA fiche, et a
            // l'administration pour celle d'un defunt. Le vocabulaire suit.
            $mienne = auth()->user()?->individual_id === $ind->id;
            $mots = $mienne
                ? ['photos' => 'Vos photos au fil des âges', 'interets' => 'Vos centres d\'intérêt',
                   'lectures' => 'Vos lectures', 'caractere' => 'Votre caractère',
                   'voir' => 'Voir ma page dans l\'arbre →', 'maniere' => 'votre manière d\'être']
                : ['photos' => 'Ses photos au fil des âges', 'interets' => 'Ses centres d\'intérêt',
                   'lectures' => 'Ses lectures', 'caractere' => 'Son caractère',
                   'voir' => 'Voir sa page dans l\'arbre →', 'maniere' => 'sa manière d\'être'];
        @endphp
        <h1>{{ $ind->display_name }}</h1>
        <p class="muted">
            Le signalement, les goûts et le caractère. Rien n'est obligatoire : ce qui reste vide ne s'affiche pas.
            <a href="{{ route('personne', $ind) }}">{{ $mots['voir'] }}</a>
        </p>
    </section>

    {{-- ═══ La frise des âges : une case par tranche ═══════════════════ --}}
    <section class="wrap fm-bloc">
        <h2 class="section-title">{{ $mots['photos'] }}</h2>
        @if ($frise->isEmpty())
            <p class="fm-vide">
                Indiquez d'abord l'année de naissance, dans « Signalement » ci-dessous :
                sans elle, impossible de situer une photo dans une vie.
            </p>
        @else
            <p class="muted" style="font-size:.9rem">
                Cliquez sur une case vide pour y déposer une photo. Le pas se règle ci-dessous.
            </p>
            <div class="frise-cases">
                @foreach ($frise as $case)
                    <div class="frise-case @if($case->photo) is-remplie @endif">
                        @if ($case->photo)
                            <a href="{{ $case->photo->url }}" target="_blank" rel="noopener">
                                <img loading="lazy" src="{{ $case->photo->url }}" alt="{{ $ind->display_name }} en {{ $case->annee }}">
                            </a>
                            <p class="frise-case-titre">{{ $case->titre }}</p>
                            <p class="frise-case-an">{{ $case->annee }}</p>
                            <form method="post" action="{{ route('fiche.photo.destroy', $case->photo) }}"
                                  onsubmit="return confirm('Retirer cette photo de la frise ?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="link-btn">Retirer</button>
                            </form>
                        @else
                            <form method="post" action="{{ route('fiche.photo', $ind) }}"
                                  enctype="multipart/form-data" class="frise-depot">
                                @csrf
                                <input type="hidden" name="annee" value="{{ (int) explode('-', $case->annees)[0] }}">
                                <label class="frise-vide">
                                    <span class="frise-plus" aria-hidden="true">+</span>
                                    <span class="frise-case-titre">{{ $case->titre }}</span>
                                    <span class="frise-case-an">{{ $case->annees }}</span>
                                    <input type="file" name="photo" accept="image/*" hidden data-envoi-auto>
                                </label>
                            </form>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </section>

    <form method="post" action="{{ route('fiche.update', $ind) }}" enctype="multipart/form-data">
        @csrf @method('PUT')

        {{-- ═══ Signalement ══════════════════════════════════════════════ --}}
        <section class="wrap fm-bloc">
            <h2 class="section-title">Signalement</h2>
            <div class="profile-card">
                <div class="fiche-grille">
                    <label>Naissance<input type="text" name="naissance_date"
                           value="{{ old('naissance_date', $ind->naissance_date) }}" placeholder="1er avril 1978"></label>
                    <label>Lieu de naissance<input type="text" name="naissance_lieu"
                           value="{{ old('naissance_lieu', $ind->naissance_lieu) }}" placeholder="Strasbourg"></label>
                    <label>Taille<input type="text" name="taille" value="{{ old('taille', $ind->taille) }}" placeholder="1,78 m"></label>
                    <label>Poids<input type="text" name="poids" value="{{ old('poids', $ind->poids) }}" placeholder="72 kg"></label>
                    <label>Cheveux<input type="text" name="cheveux" value="{{ old('cheveux', $ind->cheveux) }}" placeholder="Châtains"></label>
                    <label>Yeux<input type="text" name="yeux" value="{{ old('yeux', $ind->yeux) }}" placeholder="Bleus"></label>
                    <label>Teint<input type="text" name="peau" value="{{ old('peau', $ind->peau) }}" placeholder="Clair, mat, hâlé…"></label>
                    <label>Pas de la frise
                        <select name="pas_frise">
                            @foreach ($config['pas_frise'] as $pas => $libelle)
                                <option value="{{ $pas }}" @selected(($ind->pas_frise ?: 10) === $pas)>{{ $libelle }}</option>
                            @endforeach
                        </select>
                    </label>
                </div>
                <label style="display:block; margin-top:12px">Signes distinctifs
                    <input type="text" name="signe_particulier" value="{{ old('signe_particulier', $ind->signe_particulier) }}"
                           placeholder="Une fossette, une cicatrice, une voix reconnaissable…">
                </label>
                <label style="display:block; margin-top:12px">Profession
                    <input type="text" name="profession" value="{{ old('profession', $ind->profession) }}"
                           placeholder="Pharmacien, au foyer, menuisier…">
                </label>
            </div>
        </section>

        {{-- ═══ Coordonnées et réseaux ═══════════════════════════════════ --}}
        <section class="wrap fm-bloc">
            <h2 class="section-title">Coordonnées et réseaux</h2>
            <div class="profile-card">
                <p class="fm-aide">Visibles uniquement des membres de la famille connectés à leur compte, jamais avec le seul code du site.</p>
                <div class="fiche-grille">
                    <label>Téléphone<input type="tel" name="telephone" value="{{ old('telephone', $ind->telephone) }}" placeholder="06 12 34 56 78"></label>
                    <label>Courriel<input type="email" name="email" value="{{ old('email', $ind->email) }}" placeholder="prenom@exemple.fr"></label>
                </div>
                <label style="display:block; margin-top:12px">Réseaux sociaux
                    <textarea name="reseaux" rows="3" placeholder="Collez l'adresse de chaque profil, une par ligne : facebook.com/…, instagram.com/…, linkedin.com/in/…">{{ old('reseaux', implode("\n", (array) json_decode((string) $ind->reseaux, true))) }}</textarea>
                </label>
                <p class="fm-aide">Le réseau est reconnu tout seul d'après l'adresse : Facebook, Instagram, WhatsApp, LinkedIn, X, TikTok, YouTube ou site personnel.</p>
            </div>
        </section>

        {{-- ═══ Santé et ADN ═════════════════════════════════════════════ --}}
        <section class="wrap fm-bloc">
            <h2 class="section-title">Santé et ADN</h2>
            <div class="profile-card">
                <p class="fm-aide">Ces informations sont les plus personnelles de la fiche. Rien n'est obligatoire.
                    Elles ne sont montrées qu'aux membres connectés, et le compte rendu ADN n'est lisible que par vous et par l'administrateur du site.</p>
                <label style="display:block">Maladies
                    <textarea name="maladies" rows="2" placeholder="Maladies connues, notamment celles qui peuvent concerner la famille">{{ old('maladies', $ind->maladies) }}</textarea>
                </label>
                <div class="fiche-grille" style="margin-top:12px">
                    <label>Test ADN
                        <select name="adn_test">
                            @foreach (['' => '-', 'oui' => 'Fait', 'prevu' => 'Prévu', 'non' => 'Pas fait'] as $v => $l)
                                <option value="{{ $v }}" @selected(old('adn_test', $ind->adn_test) === $v)>{{ $l }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Auprès de
                        <input type="text" name="adn_societe" value="{{ old('adn_societe', $ind->adn_societe) }}" list="adn-societes" placeholder="MyHeritage, Ancestry…">
                        <datalist id="adn-societes">
                            <option value="MyHeritage"><option value="Ancestry"><option value="23andMe"><option value="FamilyTreeDNA"><option value="Geneanet">
                        </datalist>
                    </label>
                </div>
                <label style="display:block; margin-top:12px">Compte rendu du test (PDF ou image, 20 Mo au plus)
                    <input type="file" name="adn_rapport" accept="application/pdf,image/*">
                </label>
                @if ($ind->adn_rapport_path)
                    <p class="fm-aide">Un compte rendu est déjà déposé : <a href="{{ route('fiche.adn', $ind) }}">le consulter</a>. En déposer un autre le remplace.</p>
                @endif
            </div>
        </section>

        {{-- ═══ Ce qu'elle aime ══════════════════════════════════════════ --}}
        <section class="wrap fm-bloc">
            <h2 class="section-title">{{ $mots['interets'] }}</h2>
            <div class="profile-card">
                @foreach ($config['interets'] as $famille => $choix)
                    <p class="fiche-famille">{{ $famille }}</p>
                    <div class="fiche-cases">
                        @foreach ($choix as $c)
                            <label class="fiche-case">
                                <input type="checkbox" name="interets[]" value="{{ $c }}"
                                       @checked(in_array($c, (array) $ind->interets, true))>
                                <span>{{ $c }}</span>
                            </label>
                        @endforeach
                    </div>
                @endforeach
                <label style="display:block; margin-top:14px">Autre chose
                    <input type="text" name="interets_autres" value="{{ old('interets_autres', $ind->interets_autres) }}"
                           placeholder="Ce qui n'entre dans aucune case">
                </label>
            </div>
        </section>

        <section class="wrap fm-bloc">
            <h2 class="section-title">{{ $mots['lectures'] }}</h2>
            <div class="profile-card">
                @foreach ($config['ouvrages'] as $famille => $choix)
                    <div class="fiche-cases">
                        @foreach ($choix as $c)
                            <label class="fiche-case">
                                <input type="checkbox" name="ouvrages[]" value="{{ $c }}"
                                       @checked(in_array($c, (array) $ind->ouvrages, true))>
                                <span>{{ $c }}</span>
                            </label>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </section>

        {{-- ═══ Personnalité ═════════════════════════════════════════════ --}}
        <section class="wrap fm-bloc">
            <h2 class="section-title">{{ $mots['caractere'] }}</h2>
            <div class="profile-card">
                <p class="muted" style="font-size:.9rem; margin-bottom:14px">
                    {{ count($config['personnalite']) }} questions, une réponse chacune.
                    Pas pour classer, mais pour garder trace de {{ $mots['maniere'] }},
                    celle dont on se souvient longtemps après.
                </p>
                @foreach ($config['personnalite'] as $cle => $q)
                    <p class="fiche-famille">{{ $q['question'] }}</p>
                    @if (! empty($q['libre']))
                        <input type="text" name="personnalite[{{ $cle }}]" maxlength="120"
                               value="{{ ($ind->personnalite ?? [])[$cle] ?? '' }}"
                               placeholder="Ses mots à elle ou à lui">
                        @continue
                    @endif
                    <div class="fiche-cases">
                        @foreach ($q['choix'] as $c)
                            <label class="fiche-case">
                                <input type="radio" name="personnalite[{{ $cle }}]" value="{{ $c }}"
                                       @checked((($ind->personnalite ?? [])[$cle] ?? null) === $c)>
                                <span>{{ $c }}</span>
                            </label>
                        @endforeach
                        <label class="fiche-case">
                            <input type="radio" name="personnalite[{{ $cle }}]" value=""
                                   @checked(empty(($ind->personnalite ?? [])[$cle]))>
                            <span class="muted">sans réponse</span>
                        </label>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="wrap fm-bloc">
            <button type="submit" class="btn">Enregistrer la fiche</button>
        </section>
    </form>

    <section class="wrap back-row">
        {{-- Cette page est l'atterrissage de TOUS les membres, pas seulement des
             administrateurs : le retour doit mener a sa propre fiche publique,
             pas a une administration a laquelle 236 comptes sur 238 n'ont pas
             droit et qui leur repondait par un 403 en anglais. --}}
        @can('admin')
            <a href="{{ route('admin.index') }}" class="back-link">← Administration</a>
        @else
            <a href="{{ route('personne', $ind) }}" class="back-link">← Ma page dans l'arbre</a>
        @endcan
    </section>

    <script src="{{ asset('js/fiche.js') }}?v={{ @filemtime(public_path('js/fiche.js')) }}" defer></script>
@endsection