@extends('layouts.admin')
@section('title', 'Tithe Receipt')
@section('page-title', 'Tithe Receipt')
@section('page-subtitle', $tithe->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-cinzel font-bold text-[var(--text-primary)]">{{ church_name() }}</h2>
                    <p class="text-[var(--text-secondary)]">Tithe 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 bg-green-100 text-green-700 no-print">
                    <i class="fas fa-check-circle mr-1"></i>Paid
                </span>
                <p class="text-sm text-[var(--text-secondary)] mt-2">{{ $tithe->receipt_number }}</p>
            </div>
        </div>
        
        <div class="flex justify-between items-center mb-6 no-print">
            <a href="{{ route('admin.tithe-welfare.tithes.index') }}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-sm">
                <i class="fas fa-arrow-left mr-2"></i>Back to Tithes
            </a>
            <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>
        </div>

        <div class="border-t border-[var(--border-color)] pt-6">
            <div class="grid grid-cols-2 gap-6 mb-6">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Member</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $tithe->member->full_name }}</p>
                    <p class="text-sm text-[var(--text-secondary)]">{{ $tithe->member->member_id }}</p>
                </div>
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Church</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $tithe->church->name ?? 'N/A' }}</p>
                </div>
            </div>

            <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 Paid</span>
                    <span class="text-3xl font-bold text-[var(--text-primary)]">GHS {{ number_format($tithe->amount, 2) }}</span>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-6 text-sm">
                <div>
                    <p class="text-[var(--text-secondary)]">Payment Date</p>
                    <p class="text-[var(--text-primary)]">{{ $tithe->payment_date->format('F d, Y') }}</p>
                </div>
                <div>
                    <p class="text-[var(--text-secondary)]">Month</p>
                    <p class="text-[var(--text-primary)]">{{ \Carbon\Carbon::parse($tithe->month . '-01')->format('F Y') }}</p>
                </div>
                <div>
                    <p class="text-[var(--text-secondary)]">Payment Method</p>
                    <p class="text-[var(--text-primary)]">{{ ucwords(str_replace('_', ' ', $tithe->payment_method)) }}</p>
                </div>
                <div>
                    <p class="text-[var(--text-secondary)]">Recorded By</p>
                    <p class="text-[var(--text-primary)]">{{ $tithe->recorder->name ?? 'System' }}</p>
                </div>
                @if($tithe->transaction_reference)
                <div>
                    <p class="text-[var(--text-secondary)]">Transaction Reference</p>
                    <p class="text-[var(--text-primary)]">{{ $tithe->transaction_reference }}</p>
                </div>
                @endif
            </div>

            @if($tithe->notes)
            <div class="mt-6 pt-6 border-t border-[var(--border-color)]">
                <p class="text-sm text-[var(--text-secondary)]">Notes</p>
                <p class="text-[var(--text-primary)]">{{ $tithe->notes }}</p>
            </div>
            @endif

            <div class="mt-6 pt-6 border-t border-[var(--border-color)] no-print">
                <a href="{{ route('admin.tithe-welfare.tithes.member', $tithe->member_id) }}" class="text-gold-500 hover:underline">
                    <i class="fas fa-book mr-2"></i>View {{ $tithe->member->full_name }}'s Tithe Ledger
                </a>
            </div>
            
            <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 tithe! {{ church_setting('church_tagline', 'Growing in Grace') }}</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