<!DOCTYPE html>
<html>
<head>
    <title>{{ $title }}</title>
    <style>
        body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 11px; color: #333; margin: 20px; }
        
        /* HEADER - Garis Bawah Jadi Oren */
        .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #f59e0b; padding-bottom: 10px; }
        .header h2 { margin: 0; text-transform: uppercase; color: #2c1a0e; }
        .header p { margin: 5px 0; color: #8c6a4a; font-size: 12px; }
        
        table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
        
        /* HEADER TABEL - Background Oren Muda, Teks Coklat Gelap */
        th { background-color: #fef3c7; color: #92400e; font-weight: bold; text-transform: uppercase; font-size: 9px; border: 1px solid #fcd34d; padding: 10px 5px; }
        td { border: 1px solid #e2e8f0; padding: 8px 5px; vertical-align: middle; word-wrap: break-word; }
        
        .font-bold { font-weight: bold; }
        
        /* Warna Mutasi Stok */
        .row-masuk { color: #059669; font-weight: bold; } /* Tetap Hijau (Masuk) */
        .row-keluar { color: #dc2626; font-weight: bold; } /* Tetap Merah (Keluar) */
        
        /* Aksentuasi Oren untuk Stok Akhir */
        .bg-orange-light { background-color: #fffbeb; }
        .text-orange { color: #d97706; }
        
        .footer { margin-top: 30px; text-align: right; font-size: 10px; color: #94a3b8; border-top: 1px solid #fde68a; padding-top: 5px; }
    </style>
</head>
<body>
    <div class="header">
        <h2>{{ $title }}</h2>
        <p>Dicetak pada: {{ $date }}</p>
        @if(isset($filters) && $filters['start'] != '-')
            <p style="font-size: 10px;">Periode: {{ \Carbon\Carbon::parse($filters['start'])->format('d/m/Y') }} s/d {{ \Carbon\Carbon::parse($filters['end'])->format('d/m/Y') }}</p>
        @endif
    </div>

    <table>
        <thead>
            <tr>
                <th width="15%">Waktu</th>
                <th width="25%">Produk & Varian</th>
                <th width="12%">Stok Awal</th>
                <th width="12%">Mutasi</th>
                <th width="12%" style="background-color: #f59e0b; color: white;">Stok Akhir</th>
                <th width="12%">Admin</th>
                <th width="12%">Catatan</th>
            </tr>
        </thead>
        <tbody>
            @foreach($logs as $log)
            @php
                $stokSesudah = $log->stock_after;
                $stokSebelum = ($log->type === 'masuk') 
                    ? ($stokSesudah - $log->quantity) 
                    : ($stokSesudah + $log->quantity);
            @endphp
            <tr>
                <td style="font-size: 9px;">
                    <span class="font-bold" style="color: #2c1a0e;">{{ $log->created_at->format('d/m/Y') }}</span><br>
                    <small style="color: #8c6a4a;">{{ $log->created_at->format('H:i') }} WIB</small>
                </td>
                <td>
                    <span class="font-bold" style="color: #d97706;">{{ $log->variant->product->name }}</span><br>
                    <small>Varian: {{ $log->variant->name ?? 'Default' }}</small>
                </td>
                <td align="center" style="color: #64748b;">{{ $stokSebelum }}</td>
                <td align="center">
                    @if($log->type === 'masuk')
                        <span class="row-masuk">+{{ $log->quantity }}</span>
                    @else
                        <span class="row-keluar">-{{ $log->quantity }}</span>
                    @endif
                </td>
                <td align="center" class="bg-orange-light font-bold" style="font-size: 12px; color: #b45309; border-left: 2px solid #f59e0b;">
                    {{ $stokSesudah }}
                </td>
                <td align="center">{{ $log->user->name ?? 'System' }}</td>
                <td style="font-size: 8px; color: #64748b;">{{ $log->note ?? '-' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <div class="footer">
        Laporan Mutasi Stok - <strong>Loka Furniture</strong> - {{ date('Y') }}
    </div>
</body>
</html>