portal-api/resources/views/emails/invoice-notification.blade.php

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ ($type ?? 'invoice') === 'renewal' ? 'Thông báo gia hạn cước' : 'Thông báo hóa đơn' }}</title>
    <style>
        body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 0; padding: 0; }
        .wrapper { max-width: 640px; margin: 30px auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        .header { background: #f16723; padding: 24px 32px; }
        .header h1 { color: #fff; margin: 0; font-size: 22px; }
        .body { padding: 32px; color: #374151; }
        .body p { line-height: 1.7; margin: 0 0 12px; }
        .invoice-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 20px 24px; margin: 20px 0; }
        .invoice-box table { width: 100%; border-collapse: collapse; }
        .invoice-box td { padding: 6px 0; font-size: 14px; }
        .invoice-box td:first-child { color: #6b7280; width: 160px; }
        .invoice-box td:last-child { font-weight: 600; color: #111827; }
        .status-paid { color: #059669; }
        .status-unpaid { color: #dc2626; }
        .status-cancel { color: #9ca3af; }
        .attachments { margin: 20px 0; }
        .attachments h3 { font-size: 15px; margin-bottom: 10px; color: #374151; }
        .attachments ul { padding-left: 16px; margin: 0; }
        .attachments ul li { margin-bottom: 6px; font-size: 14px; }
        .attachments ul li a { color: #f16723; text-decoration: none; }
        .note-box { background: #fff7ed; border-left: 4px solid #f16723; padding: 12px 16px; margin: 20px 0; font-size: 14px; }
        .pay-button-wrap { text-align: center; margin: 28px 0; }
        .pay-button { display: inline-block; background: #f16723; color: #ffffff !important; text-decoration: none; padding: 14px 28px; border-radius: 8px; font-size: 15px; font-weight: 600; }
        .footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 20px 32px; text-align: center; font-size: 13px; color: #9ca3af; }
    </style>
</head>
<body>
@php
    $formatMailDate = static function ($value): string {
        if (empty($value)) {
            return '—';
        }

        if ($value instanceof \Carbon\CarbonInterface) {
            return $value->format('d/m/Y');
        }

        if (is_numeric($value)) {
            return date('d/m/Y', (int) $value);
        }

        try {
            return \Carbon\Carbon::parse($value)->format('d/m/Y');
        } catch (\Throwable) {
            return '—';
        }
    };
@endphp
<div class="wrapper">
    <div class="header">
        <h1>{{ ($type ?? 'invoice') === 'renewal' ? 'Thông báo gia hạn cước' : 'Thông báo hóa đơn' }}</h1>
    </div>

    <div class="body">
        <p>Xin chào <strong>{{ $customerName }}</strong>,</p>
        <p>{{ $bodyMessage ?? '' }}</p>

        <div class="invoice-box">
            <table>
                <tr>
                    <td>Số hóa đơn</td>
                    <td>#{{ $invoice->order_num }}</td>
                </tr>
                <tr>
                    <td>Ngày tạo</td>
                    <td>{{ $formatMailDate($invoice->date) }}</td>
                </tr>
                <tr>
                    <td>Hạn thanh toán</td>
                    <td>{{ $formatMailDate($invoice->due_date) }}</td>
                </tr>
                <tr>
                    <td>Tổng tiền</td>
                    <td>{{ number_format($invoice->total) }} VNĐ</td>
                </tr>
                <tr>
                    <td>Trạng thái</td>
                    <td>
                        @if($invoice->status == 2)
                            <span class="status-paid">Đã thanh toán</span>
                        @elseif($invoice->status == 1)
                            <span class="status-unpaid">Chưa thanh toán</span>
                        @else
                            <span class="status-cancel">Đã hủy</span>
                        @endif
                    </td>
                </tr>
            </table>
        </div>

        <div class="note-box">
            @if(($type ?? 'invoice') === 'renewal')
                File PDF hóa đơn gia hạn đã được đính kèm trong email này. Vui lòng hoàn tất thanh toán trước hạn để dịch vụ không bị gián đoạn.
            @else
                File PDF hóa đơn đã được đính kèm trong email này để quý khách tiện lưu trữ và đối chiếu.
            @endif
        </div>

        @if(!empty($paymentUrl))
        <div class="pay-button-wrap">
            <a class="pay-button" href="{{ $paymentUrl }}" target="_blank" rel="noopener">
                Thanh toán hóa đơn
            </a>
        </div>
        <p style="margin:0 0 18px 0;word-break:break-all;font-size:13px;color:#6b7280;">
            Hoặc sao chép liên kết thanh toán:
            <a href="{{ $paymentUrl }}" style="color:#f16723;">{{ $paymentUrl }}</a>
        </p>
        @endif

        @if($attachments->isNotEmpty())
        <div class="attachments">
            <h3>File đính kèm</h3>
            <ul>
                @foreach($attachments as $file)
                <li>
                    <a href="{{ $file->url }}" target="_blank">{{ $file->filename }}</a>
                </li>
                @endforeach
            </ul>
        </div>
        @endif

        @if($invoice->note)
        <div class="note-box">
            <strong>Ghi chú:</strong> {{ $invoice->note }}
        </div>
        @endif

        <p>Nếu bạn có bất kỳ thắc mắc nào, vui lòng liên hệ với chúng tôi để được hỗ trợ.</p>
        <p>Trân trọng,<br><strong>{{ $companyName }}</strong></p>
    </div>

    <div class="footer">
        © {{ date('Y') }} {{ $companyName }}. Đây là email tự động, vui lòng không trả lời.
    </div>
</div>
</body>
</html>