@props([
    'elderly' => null,
    'currencySymbol' => '$'
])

<div class="rounded-lg border bg-card text-card-foreground shadow-sm hover:shadow-md transition-all duration-300">
    <div class="p-6 space-y-6">
        <div>
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zm7-10a1 1 0 01.707.293l.707.707L15.414 5a1 1 0 11-1.414 1.414L12.5 4.914l-.707.707a1 1 0 01-1.414-1.414l.707-.707L12.5 2.207A1 1 0 0112 2z" clip-rule="evenodd" />
                </svg>
                Donation Summary
            </h3>
            <div class="flex justify-between py-3 border-b border-gray-100">
                <span class="text-muted-foreground">Amount</span>
                <span id="summary-amount" class="font-medium text-lg transition-all duration-300">{{ $currencySymbol }}0.00</span>
            </div>
            <div id="recurring-summary" class="hidden py-3 border-b border-gray-100">
                <span class="text-muted-foreground flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-primary" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
                    </svg>
                    Recurring <span id="recurring-frequency" class="ml-1">monthly</span>
                </span>
                <span id="recurring-amount" class="font-medium text-primary transition-all duration-300">{{ $currencySymbol }}0.00</span>
            </div>
            <div class="flex justify-between py-3 mt-1">
                <span class="font-medium">Total</span>
                <span id="summary-total" class="font-semibold text-xl text-primary transition-all duration-300">{{ $currencySymbol }}0.00</span>
            </div>
        </div>
        
        <div class="space-y-2 bg-primary/5 p-4 rounded-lg">
            <h4 class="font-medium mb-1 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-primary" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                100% Impact
            </h4>
            <p class="text-sm text-muted-foreground">
                100% of your donation goes directly to supporting elderly individuals in need, providing essential care, resources, and dignity.
            </p>
        </div>
        
        <div class="space-y-2 bg-gray-50 p-4 rounded-lg">
            <h4 class="font-medium mb-1 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-primary" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                </svg>
                Secure Payment
            </h4>
            <p class="text-xs text-muted-foreground">
                All transactions are secured and encrypted with industry-standard protection.
            </p>
        </div>
        
        @if($elderly)
            <div class="border-t pt-4 mt-2">
                <h4 class="font-medium mb-3 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-primary" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
                    </svg>
                    About {{ $elderly->name }}
                </h4>
                <div class="flex items-center space-x-3 mb-3 bg-gray-50 p-3 rounded-lg">
                    <img
                        src="{{ $elderly->profile_image_url }}"
                        alt="{{ $elderly->name }}"
                        class="h-16 w-16 rounded-full object-cover border-2 border-primary/20"
                    >
                    <div>
                        <p class="font-medium text-gray-900">{{ $elderly->name }}</p>
                        <p class="text-sm text-muted-foreground">{{ $elderly->age }} years • {{ $elderly->location }}</p>
                    </div>
                </div>
                <p class="text-sm text-muted-foreground bg-gray-50 p-3 rounded-lg">
                    {{ Str::limit($elderly->story, 120) }}
                    <a href="{{ route('profiles.show', $elderly->id) }}" class="text-primary hover:text-primary-dark font-medium ml-1">Read more</a>
                </p>
                
                <!-- Donation Progress -->
                <div class="mt-4">
                    <x-donation-progress 
                        :goalAmount="$elderly->goal_amount" 
                        :raisedAmount="$elderly->raised_amount" 
                        size="md" 
                        :showPercentage="true" 
                        :showAmounts="true"
                        :currency="$elderly->currency ?? null"
                    />
                </div>
            </div>
        @endif
        
        <div class="text-center text-xs text-muted-foreground pt-2 border-t">
            <p>Thank you for your generosity!</p>
            <p>Tax-deductible receipt will be emailed to you.</p>
        </div>
    </div>
</div>