<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Surat Jalan - {{ $sale->nomor_invoice ?? 'SJ' }}</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family: Arial, sans-serif; font-size:12px; color:#333; background:#f1f5f9; }
        
        /* ══════════════════════════════════════
           TOOLBAR (Disamakan Persis dengan Invoice & Dashboard)
        ══════════════════════════════════════ */
        .toolbar {
            background: #0f172a; /* Warna Navy Gelap Pekat Dashboard */
            padding: 0 28px;
            height: 70px;        /* Tinggi disamakan agar logo besar muat lega */
            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: 52px;        /* Logo Kiri Atas Diperbesar Sesuai Request */
            object-fit: contain;
        }

        .btn-tool {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 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; /* Biru Navy Senada */
            color: #fff;
            border: 1px solid rgba(255,255,255,0.15);
        }

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

        /* ══════════════════════════════════════
           SHEET CONTAINER (Layout Kertas Utama)
        ══════════════════════════════════════ */
        .container { 
            max-width:750px; 
            margin: 28px auto 48px; 
            padding:30px; 
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 24px rgba(0,0,0,.08);
        }

        /* HEADER */
        .header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:3px solid #7B3F1E; padding-bottom:12px; }
        .title-sj { 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 */
        .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; }

        /* PELANGGAN BOX */
        .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 */
        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-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-c { text-align:center; }
        tbody td.td-no { text-align:center; color:#999; width:30px; }

        /* TANDA TANGAN */
        .ttd-grid { display:flex; justify-content:space-between; margin-top:40px; padding:0 20px; }
        .ttd-box { text-align:center; width:200px; }
        .ttd-space { height:60px; }
        .ttd-line { font-weight:600; font-size:11px; border-bottom:1px solid #333; padding-bottom:2px; }

        /* PRINT */
        @media print {
            body { background: #fff; padding: 0; }
            .toolbar { display: none !important; }
            .container { 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" class="btn-tool btn-back">← Kembali</a>
    <a href="/surat-jalan/{{ $sale->id }}" class="btn-tool btn-sj">📄 Surat Jalan</a>
    <button class="btn-tool btn-print" onclick="window.print()">🖨️ Print / Save PDF</button>
</div>

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

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

    {{-- INFO ORDER --}}
    <div class="info-grid">
        <div class="info-box">
            <div class="info-row"><span class="info-label">No Invoice</span><span class="info-value">: {{ $sale->nomor_invoice ?? 'LVS-'.$sale->id }}</span></div>
            <div class="info-row"><span class="info-label">Tanggal</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 Pembuat</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">Kurir</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>

    {{-- TUJUAN PENGIRIMAN --}}
    <div class="pelanggan-box">
        <div class="label">📍 Tujuan Pengiriman</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:40px">No</th>
                <th>Nama Produk / Barang</th>
                <th class="th-c" style="width:100px">Jumlah (Qty)</th>
            </tr>
        </thead>
        <tbody>
            @if(count($detailProduk) > 0)
                @foreach($detailProduk as $i => $item)
                <tr>
                    <td class="td-no">{{ $i + 1 }}</td>
                    <td style="font-weight:600;">{{ $item['nama'] }}</td>
                    <td class="td-c" style="font-weight:700; font-size:13px;">{{ $item['qty'] }} Pcs</td>
                </tr>
                @endforeach
            @else
                @php $no = 1; @endphp
                @if($sale->qty_toples > 0)
                <tr><td class="td-no">{{ $no++ }}</td><td style="font-weight:600;">Toples Semprong</td><td class="td-c" style="font-weight:700; font-size:13px;">{{ $sale->qty_toples }} Pcs</td></tr>
                @endif
                @if($sale->qty_mini > 0)
                <tr><td class="td-no">{{ $no++ }}</td><td style="font-weight:600;">Mini Semprong</td><td class="td-c" style="font-weight:700; font-size:13px;">{{ $sale->qty_mini }} Pcs</td></tr>
                @endif
                @if($sale->qty_pouch > 0)
                <tr><td class="td-no">{{ $no++ }}</td><td style="font-weight:600;">Pouch Semprong</td><td class="td-c" style="font-weight:700; font-size:13px;">{{ $sale->qty_pouch }} Pcs</td></tr>
                @endif
            @endif
        </tbody>
    </table>

    {{-- CATATAN KURIER / PENGIRIMAN --}}
    @if($sale->catatan)
    <div style="margin-bottom: 20px; font-size: 11px; color: #555; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 10px;">
        <strong>📝 Catatan Pengiriman:</strong> {{ $sale->catatan }}
    </div>
    @endif

    {{-- Bagian Tanda Tangan --}}
    <div class="ttd-grid">
        <div class="ttd-box">
            <div style="font-size:11px; color:#666; margin-bottom:10px">Diterima Oleh,</div>
            <div class="ttd-space"></div>
            <div class="ttd-line">Pelanggan / Penerima</div>
            <div style="font-size:10px; color:#888; margin-top:4px">(__________________________)</div>
        </div>
        <div class="ttd-box">
            <div style="font-size:11px; color:#666; margin-bottom:10px">Diserahkan Oleh,</div>
            <div class="ttd-space"></div>
            <div class="ttd-line">Driver / Kurir</div>
            <div style="font-size:10px; color:#888; margin-top:4px">(__________________________)</div>
        </div>
    </div>

    {{-- FOOTER CONTACT --}}
    <div class="footer" style="text-align:center; margin-top:50px; padding-top:16px; border-top:1px solid #eee;">
        <div style="font-size:11px; font-weight:700; color:#7B3F1E; margin-bottom:12px; letter-spacing:1px; text-transform:uppercase">Contact Us</div>
        <div style="display:flex; justify-content:center; gap:40px; margin-bottom:12px;">
            <div style="display:flex; align-items:center; gap:8px; font-size:11px;">
                <span style="font-size:18px;">📞</span>
                <div style="text-align:left;">
                    <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 style="display:flex; align-items:center; gap:8px; font-size:11px;">
                <span style="font-size:18px;">✉️</span>
                <div style="text-align:left;">
                    <div style="font-weight:700; color:#333">halo@lovessemprong.com</div>
                </div>
            </div>
        </div>
        <div style="font-size:10px; color:#bbb; border-top:1px dashed #eee; padding-top:10px; margin-top:8px;">
            Lves Semprong — lovessemprong.com
        </div>
    </div>

</div>

</body>
</html>