<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receipt {{ $payment->payment_number ?? 'PAY-001' }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #111827; line-height: 1.6; }
        .receipt-container { width: 100%; max-width: 100%; background: #fff; }
        .header-accent { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; padding-left: 40px; padding-right: 40px; padding-top: 40px; padding-bottom: 40px; }
        .header-content { display: flex; justify-content: space-between; align-items: center; }
        .brand-section { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
        .brand-logo { width: 130px; max-height: 80px; object-fit: contain; flex-shrink: 0; }
        .brand-name { font-size: 28px; font-weight: 700; margin-bottom: 5px; }
        .brand-info { font-size: 16px; opacity: 0.9; }
        .receipt-badge { background: rgba(255,255,255,0.2); padding: 20px 18px; border-radius: 12px; text-align: center; }
        .receipt-label { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.9; margin-bottom: 8px; }
        .receipt-number { font-size: 20px; font-weight: 700; }
        .content { padding-left: 53px; padding-right: 53px; padding-top: 40px; padding-bottom: 40px; }
        .payment-highlight { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border: 2px solid #10b981; border-radius: 12px; padding: 18px; margin: 30px 0; text-align: center; }
        .payment-amount { font-size: 30px; font-weight: 700; color: #10b981; margin: 15px 0; }
        .payment-label { font-size: 20px; color: #065f46; font-weight: 600; }
        .payment-description { font-size: 14px; color: #065f46; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(16, 185, 129, 0.3); }
        .info-section { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 30px 0; }
        .info-box { background: #f9fafb; padding: 20px; border-radius: 8px; }
        .customer-logo { width: 80px; max-height: 60px; object-fit: contain; margin-bottom: 10px; }
        .info-title { font-size: 13px; font-weight: 700; text-transform: uppercase; color: #6b7280; letter-spacing: 1px; margin-bottom: 12px; }
        .info-content { font-size: 16px; line-height: 1.8; color: rgba(0, 0, 0, 1); }
        .info-content > div { font-size: 16px; color: rgba(0, 0, 0, 1); }
        .info-name { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 8px; }
        .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 30px 0; }
        .summary-item { background: #f9fafb; padding: 15px; border-radius: 8px; }
        .summary-label { font-size: 13px; color: #6b7280; text-transform: uppercase; margin-bottom: 5px; }
        .summary-label.status-label { font-size: 13px; }
        .summary-value { font-size: 18px; font-weight: 700; color: #111827; }
        .footer-section { margin-top: 50px; padding-top: 30px; border-top: 2px solid #e5e7eb; text-align: center; }
        .thank-you { font-size: 24px; font-weight: 700; color: #10b981; margin-bottom: 10px; }
        .footer-text { font-size: 13px; color: #6b7280; line-height: 1.8; }
        @media print {
            .receipt-container { padding: 0; }
            .header-accent { break-inside: avoid; }
        }
    </style>
</head>
<body style="background-color: #fff !important;">
    <div class="receipt-container">
        <div class="header-accent">
            <div class="header-content">
                <div class="brand-section">
                    @php
                        $companySettings = \App\Models\CompanySetting::getSettings();
                    @endphp
                    @if($companySettings && $companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo))
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($companySettings->company_logo) }}" alt="{{ $companySettings->company_name ?? config('app.name') }}" class="brand-logo">
                    @endif
                    <div class="brand-name">{{ $companySettings->company_name ?? config('app.name') }}</div>
                    <div class="brand-info">
                        @if($companySettings->company_address){{ $companySettings->company_address }}<br>@endif
                        @if($companySettings->company_phone){{ $companySettings->company_phone }} | @endif
                        @if($companySettings->company_email){{ $companySettings->company_email }}@endif
                    </div>
                </div>
                <div class="receipt-badge">
                    <div class="receipt-label">Payment Receipt</div>
                    <div class="receipt-number">{{ $payment->payment_number ?? 'PAY-001' }}</div>
                    <div style="margin-top: 10px; font-size: 15px; opacity: 0.9;">
                        {{ ($payment->payment_date ?? now())->format('M d, Y') }}
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="payment-highlight">
                <div class="payment-label">Payment Received</div>
                <div class="payment-amount">{{ $payment->currency ?? 'USD' }} {{ number_format($payment->amount ?? 0, 2) }}</div>
                <div style="font-size: 14px; color: #065f46;">Payment Method: {{ ucfirst($payment->payment_method ?? 'Bank Transfer') }}</div>
                @if($payment->notes || ($payment->invoice && $payment->invoice->notes))
                    <div class="payment-description">
                        {{ $payment->notes ?? ($payment->invoice->notes ?? '') }}
                    </div>
                @endif
            </div>

            <div class="info-section">
                @if($payment->customer)
                <div class="info-box">
                    <div class="info-title">Paid By</div>
                    <div class="info-content">
                        @if(($payment->customer->image && \Illuminate\Support\Facades\Storage::disk('public')->exists($payment->customer->image)) || (isset($payment->customer->logo) && $payment->customer->logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($payment->customer->logo)))
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($payment->customer->image ?? $payment->customer->logo) }}" alt="{{ $payment->customer->name }}" class="customer-logo">
                        @endif
                        <div class="info-name">{{ $payment->customer->name }}</div>
                        @if($payment->customer->email){{ $payment->customer->email }}<br>@endif
                        @if($payment->customer->phone){{ $payment->customer->phone }}@endif
                    </div>
                </div>
                @endif
                <div class="info-box">
                    <div class="info-title">Payment Details</div>
                    <div class="info-content">
                        <div><strong>Date:</strong> {{ ($payment->payment_date ?? now())->format('F d, Y') }}</div>
                        @if($payment->transaction_id)
                            <div style="margin-top: 8px;"><strong>Txn ID:</strong> {{ $payment->transaction_id }}</div>
                        @endif
                        @if($payment->reference)
                            <div style="margin-top: 8px;"><strong>Reference:</strong> {{ $payment->reference }}</div>
                        @endif
                    </div>
                </div>
            </div>

            @if($payment->invoice)
            <div class="summary-grid">
                <div class="summary-item">
                    <div class="summary-label">Invoice Number</div>
                    <div class="summary-value">{{ $payment->invoice->invoice_number }}</div>
                </div>
                <div class="summary-item">
                    <div class="summary-label">Invoice Total</div>
                    <div class="summary-value">{{ $payment->currency ?? 'USD' }} {{ number_format($payment->invoice->total ?? 0, 2) }}</div>
                </div>
                <div class="summary-item">
                    <div class="summary-label">Amount Paid</div>
                    <div class="summary-value" style="color: #10b981;">{{ $payment->currency ?? 'USD' }} {{ number_format($payment->amount ?? 0, 2) }}</div>
                </div>
                @if($payment->invoice->balance > 0)
                <div class="summary-item">
                    <div class="summary-label">Remaining Balance</div>
                    <div class="summary-value" style="color: #dc2626;">{{ $payment->currency ?? 'USD' }} {{ number_format($payment->invoice->balance ?? 0, 2) }}</div>
                </div>
                @else
                <div class="summary-item">
                    <div class="summary-label status-label">Status</div>
                    <div class="summary-value" style="color: #10b981;">Fully Paid</div>
                </div>
                @endif
            </div>
            @endif

            @if($payment->notes)
            <div class="info-box" style="margin-top: 30px;">
                <div class="info-title">Notes</div>
                <div class="info-content">{{ $payment->notes }}</div>
            </div>
            @endif

            <div class="footer-section">
                <div class="thank-you">Thank You!</div>
                <div class="footer-text">
                    Your payment has been successfully processed.<br>
                    This receipt serves as official proof of payment. Please keep it for your records.
                </div>
            </div>
        </div>
    </div>
</body>
</html>
