@extends('layouts.admin')
@section('title', $member->full_name)
@section('page-title', 'Member Profile')
@section('page-subtitle', $member->member_id)

@section('content')
<div class="space-y-6">
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-1">
            <div class="card-royal p-6">
                <div class="text-center mb-6">
                    @if($member->profile_photo)
                        <img src="{{ asset('storage/' . $member->profile_photo) }}" class="w-32 h-32 rounded-full mx-auto object-cover border-4 border-gold-500">
                    @else
                        <div class="w-32 h-32 rounded-full mx-auto bg-gradient-to-br from-gold-400 to-royal-500 flex items-center justify-center text-white text-4xl font-bold">
                            {{ substr($member->first_name, 0, 1) }}{{ substr($member->last_name, 0, 1) }}
                        </div>
                    @endif
                    <h2 class="font-cinzel text-2xl font-bold text-[var(--text-primary)] mt-4">{{ $member->full_name }}</h2>
                    <p class="text-[var(--text-secondary)]">{{ $member->member_id }}</p>
                    <span class="inline-block mt-2 px-3 py-1 rounded-full text-sm font-medium
                        @if($member->membership_status === 'active') bg-green-100 text-green-700
                        @elseif($member->membership_status === 'new') bg-blue-100 text-blue-700
                        @else bg-gray-100 text-gray-700 @endif">
                        {{ ucfirst($member->membership_status) }}
                    </span>
                </div>

                <div class="space-y-4">
                    <div class="flex items-center gap-3 text-[var(--text-primary)]">
                        <i class="fas fa-envelope text-gold-500 w-5"></i>
                        <span>{{ $member->email }}</span>
                    </div>
                    <div class="flex items-center gap-3 text-[var(--text-primary)]">
                        <i class="fas fa-phone text-gold-500 w-5"></i>
                        <span>{{ $member->phone ?? 'No phone' }}</span>
                    </div>
                    <div class="flex items-center gap-3 text-[var(--text-primary)]">
                        <i class="fas fa-map-marker-alt text-gold-500 w-5"></i>
                        <span>{{ $member->city ? $member->city . ', ' . $member->state : 'No address' }}</span>
                    </div>
                    <div class="flex items-center gap-3 text-[var(--text-primary)]">
                        <i class="fas fa-birthday-cake text-gold-500 w-5"></i>
                        <span>{{ $member->date_of_birth?->format('M d, Y') }} ({{ $member->age ?? 'N/A' }} years)</span>
                    </div>
                    <div class="flex items-center gap-3 text-[var(--text-primary)]">
                        <i class="fas fa-ring text-gold-500 w-5"></i>
                        <span>{{ ucfirst($member->marital_status ?? 'Not specified') }}</span>
                    </div>
                    <div class="flex items-center gap-3 text-[var(--text-primary)]">
                        <i class="fas fa-calendar-check text-gold-500 w-5"></i>
                        <span>Member since {{ $member->membership_date?->format('M Y') ?? 'N/A' }}</span>
                    </div>
                </div>

                <div class="mt-6 flex flex-wrap gap-2">
                    <a href="{{ route('admin.members.edit', $member->id) }}" class="flex-1 btn-royal px-4 py-2 rounded-lg text-white text-center">
                        <i class="fas fa-edit mr-2"></i> Edit
                    </a>
                    <a href="{{ route('admin.members.qrcode', $member->id) }}" class="flex-1 px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] text-center hover:bg-[var(--bg-secondary)]">
                        <i class="fas fa-qrcode mr-2"></i> QR Code
                    </a>
                    <a href="{{ route('admin.tithe-welfare.member-ledger', $member->id) }}" class="flex-1 px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] text-center hover:bg-[var(--bg-secondary)]">
                        <i class="fas fa-book-open mr-2 text-gold-500"></i> Digital Book
                    </a>
                </div>
            </div>
        </div>

        <div class="lg:col-span-2 space-y-6">
            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Attendance Statistics</h3>
                <div class="grid grid-cols-3 gap-4">
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-3xl font-bold text-gold-500">{{ $attendance_stats['total_services'] }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Total Services</p>
                    </div>
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-3xl font-bold text-blue-500">{{ $attendance_stats['this_month'] }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">This Month</p>
                    </div>
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-3xl font-bold text-green-500">{{ $attendance_stats['last_30_days'] }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Last 30 Days</p>
                    </div>
                </div>
            </div>

            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Giving Statistics</h3>
                <div class="grid grid-cols-3 gap-4">
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-3xl font-bold text-gold-500">{{ $giving_stats['total_donations'] }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Total Donations</p>
                    </div>
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-3xl font-bold text-green-500">${{ number_format($giving_stats['total_amount'], 2) }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Total Amount</p>
                    </div>
                    <div class="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
                        <p class="text-3xl font-bold text-purple-500">{{ $giving_stats['active_pledges'] }}</p>
                        <p class="text-sm text-[var(--text-secondary)]">Active Pledges</p>
                    </div>
                </div>
            </div>

            <div class="card-royal p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Tithes & Welfare</h3>
                    <a href="{{ route('admin.tithe-welfare.member-ledger', $member->id) }}" class="text-gold-500 hover:underline text-sm">
                        View Digital Book <i class="fas fa-external-link-alt ml-1"></i>
                    </a>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div class="text-center p-4 bg-green-50 rounded-lg">
                        <p class="text-2xl font-bold text-green-600">GHS {{ number_format($tithe_stats['this_year_tithes'], 2) }}</p>
                        <p class="text-sm text-green-700">Tithes ({{ now()->year }})</p>
                    </div>
                    <div class="text-center p-4 bg-green-50 rounded-lg">
                        <p class="text-2xl font-bold text-green-600">{{ $tithe_stats['total_tithes'] }}</p>
                        <p class="text-sm text-green-700">Total Tithe Payments</p>
                    </div>
                    <div class="text-center p-4 bg-blue-50 rounded-lg">
                        <p class="text-2xl font-bold text-blue-600">GHS {{ number_format($welfare_stats['this_year_welfare'], 2) }}</p>
                        <p class="text-sm text-blue-700">Welfare ({{ now()->year }})</p>
                    </div>
                    <div class="text-center p-4 bg-blue-50 rounded-lg">
                        <p class="text-2xl font-bold text-blue-600">{{ $welfare_stats['total_welfare'] }}</p>
                        <p class="text-sm text-blue-700">Total Welfare Payments</p>
                    </div>
                </div>
                <div class="mt-4 flex gap-2">
                    <a href="{{ route('admin.tithe-welfare.tithes.create') }}?member_id={{ $member->id }}" class="flex-1 px-4 py-2 rounded-lg border border-green-500 text-green-600 text-center hover:bg-green-50 transition-colors">
                        <i class="fas fa-coins mr-2"></i>Record Tithe
                    </a>
                    <a href="{{ route('admin.tithe-welfare.welfare.create') }}?member_id={{ $member->id }}" class="flex-1 px-4 py-2 rounded-lg border border-blue-500 text-blue-600 text-center hover:bg-blue-50 transition-colors">
                        <i class="fas fa-heart mr-2"></i>Record Welfare
                    </a>
                </div>
            </div>

            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Recent Attendance</h3>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-sm text-[var(--text-secondary)] border-b border-[var(--border-color)]">
                                <th class="pb-3">Date</th>
                                <th class="pb-3">Service</th>
                                <th class="pb-3">Check-in Time</th>
                                <th class="pb-3">Method</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm">
                            @forelse($member->attendances->take(5) as $attendance)
                                <tr class="border-b border-[var(--border-color)]">
                                    <td class="py-3">{{ $attendance->service_date->format('M d, Y') }}</td>
                                    <td class="py-3">{{ $attendance->service?->name }}</td>
                                    <td class="py-3">{{ $attendance->check_in_time }}</td>
                                    <td class="py-3 capitalize">{{ str_replace('_', ' ', $attendance->check_in_method) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="py-4 text-center text-[var(--text-secondary)]">No attendance records</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Family Information</h3>
                @if($member->family)
                    <div class="space-y-4">
                        <div class="flex items-center gap-3 p-3 bg-[var(--bg-secondary)] rounded-lg">
                            <i class="fas fa-users text-gold-500 w-6"></i>
                            <div>
                                <p class="font-medium text-[var(--text-primary)]">{{ $member->family->family_name }}</p>
                                <p class="text-sm text-[var(--text-secondary)]">Family Name</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-3 bg-[var(--bg-secondary)] rounded-lg">
                            <i class="fas fa-user-tag text-gold-500 w-6"></i>
                            <div>
                                <p class="font-medium text-[var(--text-primary)]">{{ ucfirst($member->family_role ?? 'Not specified') }}</p>
                                <p class="text-sm text-[var(--text-secondary)]">Family Role</p>
                            </div>
                        </div>
                        
                        @if($member->family->members->count() > 1)
                        <div class="mt-4">
                            <h4 class="font-medium text-[var(--text-primary)] mb-3">Other Family Members</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                @foreach($member->family->members as $familyMember)
                                    @if($familyMember->id !== $member->id)
                                        <div class="flex items-center gap-3 p-3 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-color)]">
                                            <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($familyMember->first_name, 0, 1) }}{{ substr($familyMember->last_name, 0, 1) }}
                                            </div>
                                            <div>
                                                <p class="font-medium text-[var(--text-primary)]">{{ $familyMember->full_name }}</p>
                                                <p class="text-xs text-[var(--text-secondary)]">{{ ucfirst($familyMember->family_role ?? '') }}</p>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                @else
                    <div class="text-center py-8 text-[var(--text-secondary)]">
                        <i class="fas fa-users text-4xl mb-3 opacity-50"></i>
                        <p>No family information available</p>
                    </div>
                @endif
            </div>

            <div class="card-royal p-6">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Status Update</h3>
                <form action="{{ route('admin.members.update-status', $member->id) }}" method="POST" class="flex items-center gap-4">
                    @csrf
                    <select name="status" class="flex-1 px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]">
                        <option value="prospect" {{ $member->membership_status === 'prospect' ? 'selected' : '' }}>Prospect</option>
                        <option value="new" {{ $member->membership_status === 'new' ? 'selected' : '' }}>New</option>
                        <option value="active" {{ $member->membership_status === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ $member->membership_status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="transferred" {{ $member->membership_status === 'transferred' ? 'selected' : '' }}>Transferred</option>
                        <option value="deceased" {{ $member->membership_status === 'deceased' ? 'selected' : '' }}>Deceased</option>
                    </select>
                    <button type="submit" class="btn-royal px-4 py-2 rounded-lg text-white">Update Status</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection