{{--
    Birthday Widget — Include on dashboards
    Usage: @include('notices::_birthday-widget')
    Requires: Alpine.js for fetch on load
--}}

<div class="card" x-data="{
    today: [],
    upcoming: [],
    loading: true,
    init() {
        fetch('{{ route('notices.birthdays') }}')
            .then(r => r.json())
            .then(data => {
                this.today = data.today || [];
                this.upcoming = data.upcoming || [];
                this.loading = false;
            })
            .catch(() => { this.loading = false; });
    }
}">
    <div class="card-header">
        <h3 class="card-header-title flex items-center gap-2">
            <svg class="w-5 h-5 text-warning-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-3-3.87"/><path d="M4 21v-2a4 4 0 013-3.87"/><circle cx="12" cy="7" r="4"/><path d="M12 14v7"/><path d="M9 18h6"/></svg>
            Birthdays
        </h3>
    </div>
    <div class="card-body">

        {{-- Loading skeleton --}}
        <template x-if="loading">
            <div class="space-y-3">
                <div class="flex items-center gap-3">
                    <div class="skeleton-avatar"></div>
                    <div class="flex-1">
                        <div class="skeleton-text w-32 mb-1.5"></div>
                        <div class="skeleton-text w-20 h-3"></div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="skeleton-avatar"></div>
                    <div class="flex-1">
                        <div class="skeleton-text w-28 mb-1.5"></div>
                        <div class="skeleton-text w-24 h-3"></div>
                    </div>
                </div>
            </div>
        </template>

        {{-- Content --}}
        <template x-if="!loading">
            <div>
                {{-- Today's Birthdays --}}
                <template x-if="today.length > 0">
                    <div class="mb-4">
                        <p class="text-xxs font-semibold text-gray-400 uppercase tracking-wider mb-2.5">Today</p>
                        <div class="space-y-2.5">
                            <template x-for="person in today" :key="person.id">
                                <div class="flex items-center gap-3 p-2.5 bg-warning-50 rounded-lg border border-warning-100">
                                    <div class="w-9 h-9 rounded-full bg-gradient-to-br from-warning-500 to-danger-500 flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
                                        <span x-text="person.initials"></span>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm font-medium text-gray-800 truncate" x-text="person.name"></p>
                                        <p class="text-xxs text-warning-600" x-text="person.dob + ' 🎂'"></p>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>

                {{-- Upcoming Birthdays --}}
                <template x-if="upcoming.length > 0">
                    <div>
                        <p class="text-xxs font-semibold text-gray-400 uppercase tracking-wider mb-2.5">Upcoming</p>
                        <div class="space-y-2">
                            <template x-for="person in upcoming" :key="person.id">
                                <div class="flex items-center gap-3 py-2">
                                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-600 to-accent-500 flex items-center justify-center text-white text-xxs font-semibold flex-shrink-0">
                                        <span x-text="person.initials"></span>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="text-sm text-gray-700 truncate" x-text="person.name"></p>
                                    </div>
                                    <div class="text-right flex-shrink-0">
                                        <p class="text-xxs text-gray-500" x-text="person.date"></p>
                                        <p class="text-xxs text-gray-400" x-text="person.days_away === 1 ? 'Tomorrow' : 'In ' + person.days_away + ' days'"></p>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>

                {{-- Empty state --}}
                <template x-if="today.length === 0 && upcoming.length === 0">
                    <div class="text-center py-6">
                        <svg class="w-10 h-10 mx-auto text-gray-300 mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-3-3.87"/><path d="M4 21v-2a4 4 0 013-3.87"/><circle cx="12" cy="7" r="4"/></svg>
                        <p class="text-xs text-gray-400">No upcoming birthdays</p>
                    </div>
                </template>
            </div>
        </template>

    </div>
</div>