<?php if ($canViewMedical): ?>
<div class="modal modal-blur fade" id="modalExpense" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <form class="modal-content" method="post" action="/animal/add-expense">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title"><?= h(t('expense.add')) ?></h5>
                    <div class="text-muted small"><?= h(t('expense.history_help')) ?></div>
                </div><button class="btn-close" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body"><input type="hidden" name="animal_id" value="<?= (int)$animal['id'] ?>">
                <div class="row g-3">
                    <div class="col-md-8"><label
                            class="form-label required"><?= h(t('expense.act_product')) ?></label><select
                            class="form-select" name="tariff_id" id="expenseTariff" required>
                            <option value="">— <?= h(t('expense.choose')) ?> —</option><?php $lastClinic = '';
    foreach ($expenseTariffs as $t):if ($lastClinic !== $t['clinic_name']):if ($lastClinic !== ''):?></optgroup><?php endif;
        $lastClinic = $t['clinic_name'];?><optgroup label="<?= h($lastClinic) ?>"><?php endif;?><option
                                    value="<?= (int)$t['id'] ?>" data-price="<?= (int)$t['effective_cents'] ?>"
                                    data-discount="<?= h((string)$t['discount_percent']) ?>"><?= h($t['label']) ?> ·
                                    <?= number_format($t['effective_cents'] / 100, 2, ',', ' ') ?> €</option><?php endforeach;
    if ($lastClinic !== ''):?></optgroup><?php endif;?>
                        </select>
                        <div class="form-hint" id="expenseHint"><?= h(t('expense.price_after_discount')) ?></div>
                    </div>
                    <div class="col-md-4"><label class="form-label"><?= h(t('common.date')) ?></label><input
                            class="form-control" type="date" name="occurred_on" value="<?= date('Y-m-d') ?>" required>
                    </div>
                    <div class="col-md-4"><label class="form-label"><?= h(t('expense.quantity')) ?></label><input
                            class="form-control" type="number" min="0.01" step="0.01" name="quantity" value="1"
                            required></div>
                    <div class="col-md-8"><label class="form-label"><?= h(t('expense.comment')) ?></label><input
                            class="form-control" name="notes" placeholder="<?= h(t('expense.comment_placeholder')) ?>">
                    </div>
                </div>
            </div>
            <div class="modal-footer"><button class="btn me-auto" type="button"
                    data-bs-dismiss="modal"><?= h(t('common.cancel')) ?></button><button
                    class="btn btn-primary"><?= h(t('expense.save')) ?></button></div>
        </form>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const s = document.getElementById('expenseTariff'),
            h = document.getElementById('expenseHint'),
            template = <?= json_encode(t('expense.unit_estimate'), JSON_UNESCAPED_UNICODE |
                JSON_UNESCAPED_SLASHES) ?> ,
            empty = <?= json_encode(t('expense.price_after_discount'), JSON_UNESCAPED_UNICODE |
                JSON_UNESCAPED_SLASHES) ?> ;
        s?.addEventListener('change', () => {
            const o = s.selectedOptions[0],
                price = (Number(o?.dataset.price || 0) / 100).toLocaleString( <?= json_encode(I18n::
                    locale() === 'fr' ? 'fr-FR' : 'en-GB') ?> , {
                    minimumFractionDigits: 2
                });
            h.textContent = o?.value ? template.replace(':price', price).replace(':discount', o.dataset
                .discount) : empty;
        });
    });

</script>
<?php endif; ?>
