| @props([
|
| 'periods' => ['daily', 'weekly', 'monthly'],
|
| 'default' => 'daily',
|
| 'onPeriodChange' => null
|
| ])
|
|
|
| <div class="bg-white/5 backdrop-blur-2xl border border-white/10 rounded-2xl p-2 shadow-2xl"
|
| style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);"
|
| x-data="timeFilter('{{ $default }}')">
|
|
|
| <div class="flex space-x-1">
|
| @foreach($periods as $period)
|
| <button @click="selectPeriod('{{ $period }}')"
|
| :class="selectedPeriod === '{{ $period }}' ? 'active' : ''"
|
| class="time-filter-btn px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300 relative overflow-hidden group">
|
|
|
| <!-- Active background -->
|
| <div class="absolute inset-0 bg-gradient-to-r from-emerald-400/20 to-emerald-600/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
|
| <!-- Content -->
|
| <span class="relative z-10">{{ ucfirst($period) }}</span>
|
| </button>
|
| @endforeach
|
| </div>
|
|
|
| <!-- Date picker for specific date selection -->
|
| <div x-show="showDatePicker"
|
| x-transition:enter="transition ease-out duration-200"
|
| x-transition:enter-start="opacity-0 scale-95"
|
| x-transition:enter-end="opacity-100 scale-100"
|
| x-transition:leave="transition ease-in duration-150"
|
| x-transition:leave-start="opacity-100 scale-100"
|
| x-transition:leave-end="opacity-0 scale-95"
|
| class="mt-3 pt-3 border-t border-white/10">
|
|
|
| <div class="flex items-center space-x-3">
|
| <label class="text-white/80 text-sm font-medium">Date:</label>
|
| <input type="date"
|
| x-model="selectedDate"
|
| @change="onDateChange()"
|
| class="bg-white/10 border border-white/20 rounded-lg px-3 py-1 text-white text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400/50 focus:border-emerald-400/50">
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <style>
|
| .time-filter-btn {
|
| @apply text-white/70 hover:text-white;
|
| }
|
|
|
| .time-filter-btn.active {
|
| @apply text-white bg-gradient-to-r from-emerald-400/30 to-emerald-600/30 border border-emerald-400/50;
|
| box-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
|
| text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
|
| }
|
|
|
| .time-filter-btn:not(.active):hover {
|
| @apply bg-white/10;
|
| }
|
| </style>
|
|
|
| <script>
|
| document.addEventListener('alpine:init', () => {
|
| Alpine.data('timeFilter', (defaultPeriod) => ({
|
| selectedPeriod: defaultPeriod,
|
| selectedDate: new Date().toISOString().split('T')[0],
|
| showDatePicker: false,
|
|
|
| init() {
|
| // Initialize with default period
|
| this.onPeriodChange();
|
| },
|
|
|
| selectPeriod(period) {
|
| if (this.selectedPeriod === period) return;
|
|
|
| console.log('Time filter: selecting period', period);
|
| this.selectedPeriod = period;
|
| this.showDatePicker = period !== 'daily' || this.selectedDate !== new Date().toISOString().split('T')[0];
|
|
|
| // Trigger period change
|
| this.onPeriodChange();
|
|
|
| // Add selection animation
|
| this.animateSelection();
|
| },
|
|
|
| onDateChange() {
|
| this.onPeriodChange();
|
| },
|
|
|
| onPeriodChange() {
|
| console.log('Time filter: dispatching period change', this.selectedPeriod, this.selectedDate);
|
|
|
| // Try to call dashboard instance directly
|
| if (window.dashboardInstance && typeof window.dashboardInstance.onPeriodChange === 'function') {
|
| console.log('Time filter: calling dashboard instance directly');
|
| window.dashboardInstance.onPeriodChange(this.selectedPeriod, this.selectedDate);
|
| } else {
|
| console.log('Time filter: dashboard instance not available, using events');
|
|
|
|
|
| document.dispatchEvent(new CustomEvent('period-changed', {
|
| detail: {
|
| period: this.selectedPeriod,
|
| date: this.selectedDate
|
| }
|
| }));
|
| }
|
| },
|
|
|
| animateSelection() {
|
|
|
| const activeBtn = this.$el.querySelector('.time-filter-btn.active');
|
| if (activeBtn) {
|
| activeBtn.style.transform = 'scale(0.95)';
|
| setTimeout(() => {
|
| activeBtn.style.transform = 'scale(1)';
|
| }, 150);
|
| }
|
| },
|
|
|
|
|
| setPeriod(period) {
|
| this.selectPeriod(period);
|
| },
|
|
|
| setDate(date) {
|
| this.selectedDate = date;
|
| this.onDateChange();
|
| },
|
|
|
| getCurrentSelection() {
|
| return {
|
| period: this.selectedPeriod,
|
| date: this.selectedDate
|
| };
|
| }
|
| }));
|
| });
|
| </script> |
