<div class="modal-header border-0 pb-0">
    <div class="d-flex align-items-center gap-2">
        <div style="background: #e8f5e9; border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
            <i class="fa fa-receipt text-success" style="font-size: 14px;"></i>
        </div>
        <h5 class="modal-title fw-bold m-0" style="font-size: 16px;">Detail Transaksi</h5>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body pt-3">
    <div class="row mb-3">
        <div class="col-6">
            <small class="text-muted fw-semibold" style="font-size: 11px; letter-spacing: 0.5px;">NO. TRANSAKSI</small>
            <div class="fw-bold" style="font-size: 15px;">TRX-{{ str_pad($transaksi->id, 5, '0', STR_PAD_LEFT) }}</div>
        </div>
        <div class="col-6">
            <small class="text-muted fw-semibold" style="font-size: 11px; letter-spacing: 0.5px;">TANGGAL & WAKTU</small>
            <div class="fw-bold" style="font-size: 15px;">{{ $transaksi->created_at->format('d M Y, H:i') }}</div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-6">
            <small class="text-muted fw-semibold" style="font-size: 11px; letter-spacing: 0.5px;">METODE PEMBAYARAN</small>
            <div>
                <span class="badge" style="background: #e8f5e9; color: #2e7d32; font-size: 12px; padding: 4px 10px; border-radius: 4px;">
                    {{ $transaksi->metode_pembayaran ?? 'Tunai' }}
                </span>
            </div>
        </div>
        <div class="col-6">
            <small class="text-muted fw-semibold" style="font-size: 11px; letter-spacing: 0.5px;">KASIR</small>
            <div class="fw-bold" style="font-size: 15px;">{{ $transaksi->kasir_name }}</div>
        </div>
    </div>

    <div class="border rounded-3 overflow-hidden">
        <table class="table table-sm mb-0" style="font-size: 13px;">
            <thead style="background: #f8f9fa;">
                <tr>
                    <th class="text-muted fw-semibold py-2 ps-3" style="font-size: 11px; letter-spacing: 0.5px;">NAMA PRODUK</th>
                    <th class="text-muted fw-semibold py-2 text-center" style="font-size: 11px; letter-spacing: 0.5px;"><i class="fa fa-shopping-cart" style="font-size: 10px;"></i> QTY</th>
                    <th class="text-muted fw-semibold py-2 text-end" style="font-size: 11px; letter-spacing: 0.5px;">HARGA SATUAN</th>
                    <th class="text-muted fw-semibold py-2 text-end pe-3" style="font-size: 11px; letter-spacing: 0.5px;">SUBTOTAL</th>
                </tr>
            </thead>
            <tbody>
                @php $totalItem = 0; @endphp
                @foreach($transaksi->details as $dt)
                @php $totalItem += $dt->qty; @endphp
                <tr>
                    <td class="ps-3 py-2">{{ $dt->nama_produk }}</td>
                    <td class="text-center py-2">{{ $dt->qty }}</td>
                    <td class="text-end py-2">Rp {{ number_format($dt->harga_satuan, 0, ',', '.') }}</td>
                    <td class="text-end pe-3 py-2 fw-semibold" style="color: #2e7d32;">Rp {{ number_format($dt->qty * $dt->harga_satuan, 0, ',', '.') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-between align-items-center mt-3 pt-2">
        <div class="text-muted" style="font-size: 13px;">Total Item: <strong>{{ $totalItem }}</strong></div>
        <div class="d-flex align-items-center gap-2">
            <span class="text-muted" style="font-size: 13px;">Total Bayar</span>
            <span class="fw-bold" style="font-size: 22px; color: #2e7d32;">Rp {{ number_format($transaksi->total_harga, 0, ',', '.') }}</span>
        </div>
    </div>
</div>