{{-- Admin Member Details --}}
<x-app-layout title="Member Details">

    <x-module-hero :title="'Member: ' . $member->full_name" :description="'Member Code: ' . $member->membership_code" icon="fa-user">
        <x-slot name="backButton">
            <a href="{{ route('admin.members.index') }}" class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Members
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view members')
                <a href="{{ route('admin.membership.dashboard') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.membership.dashboard') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-tachometer-alt text-sm"></i> Dashboard
                </a>
            @endcan
            @can('view members')
                <a href="{{ route('admin.members.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.members.index') || request()->routeIs('admin.members.show') || request()->routeIs('admin.members.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-users text-sm"></i> Members
                </a>
            @endcan
            @can('view members')
                <a href="{{ route('admin.members.applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.members.applications.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-file-alt text-sm"></i> Applications
                </a>
            @endcan
            @can('view membership categories')
                <a href="{{ route('admin.membership-categories.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.membership-categories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-tags text-sm"></i> Categories
                </a>
            @endcan
            @can('manage renewal configs')
                <a href="{{ route('admin.renewal-configs.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.renewal-configs.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-rotate text-sm"></i> Renewal Config
                </a>
            @endcan
            @can('view contributions')
                <a href="{{ route('admin.contributions.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.contributions.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-hand-holding-usd text-sm"></i> Contributions
                </a>
            @endcan
            @can('view loan products')
                <a href="{{ route('admin.loan-products.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.loan-products.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-box text-sm"></i> Loan Products
                </a>
            @endcan
            @can('view loan applications')
                <a href="{{ route('admin.loan-applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('admin.loan-applications.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-money-bill-wave text-sm"></i> Loan Applications
                </a>
            @endcan
        </x-slot>
        <x-slot name="actions">
            @can('edit members')
                @if($member->status === 'active')
                    <button onclick="document.getElementById('suspendModal').classList.remove('hidden')"
                            class="inline-flex items-center gap-2 px-4 py-2 bg-red-500/80 hover:bg-red-500 text-white text-sm font-medium rounded transition">
                        <i class="fas fa-ban"></i> Suspend
                    </button>
                @elseif($member->status === 'suspended')
                    <form action="{{ route('admin.members.reactivate', $member) }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 bg-green-500/80 hover:bg-green-500 text-white text-sm font-medium rounded transition">
                            <i class="fas fa-check-circle"></i> Reactivate
                        </button>
                    </form>
                @endif
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Main Content --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Personal Information --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-user text-green-600"></i> Personal Information
                        </h3>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Full Name</label>
                            <p class="text-gray-900 font-medium">{{ $member->full_name }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Email</label>
                            <a href="mailto:{{ $member->email }}" class="text-green-600 hover:underline">{{ $member->email }}</a>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Phone</label>
                            <p class="text-gray-900">{{ $member->phone ?? 'Not provided' }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Membership Code</label>
                            <p class="text-gray-900 font-mono">{{ $member->membership_code }}</p>
                        </div>
                    </div>
                </div>

                {{-- Membership Categories --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-tags text-green-600"></i> Membership Categories
                        </h3>
                    </div>
                    <div class="p-6">
                        @if($member->membershipCategories->count() > 0)
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach($member->membershipCategories as $category)
                                    <div class="border border-gray-200 rounded-lg p-4">
                                        <h4 class="font-semibold text-gray-900">{{ $category->name }}</h4>
                                        <p class="text-sm text-gray-500 mt-1">{{ $category->description }}</p>
                                        <a href="{{ route('admin.membership-categories.show', $category) }}" class="text-green-600 hover:underline text-sm mt-2 inline-block">
                                            View Category <i class="fas fa-arrow-right ml-1"></i>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">No membership categories assigned.</p>
                        @endif
                    </div>
                </div>

                {{-- Recent Contributions --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-hand-holding-usd text-green-600"></i> Recent Contributions
                        </h3>
                        <a href="{{ route('admin.contributions.index', ['member_id' => $member->id]) }}" class="text-green-600 hover:underline text-sm">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    <div class="p-6">
                        @if($member->contributions->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="w-full table-zebra">
                                    <thead>
                                        <tr>
                                            <th class="px-3 py-2 text-left th-col-1">Period</th>
                                            <th class="px-3 py-2 text-left th-col-2">Amount</th>
                                            <th class="px-3 py-2 text-left th-col-3">Due Date</th>
                                            <th class="px-3 py-2 text-left th-col-4">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($member->contributions as $contribution)
                                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                                <td class="px-3 py-2 text-gray-900 text-sm">{{ $contribution->period ?? 'N/A' }}</td>
                                                <td class="px-3 py-2 text-gray-900 text-sm">{{ $contribution->formatted_amount }}</td>
                                                <td class="px-3 py-2 text-gray-600 text-sm">{{ $contribution->due_date?->format('M d, Y') }}</td>
                                                <td class="px-3 py-2">
                                                    @php
                                                        $sc = ['paid'=>'bg-green-100 text-green-700','pending'=>'bg-yellow-100 text-yellow-700','overdue'=>'bg-red-100 text-red-700'];
                                                        $sc2 = $sc[$contribution->status] ?? 'bg-gray-100 text-gray-700';
                                                    @endphp
                                                    <span class="px-2 py-0.5 rounded-full text-xs font-medium {{ $sc2 }}">{{ ucfirst($contribution->status) }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">No contributions recorded.</p>
                        @endif
                    </div>
                </div>

                {{-- Loan Applications --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-money-bill-wave text-green-600"></i> Loan Applications
                        </h3>
                        <a href="{{ route('admin.loan-applications.index', ['member_id' => $member->id]) }}" class="text-green-600 hover:underline text-sm">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                    <div class="p-6">
                        @if($member->loanApplications->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="w-full table-zebra">
                                    <thead>
                                        <tr>
                                            <th class="px-3 py-2 text-left th-col-1">Reference</th>
                                            <th class="px-3 py-2 text-left th-col-2">Product</th>
                                            <th class="px-3 py-2 text-left th-col-3">Amount</th>
                                            <th class="px-3 py-2 text-left th-col-4">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($member->loanApplications as $loan)
                                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                                <td class="px-3 py-2 text-gray-600 font-mono text-sm">{{ $loan->reference_number }}</td>
                                                <td class="px-3 py-2 text-gray-900 text-sm">{{ $loan->loanProduct?->name }}</td>
                                                <td class="px-3 py-2 text-gray-900 text-sm">{{ number_format($loan->amount_requested, 2) }} {{ $loan->currency }}</td>
                                                <td class="px-3 py-2">
                                                    <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">{{ ucfirst($loan->status) }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">No loan applications.</p>
                        @endif
                    </div>
                </div>

                {{-- ===================== MEMBERSHIP CERTIFICATE ===================== --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-certificate text-blue-600"></i> Membership Certificate
                        </h3>
                        @can('issue membership certificates')
                            <form method="POST" action="{{ route('admin.members.issue-certificate', $member) }}"
                                  onsubmit="return confirm('Issue a new certificate for {{ $member->full_name }}? The old certificate will be replaced and emailed to the member.')">
                                @csrf
                                <button type="submit"
                                        class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition">
                                    <i class="fas fa-rotate"></i> Issue New Certificate
                                </button>
                            </form>
                        @endcan
                    </div>
                    <div class="p-6">
                        @if($currentCertificate)
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Certificate No.</p>
                                    <p class="font-mono font-semibold text-gray-900 text-xs">{{ $currentCertificate->certificate_number }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Issue Date</p>
                                    <p class="text-gray-900">{{ $currentCertificate->issue_date->format('M j, Y') }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Valid Till</p>
                                    <p class="font-semibold {{ $currentCertificate->valid_till_date->isPast() ? 'text-red-600' : 'text-gray-900' }}">
                                        {{ $currentCertificate->valid_till_date->format('M j, Y') }}
                                        @if($currentCertificate->valid_till_date->isPast())
                                            <span class="text-xs font-normal text-red-500">(Expired)</span>
                                        @endif
                                    </p>
                                </div>
                                <div>
                                    <p class="text-xs text-gray-500 mb-1">Status</p>
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        Active
                                    </span>
                                </div>
                            </div>
                            @if($currentCertificate->pdf_path)
                                <div class="mt-4">
                                    <a href="{{ Storage::disk('public')->url($currentCertificate->pdf_path) }}"
                                       target="_blank"
                                       class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 text-sm font-medium transition">
                                        <i class="fas fa-download text-xs"></i> Download PDF
                                    </a>
                                </div>
                            @endif
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-certificate text-gray-300 text-3xl mb-2"></i>
                                <p class="text-gray-500 text-sm">No certificate issued yet.</p>
                                @can('issue membership certificates')
                                    <p class="text-gray-400 text-xs mt-1">Use the "Issue New Certificate" button above to generate one.</p>
                                @endcan
                            </div>
                        @endif
                    </div>
                </div>

                {{-- ===================== RENEWAL HISTORY ===================== --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-clock-rotate-left text-purple-600"></i> Renewal History
                        </h3>
                        @can('edit members')
                            @if($member->isActive())
                                <form method="POST" action="{{ route('admin.members.process-renewal', $member) }}"
                                      onsubmit="return confirm('Process a manual renewal for {{ $member->full_name }}? A new certificate will be generated and emailed.')">
                                    @csrf
                                    <button type="submit"
                                            class="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 transition">
                                        <i class="fas fa-rotate"></i> Process Renewal
                                    </button>
                                </form>
                            @endif
                        @endcan
                    </div>
                    <div class="p-6">
                        @if($member->renewals->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200 text-sm">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Renewed At</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Previous Expiry</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">New Expiry</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Certificate</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        @foreach($member->renewals as $renewal)
                                            <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0">
                                                <td class="px-4 py-2 text-gray-900">{{ $renewal->renewed_at->format('M j, Y') }}</td>
                                                <td class="px-4 py-2">
                                                    @if($renewal->renewal_type === 'automatic')
                                                        <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Auto</span>
                                                    @else
                                                        <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Manual</span>
                                                    @endif
                                                </td>
                                                <td class="px-4 py-2 text-gray-600">{{ $renewal->previous_end_date?->format('M j, Y') ?? '—' }}</td>
                                                <td class="px-4 py-2 font-medium text-gray-900">{{ $renewal->new_end_date->format('M j, Y') }}</td>
                                                <td class="px-4 py-2">
                                                    @if($renewal->certificate)
                                                        <span class="font-mono text-xs text-gray-600">{{ $renewal->certificate->certificate_number }}</span>
                                                    @else
                                                        <span class="text-gray-400 text-xs">—</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-gray-500 text-sm text-center py-4">No renewal history recorded.</p>
                        @endif
                    </div>
                </div>

                {{-- ===================== RENEWAL PAYMENT (MTN MoMo) ===================== --}}
                @can('edit members')
                    @if($member->isActive())
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                                <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                                    <i class="fas fa-mobile-alt text-yellow-600"></i> Collect Renewal Fee via MTN MoMo
                                </h3>
                                <p class="text-xs text-gray-500 mt-1">
                                    Initiate a Mobile Money collection request for the membership renewal fee.
                                    The member will receive a payment prompt on their phone.
                                </p>
                            </div>
                            <div class="p-6">
                                <form method="POST" action="{{ route('admin.members.collect-renewal-payment', $member) }}"
                                      id="momo-renewal-form"
                                      x-data="{ method: 'mobile_money' }">
                                    @csrf
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        {{-- Payment method --}}
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                                Payment Method <span class="text-red-500">*</span>
                                            </label>
                                            <select name="payment_method" x-model="method"
                                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                                <option value="mobile_money">Mobile Money (Phone Number)</option>
                                                <option value="card">Bank Card (MTN MoMo Card)</option>
                                            </select>
                                        </div>

                                        {{-- Phone number (shown for mobile_money) --}}
                                        <div x-show="method === 'mobile_money'">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                                Phone Number (MSISDN) <span class="text-red-500">*</span>
                                            </label>
                                            <input type="text" name="phone_number"
                                                   value="{{ old('phone_number', preg_replace('/\D/', '', $member->phone ?? '')) }}"
                                                   placeholder="e.g. 211912345678"
                                                   :required="method === 'mobile_money'"
                                                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                            <p class="text-xs text-gray-400 mt-1">Country code + number, no + or spaces.</p>
                                        </div>

                                        {{-- Card fields (shown for card) --}}
                                        <div x-show="method === 'card'" x-cloak class="md:col-span-2 grid grid-cols-3 gap-3">
                                            <div class="col-span-3">
                                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                    Card Number <span class="text-red-500">*</span>
                                                </label>
                                                <input type="text" name="card_number"
                                                       placeholder="1234 5678 9012 3456"
                                                       :required="method === 'card'"
                                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">Expiry (MM/YY)</label>
                                                <input type="text" name="card_expiry" placeholder="MM/YY" maxlength="5"
                                                       :required="method === 'card'"
                                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                            </div>
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
                                                <input type="text" name="card_cvv" placeholder="123" maxlength="4"
                                                       :required="method === 'card'"
                                                       class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                            </div>
                                        </div>

                                        {{-- Amount --}}
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                                Amount <span class="text-red-500">*</span>
                                            </label>
                                            <input type="number" name="amount" min="1" step="0.01"
                                                   value="{{ old('amount') }}"
                                                   placeholder="e.g. 50000"
                                                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                        </div>

                                        {{-- Currency --}}
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Currency</label>
                                            <select name="currency"
                                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                                <option value="SSP" selected>SSP — South Sudanese Pound</option>
                                                <option value="USD">USD — US Dollar</option>
                                                <option value="UGX">UGX — Ugandan Shilling</option>
                                                <option value="KES">KES — Kenyan Shilling</option>
                                            </select>
                                        </div>

                                        {{-- Note --}}
                                        <div class="md:col-span-3">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">Payer Message (optional)</label>
                                            <input type="text" name="payer_message"
                                                   value="Membership renewal fee — {{ $member->membership_code }}"
                                                   class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                                        </div>
                                    </div>

                                    <div class="mt-4 flex items-center gap-3">
                                        <button type="submit"
                                                class="inline-flex items-center gap-2 px-5 py-2.5 bg-yellow-500 text-white text-sm font-medium rounded-lg hover:bg-yellow-600 transition">
                                            <i class="fas fa-paper-plane"></i> Send Payment Request
                                        </button>
                                        <p class="text-xs text-gray-400">
                                            The member will receive a prompt on their MTN MoMo account to confirm the payment.
                                        </p>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endif
                @endcan

            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900">Member Info</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                            @php
                                $sc = ['active'=>'bg-green-100 text-green-700','inactive'=>'bg-yellow-100 text-yellow-700','suspended'=>'bg-red-100 text-red-700'];
                                $sc2 = $sc[$member->status] ?? 'bg-gray-100 text-gray-700';
                            @endphp
                            <span class="px-3 py-1 rounded-full text-sm font-semibold {{ $sc2 }}">{{ ucfirst($member->status) }}</span>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Joined On</label>
                            <p class="text-gray-900 text-sm">{{ $member->created_at->format('M d, Y') }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Approved On</label>
                            <p class="text-gray-900 text-sm">{{ $member->approval_date?->format('M d, Y') ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900">Activity Log</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-user-plus text-green-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-900">Member Created</p>
                                <p class="text-xs text-gray-500">{{ $member->created_at->format('M d, Y H:i') }}</p>
                            </div>
                        </div>
                        @if($member->approval_date)
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-blue-600 text-xs"></i>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-900">Application Approved</p>
                                    <p class="text-xs text-gray-500">{{ $member->approval_date->format('M d, Y') }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>

{{-- Suspend Modal --}}
<div id="suspendModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-t-lg">
            <h3 class="text-base font-semibold text-white">Suspend Member</h3>
            <button type="button" onclick="document.getElementById('suspendModal').classList.add('hidden')"
                    class="text-white/80 hover:text-white transition"><i class="fas fa-times"></i></button>
        </div>
        <form action="{{ route('admin.members.suspend', $member) }}" method="POST">
            @csrf
            <div class="p-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Reason for Suspension <span class="text-red-500">*</span></label>
                <textarea name="reason" rows="4" required
                          class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm"
                          placeholder="Please provide a reason for suspending this member..."></textarea>
                @error('reason')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-end gap-3 rounded-b-lg">
                <button type="button" onclick="document.getElementById('suspendModal').classList.add('hidden')"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition text-sm">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition text-sm font-medium">Confirm Suspension</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Admin renewal form now uses Alpine.js x-show — no manual JS toggle needed.
</script>
@endpush
