@extends('layouts.app')

@section('title', $family->name . ' · Familles')
@section('eyebrow', 'Familles')
@section('heading', $family->name)

@section('content')
@php
    $primaryGuardian = $family->guardians->firstWhere('is_primary', true)
        ?? $family->guardians->first();

    $address = trim(collect([
        $family->address,
        trim(($family->postal_code ?? '') . ' ' . ($family->city ?? '')),
    ])->filter()->implode(', '));
@endphp

<div class="family-page">
    <div class="family-page-head">
        <div>
            <a class="family-back" href="{{ route('tenant.families.index') }}">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M15 18 9 12l6-6"/>
                </svg>
                Retour aux familles
            </a>

            <div class="family-page-title">
                <span class="family-page-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <circle cx="9" cy="8" r="3"/>
                        <circle cx="17" cy="9" r="2.5"/>
                        <path d="M3.5 20c.4-4 2.4-6 5.5-6s5.1 2 5.5 6"/>
                        <path d="M14.5 15.2c.8-.8 1.7-1.2 2.8-1.2 2.3 0 3.7 1.7 4.2 4.8"/>
                    </svg>
                </span>

                <div>
                    <h2>{{ $family->name }}</h2>
                    <p>{{ $address ?: 'Adresse non renseignée' }}</p>
                </div>
            </div>
        </div>

        <div class="family-page-actions">
            <span class="status-badge {{ $family->status }}">
                {{ [
                    'prospect' => 'Prospect',
                    'active' => 'Active',
                    'departed' => 'Partie',
                ][$family->status] ?? ucfirst($family->status) }}
            </span>

            <a class="btn secondary" href="{{ route('tenant.families.edit', $family->id) }}">
                <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="m4 16.5-.5 4 4-.5L18.8 8.7l-3.5-3.5L4 16.5Z"/>
                    <path d="m13.8 6.7 3.5 3.5"/>
                </svg>
                Modifier
            </a>
        </div>
    </div>

    <div class="family-summary">
        <div class="family-summary-card">
            <span class="family-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <circle cx="12" cy="8" r="3"/>
                    <path d="M5.5 20c.5-4 2.7-6 6.5-6s6 2 6.5 6"/>
                </svg>
            </span>
            <div>
                <b>{{ $primaryGuardian ? $primaryGuardian->first_name . ' ' . $primaryGuardian->last_name : 'Non renseigné' }}</b>
                <span>Contact principal</span>
            </div>
        </div>

        <div class="family-summary-card">
            <span class="family-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <circle cx="12" cy="8" r="3"/>
                    <path d="M6 20c.5-4 2.5-6 6-6s5.5 2 6 6"/>
                    <path d="M9 5.5 12 3l3 2.5"/>
                </svg>
            </span>
            <div>
                <b>{{ $family->children->count() }} enfant(s)</b>
                <span>Rattaché(s) à la famille</span>
            </div>
        </div>

        <div class="family-summary-card">
            <span class="family-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M4 10.5 12 4l8 6.5"/>
                    <path d="M6 9.5V20h12V9.5"/>
                    <path d="M9.5 20v-6h5v6"/>
                </svg>
            </span>
            <div>
                <b>{{ $family->city ?: 'Non renseignée' }}</b>
                <span>Commune</span>
            </div>
        </div>
    </div>

    <div class="family-layout">
        <div class="family-main">
            <section class="card family-section">
                <div class="family-section-head">
                    <div class="family-section-title">
                        <span class="family-section-icon">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="12" cy="8" r="3"/>
                                <path d="M5.5 20c.5-4 2.7-6 6.5-6s6 2 6.5 6"/>
                            </svg>
                        </span>
                        <div>
                            <h3>Responsables</h3>
                            <p>{{ $family->guardians->count() }} contact(s) · cliquer pour modifier</p>
                        </div>
                    </div>
                </div>

                <div class="family-list">
                    @forelse($family->guardians as $guardian)
                        <details class="family-person-editor">
                            <summary class="family-person">
                                <span class="family-icon">
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <circle cx="12" cy="8" r="3"/>
                                        <path d="M5.5 20c.5-4 2.7-6 6.5-6s6 2 6.5 6"/>
                                    </svg>
                                </span>

                                <div class="family-person-main">
                                    <div class="family-person-name">
                                        <b>{{ $guardian->first_name }} {{ $guardian->last_name }}</b>
                                        @if($guardian->is_primary)
                                            <span class="soft-badge">Principal</span>
                                        @endif
                                    </div>

                                    <div class="family-person-meta">
                                        <span>{{ $guardian->relationship ?: 'Lien non renseigné' }}</span>
                                        @if($guardian->phone)<span>{{ $guardian->phone }}</span>@endif
                                        @if($guardian->email)<span>{{ $guardian->email }}</span>@endif
                                    </div>
                                </div>

                                <span class="family-person-side">
                                    <span class="family-person-status">
                                        {{ $guardian->has_parental_authority ? 'Autorité parentale' : 'Contact' }}
                                    </span>
                                    <span class="family-edit-chip">
                                        <svg viewBox="0 0 24 24" aria-hidden="true">
                                            <path d="m4 16.5-.5 4 4-.5L18.8 8.7l-3.5-3.5L4 16.5Z"/>
                                            <path d="m13.8 6.7 3.5 3.5"/>
                                        </svg>
                                        Modifier
                                    </span>
                                </span>
                            </summary>

                            <form
                                method="post"
                                action="{{ route('tenant.families.guardians.update', [$family->id, $guardian->id]) }}"
                                class="family-inline-edit-form"
                            >
                                @csrf
                                @method('PATCH')

                                <label>
                                    Prénom
                                    <input name="first_name" value="{{ $guardian->first_name }}" required>
                                </label>

                                <label>
                                    Nom
                                    <input name="last_name" value="{{ $guardian->last_name }}" required>
                                </label>

                                <label>
                                    Lien
                                    <input name="relationship" value="{{ $guardian->relationship }}">
                                </label>

                                <label>
                                    Téléphone
                                    <input name="phone" value="{{ $guardian->phone }}">
                                </label>

                                <label class="full">
                                    Email
                                    <input type="email" name="email" value="{{ $guardian->email }}">
                                </label>

                                <div class="check-row">
                                    <label class="check">
                                        <input type="hidden" name="is_primary" value="0">
                                        <input type="checkbox" name="is_primary" value="1" @checked($guardian->is_primary)>
                                        Contact principal
                                    </label>

                                    <label class="check">
                                        <input type="hidden" name="has_parental_authority" value="0">
                                        <input type="checkbox" name="has_parental_authority" value="1" @checked($guardian->has_parental_authority)>
                                        Autorité parentale
                                    </label>
                                </div>

                                <div class="form-actions">
                                    <button class="btn primary" type="submit">
                                        Enregistrer le responsable
                                    </button>
                                </div>
                            </form>
                        </details>
                    @empty
                        <div class="family-list-empty">Aucun responsable enregistré.</div>
                    @endforelse
                </div>
            </section>

            <section class="card family-section">
                <div class="family-section-head">
                    <div class="family-section-title">
                        <span class="family-section-icon">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="12" cy="8" r="3"/>
                                <path d="M6 20c.5-4 2.5-6 6-6s5.5 2 6 6"/>
                                <path d="M9 5.5 12 3l3 2.5"/>
                            </svg>
                        </span>
                        <div>
                            <h3>Enfants</h3>
                            <p>{{ $family->children->count() }} fiche(s)</p>
                        </div>
                    </div>
                </div>

                <div class="family-list">
                    @forelse($family->children as $child)
                        <div class="family-person">
                            <span class="family-icon">
                                <svg viewBox="0 0 24 24" aria-hidden="true">
                                    <circle cx="12" cy="8" r="3"/>
                                    <path d="M6 20c.5-4 2.5-6 6-6s5.5 2 6 6"/>
                                    <path d="M9 5.5 12 3l3 2.5"/>
                                </svg>
                            </span>

                            <div class="family-person-main">
                                <div class="family-person-name">
                                    <b>{{ $child->first_name }} {{ $child->last_name }}</b>
                                </div>

                                <div class="family-person-meta">
                                    <span>
                                        {{ $child->birth_date
                                            ? 'Né(e) le '.$child->birth_date->format('d/m/Y')
                                            : 'Date de naissance non renseignée' }}
                                    </span>

                                    @if($child->planned_start_date)
                                        <span>
                                            Entrée prévue le
                                            {{ $child->planned_start_date->format('d/m/Y') }}
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <span class="family-person-side">
                                <span class="status-badge {{ $child->status === 'active' ? 'active' : ($child->status === 'waiting' ? 'trial' : 'archived') }}">
                                    {{ [
                                        'waiting' => 'En attente',
                                        'active' => 'Accueilli',
                                        'departed' => 'Parti',
                                    ][$child->status] ?? ucfirst($child->status) }}
                                </span>

                                <a
                                    class="family-edit-chip"
                                    href="{{ route('tenant.families.children.edit', [$family->id, $child->id]) }}"
                                >
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="m4 16.5-.5 4 4-.5L18.8 8.7l-3.5-3.5L4 16.5Z"/>
                                        <path d="m13.8 6.7 3.5 3.5"/>
                                    </svg>
                                    Modifier
                                </a>
                            </span>
                        </div>
                    @empty
                        <div class="family-list-empty">Aucun enfant enregistré.</div>
                    @endforelse
                </div>
            </section>

            @if($family->notes)
                <section class="card family-section">
                    <div class="family-section-head">
                        <div class="family-section-title">
                            <span class="family-section-icon">
                                <svg viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M5 4h14v16H5z"/>
                                    <path d="M8 8h8M8 12h8M8 16h5"/>
                                </svg>
                            </span>
                            <div>
                                <h3>Notes</h3>
                                <p>Informations internes</p>
                            </div>
                        </div>
                    </div>
                    <div class="family-notes">{{ $family->notes }}</div>
                </section>
            @endif
        </div>

        <aside class="family-actions">
            <details class="card family-action">
                <summary class="family-action-summary">
                    <span>
                        <span class="family-section-icon">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="10" cy="8" r="3"/>
                                <path d="M4 20c.5-4 2.5-6 6-6 1.7 0 3 .5 4 1.4"/>
                                <path d="M18 13v8M14 17h8"/>
                            </svg>
                        </span>
                        <span>
                            <b>Ajouter un responsable</b>
                            <small>Nouveau contact familial</small>
                        </span>
                    </span>
                    <svg class="family-action-chevron" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </summary>

                <form method="post" action="{{ route('tenant.families.guardians.store', $family->id) }}" class="family-action-form">
                    @csrf

                    <label>Prénom<input name="first_name" required></label>
                    <label>Nom<input name="last_name" required></label>
                    <label class="full">Lien<input name="relationship" placeholder="Mère, père, tuteur…"></label>
                    <label>Email<input type="email" name="email"></label>
                    <label>Téléphone<input name="phone"></label>

                    <label class="check">
                        <input type="checkbox" name="is_primary" value="1">
                        Contact principal
                    </label>

                    <label class="check">
                        <input type="checkbox" name="has_parental_authority" value="1" checked>
                        Autorité parentale
                    </label>

                    <button class="btn primary" type="submit">Ajouter le responsable</button>
                </form>
            </details>

            <details class="card family-action">
                <summary class="family-action-summary">
                    <span>
                        <span class="family-section-icon">
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <circle cx="10" cy="8" r="3"/>
                                <path d="M4 20c.5-4 2.5-6 6-6 1.7 0 3 .5 4 1.4"/>
                                <path d="M18 13v8M14 17h8"/>
                                <path d="M8 5.5 10 3l2 2.5"/>
                            </svg>
                        </span>
                        <span>
                            <b>Ajouter un enfant</b>
                            <small>Nouvelle fiche enfant</small>
                        </span>
                    </span>
                    <svg class="family-action-chevron" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="m6 9 6 6 6-6"/>
                    </svg>
                </summary>

                <form method="post" action="{{ route('tenant.families.children.store', $family->id) }}" class="family-action-form">
                    @csrf

                    <label>Prénom<input name="first_name" required></label>
                    <label>Nom<input name="last_name" value="{{ $family->name }}" required></label>
                    <label>Date de naissance<input type="date" name="birth_date"></label>

                    <label>
                        Genre
                        <select name="gender">
                            <option value="unspecified">Non renseigné</option>
                            <option value="female">Fille</option>
                            <option value="male">Garçon</option>
                            <option value="other">Autre</option>
                        </select>
                    </label>

                    <label>
                        Situation
                        <select name="status" required>
                            <option value="active">Accueilli</option>
                            <option value="waiting">En attente</option>
                            <option value="departed">Parti</option>
                        </select>
                    </label>

                    <label>Date d’entrée prévue<input type="date" name="planned_start_date"></label>
                    <label class="full">Notes<textarea name="notes" rows="3"></textarea></label>

                    <button class="btn primary" type="submit">Ajouter l’enfant</button>
                </form>
            </details>
        </aside>
    </div>
</div>
@endsection