@extends('layouts.admin')
@section('title', 'Donation Receipt')
@section('page-title', 'Donation Receipt')
@section('page-subtitle', 'Receipt #' . $donation->receipt_number)

@section('content')
<div class="max-w-2xl mx-auto" id="receipt-content">
    <div class="card-royal p-6">
        <div class="flex justify-between items-start mb-6 print-header">
            <div class="flex items-center gap-4">
                @if(church_setting('church_logo'))
                    <img src="{{ asset('storage/' . church_setting('church_logo')) }}?v={{ filemtime(storage_path('app/public/' . church_setting('church_logo'))) }}" alt="Logo" class="w-16 h-16 object-contain rounded-lg border border-[var(--border-color)]">
                @else
                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center">
                        <i class="fas fa-church text-white text-2xl"></i>
                    </div>
                @endif
                <div>
                    <h2 class="text-2xl font-bold text-[var(--text-primary)]">{{ church_name() }}</h2>
                    <p class="text-[var(--text-secondary)]">Donation Receipt</p>
                    @if(church_setting('church_address'))
                        <p class="text-xs text-[var(--text-secondary)] mt-1">{{ church_setting('church_address') }}</p>
                    @endif
                    <p class="text-xs text-[var(--text-secondary)]">
                        @if(church_setting('church_phone')){{ church_setting('church_phone') }}@endif
                        @if(church_setting('church_email')) | {{ church_setting('church_email') }}@endif
                    </p>
                </div>
            </div>
            <div class="text-right">
                <span class="px-3 py-1 rounded-full text-sm font-medium no-print
                    @if($donation->status === 'received') bg-green-100 text-green-700
                    @elseif($donation->status === 'pending') bg-yellow-100 text-yellow-700
                    @else bg-red-100 text-red-700 @endif">
                    <i class="fas fa-check-circle mr-1"></i>{{ ucfirst($donation->status) }}
                </span>
                <p class="text-sm text-[var(--text-secondary)] mt-2">{{ $donation->receipt_number }}</p>
            </div>
        </div>
        
        <div class="flex justify-between items-center mb-6 no-print">
            <a href="{{ route('admin.finance.donations.index') }}" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                <i class="fas fa-arrow-left mr-2"></i> Back
            </a>
            <div class="flex gap-2">
                <button onclick="window.print()" class="btn-royal px-4 py-2 rounded-lg text-white flex items-center gap-2">
                    <i class="fas fa-print"></i> Print Receipt
                </button>
                <a href="{{ route('admin.finance.donations.edit', $donation->id) }}" class="px-4 py-2 rounded-lg border border-[var(--border-color)] text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]">
                    <i class="fas fa-edit mr-2"></i> Edit
                </a>
            </div>
        </div>

        <div class="border-t border-[var(--border-color)] pt-6">
            <div class="bg-[var(--bg-secondary)] p-6 rounded-lg mb-6 border-2 border-gold-500">
                <div class="flex justify-between items-center">
                    <span class="text-lg text-[var(--text-secondary)]">Amount Donated</span>
                    <span class="text-3xl font-bold text-[var(--text-primary)]">GH₵{{ number_format($donation->amount, 2) }}</span>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-6 mb-6">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Donor</p>
                    @if($donation->is_anonymous)
                        <p class="font-semibold text-[var(--text-primary)]">Anonymous</p>
                    @else
                        <p class="font-semibold text-[var(--text-primary)]">{{ $donation->donor_name ?? $donation->member?->full_name ?? 'Unknown' }}</p>
                        @if($donation->member)
                            <p class="text-sm text-[var(--text-secondary)]">{{ $donation->member->member_id }}</p>
                        @endif
                    @endif
                </div>
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Donation Type</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $donation->donationType?->name ?? 'N/A' }}</p>
                </div>
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Campaign</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $donation->campaign?->name ?? 'General Fund' }}</p>
                </div>
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Payment Method</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ ucfirst(str_replace('_', ' ', $donation->payment_method)) }}</p>
                </div>
                @if($donation->donor_email)
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Email</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $donation->donor_email }}</p>
                </div>
                @endif
                @if($donation->donor_phone)
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Phone</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $donation->donor_phone }}</p>
                </div>
                @endif
            </div>

            @if($donation->notes)
            <div class="pt-6 border-t border-[var(--border-color)]">
                <p class="text-sm text-[var(--text-secondary)]">Notes</p>
                <p class="text-[var(--text-primary)]">{{ $donation->notes }}</p>
            </div>
            @endif
            
            <div class="mt-8 pt-4 border-t-2 border-dashed border-[var(--border-color)] text-center">
                <p class="text-xs text-[var(--text-secondary)]">Thank you for your donation! {{ church_setting('church_tagline', 'Growing in Grace') }}</p>
                <p class="text-xs text-[var(--text-secondary)]">Date: {{ $donation->donation_date?->format('F d, Y') }}</p>
            </div>
        </div>
    </div>
</div>

<style>
@media print {
    body * {
        visibility: hidden;
    }
    #receipt-content, #receipt-content * {
        visibility: visible;
    }
    #receipt-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 20px;
        background: white !important;
    }
    .no-print {
        display: none !important;
    }
    .print-header {
        display: flex !important;
    }
    .card-royal {
        border: none !important;
        box-shadow: none !important;
        background: white !important;
    }
    @page {
        margin: 0.5cm;
    }
}
</style>
@endsection