<?php
$dateLabel = t('common.unknown_date');
if (!empty($litter['birth_date'])) {
    $date = DateTimeImmutable::createFromFormat('Y-m-d', (string)$litter['birth_date']);
    if ($date) {
        $dateLabel = $date->format('d/m/Y');
    }
}
?>
<form method="post" action="/litter/add-existing/save" class="card">
    <input type="hidden" name="csrf" value="<?= h(Auth::csrf()) ?>">
    <input type="hidden" name="litter_id" value="<?= (int)$litter['id'] ?>">
    <input type="hidden" name="source_animal_id" value="<?= (int)$sourceAnimalId ?>">
    <div class="card-header d-flex align-items-center justify-content-between">
        <div>
            <h3 class="card-title mb-1"><?= h(t('litter.add_existing')) ?></h3>
            <div class="text-muted small">
                <?= h(t('litter.summary', ['date' => $dateLabel,'mother' => $litter['mother_name'] ?: t('common.unknown_f'),'father' => $litter['father_name'] ?: t('common.unknown_m')])) ?>
            </div>
        </div>
        <a class="btn btn-ghost-secondary"
            href="/animal?id=<?= (int)$sourceAnimalId ?>#tab-litters"><?= h(t('common.cancel')) ?></a>
    </div>
    <div class="card-body">
        <div class="mb-3">
            <label class="form-label" for="litterAnimalSearch"><?= h(t('litter.search_cat')) ?></label>
            <input class="form-control" id="litterAnimalSearch" type="search"
                placeholder="<?= h(t('litter.cat_name_code')) ?>" autocomplete="off">
            <div class="form-hint"><?= h(t('litter.attached_hidden')) ?></div>
        </div>
        <div class="row g-2" id="litterAnimalChoices">
            <?php foreach ($animals as $candidate): ?>
            <div class="col-md-4 litter-animal-choice"
                data-search="<?= h(mb_strtolower($candidate['name'] . ' ' . $candidate['internal_code'])) ?>">
                <label class="form-select d-flex align-items-center gap-2 h-100" style="cursor:pointer">
                    <input class="form-check-input mt-0" type="checkbox" name="animal_ids[]"
                        value="<?= (int)$candidate['id'] ?>">
                    <span class="coat-swatch" style="<?= h(coat_swatch_style($candidate['color'] ?? '')) ?>"></span>
                    <span class="min-w-0"><strong><?= h($candidate['name']) ?></strong><br><small
                            class="text-muted"><?= h($candidate['internal_code'] ?: t('animal.no_code')) ?> ·
                            <?= ($candidate['sex'] ?? 'U') === 'F' ? t('sex.female') : (($candidate['sex'] ?? 'U') === 'M' ? t('sex.male') : t('animal.sex_to_define')) ?></small></span>
                    <?php if (!empty($candidate['archived_at'])): ?><span
                        class="badge bg-secondary-lt ms-auto"><?= h(t('animal.archived_badge')) ?></span><?php endif; ?>
                </label>
            </div>
            <?php endforeach; ?>
        </div>
        <?php if (!$animals): ?><div class="empty">
            <div class="empty-description"><?= h(t('litter.none_available')) ?></div>
        </div><?php endif; ?>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center">
        <span class="text-muted"><?= h(t('litter.select_multiple')) ?></span>
        <button class="btn btn-primary" type="submit"><?= h(t('litter.add_to')) ?></button>
    </div>
</form>
<script>
    document.getElementById('litterAnimalSearch')?.addEventListener('input', event => {
        const query = event.target.value.trim().toLocaleLowerCase( <?= json_encode(I18n::locale() === 'fr' ?
            'fr' : 'en') ?> );
        document.querySelectorAll('.litter-animal-choice').forEach(choice => {
            choice.classList.toggle('d-none', query !== '' && !choice.dataset.search.includes(query));
        });
    });

</script>
