<!DOCTYPE html>
<html>
<head>
    <title>Laporan Penjualan Teh Tarik 99</title>
    <style>
        body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: #333; line-height: 1.4; }
        .header { margin-bottom: 20px; border-bottom: 3px solid #28a745; padding-bottom: 10px; }
        .brand { font-size: 24px; font-weight: bold; color: #28a745; text-transform: uppercase; margin: 0; }
        .subtitle { font-size: 12px; color: #666; margin: 5px 0 0 0; }
        
        .info-section { width: 100%; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
        .info-cell { font-size: 10px; color: #555; }
        
        .filter-status { background: #f8f9fa; border: 1px solid #e9ecef; padding: 10px; border-radius: 6px; margin-bottom: 15px; }
        .filter-title { font-weight: bold; color: #495057; font-size: 10px; margin-bottom: 5px; text-transform: uppercase; }
        .filter-item { display: inline-block; margin-right: 15px; font-size: 10px; }

        .stats-grid { width: 100%; margin-bottom: 20px; border-collapse: separate; border-spacing: 10px 0; }
        .stat-card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 12px; text-align: center; }
        .stat-label { font-size: 9px; color: #6c757d; font-weight: bold; text-transform: uppercase; margin-bottom: 4px; }
        .stat-val { font-size: 16px; font-weight: bold; color: #212529; }

        table.data-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        table.data-table th { background-color: #28a745; color: white; padding: 8px; font-weight: bold; font-size: 10px; text-transform: uppercase; border: 1px solid #28a745; }
        table.data-table td { padding: 8px; border: 1px solid #e9ecef; font-size: 10px; }
        .text-right { text-align: right; }
        .text-center { text-align: center; }
        .fw-bold { font-weight: bold; }
        .footer { margin-top: 40px; text-align: center; font-size: 9px; color: #adb5bd; border-top: 1px solid #eee; padding-top: 10px; }
    </style>
</head>
<body>

    <div class="header">
        <h1 class="brand">TEH TARIK 99</h1>
        <p class="subtitle">Laporan Penjualan Admin (Per {{ request('tab') == 'barang' ? 'Barang' : 'Pendapatan' }})</p>
    </div>

    <table class="info-section">
        <tr>
            <td class="info-cell"><strong>Dicetak oleh:</strong> Admin ({{ auth()->user()->name }})</td>
            <td class="info-cell text-right"><strong>Tanggal Cetak:</strong> {{ now()->translatedFormat('d F Y, H:i') }} WIB</td>
        </tr>
    </table>

    <div class="filter-status">
        <div class="filter-title">Filter yang Diterapkan:</div>
        <div class="filter-item"><strong>Mulai:</strong> {{ request('tgl_mulai') ?: '-' }}</div>
        <div class="filter-item"><strong>Selesai:</strong> {{ request('tgl_selesai') ?: '-' }}</div>
        @if(request('tab') == 'barang')
            <div class="filter-item"><strong>Produk:</strong> {{ request('produk_id') ?: 'Semua Produk' }}</div>
        @else
            <div class="filter-item"><strong>Pembayaran:</strong> {{ request('pembayaran') ?: 'Semua Pembayaran' }}</div>
        @endif
        @if(request('search'))
            <div class="filter-item"><strong>Pencarian:</strong> "{{ request('search') }}"</div>
        @endif
    </div>

    <!-- STATS -->
    <table class="stats-grid">
        <tr>
            @if(request('tab') == 'barang')
                <td width="33.3%">
                    <div class="stat-card">
                        <div class="stat-label">TOTAL TERJUAL</div>
                        <div class="stat-val">{{ $totalTerjual }} Item</div>
                    </div>
                </td>
                <td width="33.3%">
                    <div class="stat-card">
                        <div class="stat-label">PRODUK TERLARIS</div>
                        <div class="stat-val" style="font-size: 13px;">{{ $namaProdukTerlaris }} ({{ $produkTerlaris }} Item)</div>
                    </div>
                </td>
                <td width="33.3%">
                    <div class="stat-card">
                        <div class="stat-label">TOTAL PENDAPATAN</div>
                        <div class="stat-val">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</div>
                    </div>
                </td>
            @else
                <td width="33.3%">
                    <div class="stat-card">
                        <div class="stat-label">TOTAL PENDAPATAN</div>
                        <div class="stat-val">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</div>
                    </div>
                </td>
                <td width="33.3%">
                    <div class="stat-card">
                        <div class="stat-label">TOTAL TRANSAKSI</div>
                        <div class="stat-val">{{ $totalTransaksi }}</div>
                    </div>
                </td>
                <td width="33.3%">
                    <div class="stat-card">
                        <div class="stat-label">RATA-RATA PER TRANSAKSI</div>
                        <div class="stat-val">Rp {{ number_format($rataRata, 0, ',', '.') }}</div>
                    </div>
                </td>
            @endif
        </tr>
    </table>

    <h3 style="font-size: 12px; margin-top: 20px; color: #495057;">Tabel Rincian Data</h3>
    <table class="data-table">
        <thead>
            <tr>
                <th width="5%" class="text-center">NO</th>
                <th width="20%">TANGGAL & WAKTU</th>
                @if(request('tab') == 'barang')
                    <th width="35%">NAMA PRODUK</th>
                    <th width="10%" class="text-center">JUMLAH ITEM</th>
                    <th width="15%" class="text-right">HARGA SATUAN</th>
                    <th width="15%" class="text-right">TOTAL PENDAPATAN</th>
                @else
                    <th width="20%">NO. TRANSAKSI</th>
                    <th width="15%" class="text-center">JUMLAH ITEM</th>
                    <th width="20%">METODE PEMBAYARAN</th>
                    <th width="20%" class="text-right">TOTAL BAYAR</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @forelse($data as $index => $item)
            <tr>
                <td class="text-center">{{ $index + 1 }}</td>
                <td>{{ ($item->transaksi ? $item->transaksi->created_at : $item->created_at)->format('d M Y, H:i') }}</td>
                
                @if(request('tab') == 'barang')
                    <td>{{ $item->nama_produk }}</td>
                    <td class="text-center">{{ $item->qty }}</td>
                    <td class="text-right">Rp {{ number_format($item->harga_satuan, 0, ',', '.') }}</td>
                @else
                    <td>TRX-{{ str_pad($item->transaksi_id, 5, '0', STR_PAD_LEFT) }}</td>
                    <td class="text-center">{{ $item->qty }}</td>
                    <td>{{ $item->transaksi->metode_pembayaran ?? 'Tunai' }}</td>
                @endif
                
                <td class="text-right fw-bold" style="color: #2e7d32;">Rp {{ number_format($item->qty * $item->harga_satuan, 0, ',', '.') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="{{ request('tab') == 'barang' ? 6 : 5 }}" class="text-center">Data tidak ditemukan.</td>
            </tr>
            @endforelse
        </tbody>
    </table>

    <div class="footer">
        <p>Laporan ini dihasilkan secara otomatis oleh Sistem Admin Teh Tarik 99.</p>
    </div>

</body>
</html>
