<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teh Tarik 99 - Laporan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #ffffff; color: #000; margin: 0; overflow: hidden; }
        .main-wrapper { display: flex; height: 100vh; }

        /* SIDEBAR */
        .sidebar { width: 220px; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; padding: 30px 0; }
        .brand { padding: 0 25px 40px; font-weight: 800; font-size: 1.5rem; }
        .nav-link-custom { padding: 12px 25px; display: flex; align-items: center; text-decoration: none; color: #333; font-weight: 500; font-size: 0.95rem; }
        .nav-link-custom i { width: 30px; font-size: 1.2rem; }
        .nav-link-custom.active { background-color: #448b39; color: white; border-radius: 0 12px 12px 0; margin-right: 15px; }

        /* CONTENT AREA */
        .content-area { flex: 1; display: flex; flex-direction: column; }
        .top-header { padding: 15px 30px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        .search-bar { background-color: #e9e9e9; border: none; border-radius: 6px; padding: 10px 15px; width: 400px; font-size: 0.85rem; }

        .main-scroll { padding: 40px; overflow-y: auto; flex: 1; background-color: #ffffff; }

        /* CARD RINGKASAN */
        .report-card { 
            border: none; 
            border-radius: 25px; 
            padding: 25px; 
            height: 180px; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .bg-pendapatan { background-color: #feffd2; } 
        .bg-pengeluaran { background-color: #d1f2f2; } 
        .bg-terlaris { background-color: #f1d1f2; } 

        .card-label { font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
        .card-value { font-size: 1.8rem; font-weight: 800; margin-top: 5px; }
        .card-subtext { font-size: 0.8rem; color: #666; margin: 0; }

        .chart-container { display: flex; align-items: end; gap: 8px; height: 70px; margin-top: 10px; }
        .bar { width: 35px; border-radius: 5px; background-color: rgba(0,0,0,0.2); transition: height 0.3s; }

        /* TAB MENU BUTTONS */
        .tab-btn-container { display: flex; gap: 10px; margin-top: 40px; margin-bottom: -20px; }
        .btn-tab-custom { border-radius: 12px; padding: 10px 20px; font-size: 0.9rem; font-weight: 700; border: 1px solid #eee; transition: all 0.2s; background-color: white; color: #666; }
        .btn-tab-custom.active { background-color: #448b39; color: white; border-color: #448b39; }
        .btn-tab-custom i { margin-right: 8px; }

        /* TABLE */
        .table-container { 
            background: white; 
            border-radius: 30px; 
            padding: 40px; 
            margin-top: 40px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            border: 1px solid #f5f5f5;
        }
        .table { margin: 0; }
        .table thead th { border: none !important; color: #999; font-weight: 600; font-size: 0.85rem; padding-bottom: 25px !important; }
        .table tbody td { vertical-align: middle; padding: 20px 0; border-bottom: 1px solid #f8f8f8; font-size: 0.9rem; }
        .fw-bold-dark { font-weight: 700; color: #222; }

        .btn-ekspor { background-color: #448b39; color: white; border: none; border-radius: 10px; padding: 10px 20px; font-size: 0.85rem; font-weight: 700; }
        .date-filter { background-color: #ffffff; border: 1px solid #eee; border-radius: 10px; padding: 8px 15px; font-size: 0.85rem; }
    </style>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <div class="brand">Teh Tarik 99</div>
        <nav class="flex-grow-1">
            <a href="<?php echo e(route('kasir.dashboard')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/dashboard') ? 'active' : ''); ?>">
                <i class="fa-solid fa-table-cells-large"></i> Dashboard
            </a>
            <a href="<?php echo e(route('kasir.transaksi')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/transaksi') ? 'active' : ''); ?>">
                <i class="fa-solid fa-receipt"></i> Riwayat
            </a>
            <a href="<?php echo e(route('kasir.laporan')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/laporan') ? 'active' : ''); ?>">
                <i class="fa-solid fa-chart-simple"></i> Laporan
            </a>
            <a href="<?php echo e(route('kasir.stok')); ?>" class="nav-link-custom <?php echo e(request()->is('kasir/stok') ? 'active' : ''); ?>">
                <i class="fa-solid fa-calendar-days"></i> Stok
            </a>
        </nav>
        <div class="mt-auto">
            <a href="#" class="nav-link-custom"><i class="fa-regular fa-circle-user"></i> Profil</a>
            <form action="<?php echo e(route('logout')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <button type="submit" class="nav-link-custom border-0 bg-transparent text-danger w-100 text-start">
                    <i class="fa-solid fa-arrow-right-from-bracket"></i> Keluar
                </button>
            </form>
        </div>
    </div>

    <div class="content-area">
        <div class="top-header">
            <form id="formSearch" action="/kasir/laporan" method="GET" class="d-flex">
                <input type="hidden" name="tab" value="<?php echo e(request('tab', 'pendapatan')); ?>">
                <?php if(request('tgl_mulai')): ?><input type="hidden" name="tgl_mulai" value="<?php echo e(request('tgl_mulai')); ?>"><?php endif; ?>
                <?php if(request('tgl_selesai')): ?><input type="hidden" name="tgl_selesai" value="<?php echo e(request('tgl_selesai')); ?>"><?php endif; ?>
                <?php if(request('pembayaran')): ?><input type="hidden" name="pembayaran" value="<?php echo e(request('pembayaran')); ?>"><?php endif; ?>
                <?php if(request('produk_id')): ?><input type="hidden" name="produk_id" value="<?php echo e(request('produk_id')); ?>"><?php endif; ?>
                <input type="text" id="inputSearch" name="search" class="search-bar" 
                    placeholder="Cari no. transaksi, produk..." 
                    value="<?php echo e(request('search')); ?>">
            </form>
            <div class="user-panel d-flex align-items-center gap-3">
                <i class="fa-solid fa-bell fs-5"></i>
                <div class="text-end" style="line-height: 1.2;">
                    <div class="fw-bold small"><?php echo e(auth()->user()->name); ?></div>
                    <div class="text-muted" style="font-size: 0.7rem;">Kasir</div>
                </div>
                <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode(auth()->user()->name)); ?>&background=448b39&color=fff" class="user-avatar" style="width: 35px; height: 35px; border-radius: 50%;">
            </div>
        </div>

        <div class="main-scroll">
            <div class="d-flex justify-content-between align-items-start mb-5">
                <div>
                    <h2 class="fw-bold m-0">Laporan Penjualan</h2>
                    <p class="text-muted small m-0">
                        <?php echo e(\Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y')); ?> | <?php echo e($ucapan); ?>, <?php echo e(explode(' ', auth()->user()->name)[0]); ?>

                    </p>
                </div>
                
                <div class="d-flex gap-2 align-items-center">
                    <form method="GET" action="/kasir/laporan" class="d-flex align-items-end gap-2">
                        <input type="hidden" name="tab" value="<?php echo e(request('tab', 'pendapatan')); ?>">
                        <?php if(request('search')): ?><input type="hidden" name="search" value="<?php echo e(request('search')); ?>"><?php endif; ?>
                        
                        <div>
                            <label class="small fw-bold text-muted d-block" style="font-size: 0.7rem;">TGL MULAI</label>
                            <input type="date" name="tgl_mulai" class="date-filter form-control form-control-sm" value="<?php echo e(request('tgl_mulai')); ?>">
                        </div>
                        <div>
                            <label class="small fw-bold text-muted d-block" style="font-size: 0.7rem;">TGL SELESAI</label>
                            <input type="date" name="tgl_selesai" class="date-filter form-control form-control-sm" value="<?php echo e(request('tgl_selesai')); ?>">
                        </div>

                        <?php if(request('tab') == 'barang'): ?>
                            <div>
                                <label class="small fw-bold text-muted d-block" style="font-size: 0.7rem;">PILIH PRODUK</label>
                                <select name="produk_id" class="date-filter form-select form-select-sm" style="min-width: 150px;">
                                    <option value="">Semua Produk ▽</option>
                                    <?php $__currentLoopData = $semuaProduk; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($p->nama_produk); ?>" <?php echo e(request('produk_id') == $p->nama_produk ? 'selected' : ''); ?>><?php echo e($p->nama_produk); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                        <?php else: ?>
                            <div>
                                <label class="small fw-bold text-muted d-block" style="font-size: 0.7rem;">PEMBAYARAN</label>
                                <select name="pembayaran" class="date-filter form-select form-select-sm" style="min-width: 150px;">
                                    <option value="">Semua Pembayaran</option>
                                    <option value="Tunai" <?php echo e(request('pembayaran') == 'Tunai' ? 'selected' : ''); ?>>Tunai</option>
                                    <option value="QRIS" <?php echo e(request('pembayaran') == 'QRIS' ? 'selected' : ''); ?>>QRIS</option>
                                </select>
                            </div>
                        <?php endif; ?>

                        <button type="submit" class="btn-ekspor border-0 text-decoration-none d-inline-flex align-items-center" style="height: 31px; padding: 0 15px;">
                            <i class="fa-solid fa-filter"></i>
                        </button>
                    </form>

                    <div class="d-flex gap-2">
                        <a href="<?php echo e(route('kasir.laporan.export_excel', request()->query())); ?>" class="btn-ekspor border-0 text-decoration-none d-inline-flex align-items-center">
                            <i class="fa-solid fa-file-excel me-2"></i> Ekspor Excel
                        </a>
                        <a href="<?php echo e(route('kasir.laporan.export_pdf', request()->query())); ?>" class="btn-ekspor border-0 text-decoration-none d-inline-flex align-items-center" style="background-color: #dc3545;">
                            <i class="fa-solid fa-file-pdf me-2"></i> Ekspor PDF
                        </a>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                <?php if(request('tab') == 'barang'): ?>
                    <div class="col-md-4">
                        <div class="report-card bg-pengeluaran">
                            <div class="card-label"><i class="fa-solid fa-cart-shopping"></i> TOTAL TERJUAL</div>
                            <div>
                                <div class="card-value"><?php echo e($totalTerjual ?? 0); ?> Item</div>
                                <p class="card-subtext">Total produk terjual</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="report-card bg-terlaris">
                            <div class="card-label"><i class="fa-solid fa-chart-line"></i> PRODUK TERLARIS</div>
                            <div class="d-flex justify-content-between align-items-end">
                                <div style="max-width: 65%;">
                                    <div class="fw-bold text-truncate" style="font-size: 1.3rem;"><?php echo e($namaProdukTerlaris ?? '-'); ?></div>
                                    <p class="card-subtext">Terjual <?php echo e($produkTerlaris ?? 0); ?> cup</p>
                                </div>
                                <div class="chart-container">
                                    <div class="bar" style="height: 40%;"></div>
                                    <div class="bar" style="height: 100%; background-color: rgba(0,0,0,0.4);"></div>
                                    <div class="bar" style="height: 60%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="report-card bg-pendapatan">
                            <div class="card-label"><i class="fa-solid fa-wallet"></i> TOTAL PENDAPATAN</div>
                            <div>
                                <div class="card-value">Rp <?php echo e(number_format($totalPendapatan, 0, ',', '.')); ?></div>
                                <p class="card-subtext text-success"><i class="fa-solid fa-circle-check"></i> Singkron Realtime</p>
                            </div>
                        </div>
                    </div>
                <?php else: ?>
                    <div class="col-md-4">
                        <div class="report-card bg-pendapatan">
                            <div class="card-label"><i class="fa-solid fa-wallet"></i> TOTAL PENDAPATAN</div>
                            <div>
                                <div class="card-value">Rp <?php echo e(number_format($totalPendapatan, 0, ',', '.')); ?></div>
                                <p class="card-subtext text-success"><i class="fa-solid fa-circle-check"></i> Singkron Realtime</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="report-card bg-pengeluaran">
                            <div class="card-label"><i class="fa-solid fa-receipt"></i> TOTAL TRANSAKSI</div>
                            <div>
                                <div class="card-value"><?php echo e($totalTransaksi); ?></div>
                                <p class="card-subtext">Jumlah transaksi berhasil</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="report-card bg-terlaris">
                            <div class="card-label"><i class="fa-solid fa-calculator"></i> RATA-RATA PER TRANSAKSI</div>
                            <div class="d-flex justify-content-between align-items-end">
                                <div style="max-width: 65%;">
                                    <div class="fw-bold" style="font-size: 1.3rem;">Rp <?php echo e(number_format($rataRata, 0, ',', '.')); ?></div>
                                    <p class="card-subtext">Rata-rata penjualan</p>
                                </div>
                                <div class="chart-container">
                                    <div class="bar" style="height: 40%;"></div>
                                    <div class="bar" style="height: 80%; background-color: rgba(0,0,0,0.4);"></div>
                                    <div class="bar" style="height: 50%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <div class="tab-btn-container">
                <a href="<?php echo e(route('kasir.laporan', array_merge(request()->query(), ['tab' => 'pendapatan']))); ?>" class="btn-tab-custom <?php echo e(request('tab', 'pendapatan') == 'pendapatan' ? 'active' : ''); ?>" style="text-decoration: none;">
                    <i class="fa-solid fa-wallet"></i> Laporan Pendapatan
                </a>
                <a href="<?php echo e(route('kasir.laporan', array_merge(request()->query(), ['tab' => 'barang']))); ?>" class="btn-tab-custom <?php echo e(request('tab') == 'barang' ? 'active' : ''); ?>" style="text-decoration: none;">
                    <i class="fa-solid fa-box"></i> Laporan Per Barang
                </a>
            </div>

            <div class="table-container">
                <table class="table table-hover w-100">
                    <thead>
                        <tr>
                            <th>NO</th>
                            <th>Tanggal Terjual</th>
                            <?php if(request('tab') == 'barang'): ?>
                                <th>Nama Produk</th>
                                <th class="text-center">Terjual (Qty)</th>
                                <th>Harga Satuan</th>
                                <th class="text-end" style="padding-right: 15px;">Total Pendapatan</th>
                            <?php else: ?>
                                <th>No. Transaksi</th>
                                <th class="text-center">Jumlah Item</th>
                                <th>Metode Pembayaran</th>
                                <th class="text-end" style="padding-right: 15px;">Total Bayar</th>
                            <?php endif; ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $semuaDetail; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $detail): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr>
                            <td><?php echo e($semuaDetail->firstItem() + $index); ?></td>
                            <td>
                                <?php echo e(($detail->transaksi ? $detail->transaksi->created_at : $detail->created_at)->format('d M Y, H:i')); ?> WIB
                            </td>
                            
                            <?php if(request('tab') == 'barang'): ?>
                                <td class="fw-bold-dark"><?php echo e($detail->nama_produk); ?></td>
                                <td class="text-center"><?php echo e($detail->qty); ?></td>
                                <td class="text-muted">Rp <?php echo e(number_format($detail->harga_satuan, 0, ',', '.')); ?></td>
                            <?php else: ?>
                                <td>TRX-<?php echo e(str_pad($detail->transaksi_id, 5, '0', STR_PAD_LEFT)); ?></td>
                                <td class="text-center"><?php echo e($detail->qty); ?></td>
                                <td class="text-muted"><?php echo e($detail->transaksi->metode_pembayaran ?? 'Tunai'); ?></td>
                            <?php endif; ?>
                            
                            <td class="text-end fw-bold-dark" style="padding-right: 15px;">
                                Rp <?php echo e(number_format($detail->qty * $detail->harga_satuan, 0, ',', '.')); ?>

                            </td>
                        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="<?php echo e(request('tab') == 'barang' ? 6 : 5); ?>" class="text-center text-muted">Data tidak ditemukan.</td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>

                <div class="d-flex justify-content-between align-items-center mt-4">
                    <div class="text-muted small">
                        Menampilkan <?php echo e($semuaDetail->firstItem() ?? 0); ?> sampai <?php echo e($semuaDetail->lastItem() ?? 0); ?> dari <?php echo e($semuaDetail->total()); ?> data
                    </div>
                    <div>
                        <?php echo e($semuaDetail->appends(request()->input())->links('pagination::bootstrap-4')); ?>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // FUNGSI PENCARIAN OTOMATIS
    const inputSearch = document.getElementById('inputSearch');
    const formSearch = document.getElementById('formSearch');
    let timer;

    inputSearch.addEventListener('keyup', function() {
        clearTimeout(timer);
        // Simpan posisi kursor
        sessionStorage.setItem('cursorPos', inputSearch.selectionStart);
        
        timer = setTimeout(function() {
            formSearch.submit();
        }, 500);
    });

    // Jaga Fokus setelah refresh
    document.addEventListener("DOMContentLoaded", function() {
        if (inputSearch && inputSearch.value.length > 0) {
            inputSearch.focus();
            let pos = sessionStorage.getItem('cursorPos');
            if (pos !== null) {
                inputSearch.setSelectionRange(pos, pos);
                sessionStorage.removeItem('cursorPos');
            }
        }
    });
</script>
</body>
</html><?php /**PATH C:\xampp\htdocs\tehtarik\resources\views/kasir/laporan.blade.php ENDPATH**/ ?>