@extends('layouts.admin')
@section('title', 'Members')
@section('page-title', 'Members')
@section('page-subtitle', 'Manage church members')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
        <form method="GET" action="{{ route('admin.members.index') }}" class="flex flex-wrap gap-3 w-full sm:w-auto">
            <div class="relative flex-1 sm:flex-none sm:w-64">
                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-[var(--text-secondary)]">
                    <i class="fas fa-search"></i>
                </span>
                <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search members..."
                    class="w-full pl-10 pr-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-gold-500">
            </div>
            <select name="status" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-primary)]">
                <option value="">All Status</option>
                <option value="prospect" {{ ($filters['status'] ?? '') === 'prospect' ? 'selected' : '' }}>Prospect</option>
                <option value="new" {{ ($filters['status'] ?? '') === 'new' ? 'selected' : '' }}>New</option>
                <option value="active" {{ ($filters['status'] ?? '') === 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ ($filters['status'] ?? '') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                <option value="transferred" {{ ($filters['status'] ?? '') === 'transferred' ? 'selected' : '' }}>Transferred</option>
                <option value="deceased" {{ ($filters['status'] ?? '') === 'deceased' ? 'selected' : '' }}>Deceased</option>
            </select>
            @if(auth()->user()->hasRole('super-admin'))
            <select name="church_id" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-primary)]">
                <option value="">All Branches</option>
                @foreach(\App\Models\Church::orderBy('name')->get() as $church)
                    <option value="{{ $church->id }}" {{ ($filters['church_id'] ?? '') == $church->id ? 'selected' : '' }}>{{ $church->name }}</option>
                @endforeach
            </select>
            @endif
            <button type="submit" class="btn-royal px-4 py-2 rounded-lg text-white">Filter</button>
        </form>
        <div class="flex items-center gap-3 w-full sm:w-auto">
            <button type="button" id="deleteSelectedBtn" onclick="deleteSelected()" class="hidden bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg whitespace-nowrap transition-colors">
                <i class="fas fa-trash mr-2"></i>Delete Selected (<span id="selectedCount">0</span>)
            </button>
            <a href="{{ route('admin.members.create') }}" class="btn-royal px-4 py-2 rounded-lg text-white whitespace-nowrap">
                <i class="fas fa-plus mr-2"></i> Add Member
            </a>
        </div>
    </div>

    <div class="card-royal overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-[var(--bg-secondary)]">
                    <tr class="text-left text-sm text-[var(--text-secondary)]">
                        <th class="px-6 py-4 font-semibold w-12">
                            <input type="checkbox" id="selectAll" onclick="toggleAll(this)" class="w-4 h-4 rounded border-[var(--border-color)] text-gold-500 cursor-pointer">
                        </th>
                        <th class="px-6 py-4 font-semibold">Member</th>
                        <th class="px-6 py-4 font-semibold">Contact</th>
                        <th class="px-6 py-4 font-semibold">Status</th>
                        <th class="px-6 py-4 font-semibold">Family</th>
                        <th class="px-6 py-4 font-semibold">Joined</th>
                        <th class="px-6 py-4 font-semibold">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[var(--border-color)]">
                    @forelse($members as $member)
                        <tr class="hover:bg-[var(--bg-secondary)] transition-colors">
                            <td class="px-6 py-4">
                                <input type="checkbox" name="selected[]" value="{{ $member->id }}" class="row-checkbox w-4 h-4 rounded border-[var(--border-color)] text-gold-500 cursor-pointer">
                            </td>
                            <td class="px-6 py-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 font-semibold">
                                            {{ 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>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <p class="text-sm text-[var(--text-primary)]">{{ $member->email }}</p>
                                <p class="text-xs text-[var(--text-secondary)]">{{ $member->phone ?? 'No phone' }}</p>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2 py-1 rounded-full text-xs font-medium
                                    @if($member->membership_status === 'active') bg-green-100 text-green-700
                                    @elseif($member->membership_status === 'new') bg-blue-100 text-blue-700
                                    @elseif($member->membership_status === 'inactive') bg-gray-100 text-gray-700
                                    @elseif($member->membership_status === 'prospect') bg-yellow-100 text-yellow-700
                                    @else bg-red-100 text-red-700
                                    @endif">
                                    {{ ucfirst($member->membership_status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-[var(--text-primary)]">
                                {{ $member->family?->family_name ?? 'No family' }}
                            </td>
                            <td class="px-6 py-4 text-sm text-[var(--text-secondary)]">
                                {{ $member->membership_date?->format('M d, Y') ?? ($member->created_at ? $member->created_at->format('M d, Y') : 'N/A') }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('admin.members.show', $member->id) }}" class="p-2 rounded-lg hover:bg-[var(--bg-card)] text-gold-500" title="View">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.members.edit', $member->id) }}" class="p-2 rounded-lg hover:bg-[var(--bg-card)] text-blue-500" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ route('admin.members.qrcode', $member->id) }}" class="p-2 rounded-lg hover:bg-[var(--bg-card)] text-purple-500" title="QR Code">
                                        <i class="fas fa-qrcode"></i>
                                    </a>
                                    <form action="{{ route('admin.members.destroy', $member->id) }}" method="POST" class="inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" onclick="return confirm('Delete this member?')" class="p-2 rounded-lg hover:bg-[var(--bg-card)] text-red-500" title="Delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center text-[var(--text-secondary)]">
                                <i class="fas fa-users text-4xl mb-4"></i>
                                <p>No members found</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($members->hasPages())
            <div class="px-6 py-4 border-t border-[var(--border-color)]">
                {{ $members->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>

<script>
function toggleAll(source) {
    const checkboxes = document.querySelectorAll('.row-checkbox');
    checkboxes.forEach(cb => cb.checked = source.checked);
    updateSelectedCount();
}

function updateSelectedCount() {
    const checkboxes = document.querySelectorAll('.row-checkbox:checked');
    const count = checkboxes.length;
    const btn = document.getElementById('deleteSelectedBtn');
    const countSpan = document.getElementById('selectedCount');
    
    if (count > 0) {
        btn.classList.remove('hidden');
        countSpan.textContent = count;
    } else {
        btn.classList.add('hidden');
    }
}

function deleteSelected() {
    const checkboxes = document.querySelectorAll('.row-checkbox:checked');
    if (checkboxes.length === 0) return;
    
    if (confirm('Delete ' + checkboxes.length + ' selected member(s)?')) {
        const ids = [];
        checkboxes.forEach(cb => ids.push(cb.value));
        
        fetch('/admin/members/bulk-delete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ids: ids})
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            alert('Error deleting members');
        });
    }
}

// Add event listeners to checkboxes
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.row-checkbox');
    checkboxes.forEach(cb => cb.addEventListener('change', updateSelectedCount));
});
</script>
@endsection