<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Berita Acara Serah Terima Barang</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }
        @page {
            size: A4;
            margin: 1mm;
        }
        .header-container {
            position: relative;
            width: 100%;
            margin: 0 auto 10px;
            text-align: center;
        }
        .header-logo {
            max-width: 90%;
            height: auto;
            position: relative;
            left: 45%;
            transform: translateX(-50%);
        }
        .document-title {
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            margin-top: 20px;
            margin-bottom: 30px;
        }
        .content {
            font-size: 14px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
            border: none;
            font-size: 12px;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
        }
        table.no-border,
        table.no-border th,
        table.no-border td {
            border: none !important;
        }
        table.no-border tr td:first-child {
            padding-left: 0;
        }
        .no-border td {
            font-size: 14px;
        }
        .bold {
            font-weight: bold;
        }
        .signature-table {
            width: 100%;
            margin: 30px 0;
            border: none;
        }
        .signature-table td {
            width: 45%;
            vertical-align: top;
            border: none;
            padding: 0;
        }
        .signature-box {
            font-size: 14px;
        }
        .signature-space {
            height: 60px;
            margin-bottom: 5px;
        }
        hr {
            border: 0.5px solid black;
            margin: 5px 0 10px 0;
        }
    </style>
</head>
<body>
    <div class="header-container">
        <img class="header-logo" src="{{ public_path('images/top-provinsi-3.jpg') }}">
    </div>

    <hr>
    
    <div class="document-title">{{ $title }}<br>{{ $subtitle }}</div>
    
    <div class="content">
        <!-- Using today's date -->
        <p>Pada hari ini <span>{{ \Carbon\Carbon::now()->isoFormat('dddd') }}</span>, 
        Tanggal <span>{{ \Carbon\Carbon::now()->isoFormat('D MMMM Y') }}</span> telah diserah terimakan barang kepada :</p>
        
        <table class="no-border">
            <tr>
                <td width="20%">Nama</td>
                <td width="80%">: <span class="bold">{{ $serahTerimas->first()->nama_penerima }}</span></td>
            </tr>
            <tr>
                <td>Jabatan</td>
                <td>: <span class="bold">{{ $serahTerimas->first()->jabatan_penerima }}</span></td>
            </tr>
        </table>
        
        <p>Daftar Barang Terlampir</p>
        
        <table class="signature-table">
            <tr>
                <td>
                    <div class="signature-box">
                        <p>Yang Menerima</p>
                        <div class="signature-space"></div>
                        <p><span class="bold">{{ $serahTerimas->first()->nama_penerima }}</span></p>
                    </div>
                </td>
                <td>
                    <div class="signature-box">
                        <p>Yang Menyerahkan</p>
                        <div class="signature-space"></div>
                        <p><span class="bold">{{ $serahTerimas->first()->yang_menyerahkan }}</span></p>
                    </div>
                </td>
            </tr>
        </table>
        
        <p>Saksi Penyerahan Barang:</p>
        
        <table>
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th width="70%">Nama</th>
                    <th width="25%">TTD</th>
                </tr>
            </thead>
            <tbody>
                @foreach($allSaksi as $index => $saksi)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $saksi['nama'] }}</td>
                    <td></td>
                </tr>
                @endforeach
            </tbody>
        </table>
        
        <p>Daftar Nama Barang yang diserahkan :</p>
        
        <table>
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th width="10%">Kode Barang</th>
                    <th width="20%">Nama Barang</th>
                    <th width="20%">Merk / Type</th>
                    <th width="10%">Tahun Perolehan</th>
                    <th width="10%">Satuan</th>
                    <th width="10%">Jumlah</th>
                    <th width="15%">Keterangan</th>
                </tr>
            </thead>
            <tbody>
                @foreach($allBarang as $index => $barang)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $barang->kode_barang ?? '-' }}</td>
                    <td>{{ $barang->nama_barang }}</td>
                    <td>{{ $barang->merk_type }}</td>
                    <td>{{ $barang->tahun_perolehan ?? '-' }}</td>
                    <td>{{ $barang->satuan }}</td>
                    <td>{{ $barang->jumlah }}</td>
                    <td>{{ $barang->keterangan ?? '-' }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</body>
</html>