<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice — {{ $sale->nomor_invoice ?? 'LVS-'.$sale->id }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body { 
            font-family: Arial, sans-serif; 
            font-size: 12px; 
            color: #333; 
            background: #f1f5f9; 
        }

        /* ══════════════════════════════════════
           TOOLBAR (DIUBAH JADI BIRU NAVY)
        ══════════════════════════════════════ */
        .toolbar {
            background: #0f172a; /* Warna coklat diganti ke Biru Navy sesuai dashboard */
            padding: 0 28px;
            height: 65px;
            display: flex;
            align-items: center;
            gap: 12px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0,0,0,.2);
        }

        .toolbar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: auto;
        }

        .toolbar-logo {
            height: 60px;
            object-fit: contain;
            /* Filter invert dihapus agar warna logo asli tetap menyala di background navy */
        }

        .btn-tool {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 18px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            font-family: Arial, sans-serif;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: opacity .15s;
            letter-spacing: .02em;
        }
        .btn-tool:hover { opacity: .85; }

        .btn-back {
            background: transparent;
            color: rgba(255,255,255,.8);
            border: 1px solid rgba(255,255,255,.3);
        }

        .btn-sj {
            background: #1e293b;
            color: #fff;
        }

        .btn-print {
            background: #fff;
            color: #7B3F1E;
            border: 1px solid #7B3F1E;
        }

        /* ══════════════════════════════════════
           SHEET CONTAINER (Kombinasi Struktur Surat Jalan)
        ══════════════════════════════════════ */
        .sheet {
            max-width: 750px;
            margin: 28px auto 48px;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(0,0,0,.08);
            padding: 30px;
        }

        /* HEADER (Sama persis dengan Surat Jalan) */
        .header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 20px; 
            border-bottom: 3px solid #7B3F1E; 
            padding-bottom: 12px; 
        }
        .title-inv { 
            font-size: 22px; 
            font-weight: 800; 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            color: #7B3F1E; 
        }
        .title-sub { 
            font-size: 11px; 
            color: #999; 
            margin-top: 4px; 
            letter-spacing: 1px; 
        }

        /* INFO ORDER (Grid ala Surat Jalan) */
        .info-grid { 
            display: flex; 
            gap: 20px; 
            margin-bottom: 20px; 
        }
        .info-box { flex: 1; }
        .info-row { 
            display: flex; 
            gap: 8px; 
            margin-bottom: 4px; 
            font-size: 11px; 
        }
        .info-label { 
            color: #666; 
            min-width: 100px; 
        }
        .info-value { font-weight: 600; }

        /* BOX PELANGGAN (Desain Box Krem ala Surat Jalan) */
        .pelanggan-box { 
            background: #fdf6f0; 
            border: 1px solid #f0d9c8; 
            border-left: 4px solid #7B3F1E; 
            border-radius: 6px; 
            padding: 12px; 
            margin-bottom: 20px; 
            font-size: 11px; 
        }
        .pelanggan-box .label { 
            font-size: 10px; 
            text-transform: uppercase; 
            font-weight: 700; 
            color: #7B3F1E; 
            margin-bottom: 6px; 
        }
        .pelanggan-box .name { 
            font-weight: 700; 
            font-size: 13px; 
            margin-bottom: 4px; 
        }

        /* ══════════════════════════════════════
           TABLE (Warna coklat coklat ala Surat Jalan)
        ══════════════════════════════════════ */
        table { 
            width: 100%; 
            border-collapse: collapse; 
            margin-bottom: 20px; 
        }
        thead tr { background: #7B3F1E; color: white; }
        thead th { 
            padding: 8px 10px; 
            text-align: left; 
            font-size: 11px; 
            font-weight: 600; 
        }
        thead th.th-r { text-align: right; }
        thead th.th-c { text-align: center; }

        tbody tr { border-bottom: 1px solid #eee; }
        tbody tr:nth-child(even) { background: #fdf6f0; }
        tbody td { padding: 8px 10px; font-size: 11px; }
        tbody td.td-r { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
        tbody td.td-c { text-align: center; }
        tbody td.td-no { text-align: center; color: #999; width: 30px; }

        /* ══════════════════════════════════════
           TOTALS (Penyesuaian ke Tema Surat Jalan)
        ══════════════════════════════════════ */
        .totals-wrap { 
            display: flex; 
            justify-content: flex-end; 
            margin-bottom: 24px; 
        }
        .totals {
            width: 320px;
            border: 1px solid #f0d9c8;
            border-radius: 6px;
            overflow: hidden;
        }
        .totals-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 7px 12px;
            font-size: 11px;
            border-bottom: 1px solid #eee;
            color: #555;
        }
        .totals-row:last-child { border-bottom: none; }
        .totals-row .val { font-weight: 600; font-variant-numeric: tabular-nums; color: #333; }
        .totals-row.disc .val { color: #16a34a; }

        .totals-row.grand {
            background: #7B3F1E;
            color: #fff;
            font-weight: 700;
            font-size: 12px;
            padding: 10px 12px;
        }
        .totals-row.grand .val { color: #fff; font-size: 13px; }

        /* CATATAN (Krem ala Surat Jalan) */
        .catatan {
            margin-bottom: 20px; 
            font-size: 11px; 
            color: #555; 
            background: #fffbeb; 
            border: 1px solid #fde68a; 
            border-radius: 6px; 
            padding: 10px;
        }

        /* ══════════════════════════════════════
           FOOTER (Persis Copy-Paste dari Surat Jalan)
        ══════════════════════════════════════ */
        .footer { 
            text-align: center; 
            margin-top: 30px; 
            padding-top: 16px; 
            border-top: 1px solid #eee; 
        }
        .footer-title {
            font-size: 11px; 
            font-weight: 700; 
            color: #7B3F1E; 
            margin-bottom: 12px; 
            letter-spacing: 1px; 
            text-transform: uppercase;
        }
        .footer-grid {
            display: flex; 
            justify-content: center; 
            gap: 40px; 
            margin-bottom: 12px;
        }
        .footer-item {
            display: flex; 
            align-items: center; 
            gap: 8px; 
            font-size: 11px;
        }
        .footer-item-text {
            text-align: left;
        }
        .footer-copyright {
            font-size: 10px; 
            color: #bbb; 
            border-top: 1px dashed #eee; 
            padding-top: 10px; 
            margin-top: 8px;
        }

        /* PRINT */
        @media print {
            body { background: #fff; padding: 0; }
            .toolbar { display: none !important; }
            .sheet { margin: 0; border-radius: 0; box-shadow: none; max-width: 100%; padding: 15px; }
        }
    </style>
</head>
<body>

{{-- TOOLBAR --}}
<div class="toolbar no-print">
    <div class="toolbar-brand">
        <img src="{{ asset('images/logo_loves_semprong.png') }}" alt="Loves Semprong" class="toolbar-logo">
    </div>
    <a href="/input?tab=riwayat" class="btn-tool btn-back">← Kembali</a>
    <a href="/surat-jalan/{{ $sale->id }}" class="btn-tool btn-sj" target="_blank">📄 Surat Jalan</a>
    <button class="btn-tool btn-print" onclick="window.print()">🖨️ Print / Save PDF</button>
</div>

{{-- SHEET CONTAINER --}}
<div class="sheet">

    {{-- HEADER (Gaya Surat Jalan) --}}
    <div class="header">
        <div>
            <div class="title-inv">Invoice</div>
            <div class="title-sub">Bukti Pembayaran</div>
        </div>
        <div>
            <img src="{{ asset('images/logo_loves_semprong.png') }}" alt="Loves Semprong" style="height:65px; object-fit:contain;">
        </div>
    </div>

    {{-- INFO ORDER (Gaya Surat Jalan) --}}
    <div class="info-grid">
        <div class="info-box">
            <div class="info-row"><span class="info-label">Invoice No</span><span class="info-value">: {{ $sale->nomor_invoice ?? 'LVS-'.$sale->id }}</span></div>
            <div class="info-row"><span class="info-label">Invoice Date</span><span class="info-value">: {{ \Carbon\Carbon::parse($sale->tgl)->format('d/m/Y') }}</span></div>
            <div class="info-row"><span class="info-label">Channel</span><span class="info-value">: {{ $sale->channel->nama_channel ?? '-' }}</span></div>
        </div>
        <div class="info-box">
            <div class="info-row"><span class="info-label">CS</span><span class="info-value">: {{ $sale->nama_cs }}</span></div>
            @if($sale->tipe_pembelian)
            <div class="info-row"><span class="info-label">Tipe</span><span class="info-value">: {{ $sale->tipe_pembelian }}</span></div>
            @endif
            @if($sale->jasa_kirim)
            <div class="info-row"><span class="info-label">Jasa Kirim</span><span class="info-value">: {{ $sale->jasa_kirim }}</span></div>
            @endif
            @if($sale->nomor_resi)
            <div class="info-row"><span class="info-label">No Resi</span><span class="info-value">: {{ $sale->nomor_resi }}</span></div>
            @endif
        </div>
    </div>

    {{-- TAGIHAN KEPADA (Gaya Surat Jalan) --}}
    <div class="pelanggan-box">
        <div class="label">📦 Tagihan Kepada</div>
        <div class="name">{{ $sale->nama_pemesan ?? $sale->nama_cs }}</div>
        @if($sale->no_telp_pemesan)<p style="margin-top:3px">📞 {{ $sale->no_telp_pemesan }}</p>@endif
        @if($sale->alamat)<p style="margin-top:3px">{{ $sale->alamat }}</p>@endif
        @if($sale->kelurahan || $sale->kecamatan)
        <p>{{ strtoupper($sale->kelurahan ?? '') }}{{ $sale->kecamatan ? ', '.strtoupper($sale->kecamatan) : '' }}</p>
        @endif
        @if($sale->kota || $sale->provinsi)
        <p>{{ strtoupper($sale->kota ?? '') }}{{ $sale->provinsi ? ', '.strtoupper($sale->provinsi) : '' }}</p>
        @endif
    </div>

    {{-- TABEL PRODUK --}}
    <table>
        <thead>
            <tr>
                <th class="th-c" style="width:30px">No</th>
                <th>Produk</th>
                <th class="th-r" style="width:110px">Harga Satuan</th>
                <th class="th-c" style="width:55px">Qty</th>
                <th class="th-r" style="width:120px">Subtotal</th>
            </tr>
        </thead>
        <tbody>
            @if(count($detailProduk) > 0)
                @foreach($detailProduk as $i => $item)
                <tr>
                    <td class="td-no">{{ $i + 1 }}</td>
                    <td>{{ $item['nama'] }}</td>
                    <td class="td-r">{{ $item['harga'] > 0 ? 'Rp '.number_format($item['harga'], 0, ',', '.') : '-' }}</td>
                    <td class="td-c">{{ $item['qty'] }}</td>
                    <td class="td-r">{{ $item['subtotal'] > 0 ? 'Rp '.number_format($item['subtotal'], 0, ',', '.') : '-' }}</td>
                </tr>
                @endforeach
            @else
                @if($sale->qty_toples > 0)
                <tr><td class="td-no">1</td><td>Toples Semprong</td><td class="td-r">-</td><td class="td-c">{{ $sale->qty_toples }}</td><td class="td-r">-</td></tr>
                @endif
                @if($sale->qty_mini > 0)
                <tr><td class="td-no">2</td><td>Mini Semprong</td><td class="td-r">-</td><td class="td-c">{{ $sale->qty_mini }}</td><td class="td-r">-</td></tr>
                @endif
                @if($sale->qty_pouch > 0)
                <tr><td class="td-no">3</td><td>Pouch Semprong</td><td class="td-r">-</td><td class="td-c">{{ $sale->qty_pouch }}</td><td class="td-r">-</td></tr>
                @endif
            @endif
        </tbody>
    </table>

    {{-- TOTALS --}}
    <div class="totals-wrap">
        <div class="totals">
            <div class="totals-row">
                <span>Subtotal</span>
                <span class="val">Rp {{ number_format($sale->nominal_gmv, 0, ',', '.') }}</span>
            </div>
            <div class="totals-row">
                <span>Biaya Kirim</span>
                <span class="val">Rp {{ number_format($sale->biaya_kirim ?? 0, 0, ',', '.') }}</span>
            </div>
            <div class="totals-row">
                <span>Tambahan</span>
                <span class="val">Rp 0</span>
            </div>
            <div class="totals-row grand">
                <span>Grand Total</span>
                <span class="val">Rp {{ number_format(($sale->grand_total ?? $sale->nominal_gmv), 0, ',', '.') }}</span>
            </div>
        </div>
    </div>

    {{-- CATATAN --}}
    @if($sale->catatan)
    <div class="catatan">
        <strong>📝 Catatan:</strong> {{ $sale->catatan }}
    </div>
    @endif

    {{-- FOOTER --}}
    <div class="footer">
        <div class="footer-title">Contact Us</div>
        <div class="footer-grid">
            <div class="footer-item">
                <span style="font-size:18px;">📞</span>
                <div class="footer-item-text">
                    <div style="font-weight:700; color:#333">081384774066</div>
                    <div style="font-size:10px; color:#999">Senin – Sabtu: 09:00–17:30</div>
                </div>
            </div>
            <div class="footer-item">
                <span style="font-size:18px;">✉️</span>
                <div class="footer-item-text">
                    <div style="font-weight:700; color:#333">halo@lovessemprong.com</div>
                </div>
            </div>
        </div>
        <div class="footer-copyright">
            Terima kasih telah berbelanja di <strong style="color:#7B3F1E">Loves Semprong</strong> ❤️ &nbsp;|&nbsp; lovessemprong.com
        </div>
    </div>

</div>

</body>
</html>