<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Surat Jalan - {{ $sale->invoice_number }}</title>
    <style>
        body { font-family: sans-serif; font-size: 12px; margin: 0; padding: 20px; }
        .header { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #000; padding-bottom: 10px; }
        .header h1 { margin: 0; font-size: 18px; text-transform: uppercase; }
        .header p { margin: 2px 0; }
        
        .info-table { width: 100%; margin-bottom: 20px; }
        .info-table td { vertical-align: top; padding: 2px; }
        
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
        .items-table th, .items-table td { border: 1px solid #000; padding: 5px; text-align: left; }
        .items-table th { background-color: #eee; }
        
        .signatures { width: 100%; margin-top: 50px; text-align: center; }
        .signatures td { width: 33%; }
        .sign-line { margin-top: 60px; border-top: 1px solid #000; width: 80%; margin-left: auto; margin-right: auto; }
        
        @media print {
            @page { size: A5 landscape; margin: 10mm; } /* Atau A4 portrait */
            body { padding: 0; }
        }
    </style>
</head>
<body>

    <div class="header">
        <h1>SURAT JALAN</h1>
        <p><strong>{{ $sale->branch->name ?? 'Toko Bangunan' }}</strong></p>
        <p>{{ $sale->branch->address ?? '-' }} | Telp: {{ $sale->branch->phone ?? '-' }}</p>
    </div>

    <table class="info-table">
        <tr>
            <td width="15%"><strong>No. Nota</strong></td>
            <td width="2%">:</td>
            <td width="33%">{{ $sale->invoice_number }}</td>
            
            <td width="15%"><strong>Kepada Yth.</strong></td>
            <td width="2%">:</td>
            <td>{{ $sale->customer_name ?? 'Umum' }}</td>
        </tr>
        <tr>
            <td><strong>Tanggal</strong></td>
            <td>:</td>
            <td>{{ $sale->created_at->format('d/m/Y H:i') }}</td>
            
            <td><strong>Alamat Kirim</strong></td>
            <td>:</td>
            <td>{{ $sale->shipping_address ?? ($sale->customer->address ?? '-') }}</td>
        </tr>
    </table>

    <table class="items-table">
        <thead>
            <tr>
                <th width="5%" style="text-align: center">No</th>
                <th>Nama Barang</th>
                <th width="15%" style="text-align: center">Qty</th>
                <th width="15%" style="text-align: center">Satuan</th>
                <th width="20%">Keterangan</th>
            </tr>
        </thead>
        <tbody>
            @foreach($sale->items as $index => $item)
            <tr>
                <td style="text-align: center">{{ $index + 1 }}</td>
                <td>{{ $item->product_name }}</td>
                <td style="text-align: center">{{ (float)$item->quantity }}</td>
                <td style="text-align: center">{{ $item->unit }}</td>
                <td></td> </tr>
            @endforeach
        </tbody>
    </table>

    <table class="signatures">
        <tr>
            <td>
                Penerima
                <div class="sign-line"></div>
            </td>
            <td>
                Supir / Pengirim
                <div class="sign-line"></div>
            </td>
            <td>
                Hormat Kami,
                <div class="sign-line"></div>
                ({{ $sale->user->name ?? 'Admin' }})
            </td>
        </tr>
    </table>

    <script>
        window.onload = function() { window.print(); }
    </script>
</body>
</html>