@extends('admin.layouts.app')
@section('title','Receipt — '.$donation->receipt_number)
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.donations.index') }}" style="color:inherit;text-decoration:none;">Donations</a>
    <span>/</span> <a href="{{ route('admin.donations.show',$donation) }}" style="color:inherit;text-decoration:none;">{{ $donation->donation_id }}</a>
    <span>/</span> Receipt
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>Receipt {{ $donation->receipt_number }}</h1>
        <p class="page-subtitle">{{ $donation->donation_id }}</p>
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->hasPermission('donations.generate_receipt'))
        <a href="{{ route('admin.donations.download-receipt',$donation) }}" class="btn btn-success"><i class="fas fa-file-pdf me-2"></i>Download PDF</a>
        @endif
        <button onclick="window.print()" class="btn btn-outline-secondary"><i class="fas fa-print me-2"></i>Print</button>
        <a href="{{ route('admin.donations.show',$donation) }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div class="d-flex align-items-center justify-content-between pb-3 mb-3" style="border-bottom:3px solid #2563eb;">
            <div>
                <div style="font-size:20px;font-weight:800;color:#1e3a5f;">{{ $ngo['name'] }}</div>
                <div style="font-size:11px;color:#64748b;margin-top:4px;line-height:1.6;">
                    {{ $ngo['address'] }}<br>
                    {{ $ngo['phone'] }} &middot; {{ $ngo['email'] }}
                </div>
            </div>
            <div class="text-end">
                <div style="font-size:18px;font-weight:800;color:#2563eb;text-transform:uppercase;">Donation Receipt</div>
                <div style="font-size:13px;font-weight:700;">{{ $donation->receipt_number }}</div>
                <div style="font-size:11px;color:#64748b;">{{ $donation->donation_date->format('d M Y') }}</div>
            </div>
        </div>

        <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:8px;padding:12px 18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;">
            <span style="color:#16a34a;font-weight:700;font-size:13px;">{!! $donation->payment_status_badge !!}</span>
            <span style="font-size:24px;font-weight:800;color:#15803d;">₹{{ number_format($donation->amount,2) }}</span>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <div style="background:#f8fafc;border-radius:8px;padding:14px;height:100%;">
                    <h6 style="font-size:11px;font-weight:700;color:#2563eb;text-transform:uppercase;border-bottom:1px solid #e2e8f0;padding-bottom:6px;margin-bottom:10px;">Donor Details</h6>
                    <div style="font-size:12px;line-height:1.9;">
                        <div><strong>Name:</strong> {{ $donation->donor_name }}</div>
                        <div><strong>Email:</strong> {{ $donation->donor_email ?? '—' }}</div>
                        <div><strong>Mobile:</strong> {{ $donation->donor_mobile ?? '—' }}</div>
                        @if($donation->pan_number)<div><strong>PAN:</strong> {{ $donation->pan_number }}</div>@endif
                        @if($donation->address)<div><strong>Address:</strong> {{ $donation->address }}</div>@endif
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div style="background:#f8fafc;border-radius:8px;padding:14px;height:100%;">
                    <h6 style="font-size:11px;font-weight:700;color:#2563eb;text-transform:uppercase;border-bottom:1px solid #e2e8f0;padding-bottom:6px;margin-bottom:10px;">Payment Details</h6>
                    <div style="font-size:12px;line-height:1.9;">
                        <div><strong>Purpose:</strong> {{ $donation->purpose ?? 'General' }}</div>
                        <div><strong>Gateway:</strong> {{ ucfirst($donation->payment_gateway) }}</div>
                        <div><strong>Payment ID:</strong> {{ $donation->payment_id ?? '—' }}</div>
                        <div><strong>Transaction ID:</strong> {{ $donation->transaction_id ?? '—' }}</div>
                    </div>
                </div>
            </div>
        </div>

        @if($ngo['80g'] || $ngo['12a'] || $ngo['pan'])
        <div style="background:#fefce8;border:1px solid #fde68a;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:11px;color:#92400e;">
            @if($ngo['80g'])<div><strong>80G Registration:</strong> {{ $ngo['80g'] }}</div>@endif
            @if($ngo['12a'])<div><strong>12A Registration:</strong> {{ $ngo['12a'] }}</div>@endif
            @if($ngo['pan'])<div><strong>NGO PAN:</strong> {{ $ngo['pan'] }}</div>@endif
        </div>
        @endif

        @if($ngo['footer'])
        <p class="text-center text-muted" style="font-size:11px;border-top:1px solid #e2e8f0;padding-top:16px;">{{ $ngo['footer'] }}</p>
        @endif
    </div>
</div>
@endsection