@extends('layouts.admin')

@section('title', 'Donation Details')

@section('content')
<div class="mb-8">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 mb-2">Donation Details</h1>
            <p class="text-gray-600">Complete information for donation #{{ $donation->id }}</p>
        </div>
        <a href="{{ route('admin.donations') }}" class="flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
            <i data-feather="arrow-left" class="w-4 h-4"></i>
            <span>Back to Donations</span>
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Payment Information -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="border-b border-gray-200 px-6 py-4">
            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                <i data-feather="credit-card" class="w-5 h-5 mr-2"></i>
                Payment Information
            </h2>
        </div>
        <div class="p-6">
            <dl class="space-y-4">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Payment ID</dt>
                    <dd class="mt-1 text-sm font-mono text-gray-900 bg-gray-50 px-3 py-1 rounded">{{ $donation->payment_id }}</dd>
                </div>
                
                @if($donation->square_payment_id)
                <div>
                    <dt class="text-sm font-medium text-gray-500">Square Payment ID</dt>
                    <dd class="mt-1 text-sm font-mono text-gray-900 bg-gray-50 px-3 py-1 rounded">{{ $donation->square_payment_id }}</dd>
                </div>
                @endif
                
                <div>
                    <dt class="text-sm font-medium text-gray-500">Amount</dt>
                    <dd class="mt-1 text-2xl font-bold text-gray-900">${{ number_format($donation->amount, 2) }}</dd>
                </div>
                
                <div>
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="mt-1">
                        <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full 
                            @if($donation->status === 'completed') bg-green-100 text-green-800
                            @elseif($donation->status === 'pending') bg-yellow-100 text-yellow-800
                            @else bg-red-100 text-red-800 @endif">
                            @if($donation->status === 'completed')
                                <i data-feather="check-circle" class="w-4 h-4 mr-1"></i>
                            @elseif($donation->status === 'pending')
                                <i data-feather="clock" class="w-4 h-4 mr-1"></i>
                            @else
                                <i data-feather="x-circle" class="w-4 h-4 mr-1"></i>
                            @endif
                            {{ ucfirst($donation->status) }}
                        </span>
                    </dd>
                </div>
                
                <div>
                    <dt class="text-sm font-medium text-gray-500">Currency</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $donation->currency }}</dd>
                </div>
                
                <div>
                    <dt class="text-sm font-medium text-gray-500">Transaction Date</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $donation->created_at->format('F j, Y \a\t g:i A') }}</dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- Donor Information -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="border-b border-gray-200 px-6 py-4">
            <h2 class="text-lg font-semibold text-gray-900 flex items-center">
                <i data-feather="user" class="w-5 h-5 mr-2"></i>
                Donor Information
            </h2>
        </div>
        <div class="p-6">
            <dl class="space-y-4">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Full Name</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ $donation->donor_name }}</dd>
                </div>
                
                <div>
                    <dt class="text-sm font-medium text-gray-500">Email Address</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <a href="mailto:{{ $donation->donor_email }}" class="text-primary-600 hover:text-primary-700">
                            {{ $donation->donor_email }}
                        </a>
                    </dd>
                </div>
                
                <div>
                    <dt class="text-sm font-medium text-gray-500">Memorial Donation</dt>
                    <dd class="mt-1">
                        @if($donation->memorial)
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">
                                <i data-feather="heart" class="w-3 h-3 mr-1"></i>
                                Yes
                            </span>
                        @else
                            <span class="text-sm text-gray-500">No</span>
                        @endif
                    </dd>
                </div>
                
                <div>
                    <dt class="text-sm font-medium text-gray-500">Email Updates</dt>
                    <dd class="mt-1">
                        @if($donation->email_updates)
                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                                <i data-feather="mail" class="w-3 h-3 mr-1"></i>
                                Subscribed
                            </span>
                        @else
                            <span class="text-sm text-gray-500">Not subscribed</span>
                        @endif
                    </dd>
                </div>
                
                @if($donation->note)
                <div>
                    <dt class="text-sm font-medium text-gray-500">Note</dt>
                    <dd class="mt-1 text-sm text-gray-900 bg-gray-50 p-3 rounded-lg">{{ $donation->note }}</dd>
                </div>
                @endif
            </dl>
        </div>
    </div>
</div>

<!-- Payment Response Details -->
@if($donation->payment_response)
<div class="mt-8 bg-white rounded-xl shadow-sm border border-gray-200">
    <div class="border-b border-gray-200 px-6 py-4">
        <h2 class="text-lg font-semibold text-gray-900 flex items-center">
            <i data-feather="code" class="w-5 h-5 mr-2"></i>
            Payment Response Data
        </h2>
    </div>
    <div class="p-6">
        <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
            <pre class="text-sm text-green-400 font-mono">{{ json_encode($donation->payment_response, JSON_PRETTY_PRINT) }}</pre>
        </div>
    </div>
</div>
@endif
@endsection