@extends('layouts.admin')
@section('title', 'Offering Receipt')
@section('page-title', 'Offering Receipt')

@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="font-cinzel text-2xl font-bold text-[var(--text-primary)]">{{ church_name() }}</h2>
                    <p class="text-[var(--text-secondary)]">Offering 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>
            <span class="px-3 py-1 text-sm font-semibold rounded no-print
                @if($offering->offering_type === 'thanksgiving') bg-purple-100 text-purple-700
                @elseif($offering->offering_type === 'building') bg-blue-100 text-blue-700
                @elseif($offering->offering_type === 'missions') bg-green-100 text-green-700
                @else bg-gray-100 text-gray-700 @endif">
                {{ ucfirst(str_replace('_', ' ', $offering->offering_type)) }}
            </span>
        </div>
        
        <div class="flex justify-between items-center mb-6 no-print">
            <a href="{{ route('admin.offerings.index') }}" class="text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
                <i class="fas fa-arrow-left mr-2"></i> Back to Offerings
            </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.offerings.edit', $offering->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="text-center mb-6">
                <h3 class="font-cinzel text-xl font-bold text-[var(--text-primary)]">{{ $offering->service_name }}</h3>
                <p class="text-sm text-[var(--text-secondary)]">{{ $offering->offering_date->format('F d, Y') }}</p>
            </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</span>
                    <span class="text-3xl font-bold font-cinzel text-gold-500">GH₵{{ number_format($offering->amount, 2) }}</span>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-6 text-sm">
                <div>
                    <p class="text-[var(--text-secondary)]">Offering Type</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ ucfirst(str_replace('_', ' ', $offering->offering_type)) }}</p>
                </div>
                <div>
                    <p class="text-[var(--text-secondary)]">Collection Method</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ ucfirst(str_replace('_', ' ', $offering->collection_method)) }}</p>
                </div>
                @if($offering->collected_by)
                <div>
                    <p class="text-[var(--text-secondary)]">Collected By</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $offering->collected_by }}</p>
                </div>
                @endif
                <div>
                    <p class="text-[var(--text-secondary)]">Recorded By</p>
                    <p class="font-semibold text-[var(--text-primary)]">{{ $offering->recorder?->name ?? 'System' }}</p>
                </div>
            </div>
            
            @if($offering->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)]">{{ $offering->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)]">{{ 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