@extends('layouts.admin')
@section('title', 'Birthdays')
@section('page-title', 'Birthdays')
@section('page-subtitle', 'Manage member birthdays and send wishes')

@php
use Carbon\Carbon;
@endphp

@section('content')
<div class="space-y-6">
    @if($birthdaysToday->count() > 0)
    <div class="bg-gradient-to-r from-gold-500 to-gold-600 rounded-2xl p-6 text-white">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center text-3xl">
                🎂
            </div>
            <div class="flex-1">
                <h3 class="font-cinzel text-2xl font-bold">Celebrating Today!</h3>
                <p class="text-gold-100">
                    @foreach($birthdaysToday as $member)
                        {{ $member->full_name }}@if(!$loop->last), @endif
                    @endforeach
                </p>
            </div>
            <button onclick="openWishModal({{ $birthdaysToday->pluck('id') }})" class="px-6 py-3 bg-white text-gold-600 rounded-xl font-semibold hover:bg-gold-50 transition-colors flex items-center gap-2">
                <i class="fas fa-paper-plane"></i>
                Send Wishes
            </button>
        </div>
    </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">Today</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['today'] }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center">
                    <i class="fas fa-birthday-cake text-red-500 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">This Month</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['this_month'] }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
                    <i class="fas fa-calendar text-blue-500 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">With Phone</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['with_phone'] }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-phone text-green-500 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card rounded-xl p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[var(--text-secondary)] text-sm">With Email</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ $stats['with_email'] }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
                    <i class="fas fa-envelope text-purple-500 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="card-royal p-6">
        <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
            <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">All Birthdays</h3>
            
            <div class="flex flex-wrap gap-3">
                <form method="GET" class="flex items-center gap-3">
                    <select name="month" onchange="this.form.submit()" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] text-sm">
                        <option value="">All Months</option>
                        @foreach($months as $num => $name)
                            <option value="{{ $num }}" {{ $month == $num ? 'selected' : '' }}>{{ $name }}</option>
                        @endforeach
                    </select>
                </form>
                
                <form method="GET" class="flex items-center gap-2">
                    <input type="hidden" name="month" value="{{ $month }}">
                    <input type="text" name="search" value="{{ $search }}" placeholder="Search name..."
                        class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] text-sm">
                    <button type="submit" class="px-4 py-2 bg-gold-500 text-white rounded-lg text-sm hover:bg-gold-600">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
                
                <button onclick="openBulkWishModal()" class="px-4 py-2 bg-gold-500 text-white rounded-lg text-sm hover:bg-gold-600 flex items-center gap-2">
                    <i class="fas fa-paper-plane"></i>
                    Send Bulk Wishes
                </button>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-[var(--border-color)]">
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">
                            <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                        </th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Member</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Birthday</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Age</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Contact</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-[var(--text-secondary)]">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($members as $member)
                        @php
                            $birthday = Carbon::parse($member->date_of_birth);
                            $nextBirthday = $birthday->copy()->year(now()->year);
                            if ($nextBirthday < now()) {
                                $nextBirthday->addYear();
                            }
                            $age = $birthday->age + ($nextBirthday <= now() ? 1 : 0);
                            $isToday = $birthday->month === now()->month && $birthday->day === now()->day;
                        @endphp
                        <tr class="border-b border-[var(--border-color)] hover:bg-[var(--bg-secondary)] {{ $isToday ? 'bg-gold-500/10' : '' }}">
                            <td class="py-4 px-4">
                                <input type="checkbox" name="member_ids[]" value="{{ $member->id }}" class="member-checkbox">
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-3">
                                    @if($member->profile_photo)
                                        <img src="{{ asset('storage/' . $member->profile_photo) }}" class="w-10 h-10 rounded-full object-cover">
                                    @else
                                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gold-400 to-royal-500 flex items-center justify-center text-white text-sm">
                                            {{ substr($member->first_name, 0, 1) }}{{ substr($member->last_name, 0, 1) }}
                                        </div>
                                    @endif
                                    <div>
                                        <p class="font-medium text-[var(--text-primary)]">{{ $member->full_name }}</p>
                                        <p class="text-xs text-[var(--text-secondary)]">{{ $member->member_id }}</p>
                                    </div>
                                    @if($isToday)
                                        <span class="px-2 py-1 rounded-full bg-gold-500 text-white text-xs font-medium">Today!</span>
                                    @endif
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <div>
                                    <p class="text-[var(--text-primary)]">{{ $birthday->format('M d') }}</p>
                                    <p class="text-xs text-[var(--text-secondary)]">{{ $nextBirthday->format('l, M d, Y') }}</p>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="text-[var(--text-primary)]">{{ $age }}</span>
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-2">
                                    @if($member->phone)
                                        <a href="tel:{{ $member->phone }}" class="p-2 rounded-lg bg-green-500/20 text-green-500 hover:bg-green-500/30" title="Call">
                                            <i class="fas fa-phone text-sm"></i>
                                        </a>
                                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $member->phone) }}" target="_blank" class="p-2 rounded-lg bg-green-500/20 text-green-500 hover:bg-green-500/30" title="WhatsApp">
                                            <i class="fab fa-whatsapp text-sm"></i>
                                        </a>
                                    @else
                                        <span class="text-xs text-[var(--text-secondary)]">No phone</span>
                                    @endif
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex items-center gap-2">
                                    <button onclick="openWishModal([{{ $member->id }}])" class="p-2 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:text-gold-500" title="Send Wish">
                                        <i class="fas fa-paper-plane"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-[var(--text-secondary)]">
                                <i class="fas fa-birthday-cake text-4xl mb-3 opacity-50"></i>
                                <p>No birthdays found for the selected filters.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $members->withQueryString()->links() }}
        </div>
    </div>
