<?php
use App\Core\Csrf;

$old = $_SESSION['old'] ?? [];
$errors = $_SESSION['form_errors'] ?? [];
unset($_SESSION['old'], $_SESSION['form_errors']);

function family_member_old(string $key, string $default = ''): string
{
    return htmlspecialchars((string)($GLOBALS['old'][$key] ?? $default));
}
?>
<link rel="stylesheet" href="/public/assets/css/cda-v4-5-adherents.css">

<section class="page-intro">
    <div>
        <span class="page-kicker">Famille de l’adhérent</span>
        <h2>Ajouter un membre de la famille</h2>
        <p>
            Cette personne sera rattachée à l’adhérent titulaire.
            Elle pourra ensuite être inscrite à un ou plusieurs ateliers.
        </p>
    </div>

    <a class="button button-secondary"
       href="/public/clients/voir?id=<?= (int)$clientId ?>">
        Retour au dossier
    </a>
</section>

<section class="member-distinction-banner">
    <div class="distinction-holder">
        <span>A</span>
        <div>
            <strong>Adhérent titulaire</strong>
            <small>Déjà créé et responsable du dossier.</small>
        </div>
    </div>

    <div class="role-arrow">→</div>

    <div class="distinction-member">
        <span>M</span>
        <div>
            <strong>Nouveau membre</strong>
            <small>Conjoint, enfant, parent ou autre personne rattachée.</small>
        </div>
    </div>
</section>

<?php if ($errors): ?>
<div class="alert alert-error">
    <ul>
        <?php foreach ($errors as $error): ?>
        <li><?= htmlspecialchars((string)$error) ?></li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<form method="post"
      action="/public/clients/membres?client_id=<?= (int)$clientId ?>"
      class="v4-form">

    <?= Csrf::field() ?>

    <section class="form-card">
        <header class="form-card-header">
            <div class="form-step">1</div>
            <div>
                <h3>Identité du membre</h3>
                <p>Informations propres à cette personne.</p>
            </div>
            <div class="form-icon">👤</div>
        </header>

        <div class="form-grid grid-4">
            <label class="field">
                <span>Lien avec l’adhérent</span>
                <select name="lien_familial">
                    <option value="conjoint">Conjoint</option>
                    <option value="enfant">Enfant</option>
                    <option value="parent">Parent</option>
                    <option value="autre">Autre</option>
                </select>
            </label>

            <label class="field">
                <span>Civilité</span>
                <select name="civilite">
                    <option value="Non renseigne">Non renseignée</option>
                    <option value="Mme">Mme</option>
                    <option value="M.">M.</option>
                    <option value="Autre">Autre</option>
                </select>
            </label>

            <label class="field">
                <span>Nom *</span>
                <input
                    required
                    data-uppercase
                    name="nom"
                    value="<?= family_member_old('nom') ?>"
                >
            </label>

            <label class="field">
                <span>Prénom *</span>
                <input
                    required
                    data-firstname
                    name="prenom"
                    value="<?= family_member_old('prenom') ?>"
                >
            </label>

            <label class="field">
                <span>Date de naissance *</span>
                <input
                    required
                    type="date"
                    name="date_naissance"
                    value="<?= family_member_old('date_naissance') ?>"
                >
            </label>

            <label class="field">
                <span>E-mail personnel</span>
                <input
                    type="email"
                    name="email"
                    value="<?= family_member_old('email') ?>"
                >
            </label>

            <label class="field">
                <span>Téléphone principal</span>
                <input
                    data-phone
                    name="telephone_principal"
                    value="<?= family_member_old('telephone_principal') ?>"
                >
            </label>

            <label class="field">
                <span>Téléphone secondaire</span>
                <input
                    data-phone
                    name="telephone_secondaire"
                    value="<?= family_member_old('telephone_secondaire') ?>"
                >
            </label>
        </div>
    </section>

    <section class="form-card">
        <header class="form-card-header">
            <div class="form-step pink">2</div>
            <div>
                <h3>Rôle et communications</h3>
                <p>Définissez les responsabilités et les destinataires.</p>
            </div>
            <div class="form-icon pink">✓</div>
        </header>

        <div class="choice-grid">
            <label class="choice-card">
                <input type="checkbox" name="participant_ateliers">
                <span class="choice-icon blue">🎨</span>
                <span>
                    <strong>Participant aux ateliers</strong>
                    <small>Ce membre pourra être inscrit à un groupe ou à un créneau.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="responsable_legal">
                <span class="choice-icon pink">⚖</span>
                <span>
                    <strong>Responsable légal</strong>
                    <small>Peut recevoir et signer les documents du mineur.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="autorite_parentale">
                <span class="choice-icon blue">👨‍👩‍👧</span>
                <span>
                    <strong>Autorité parentale</strong>
                    <small>Dispose de l’autorité parentale sur un enfant.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="payeur">
                <span class="choice-icon pink">€</span>
                <span>
                    <strong>Payeur secondaire</strong>
                    <small>Peut être destinataire de factures ou d’échéanciers.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="recoit_emails">
                <span>
                    <strong>Reçoit les e-mails</strong>
                    <small>Informations administratives et pédagogiques.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="recoit_sms">
                <span>
                    <strong>Reçoit les SMS</strong>
                    <small>Annulations, déplacements et rappels.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="recoit_factures">
                <span>
                    <strong>Reçoit les factures</strong>
                    <small>Factures, échéanciers et relances.</small>
                </span>
            </label>

            <label class="choice-card">
                <input type="checkbox" name="rgpd_accepte">
                <span>
                    <strong>Consentement RGPD</strong>
                    <small>Consentement enregistré pour cette personne.</small>
                </span>
            </label>
        </div>

        <div class="form-grid grid-2">
            <label class="field">
                <span>Droit à l’image</span>
                <select name="droit_image">
                    <option value="non_renseigne">Non renseigné</option>
                    <option value="accorde">Accordé</option>
                    <option value="refuse">Refusé</option>
                </select>
            </label>
        </div>

        <label class="field">
            <span>Observations</span>
            <textarea name="notes" rows="5"><?= family_member_old('notes') ?></textarea>
        </label>
    </section>

    <div class="sticky-actions">
        <a class="button button-secondary"
           href="/public/clients/voir?id=<?= (int)$clientId ?>">
            Annuler
        </a>

        <button class="button button-primary" type="submit">
            Ajouter le membre à la famille
        </button>
    </div>
</form>

<script src="/public/assets/js/cda-v4-form.js"></script>
