<form method="get" class="surface-card p-5">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-end">
        <div class="grid flex-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div>
                <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Perioada</label>
                <select name="period" class="form-select">
                    <?php foreach ($filters['period_options'] as $key => $label) : ?>
                        <option value="<?= esc($key) ?>" <?= $filters['selected_period'] === $key ? 'selected' : '' ?>><?= esc($label) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <?php if (! $filters['coach_locked']) : ?>
                <div>
                    <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Trainer</label>
                    <select name="coach_id" class="form-select">
                        <option value="0">Toti trainerii</option>
                        <?php foreach ($filters['coach_options'] as $coach) : ?>
                            <option value="<?= esc((string) $coach['id']) ?>" <?= (int) $filters['selected_coach_id'] === (int) $coach['id'] ? 'selected' : '' ?>><?= esc($coach['full_name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            <?php endif; ?>

            <div>
                <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Nivel</label>
                <select name="level_id" class="form-select">
                    <option value="0">Toate nivelele</option>
                    <?php foreach ($filters['level_options'] as $level) : ?>
                        <option value="<?= esc((string) $level['id']) ?>" <?= (int) $filters['selected_level_id'] === (int) $level['id'] ? 'selected' : '' ?>><?= esc($level['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div>
                <label class="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Status copil</label>
                <select name="child_status" class="form-select">
                    <?php foreach ($filters['status_options'] as $key => $label) : ?>
                        <option value="<?= esc($key) ?>" <?= $filters['selected_child_status'] === $key ? 'selected' : '' ?>><?= esc($label) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <div class="flex gap-3">
            <button type="submit" class="inline-flex items-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-soft transition hover:bg-indigo-500">
                Actualizeaza
            </button>
            <a href="<?= url_to('dashboard') ?>" class="inline-flex items-center rounded-2xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                Reset
            </a>
        </div>
    </div>
    <div class="mt-4 flex flex-wrap gap-2 text-xs text-slate-500">
        <span class="rounded-full bg-slate-100 px-3 py-1">Perioada: <?= esc($filters['date_start']) ?> - <?= esc($filters['date_end']) ?></span>
        <?php if ($filters['coach_locked']) : ?>
            <span class="rounded-full bg-slate-100 px-3 py-1">Vizualizare limitata la copiii trainerului curent</span>
        <?php endif; ?>
    </div>
</form>
