<?php
$roleColors = ['fa' => 'cyan','benevole' => 'green','dirigeant' => 'purple','veterinaire' => 'red','cabinet' => 'orange','crematorium' => 'dark','adoptant' => 'blue','deposant' => 'yellow','fourriere' => 'azure'];
?>
<style>
    .directory-person>td {
        background: rgba(32, 107, 196, .035)
    }

    .directory-organization>td {
        background: rgba(111, 66, 193, .055)
    }

    .directory-person:hover>td {
        background: rgba(32, 107, 196, .075) !important
    }

    .directory-organization:hover>td {
        background: rgba(111, 66, 193, .095) !important
    }

    .directory-contact-row {
        cursor: pointer
    }

    .directory-contact-row:focus {
        outline: 2px solid var(--tblr-primary);
        outline-offset: -2px
    }

</style>
<div class="card">
    <div class="card-header">
        <form class="row g-2 w-100 align-items-center" method="get" action="/directory">
            <div class="col"><input class="form-control" name="q" value="<?= h($q) ?>"
                    placeholder="<?= h(t('directory.search')) ?>"></div>
            <div class="col-md-3"><select class="form-select" name="role">
                    <option value=""><?= h(t('directory.all_roles')) ?></option>
                    <?php foreach ($roles as $key => $label): ?><option value="<?= h($key) ?>"
                        <?= $role === $key ? 'selected' : '' ?>><?= h($label) ?></option><?php endforeach; ?>
                </select></div>
            <div class="col-auto"><button class="btn btn-outline-primary"><?= h(t('common.filter')) ?></button></div>
            <div class="col-auto"><a class="btn btn-primary" href="/directory/new">+ <?= h(t('common.add')) ?></a></div>
        </form>
    </div>
    <div class="table-responsive">
        <table class="table table-vcenter card-table">
            <thead>
                <tr>
                    <th><?= h(t('directory.identity')) ?></th>
                    <th><?= h(t('directory.roles')) ?></th>
                    <th><?= h(t('directory.contact_details')) ?></th>
                    <th><?= h(t('directory.city')) ?></th>
                    <th><?= h(t('directory.organization')) ?></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($contacts as $contact): ?><tr
                    class="directory-contact-row <?= $contact['kind'] === 'organization' ? 'directory-organization' : 'directory-person' ?>"
                    data-href="/directory/view?id=<?= (int)$contact['id'] ?>" tabindex="0" role="link"
                    aria-label="<?= h(t('directory.open_contact', ['name' => $contact['name']])) ?>">
                    <td><a class="fw-bold text-reset"
                            href="/directory/view?id=<?= (int)$contact['id'] ?>"><?= h($contact['name']) ?></a>
                        <div class="small text-muted">
                            <?= h(t($contact['kind'] === 'organization' ? 'directory.organization' : 'directory.person')) ?><?php if ((int)$contact['adoption_count'] > 0): ?>
                            · <span class="badge bg-blue-lt" title="<?= h(t('directory.adopted_animals')) ?>">🐾
                                <?= (int)$contact['adoption_count'] ?></span><?php endif; ?><?php if ($contact['kind'] === 'organization' && (int)$contact['expense_total_cents'] > 0): ?>
                            · <span
                                class="text-orange"><?= h(number_format((int)$contact['expense_total_cents'] / 100, 2, ',', ' ') . ' €') ?></span><?php endif; ?>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex flex-wrap gap-1">
                            <?php foreach (array_filter(explode(',', (string)$contact['roles'])) as $r): ?><span
                                class="badge bg-<?= h($roleColors[$r] ?? 'secondary') ?>-lt"><?= h($roles[$r] ?? $r) ?></span><?php endforeach; ?>
                        </div>
                    </td>
                    <td><?php if ($contact['phone']): ?><a
                            href="tel:<?= h($contact['phone']) ?>"><?= h($contact['phone']) ?></a><?php endif; ?><?php if ($contact['email']): ?><br><a
                            href="mailto:<?= h($contact['email']) ?>"><?= h($contact['email']) ?></a><?php endif; ?>
                    </td>
                    <td><?= h($contact['city'] ?: '—') ?></td>
                    <td><?php if ($contact['organization_id'] && $contact['organization_name']): ?><a
                            href="/directory/view?id=<?= (int)$contact['organization_id'] ?>"><?= h($contact['organization_name']) ?></a><?php else: ?>—<?php endif; ?>
                    </td>
                    <td>
                        <div class="d-flex gap-1 justify-content-end">
                            <?php $contactRoles = array_filter(explode(',', (string)$contact['roles'])); ?><?php if (in_array('benevole', $contactRoles, true) || in_array('fa', $contactRoles, true)): ?>
                            <div class="dropdown"><button class="btn btn-outline-orange btn-sm dropdown-toggle"
                                    data-bs-toggle="dropdown"><?= h(t('directory.documents')) ?></button>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <?php if (in_array('benevole', $contactRoles, true)): ?><a class="dropdown-item"
                                        href="/directory/documents?contact_id=<?= (int)$contact['id'] ?>&type=benevole&format=odt"><?= h(t('directory.volunteer_contract')) ?>
                                        — ODT</a><a class="dropdown-item" target="_blank"
                                        href="/directory/documents?contact_id=<?= (int)$contact['id'] ?>&type=benevole&format=pdf"><?= h(t('directory.volunteer_contract')) ?>
                                        — PDF</a><?php endif; ?><?php if (in_array('fa', $contactRoles, true)): ?><a
                                        class="dropdown-item"
                                        href="/directory/documents?contact_id=<?= (int)$contact['id'] ?>&type=fa&format=odt"><?= h(t('directory.foster_proposal')) ?>
                                        — ODT</a><a class="dropdown-item" target="_blank"
                                        href="/directory/documents?contact_id=<?= (int)$contact['id'] ?>&type=fa&format=pdf"><?= h(t('directory.foster_proposal')) ?>
                                        — PDF</a><?php endif; ?></div>
                            </div><?php endif; ?><a class="btn btn-outline-primary btn-sm"
                                href="/directory/edit?id=<?= (int)$contact['id'] ?>"><?= h(t('common.edit')) ?></a>
                        </div>
                    </td>
                </tr><?php endforeach; ?>
                <?php if (!$contacts): ?><tr>
                    <td colspan="6" class="text-center text-muted py-4"><?= h(t('directory.no_contact')) ?></td>
                </tr><?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
<script>
    document.querySelectorAll('.directory-contact-row').forEach(row => {
        const open = () => location.href = row.dataset.href;
        row.addEventListener('click', event => {
            if (event.target.closest('a,button,input,select,textarea,[data-bs-toggle]')) return;
            open();
        });
        row.addEventListener('keydown', event => {
            if ((event.key === 'Enter' || event.key === ' ') && !event.target.closest(
                    'a,button,input,select,textarea')) {
                event.preventDefault();
                open();
            }
        });
    });

</script>
