@extends('layouts.admin')
@section('title', 'Pledge Details')
@section('page-title', 'Pledge Details')
@section('page-subtitle', 'View pledge information')

@section('content')
<div class="space-y-6">
    <div class="card-royal p-6">
        <div class="flex justify-between items-start mb-6">
            <div>
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">Pledge #{{ $pledge->id }}</h3>
                <p class="text-sm text-[var(--text-secondary)]">Created {{ $pledge->created_at->format('M d, Y') }}</p>
            </div>
            <span class="px-3 py-1 rounded-full text-sm
                @if($pledge->status === 'fulfilled') bg-green-100 text-green-700
                @elseif($pledge->status === 'active') bg-blue-100 text-blue-700
                @else bg-gray-100 text-gray-700 @endif">
                {{ ucfirst($pledge->status) }}
            </span>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Member</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $pledge->member?->full_name ?? 'N/A' }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Campaign</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $pledge->campaign?->name ?? 'N/A' }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Pledge Amount</p>
                <p class="font-medium text-gold-500">GH₵{{ number_format($pledge->pledge_amount, 2) }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Amount Paid</p>
                <p class="font-medium text-green-500">GH₵{{ number_format($pledge->amount_paid, 2) }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Remaining Amount</p>
                <p class="font-medium text-[var(--text-primary)]">GH₵{{ number_format($pledge->remaining_amount, 2) }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Progress</p>
                <div class="flex items-center gap-2">
                    <div class="flex-1 h-2 bg-[var(--bg-secondary)] rounded-full overflow-hidden">
                        <div class="h-full bg-gold-500" style="width: {{ $pledge->progress_percentage }}%"></div>
                    </div>
                    <span class="text-sm text-[var(--text-primary)]">{{ $pledge->progress_percentage }}%</span>
                </div>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Frequency</p>
                <p class="font-medium text-[var(--text-primary)] capitalize">{{ str_replace('_', '-', $pledge->frequency) }}</p>
            </div>
            <div>
                <p class="text-sm text-[var(--text-secondary)]">Start Date</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $pledge->start_date->format('M d, Y') }}</p>
            </div>
            @if($pledge->end_date)
            <div>
                <p class="text-sm text-[var(--text-secondary)]">End Date</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $pledge->end_date->format('M d, Y') }}</p>
            </div>
            @endif
            @if($pledge->notes)
            <div class="md:col-span-2">
                <p class="text-sm text-[var(--text-secondary)]">Notes</p>
                <p class="font-medium text-[var(--text-primary)]">{{ $pledge->notes }}</p>
            </div>
            @endif
        </div>
    </div>
    
    @if($pledge->remaining_amount > 0)
    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">Record Payment</h3>
        <form action="{{ route('admin.finance.pledges.payment', $pledge->id) }}" method="POST" class="flex gap-4 items-end">
            @csrf
            <div class="flex-1">
                <label class="block text-sm text-[var(--text-secondary)] mb-2">Amount (GH₵)</label>
                <input type="number" name="amount" step="0.01" min="0.01" max="{{ $pledge->remaining_amount }}" required
                    class="w-full px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)]"
                    placeholder="Enter amount">
            </div>
            <button type="submit" class="btn-royal px-6 py-2 rounded-lg text-white">Record Payment</button>
        </form>
    </div>
    @endif
    
    <div class="flex justify-end">
        <a href="{{ route('admin.finance.pledges.index') }}" class="px-6 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">Back to List</a>
    </div>
</div>
@endsection