</div>

<!-- Wish Modal -->
<div id="wishModal" class="fixed inset-0 bg-black/50 hidden z-50 flex items-center justify-center">
    <div class="bg-[var(--bg-card)] rounded-2xl w-full max-w-lg mx-4 p-6">
        <div class="flex justify-between items-center mb-6">
            <h3 class="font-cinzel text-xl font-bold text-[var(--text-primary)]">Send Birthday Wishes</h3>
            <button onclick="closeWishModal()" class="p-2 rounded-lg hover:bg-[var(--bg-secondary)] text-[var(--text-secondary)]">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <form action="{{ route('admin.birthdays.send-wishes') }}" method="POST">
            @csrf
            <input type="hidden" name="member_ids" id="selectedMemberIds">
            
            <div class="mb-6">
                <p class="text-sm text-[var(--text-secondary)] mb-2">Send to <span id="recipientCount">0</span> member(s)</p>
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Send Via</label>
                <div class="flex flex-wrap gap-4">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="method" value="sms" checked class="text-gold-500">
                        <i class="fas fa-sms text-green-500"></i>
                        <span class="text-[var(--text-primary)]">SMS</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="method" value="email" class="text-gold-500">
                        <i class="fas fa-envelope text-purple-500"></i>
                        <span class="text-[var(--text-primary)]">Email</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="method" value="whatsapp" class="text-gold-500">
                        <i class="fab fa-whatsapp text-green-500"></i>
                        <span class="text-[var(--text-primary)]">WhatsApp</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" name="method" value="all" class="text-gold-500">
                        <i class="fas fa-globe text-blue-500"></i>
                        <span class="text-[var(--text-primary)]">All</span>
                    </label>
                </div>
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium text-[var(--text-primary)] mb-2">Message</label>
                <textarea name="message" rows="4" required class="w-full px-4 py-3 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500" placeholder="Type your birthday message...">Happy Birthday, {name}! 🎂 Wishing you God's richest blessings from {{ church_name() }}.</textarea>
                <p class="text-xs text-[var(--text-secondary)] mt-1">Use {name} to insert the member's first name</p>
            </div>
            
            <div class="flex justify-end gap-3">
                <button type="button" onclick="closeWishModal()" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    Cancel
                </button>
                <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">
                    <i class="fas fa-paper-plane mr-2"></i> Send Wishes
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openWishModal(memberIds) {
    if (typeof memberIds === 'object') {
        memberIds = memberIds.join(',');
    }
    document.getElementById('selectedMemberIds').value = memberIds;
    document.getElementById('recipientCount').textContent = memberIds.split(',').length;
    document.getElementById('wishModal').classList.remove('hidden');
}

function openBulkWishModal() {
    const checkboxes = document.querySelectorAll('.member-checkbox:checked');
    if (checkboxes.length === 0) {
        alert('Please select at least one member');
        return;
    }
    const memberIds = Array.from(checkboxes).map(cb => cb.value);
    openWishModal(memberIds);
}

function closeWishModal() {
    document.getElementById('wishModal').classList.add('hidden');
}

function toggleSelectAll() {
    const checked = document.getElementById('selectAll').checked;
    document.querySelectorAll('.member-checkbox').forEach(cb => cb.checked = checked);
}

document.addEventListener('click', function(e) {
    if (e.target.id === 'wishModal') {
        closeWishModal();
    }
});
</script>
@endsection