<div class="modal fade" id="modalAdoption" tabindex="-1">
    <div class="modal-dialog">
        <form method="post" action="/animal/adopt" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><?= h(t('adoption.modal_title')) ?></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <input type="hidden" name="animal_id" value="<?= (int)$animal['id'] ?>">

                <div class="mb-3">
                    <label class="form-label"><?= h(t('adoption.directory_adopter')) ?></label>
                    <select class="form-select" name="adopter_contact_id" id="adopterContactSelect">
                        <option value="new">＋ <?= h(t('adoption.new_adopter')) ?></option>
                        <?php foreach (($adopters ?? []) as $contact): ?>
                        <option value="<?= (int)$contact['id'] ?>" data-name="<?= h($contact['name']) ?>"
                            data-phone="<?= h($contact['phone']) ?>" data-email="<?= h($contact['email']) ?>"
                            data-address="<?= h($contact['address']) ?>" data-postal="<?= h($contact['postal_code']) ?>"
                            data-city="<?= h($contact['city']) ?>">
                            <?= h($contact['name']) ?><?= $contact['city'] ? ' · ' . h($contact['city']) : '' ?>
                        </option>
                        <?php endforeach; ?>
                    </select>
                    <div class="form-hint"><?= h(t('adoption.contact_help')) ?></div>
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= h(t('adoption.adopter_name')) ?></label>
                    <input type="text" name="adopter_name" id="adopterName" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= h(t('common.address')) ?></label>
                    <input type="text" name="adopter_address" id="adopterAddress" class="form-control">
                </div>

                <div class="mb-3 row">
                    <div class="col">
                        <label class="form-label"><?= h(t('directory.postal_code')) ?></label>
                        <input type="text" name="adopter_postal_code" id="adopterPostal" class="form-control">
                    </div>
                    <div class="col">
                        <label class="form-label"><?= h(t('directory.city')) ?></label>
                        <input type="text" name="adopter_city" id="adopterCity" class="form-control">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= h(t('common.phone')) ?></label>
                    <input type="text" name="adopter_phone" id="adopterPhone" class="form-control">
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= h(t('common.email')) ?></label>
                    <input type="email" name="adopter_email" id="adopterEmail" class="form-control">
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= h(t('adoption.date')) ?></label>
                    <input type="date" name="adoption_date" class="form-control" value="<?= date('Y-m-d') ?>" required>
                </div>

                <div class="mb-3">
                    <label class="form-label"><?= h(t('common.notes')) ?></label>
                    <textarea name="notes" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    const select = document.getElementById('adopterContactSelect');
                    select?.addEventListener('change', () => {
                        const option = select.options[select.selectedIndex];
                        const values = select.value === 'new' ? {} : option.dataset;
                        document.getElementById('adopterName').value = values.name || '';
                        document.getElementById('adopterPhone').value = values.phone || '';
                        document.getElementById('adopterEmail').value = values.email || '';
                        document.getElementById('adopterAddress').value = values.address || '';
                        document.getElementById('adopterPostal').value = values.postal || '';
                        document.getElementById('adopterCity').value = values.city || '';
                    });
                });

            </script>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal"><?= h(t('common.cancel')) ?></button>
                <button type="submit" class="btn btn-success"><?= h(t('adoption.validate')) ?></button>
            </div>
        </form>
    </div>
</div>
