@php
    function getBase64Image($path, $isStorage = false) {
        if (!$path) return null;
        
        // Handle absolute URLs
        if (strpos($path, 'http') === 0) {
            $parts = explode('/storage/', $path);
            if (count($parts) > 1) {
                $path = $parts[1];
                $isStorage = true;
            } else {
                return null;
            }
        }
        
        if ($isStorage && strpos($path, 'storage/') === 0) {
            $path = substr($path, 8);
        }
        
        $fullPath = $isStorage ? public_path('storage/' . $path) : public_path($path);
        if (!file_exists($fullPath)) return null;
        
        $ext = strtolower(pathinfo($fullPath, PATHINFO_EXTENSION));
        $mime = ($ext == 'jpg' || $ext == 'jpeg') ? 'image/jpeg' : 'image/' . $ext;
        
        try {
            return 'data:' . $mime . ';base64,' . base64_encode(file_get_contents($fullPath));
        } catch (\Exception $e) {
            return null;
        }
    }
    
    $logoBase64 = getBase64Image('images/logo3.jpg');
@endphp
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Invoice #{{ $penjualan->penjualan_id }}</title>
    <style>
        @page { margin: 1cm; size: A4; }
        body { font-family: 'Helvetica', sans-serif; font-size: 11px; color: #334155; line-height: 1.4; }
        .w-100 { width: 100%; border-collapse: collapse; }
        .text-right { text-align: right; }
        .text-center { text-align: center; }
        .fw-bold { font-weight: bold; }
        
        /* Brand Colors */
        .text-pink { color: #ec4899; }
        .text-pink-dark { color: #be185d; }
        .bg-pink-soft { background-color: #fff1f5; }
        
        /* Tables */
        .table-pd td, .table-pd th { padding: 10px; border-bottom: 1px solid #fce7f3; }
        
        /* Section Containers */
        .card-info { border: 1px solid #fce7f3; background-color: #fffafc; border-radius: 10px; padding: 10px; }
        .status-bar { border: 1px solid #fce7f3; background-color: #fffafc; border-radius: 20px; padding: 10px 20px; margin-bottom: 20px; }
        
        .logo-placeholder { width: 50px; height: 50px; background-color: #ec4899; border-radius: 10px; display: block; }
    </style>
</head>
<body>
    <div style="padding: 10px;">
        <!-- HEADER -->
        <table class="w-100">
            <tr>
                <td width="60">
                    <div style="background-color: #ec4899; width: 50px; height: 50px; border-radius: 10px; text-align: center;">
                        @if($logoBase64)
                            <img src="{{ $logoBase64 }}" width="40" height="40" style="margin-top: 5px;">
                        @endif
                    </div>
                </td>
                <td style="padding-left: 10px;">
                    <div style="font-size: 20px; font-weight: bold; color: #be185d;">Kei's Store</div>
                    <div style="font-size: 10px; color: #64748b;">Professional Cosmetic Store • Beauty & Elegance</div>
                </td>
                <td class="text-right">
                    <div style="font-size: 24px; font-weight: bold; color: #334155;">INVOICE</div>
                    <div style="font-size: 12px; color: #ec4899; font-weight: bold;">#{{ $penjualan->penjualan_id }}</div>
                </td>
            </tr>
        </table>

        <div style="margin-top: 20px;"></div>

        <!-- INFO GRID -->
        <table class="w-100">
            <tr>
                <td width="25%" style="padding: 5px;">
                    <div class="card-info">
                        <div style="font-size: 8px; font-weight: bold; color: #ec4899; text-transform: uppercase;">Tanggal</div>
                        <div class="fw-bold">{{ \Carbon\Carbon::parse($penjualan->tanggal_penjualan)->isoFormat('DD MMM YYYY') }}</div>
                        <div style="font-size: 8px; color: #94a3b8;">{{ \Carbon\Carbon::parse($penjualan->tanggal_penjualan)->format('H:i') }} WIB</div>
                    </div>
                </td>
                <td width="25%" style="padding: 5px;">
                    <div class="card-info">
                        <div style="font-size: 8px; font-weight: bold; color: #ec4899; text-transform: uppercase;">Pembeli</div>
                        <div class="fw-bold">{{ $penjualan->user->username ?? 'Guest' }}</div>
                        <div style="font-size: 8px; color: #94a3b8;">ID: {{ $penjualan->user->user_id ?? '-' }}</div>
                    </div>
                </td>
                <td width="25%" style="padding: 5px;">
                    <div class="card-info">
                        <div style="font-size: 8px; font-weight: bold; color: #ec4899; text-transform: uppercase;">Ekspedisi</div>
                        <div class="fw-bold">{{ $penjualan->kurir ?? 'Internal' }}</div>
                        <div style="font-size: 8px; color: #94a3b8;">Rp {{ number_format($penjualan->ongkir ?? 0, 0, ',', '.') }}</div>
                    </div>
                </td>
                <td width="25%" style="padding: 5px;">
                    <div class="card-info">
                        <div style="font-size: 8px; font-weight: bold; color: #ec4899; text-transform: uppercase;">Pembayaran</div>
                        <div class="fw-bold">{{ $penjualan->metode_pembayaran ?? 'Manual' }}</div>
                        <div style="font-size: 8px; color: #94a3b8;">LUNAS</div>
                    </div>
                </td>
            </tr>
        </table>

        <!-- STATUS -->
        <div style="margin-top: 15px;" class="status-bar">
            <span style="background-color: #d1fae5; color: #065f46; border-radius: 10px; padding: 2px 10px; font-weight: bold; font-size: 9px;">VERIFIED PAID</span>
            <span style="float: right; color: #94a3b8; font-size: 9px;">
                Diterbitkan oleh: <strong>{{ Auth::user()->username }}</strong> Pada {{ date('d/m/Y H:i') }}
            </span>
        </div>

        <!-- PRODUCTS -->
        <table class="w-100 table-pd" style="border: 1px solid #fce7f3; border-radius: 8px;">
            <thead class="bg-pink-soft">
                <tr>
                    <th width="60" class="text-center">FOTO</th>
                    <th class="text-left">PRODUK</th>
                    <th width="40" class="text-center">QTY</th>
                    <th width="100" class="text-right">HARGA</th>
                    <th width="100" class="text-right">SUBTOTAL</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($penjualan->detailPenjualan as $d)
                <tr>
                    <td class="text-center">
                        @php
                            $foto = $d->foto_produk ?: ($d->produk ? $d->produk->primary_foto : null);
                            $b64 = getBase64Image($foto, true);
                        @endphp
                        @if($b64)
                            <img src="{{ $b64 }}" width="40" height="40" style="border-radius: 5px; border: 1px solid #fce7f3;">
                        @else
                            <div style="width: 40px; height: 40px; background-color: #fff1f5; border-radius: 5px; line-height: 40px; color: #f9a8d4; font-size: 8px;">IMG</div>
                        @endif
                    </td>
                    <td>
                        <div style="font-weight: bold; color: #1e293b;">{{ $d->produk->nama_produk ?? 'Produk' }}</div>
                        <div style="font-size: 8px; color: #94a3b8;">ID: {{ $d->produk->produk_id ?? '-' }}</div>
                    </td>
                    <td class="text-center fw-bold">{{ $d->jumlah }}</td>
                    <td class="text-right">Rp {{ number_format($d->harga_satuan, 0, ',', '.') }}</td>
                    <td class="text-right fw-bold text-pink-dark">Rp {{ number_format($d->subtotal, 0, ',', '.') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- TOTALS -->
        <table class="w-100" style="margin-top: 20px;">
            <tr>
                <td width="60%"></td>
                <td width="40%">
                    <table class="w-100" style="background-color: #fffafc; border: 1px solid #fce7f3; border-radius: 10px; padding: 10px;">
                        @php
                            $subtotal = $penjualan->detailPenjualan->sum('subtotal');
                            $ongkir = $penjualan->ongkir ?? 0;
                        @endphp
                        <tr>
                            <td style="font-size: 10px; padding: 2px;">Subtotal</td>
                            <td class="text-right fw-bold" style="padding: 2px;">Rp {{ number_format($subtotal, 0, ',', '.') }}</td>
                        </tr>
                        <tr>
                            <td style="font-size: 10px; padding: 2px;">Ongkir</td>
                            <td class="text-right fw-bold" style="padding: 2px;">Rp {{ number_format($ongkir, 0, ',', '.') }}</td>
                        </tr>
                        <tr style="border-top: 1px solid #ec4899;">
                            <td class="fw-bold text-pink-dark" style="font-size: 12px; padding-top: 5px;">TOTAL</td>
                            <td class="text-right fw-bold text-pink-dark" style="font-size: 12px; padding-top: 5px;">Rp {{ number_format($penjualan->total_harga, 0, ',', '.') }}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <!-- FOOTER -->
        <div style="margin-top: 50px; text-align: center; border-top: 1px solid #f1f5f9; padding-top: 20px;">
            <div style="color: #ec4899; font-weight: bold; font-size: 13px;">TERIMA KASIH TELAH BERBELANJA</div>
            <div style="font-size: 9px; color: #94a3b8; margin-top: 5px;">
                Kei's Makeup - Professional Beauty Service<br>
                Simpan invoice ini sebagai bukti pembelian sah Anda.
            </div>
            <div style="font-size: 10px; font-weight: bold; color: #be185d; margin-top: 10px; font-style: italic;">
                "Beauty is being comfortable in your own skin."
            </div>
        </div>
    </div>
</body>
</html>