<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Struk Peminjaman #{{ $peminjaman->id_peminjaman }}</title>
    <style>
        body { font-family: monospace; color: #111; font-size: 13px; max-width: 320px; margin: 20px auto; padding: 20px; border: 1px dashed #aaa; }
        .text-center { text-align: center; }
        .font-bold { font-weight: bold; }
        .mb-2 { margin-bottom: 8px; }
        .mb-4 { margin-bottom: 16px; }
        .border-t { border-top: 1px dashed #aaa; padding-top: 12px; mt-2; }
        .border-b { border-bottom: 1px dashed #aaa; padding-bottom: 12px; margin-bottom: 12px; }
        .flex-between { display: flex; justify-content: space-between; }
        .barcode-container { text-align: center; margin: 15px 0; padding: 10px 0; background: #fff; }
        .barcode-img { max-width: 100%; height: 50px; }
        button { display: block; width: 100%; padding: 12px; margin-top: 24px; background: #111; color: white; border: none; cursor: pointer; font-weight: bold; font-family: monospace; font-size: 14px; border-radius: 4px; }
        @media print { 
            @page { margin: 0; }
            button { display: none; } 
            body { border: none; margin: 0; padding: 10px; max-width: 100%; } 
        }
    </style>
</head>
<body>
    <div class="text-center mb-4 border-b">
        <div class="font-bold" style="font-size: 16px;">PERPUSTAKAAN DAERAH JEMBER</div>
        <div>Struk Transaksi Peminjaman</div>
    </div>

    <div class="mb-4">
        <div class="flex-between"><span>No. Transaksi:</span> <span>#{{ $peminjaman->id_peminjaman }}</span></div>
        <div class="flex-between"><span>Tanggal:</span> <span>{{ date('d M Y') }}</span></div>
        <div class="flex-between"><span>Peminjam:</span> <span>{{ $peminjaman->anggota?->nama ?? ($peminjaman->user?->name ?? 'Anonim') }}</span></div>
    </div>

    <div class="border-t border-b">
        <div class="font-bold mb-2">Aset Buku:</div>
        <div style="font-size: 14px; line-height: 1.4;">{{ $peminjaman->buku->judul }}</div>
        
        <div class="barcode-container">
            <img src="https://bwipjs-api.metafloor.com/?bcid=code128&text={{ $peminjaman->buku->bibid }}&scale=2&height=10&includetext=true" alt="Barcode BIBID" class="barcode-img">
        </div>

        <div class="flex-between mt-1 font-bold">
            <span>Rak Tujuan:</span>
            <span>{{ substr($peminjaman->buku->nomor_panggil, 0, 3) }}</span>
        </div>
    </div>

    <div class="mb-4">
        <div class="flex-between"><span>Tgl Pinjam:</span> <span>{{ \Carbon\Carbon::parse($peminjaman->tanggal_pinjam)->format('d M Y') }}</span></div>
        <div class="flex-between"><span>Tenggat:</span> <span>{{ \Carbon\Carbon::parse($peminjaman->tanggal_kembali)->format('d M Y') }}</span></div>
        <div class="flex-between font-bold" style="margin-top: 8px;">
            <span>Status:</span> 
            <span>{{ $peminjaman->status_peminjaman }}</span>
        </div>
        @if($peminjaman->denda > 0)
        <div class="flex-between font-bold" style="color: #000; margin-top: 8px; border: 1px solid #000; padding: 5px;">
            <span>Denda:</span> 
            <span>Rp {{ number_format($peminjaman->denda, 0, ',', '.') }}</span>
        </div>
        @endif
    </div>

    <div class="text-center mt-4 border-t">
        <div style="font-size: 11px;">Harap bawa struk ini saat mengembalikan buku untuk proses scan otomatis.</div>
    </div>

    <button onclick="window.print()">[ CETAK STRUK ]</button>
</body>
</html>
