<!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: 'Courier New', monospace; color: #000; line-height: 1.4; background: #fff; }
        .receipt-container { max-width: 80mm; margin-left: 206px; margin-right: 206px; padding: 10mm 10px; color: rgba(227, 227, 227, 1); }
        .header { text-align: center; margin-bottom: 15px; border-bottom: 1px dashed #000; padding-bottom: 15px; color: rgba(255, 148, 148, 1); }
        .company-name { font-size: 25px; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; color: rgba(0, 0, 0, 1); }
        .company-logo-info-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 15px; }
        .company-logo { width: 130px; max-height: 80px; object-fit: contain; flex-shrink: 0; }
        .company-info { font-size: 18px; line-height: 1.4; color: rgba(0, 0, 0, 1); }
        .receipt-label { font-size: 25px; font-weight: 600; text-transform: uppercase; margin: 15px 5px; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 8px 0; color: rgba(0, 0, 0, 1); }
        .receipt-info { font-size: 10px; line-height: 1.6; margin: 10px 0; }
        .info-line { display: flex; justify-content: space-between; margin: 3px 0; font-size: 16px; color: rgba(0, 0, 0, 1); }
        .items-section { margin: 15px 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 10px 0; color: rgba(0, 0, 0, 1); }
        .item-line { font-size: 10px; margin: 5px 0; font-weight: 500; }
        .item-desc { }
        .item-amount { text-align: right; }
        .total-section { margin: 15px 0; }
        .total-line { display: flex; justify-content: space-between; font-size: 11px; margin: 5px 0; padding-top: 5px; border-top: 1px dashed #000; }
        .total-amount { font-size: 20px; font-weight: 700; color: rgba(0, 0, 0, 1); }
        .footer { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px dashed #000; font-size: 14px; color: rgba(0, 0, 0, 1); }
        @media print {
            .receipt-container { padding: 5mm; }
        }
    </style>
</head>
<body style="background-color: rgba(0, 0, 0, 1) !important;">
    <div class="receipt-container">
        <div class="header">
            @php
                $companySettings = \App\Models\CompanySetting::getSettings();
            @endphp
            <div class="company-name">{{ $companySettings->company_name ?? config('app.name') }}</div>
            <div class="company-logo-info-wrapper">
                @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="company-logo">
                @endif
                <div class="company-info">
                    @if($companySettings->company_address){{ $companySettings->company_address }}<br>@endif
                    @if($companySettings->company_phone){{ $companySettings->company_phone }}<br>@endif
                </div>
            </div>
        </div>

        <div class="receipt-label">Payment Receipt</div>

        <div class="receipt-info">
            <div class="info-line">
                <span>Receipt #:</span>
                <span>{{ $payment->payment_number ?? 'PAY-001' }}</span>
            </div>
            <div class="info-line">
                <span>Date:</span>
                <span>{{ ($payment->payment_date ?? now())->format('M d, Y H:i') }}</span>
            </div>
            <div class="info-line">
                <span>Method:</span>
                <span>{{ ucfirst($payment->payment_method ?? 'Cash') }}</span>
            </div>
            @if($payment->customer)
            <div class="info-line">
                <span>Customer:</span>
                <span>{{ $payment->customer->name }}</span>
            </div>
            @endif
        </div>

        @if($payment->invoice)
        <div class="items-section">
            <div class="item-line">
                <div>Invoice: {{ $payment->invoice->invoice_number }}</div>
            </div>
        </div>
        @endif

        <div class="total-section">
            <div class="total-line total-amount">
                <span>Amount Paid:</span>
                <span>{{ $payment->currency ?? 'USD' }} {{ number_format($payment->amount ?? 0, 2) }}</span>
            </div>
        </div>

        @if($payment->transaction_id)
        <div class="receipt-info">
            <div class="info-line">
                <span>Txn ID:</span>
                <span>{{ $payment->transaction_id }}</span>
            </div>
        </div>
        @endif

        <div class="footer">
            <div>Thank you for your payment!</div>
            <div style="margin-top: 10px;">Keep this receipt for your records</div>
        </div>
    </div>
</body>
</html>
