<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Invoice - <?php echo e($pesanan->kode_pesanan); ?></title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 9pt; color: #1a1a1a; background: white; padding: 20px; }

        .invoice { width: 100%; max-width: 100%; }

        /* ── HEADER ── */
        .header { display: table; width: 100%; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 3px solid #ea580c; }
        .header-left  { display: table-cell; vertical-align: middle; width: 60%; }
        .header-right { display: table-cell; vertical-align: middle; text-align: right; width: 40%; }
        .toko-nama { font-size: 15pt; font-weight: 800; color: #ea580c; letter-spacing: 0.5px; }
        .toko-sub  { font-size: 7.5pt; color: #777; margin-top: 3px; line-height: 1.5; }
        .invoice-title { font-size: 22pt; font-weight: 900; color: #1f2937; letter-spacing: 4px; text-transform: uppercase; }
        .invoice-no { font-size: 8pt; color: #666; margin-top: 4px; line-height: 1.6; }

        /* ── STAMP ── */
        .paid-stamp {
            display: inline-block; border: 3px solid #16a34a; color: #16a34a;
            font-size: 14pt; font-weight: 900; padding: 4px 14px;
            transform: rotate(-12deg); letter-spacing: 3px;
            border-radius: 4px; opacity: 0.9; margin-top: 6px;
        }
        .unpaid-stamp {
            display: inline-block; border: 3px solid #dc2626; color: #dc2626;
            font-size: 14pt; font-weight: 900; padding: 4px 14px;
            transform: rotate(-12deg); letter-spacing: 3px;
            border-radius: 4px; opacity: 0.9; margin-top: 6px;
        }

        /* ── INFO BOX ── */
        .info-section { display: table; width: 100%; margin-bottom: 12px; }
        .info-box { display: table-cell; vertical-align: top; width: 50%; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; }
        .info-box:first-child { border-right: none; }
        .box-title  { font-size: 6.5pt; text-transform: uppercase; letter-spacing: 1.5px; color: #ea580c; font-weight: 700; margin-bottom: 5px; }
        .box-name   { font-size: 10pt; font-weight: 700; color: #1f2937; margin-bottom: 3px; }
        .box-detail { font-size: 7.5pt; color: #555; line-height: 1.7; }

        /* ── STATUS STRIP ── */
        .status-strip {
            background: #fff7ed; border: 1px solid #fed7aa;
            border-left: 4px solid #ea580c;
            padding: 7px 12px; margin-bottom: 12px;
            display: table; width: 100%;
        }
        .status-strip-left  { display: table-cell; font-size: 8pt; vertical-align: middle; color: #374151; }
        .status-strip-right { display: table-cell; text-align: right; vertical-align: middle; padding-left: 8px; }
        .status-badge {
            display: inline-block; padding: 3px 12px; font-weight: 700;
            font-size: 7.5pt; text-transform: uppercase;
            background: #1f2937; color: white; letter-spacing: 0.5px;
        }

        /* ── TABEL PRODUK ── */
        .produk-tbl { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
        .produk-tbl thead tr { background: #1f2937; color: white; }
        .produk-tbl th { padding: 8px 10px; text-align: left; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        .produk-tbl th.r { text-align: right; }
        .produk-tbl th.c { text-align: center; }
        .produk-tbl td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; font-size: 8.5pt; vertical-align: middle; }
        .produk-tbl td.r { text-align: right; }
        .produk-tbl td.c { text-align: center; }
        .produk-tbl tbody tr:nth-child(even) { background: #f8fafc; }
        .pnama   { font-weight: 600; color: #1f2937; }
        .pvarian { font-size: 7pt; color: #888; margin-top: 2px; }

        /* ── SUMMARY ── */
        .summary-wrap  { display: table; width: 100%; margin-bottom: 10px; }
        .summary-left  { display: table-cell; width: 54%; vertical-align: top; padding-right: 12px; }
        .summary-right { display: table-cell; width: 46%; vertical-align: top; }

        .catatan-box {
            border: 1px solid #e2e8f0; border-left: 4px solid #f59e0b;
            padding: 8px 12px; font-size: 7.5pt; color: #555;
            line-height: 1.7; background: #fffbeb;
        }
        .catatan-title { font-weight: 700; font-size: 7.5pt; margin-bottom: 4px; color: #92400e; text-transform: uppercase; letter-spacing: 0.5px; }

        .sum-tbl { width: 100%; border-collapse: collapse; border: 1px solid #e2e8f0; }
        .sum-tbl td { padding: 6px 10px; font-size: 8.5pt; color: #374151; border-bottom: 1px solid #f1f5f9; }
        .sum-tbl td.r { text-align: right; font-weight: 500; }
        .sum-tbl tr.diskon td { color: #16a34a; }
        .sum-tbl tr.subtotal td { border-top: 1px solid #e2e8f0; }
        .sum-tbl tr.total { background: #1f2937; }
        .sum-tbl tr.total td { font-weight: 800; font-size: 10pt; color: white; border-bottom: none; }
        .sum-tbl tr.total td.r { font-size: 11pt; color: #fb923c; }

        /* ── TTD ── */
        .ttd-section { display: table; width: 100%; margin-top: 16px; }
        .ttd-box { display: table-cell; width: 33.33%; text-align: center; font-size: 8pt; padding: 8px; }
        .ttd-title { font-weight: 700; color: #374151; margin-bottom: 40px; font-size: 8pt; }
        .ttd-line  { border-top: 1px solid #9ca3af; margin-top: 5px; }
        .ttd-name  { font-size: 7.5pt; color: #6b7280; margin-top: 4px; }

        /* ── FOOTER ── */
        .footer-strip { border-top: 2px solid #ea580c; margin-top: 12px; padding-top: 8px; display: table; width: 100%; }
        .footer-left  { display: table-cell; font-size: 7pt; color: #9ca3af; vertical-align: middle; }
        .footer-right { display: table-cell; text-align: right; font-size: 7pt; color: #6b7280; vertical-align: middle; }
        .footer-right b { color: #ea580c; }
    </style>
</head>
<body>
<div class="invoice">

    
    <div class="header">
        <div class="header-left">
            <?php
                $namaToko = $toko->nama_toko ?? 'Glow Beauty';
                $namaToko = trim(preg_replace('/[^\x{0000}-\x{007F}]/u', '', $namaToko)) ?: 'Glow Beauty';
            ?>
            <div class="toko-nama"><?php echo e($namaToko); ?></div>
            <div class="toko-sub">
                <?php if($toko && $toko->alamat): ?> <?php echo e($toko->alamat); ?><br> <?php endif; ?>
                <?php if($toko && ($toko->no_hp ?? $toko->telepon ?? null)): ?>
                    Telp: <?php echo e($toko->no_hp ?? $toko->telepon); ?>

                <?php endif; ?>
            </div>
        </div>
        <div class="header-right">
            <div class="invoice-title">INVOICE</div>
            <div class="invoice-no">
                No: <b><?php echo e($pesanan->kode_pesanan); ?></b><br>
                Tanggal: <?php echo e($pesanan->created_at->format('d M Y')); ?><br>
                Pukul: <?php echo e($pesanan->created_at->format('H:i')); ?> WIB
            </div>
            <div>
                <?php if($pesanan->pembayaran): ?>
                    <span class="paid-stamp">LUNAS</span>
                <?php else: ?>
                    <span class="unpaid-stamp">BELUM BAYAR</span>
                <?php endif; ?>
            </div>
        </div>
    </div>

    
    <div class="info-section">
        <div class="info-box">
            <div class="box-title">Dari (Penjual)</div>
            <div class="box-name"><?php echo e($namaToko); ?></div>
            <div class="box-detail">
                <?php if($toko && $toko->alamat): ?> <?php echo e($toko->alamat); ?><br> <?php endif; ?>
                <?php if($toko && ($toko->no_hp ?? $toko->telepon ?? null)): ?>
                    Telp: <?php echo e($toko->no_hp ?? $toko->telepon); ?>

                <?php endif; ?>
                <?php if($pesanan->kurir): ?>
                    <br><br>
                    <b>Kurir:</b> <?php echo e($pesanan->kurir->name); ?><br>
                    Telp Kurir: <?php echo e($pesanan->kurir->no_hp ?? '-'); ?>

                <?php endif; ?>
            </div>
        </div>
        <div class="info-box">
            <div class="box-title">Kepada (Pembeli)</div>
            <?php if($pesanan->alamat): ?>
                <div class="box-name"><?php echo e($pesanan->alamat->nama_penerima); ?></div>
                <div class="box-detail">
                    Telp: <?php echo e($pesanan->alamat->no_hp); ?><br>
                    <?php echo e($pesanan->alamat->alamat_lengkap); ?><br>
                    <?php if(optional($pesanan->alamat->village)->name): ?>
                        <?php echo e(strtoupper(optional($pesanan->alamat->village)->name)); ?>,
                    <?php endif; ?>
                    <?php echo e(strtoupper(optional($pesanan->alamat->district)->name ?? '')); ?><br>
                    <?php echo e(strtoupper(optional($pesanan->alamat->city)->name ?? '')); ?>,
                    <?php echo e(strtoupper(optional($pesanan->alamat->province)->name ?? '')); ?>

                    <?php if($pesanan->alamat->kode_pos): ?> <?php echo e($pesanan->alamat->kode_pos); ?> <?php endif; ?>
                </div>
            <?php else: ?>
                <div class="box-detail">Alamat tidak tersedia</div>
            <?php endif; ?>
        </div>
    </div>

    
    <div class="status-strip">
        <div class="status-strip-left">
            <b>No. Pesanan:</b> <?php echo e($pesanan->kode_pesanan); ?>

            <?php if($pesanan->no_resi): ?>
                &nbsp;&nbsp; <b>No. Resi:</b> <?php echo e($pesanan->no_resi); ?>

            <?php endif; ?>
            &nbsp;&nbsp; <b>Metode Bayar:</b>
            <?php if($pesanan->pembayaran): ?>
                <?php echo e(strtoupper(str_replace('_', ' ', $pesanan->pembayaran->metode))); ?>

            <?php else: ?> — <?php endif; ?>
        </div>
        <div class="status-strip-right">
            <?php
                $statusLabels = [
                    'pending'    => 'MENUNGGU PEMBAYARAN',
                    'dibayar'    => 'DIBAYAR',
                    'diproses'   => 'SEDANG DIPROSES',
                    'dikirim'    => 'DIKIRIM',
                    'selesai'    => 'SELESAI',
                    'dibatalkan' => 'DIBATALKAN',
                ];
            ?>
            <span class="status-badge">
                <?php echo e($statusLabels[$pesanan->status] ?? strtoupper($pesanan->status)); ?>

            </span>
        </div>
    </div>

    
    <table class="produk-tbl">
        <thead>
            <tr>
                <th style="width:4%">#</th>
                <th style="width:42%">Nama Produk</th>
                <th style="width:18%">Variasi</th>
                <th class="c" style="width:8%">Qty</th>
                <th class="r" style="width:14%">Harga Satuan</th>
                <th class="r" style="width:14%">Subtotal</th>
            </tr>
        </thead>
        <tbody>
            <?php $__currentLoopData = $pesanan->detail; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $detail): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <tr>
                <td style="color:#9ca3af;"><?php echo e($i + 1); ?></td>
                <td>
                    <div class="pnama"><?php echo e($detail->nama_produk); ?></div>
                    <?php if($detail->warna || $detail->ukuran): ?>
                    <div class="pvarian">
                        <?php echo e(implode(' · ', array_filter([$detail->warna, $detail->ukuran ? 'Uk. '.$detail->ukuran : null]))); ?>

                    </div>
                    <?php endif; ?>
                </td>
                <td style="font-size:8pt;color:#6b7280;">
                    <?php if($detail->warna): ?> <?php echo e($detail->warna); ?> <?php endif; ?>
                    <?php if($detail->ukuran): ?> / <?php echo e($detail->ukuran); ?> <?php endif; ?>
                    <?php if(!$detail->warna && !$detail->ukuran): ?> — <?php endif; ?>
                </td>
                <td class="c" style="font-weight:700;"><?php echo e($detail->qty); ?></td>
                <td class="r" style="color:#374151;">Rp <?php echo e(number_format($detail->harga, 0, ',', '.')); ?></td>
                <td class="r" style="font-weight:700;color:#1f2937;">Rp <?php echo e(number_format($detail->subtotal, 0, ',', '.')); ?></td>
            </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </tbody>
    </table>

    
    <div class="summary-wrap">
        <div class="summary-left">
            <div class="catatan-box">
                <div class="catatan-title">⚠ Catatan</div>
                Mohon periksa kondisi barang sebelum menerima. Invoice ini merupakan
                bukti transaksi yang sah. Simpan invoice ini sebagai bukti pembelian Anda.
                <?php if($pesanan->catatan): ?>
                    <?php
                        $catatanJson = json_decode($pesanan->catatan, true);
                        $catatanTampil = null;
                        if (json_last_error() === JSON_ERROR_NONE && is_array($catatanJson)) {
                            $catatanTampil = $catatanJson['keterangan'] ?? $catatanJson['keterangan_diskon'] ?? null;
                        } else {
                            $catatanTampil = $pesanan->catatan;
                        }
                    ?>
                    <?php if($catatanTampil): ?>
                        <br><br><b>Catatan Pesanan:</b> <?php echo e($catatanTampil); ?>

                    <?php endif; ?>
                <?php endif; ?>
            </div>
        </div>
        <div class="summary-right">
            <table class="sum-tbl">
                <tr>
                    <td>Subtotal (<?php echo e($pesanan->detail->sum('qty')); ?> item)</td>
                    <td class="r">Rp <?php echo e(number_format($subtotalProduk, 0, ',', '.')); ?></td>
                </tr>
                <?php if(isset($diskon) && $diskon > 0): ?>
                <tr class="diskon">
                    <td>Diskon</td>
                    <td class="r">− Rp <?php echo e(number_format($diskon, 0, ',', '.')); ?></td>
                </tr>
                <?php endif; ?>
                <tr>
                    <td>Ongkos Kirim</td>
                    <td class="r">
                        <?php if($ongkir <= 0): ?> <span style="color:#16a34a;font-weight:600;">GRATIS</span>
                        <?php else: ?> Rp <?php echo e(number_format($ongkir, 0, ',', '.')); ?> <?php endif; ?>
                    </td>
                </tr>
                <?php if($pesanan->pembayaran): ?>
                <tr class="subtotal">
                    <td style="color:#6b7280;">Metode Pembayaran</td>
                    <td class="r"><?php echo e(strtoupper(str_replace('_',' ',$pesanan->pembayaran->metode))); ?></td>
                </tr>
                <tr>
                    <td style="color:#6b7280;">Tanggal Bayar</td>
                    <td class="r"><?php echo e($pesanan->pembayaran->created_at->format('d M Y')); ?></td>
                </tr>
                <?php endif; ?>
                <tr class="total">
                    <td>TOTAL</td>
                    <td class="r">Rp <?php echo e(number_format($pesanan->total_harga, 0, ',', '.')); ?></td>
                </tr>
            </table>
        </div>
    </div>

    
    <div class="ttd-section">
        <div class="ttd-box">
            <div class="ttd-title">Dipesan Oleh</div>
            <div class="ttd-line"></div>
            <div class="ttd-name"><?php echo e(optional($pesanan->user)->name ?? '-'); ?></div>
        </div>
        <div class="ttd-box">
            <div class="ttd-title">Dikirim Oleh</div>
            <div class="ttd-line"></div>
            <div class="ttd-name"><?php echo e($pesanan->kurir->name ?? '-'); ?></div>
        </div>
        <div class="ttd-box">
            <div class="ttd-title">Diterima Oleh</div>
            <div class="ttd-line"></div>
            <div class="ttd-name"><?php echo e($pesanan->alamat->nama_penerima ?? '-'); ?></div>
        </div>
    </div>

    
    <div class="footer-strip">
        <div class="footer-left">Dicetak: <?php echo e(now()->format('d M Y, H:i')); ?> WIB</div>
        <div class="footer-right">
            <b>Glow Bauty</b> — Toko Skincare Terpecaya &nbsp;|&nbsp; Terima kasih telah berbelanja!
        </div>
    </div>

</div>
</body>
</html><?php /**PATH C:\laragon\www\ecommerce\resources\views/pesanan/invoice_html.blade.php ENDPATH**/ ?>