@extends('layouts.app')

@section('title', 'Ajouter une famille · ' . $organization->name)
@section('eyebrow', 'Familles')
@section('heading', 'Ajouter une famille')

@section('content')
<form method="post" action="{{ route('tenant.families.store') }}" class="family-form">
    @csrf

    <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="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>

                <div>
                    <h2>Nouvelle famille</h2>
                    <p>Crée la fiche principale, puis complète les contacts et les enfants.</p>
                </div>
            </div>
        </div>
    </div>

    <section class="card family-form-section">
        <div class="family-form-head">
            <span class="family-section-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>
                <h3>Informations générales</h3>
                <p>Identité et coordonnées de la famille</p>
            </div>
        </div>

        <div class="family-form-grid">
            <label>
                Nom de la famille
                <input name="name" value="{{ old('name') }}" required>
            </label>

            <label>
                Statut
                <select name="status" required>
                    <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
                    <option value="prospect" @selected(old('status') === 'prospect')>Prospect</option>
                    <option value="departed" @selected(old('status') === 'departed')>Partie</option>
                </select>
            </label>

            <label class="full">
                Adresse
                <input name="address" value="{{ old('address') }}">
            </label>

            <label>
                Code postal
                <input name="postal_code" value="{{ old('postal_code') }}">
            </label>

            <label>
                Ville
                <input name="city" value="{{ old('city') }}">
            </label>

            <label class="full">
                Notes
                <textarea name="notes" rows="3">{{ old('notes') }}</textarea>
            </label>
        </div>
    </section>

    <section class="card family-form-section">
        <div class="family-form-head">
            <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>Responsable principal</h3>
                <p>Premier contact obligatoire</p>
            </div>
        </div>

        <div class="family-form-grid">
            <label>
                Prénom
                <input name="guardian_first_name" value="{{ old('guardian_first_name') }}" required>
            </label>

            <label>
                Nom
                <input name="guardian_last_name" value="{{ old('guardian_last_name') }}" required>
            </label>

            <label>
                Lien avec l’enfant
                <input name="guardian_relationship" value="{{ old('guardian_relationship') }}" placeholder="Mère, père, tuteur…">
            </label>

            <label>
                Téléphone
                <input name="guardian_phone" value="{{ old('guardian_phone') }}">
            </label>

            <label class="full">
                Email
                <input type="email" name="guardian_email" value="{{ old('guardian_email') }}">
            </label>
        </div>
    </section>

    <section class="card family-form-section">
        <div class="family-form-head">
            <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>Premier enfant</h3>
                <p>Facultatif lors de la création</p>
            </div>
        </div>

        <div class="family-form-grid">
            <label>
                Prénom
                <input name="child_first_name" value="{{ old('child_first_name') }}">
            </label>

            <label>
                Nom
                <input name="child_last_name" value="{{ old('child_last_name') }}">
            </label>

            <label>
                Date de naissance
                <input type="date" name="child_birth_date" value="{{ old('child_birth_date') }}">
            </label>

            <label>
                Genre
                <select name="child_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="child_status">
                    <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="child_planned_start_date" value="{{ old('child_planned_start_date') }}">
            </label>
        </div>
    </section>

    <div class="family-form-actions">
        <a class="btn secondary" href="{{ route('tenant.families.index') }}">Annuler</a>
        <button class="btn primary" type="submit">Créer la famille</button>
    </div>
</form>
@endsection