<?php
/**
 * Component: Filter Period (Responsive)
 * 
 * Expected variables:
 * @var string $period      Current period key ('today', 'week', etc.)
 * @var string $periodLabel Display label for current period
 * @var string $dateFrom    Start date (Y-m-d)
 * @var string $dateTo      End date (Y-m-d)
 */

$currentPeriod = $period ?? 'today';
$label = $periodLabel ?? 'Hoje';
$from = $dateFrom ?? date('Y-m-d');
$to = $dateTo ?? date('Y-m-d');
?>

<div class="filter-section">
    <div class="filter-header">
        <div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
            <h3 class="filter-title">
                <iconify-icon icon="solar:calendar-search-bold"></iconify-icon>
                Período
            </h3>
            <span class="filter-period-badge">
                <iconify-icon icon="solar:clock-circle-bold"></iconify-icon>
                <?php echo $label; ?>
            </span>
        </div>
        <button type="button" class="filter-toggle-btn" onclick="toggleFilter()" id="filterToggle">
            <iconify-icon icon="solar:alt-arrow-down-bold"></iconify-icon>
        </button>
    </div>
    <div class="filter-body" id="filterBody">
        <div class="filter-scroll">
            <div class="filter-pills">
                <?php
                $periods = [
                    'today' => ['icon' => 'solar:calendar-minimalistic-bold', 'label' => 'Hoje'],
                    'yesterday' => ['icon' => 'solar:calendar-bold', 'label' => 'Ontem'],
                    'week' => ['icon' => 'solar:calendar-mark-bold', 'label' => 'Semana'],
                    'month' => ['icon' => 'solar:calendar-date-bold', 'label' => 'Mês'],
                    'last_month' => ['icon' => 'solar:history-bold', 'label' => 'Mês Passado'],
                ];
                ?>
                <?php foreach ($periods as $key => $data): ?>
                <a href="?period=<?php echo $key; ?>" class="filter-pill <?php echo $currentPeriod === $key ? 'active' : ''; ?>">
                    <iconify-icon icon="<?php echo $data['icon']; ?>"></iconify-icon> <?php echo $data['label']; ?>
                </a>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="filter-sep"></div>
        <form method="GET" class="filter-dates">
            <input type="hidden" name="period" value="custom">
            <input type="date" name="from" value="<?php echo $from; ?>" title="Data inicial">
            <span class="sep">até</span>
            <input type="date" name="to" value="<?php echo $to; ?>" title="Data final">
            <button type="submit" class="btn-apply" title="Aplicar período personalizado">
                <iconify-icon icon="solar:check-circle-bold"></iconify-icon>
            </button>
        </form>
    </div>
</div>

<script>
function toggleFilter() {
    const body = document.getElementById('filterBody');
    const btn = document.getElementById('filterToggle');
    body.classList.toggle('show');
    btn.classList.toggle('active');
    const icon = btn.querySelector('iconify-icon');
    icon.setAttribute('icon', body.classList.contains('show') ? 'solar:alt-arrow-up-bold' : 'solar:alt-arrow-down-bold');
}
// Auto-show on desktop
if (window.innerWidth > 768) {
    document.getElementById('filterBody')?.classList.add('show');
}
</script>
