<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gudang — Loves Semprong</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --ink:       #0f172a;
            --ink-2:     #334155;
            --ink-3:     #64748b;
            --surface:   #ffffff;
            --surface-2: #f8fafc;
            --surface-3: #f1f5f9;
            --border:    #e2e8f0;
            --r:         10px;
            --mono:      'JetBrains Mono', monospace;
        }
        * { box-sizing: border-box; }
        body { background: var(--surface-3); font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ink); }

        /* ── STAT CARDS ── */
        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 14px 16px;
            border-left: 4px solid;
        }
        .stat-card .s-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
        .stat-card .s-val   { font-size: 24px; font-weight: 700; line-height: 1.1; margin-top: 2px; font-family: var(--mono); }

        /* ── FILTER BAR ── */
        .filter-bar {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 12px 16px;
            margin-bottom: 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .filter-label { font-size: 11px; font-weight: 700; color: var(--ink-3); margin-right: 4px; }
        .filter-pill {
            font-size: 10px;
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--ink-3);
            text-decoration: none;
            font-weight: 500;
            transition: all .15s;
        }
        .filter-pill:hover { background: var(--surface-3); color: var(--ink); }
        .filter-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }

        /* ── TABLE CARD ── */
        .table-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r);
            overflow: hidden;
        }

        /* ── TABLE ── */
        .tbl-gudang { font-size: 11px; width: 100%; border-collapse: collapse; }
        .tbl-gudang th {
            background: var(--ink);
            color: #fff;
            padding: 9px 12px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
        }
        .tbl-gudang td { padding: 9px 12px; vertical-align: middle; border-bottom: 1px solid var(--surface-3); }
        .tbl-gudang tr:hover td { background: var(--surface-2); }
        .tbl-gudang tr:last-child td { border-bottom: none; }

        /* ── STATUS BADGES ── */
        .s-badge {
            font-size: 9px;
            font-weight: 700;
            padding: 3px 9px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: .03em;
            white-space: nowrap;
        }
        .b-pending    { background: #f1f5f9; color: #475569; }
        .b-dikemas    { background: #dbeafe; color: #1e40af; }
        .b-siap-kirim { background: #fef3c7; color: #92400e; }
        .b-dikirim    { background: #d1fae5; color: #065f46; }
        .b-selesai    { background: #0f172a; color: #fff; }

        /* ── STATUS SELECT ── */
        .status-select {
            border-radius: 20px;
            font-size: 10px;
            font-weight: 600;
            border: 1.5px solid var(--border);
            padding: 3px 8px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            background: var(--surface);
            outline: none;
        }
        .status-select:disabled {
            opacity: .45;
            cursor: not-allowed;
            background: var(--surface-3);
            color: var(--ink-3);
        }

        /* ── DETAIL PRODUK ── */
        .detail-produk { font-size: 10px; color: var(--ink-3); max-width: 180px; }

        /* ── ACTION BUTTONS ── */
        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 6px;
            text-decoration: none;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--ink-2);
            transition: all .12s;
            cursor: pointer;
        }
        .btn-action:hover { background: var(--surface-3); color: var(--ink); }
        .btn-action i { font-size: 12px; }
    </style>
</head>
<body>
<?php echo $__env->make('layouts.navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

<div class="container-fluid px-4 pb-5">

    
    <div class="d-flex justify-content-between align-items-center mb-4 pt-3 flex-wrap gap-2">
        <div>
            <h4 style="font-size:17px;font-weight:700;margin:0;color:var(--ink)">Operasional Gudang</h4>
            <div style="font-size:11px;color:var(--ink-3)">Kelola & update status pesanan · <?php echo e(date('d F Y')); ?></div>
        </div>
    </div>

    <?php if(session('success')): ?>
        <div class="mb-3 py-2 px-3" style="background:#f0fdf4;color:#166534;border-radius:8px;font-size:12px;border:1px solid #bbf7d0">
            <i class="ti ti-circle-check" style="font-size:14px;vertical-align:-2px"></i> <?php echo e(session('success')); ?>

        </div>
    <?php endif; ?>

    
    <?php
        $totalPending   = $sales->where('status','pending')->count();
        $totalDikemas   = $sales->where('status','dikemas')->count();
        $totalSiapKirim = $sales->where('status','siap_kirim')->count();
        $totalDikirim   = $sales->where('status','dikirim')->count();
        $totalSelesai   = $sales->where('status','selesai')->count();
    ?>
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-2">
            <div class="stat-card" style="border-left-color:#94a3b8">
                <div class="s-label" style="color:#64748b">Pending</div>
                <div class="s-val"   style="color:#475569"><?php echo e($totalPending); ?></div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="stat-card" style="border-left-color:#3b82f6">
                <div class="s-label" style="color:#1d4ed8">Dikemas</div>
                <div class="s-val"   style="color:#1d4ed8"><?php echo e($totalDikemas); ?></div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="stat-card" style="border-left-color:#f59e0b">
                <div class="s-label" style="color:#92400e">Siap Kirim</div>
                <div class="s-val"   style="color:#d97706"><?php echo e($totalSiapKirim); ?></div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="stat-card" style="border-left-color:#10b981">
                <div class="s-label" style="color:#065f46">Dikirim</div>
                <div class="s-val"   style="color:#059669"><?php echo e($totalDikirim); ?></div>
            </div>
        </div>
        <div class="col-6 col-md-2">
            <div class="stat-card" style="border-left-color:#1e293b">
                <div class="s-label" style="color:var(--ink)">Selesai</div>
                <div class="s-val"   style="color:var(--ink)"><?php echo e($totalSelesai); ?></div>
            </div>
        </div>
    </div>

    
    <div class="filter-bar">
        <span class="filter-label">Filter Status:</span>
        <?php $__currentLoopData = ['' => 'Semua', 'pending' => 'Pending', 'dikemas' => 'Dikemas', 'siap_kirim' => 'Siap Kirim', 'dikirim' => 'Dikirim', 'selesai' => 'Selesai']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <a href="<?php echo e(request()->fullUrlWithQuery(['filter_status' => $val])); ?>"
           class="filter-pill <?php echo e(request('filter_status', '') === $val ? 'active' : ''); ?>">
            <?php echo e($label); ?>

        </a>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    
    <div class="table-card">
        <div class="table-responsive">
            <table class="tbl-gudang">
                <thead>
                <tr>
                    <th>No</th>
                    <th>Order ID</th>
                    <th>Tanggal</th>
                    <th>CS</th>
                    <th>Channel</th>
                    <th>Pemesan</th>
                    <th>Detail Produk</th>
                    <th style="text-align:center">Toples</th>
                    <th style="text-align:center">Mini</th>
                    <th style="text-align:center">Pouch</th>
                    <th style="text-align:right">GMV</th>
                    <th>Jasa Kirim</th>
                    <th>No Resi</th>
                    <th>Status</th>
                    <th>Update Status</th>
                    <th>Aksi</th>
                </tr>
                </thead>
                <tbody>
                    <?php
                        $filterStatus  = request('filter_status', '');
                        $showId        = request('show');

                        if ($showId) {
                            $filteredSales = $sales->where('id', $showId);
                        } elseif ($filterStatus) {
                            $filteredSales = $sales->where('status', $filterStatus);
                        } else {
                            $filteredSales = $sales;
                        }
                        $badgeMap = [
                            'pending'    => 'b-pending',
                            'dikemas'    => 'b-dikemas',
                            'siap_kirim' => 'b-siap-kirim',
                            'dikirim'    => 'b-dikirim',
                            'selesai'    => 'b-selesai',
                        ];
                        $labelMap = [
                            'pending'    => 'Pending',
                            'dikemas'    => 'Dikemas',
                            'siap_kirim' => 'Siap Kirim',
                            'dikirim'    => 'Dikirim',
                            'selesai'    => 'Selesai',
                        ];
                        $borderMap = [
                            'pending'    => '#94a3b8',
                            'dikemas'    => '#3b82f6',
                            'siap_kirim' => '#f59e0b',
                            'dikirim'    => '#10b981',
                            'selesai'    => '#1e293b',
                        ];
                    ?>
                    <?php $__empty_1 = true; $__currentLoopData = $filteredSales; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <tr id="row-<?php echo e($s->id); ?>">
                        <td style="color:var(--ink-3)"><?php echo e($i + 1); ?></td>
                        <td style="white-space: nowrap;">
                            <span style="font-family:var(--mono); font-weight:600; color:#0f172a; background:#f1f5f9; padding:3px 8px; border-radius:5px; border:1px solid #e2e8f0; font-size:10.5px; display: inline-block;">
                                LVS-<?php echo e(str_pad($s->id, 3, '0', STR_PAD_LEFT)); ?>

                            </span>
                        </td>
                        <td style="font-family:var(--mono);font-size:10.5px"><?php echo e(\Carbon\Carbon::parse($s->tgl)->format('d/m/Y')); ?></td>
                        <td style="font-weight:600"><?php echo e($s->nama_cs ?? ($s->admin->name ?? 'N/A')); ?></td>
                        <td><?php echo e($s->channel->nama_channel ?? 'N/A'); ?></td>
                        <td>
                            <div style="font-weight:600"><?php echo e($s->nama_pemesan ?? '-'); ?></div>
                            <?php if($s->no_telp_pemesan): ?>
                            <div style="font-size:10px;color:var(--ink-3);font-family:var(--mono)"><?php echo e($s->no_telp_pemesan); ?></div>
                            <?php endif; ?>
                        </td>
                        <td>
                            <?php if($s->detail_produk): ?>
                                <?php $dp = is_array($s->detail_produk) ? $s->detail_produk : json_decode($s->detail_produk, true); ?>
                                <div class="detail-produk">
                                    <?php echo e(collect($dp)->map(fn($p) => $p['nama'].' x'.$p['qty'])->take(2)->implode(', ')); ?>

                                    <?php if(count($dp) > 2): ?><span style="color:#1d4ed8">+<?php echo e(count($dp)-2); ?> lagi</span><?php endif; ?>
                                </div>
                            <?php else: ?>
                                <span style="color:var(--ink-3)">-</span>
                            <?php endif; ?>
                        </td>
                        <td style="text-align:center;font-weight:700;font-family:var(--mono)"><?php echo e($s->qty_toples); ?></td>
                        <td style="text-align:center;font-family:var(--mono)"><?php echo e($s->qty_mini); ?></td>
                        <td style="text-align:center;font-family:var(--mono)"><?php echo e($s->qty_pouch); ?></td>
                        <td style="text-align:right;font-weight:600;color:#1d4ed8;font-family:var(--mono)">Rp<?php echo e(number_format($s->nominal_gmv,0,',','.')); ?></td>
                        <td><?php echo e($s->jasa_kirim ?? '-'); ?></td>
                        <td>
                            <?php if($s->nomor_resi): ?>
                                <span style="font-weight:600;color:#1d4ed8;font-size:10px;font-family:var(--mono)"><?php echo e($s->nomor_resi); ?></span>
                            <?php else: ?>
                                <span style="color:var(--ink-3)">-</span>
                            <?php endif; ?>
                        </td>
                        <td>
                            <span class="s-badge <?php echo e($badgeMap[$s->status] ?? 'b-pending'); ?>">
                                <?php echo e($labelMap[$s->status] ?? 'Pending'); ?>

                            </span>
                        </td>
                        <td>
                            <div style="display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px">
                            <form action="/pesanan/update-status" method="POST">
                                <?php echo csrf_field(); ?>
                                <input type="hidden" name="id" value="<?php echo e($s->id); ?>">
                                <select name="status" onchange="this.form.submit()" class="status-select"
                                    style="border-color:<?php echo e($borderMap[$s->status] ?? '#94a3b8'); ?>"
                                    <?php echo e(!$s->nomor_resi ? 'disabled' : ''); ?>>
                                    <option value="dikemas"    <?php if($s->status=='dikemas'): echo 'selected'; endif; ?>>Dikemas</option>
                                    <option value="siap_kirim" <?php if($s->status=='siap_kirim'): echo 'selected'; endif; ?>>Siap Kirim</option>
                                    <option value="dikirim"    <?php if($s->status=='dikirim'): echo 'selected'; endif; ?>>Dikirim</option>
                                    <option value="selesai"    <?php if($s->status=='selesai'): echo 'selected'; endif; ?>>Selesai</option>
                                </select>
                            </form>
                            <?php if(!$s->nomor_resi): ?>
                                <span style="font-size:9px;color:#f59e0b;display:flex;align-items:center;gap:3px">
                                    <i class="ti ti-alert-triangle" style="font-size:10px"></i> Isi resi dulu
                                </span>
                            <?php endif; ?>
                            </div>
                        </td>
                        
                        <td>
                            <div class="d-flex gap-1">
                                <a href="/pesanan/lengkapi/<?php echo e($s->id); ?>" class="btn-action">
                                    <i class="ti ti-edit"></i> Resi
                                </a>
                                <a href="/invoice/<?php echo e($s->id); ?>" target="_blank" class="btn-action">
                                    <i class="ti ti-receipt"></i>
                                </a>
                                <a href="/surat-jalan/<?php echo e($s->id); ?>" target="_blank" class="btn-action">
                                    <i class="ti ti-file-text"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <tr>
                        <td colspan="16" class="text-center py-5" style="color:var(--ink-3)">
                            <i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:6px;opacity:.35"></i>
                            Tidak ada pesanan.
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const params = new URLSearchParams(window.location.search);
    const highlightId = params.get('highlight');
    if (highlightId) {
        const row = document.getElementById('row-' + highlightId);
        if (row) {
            // Scroll ke baris
            row.scrollIntoView({ behavior: 'smooth', block: 'center' });
            // Highlight kuning
            row.style.transition = 'background 0.3s';
            row.style.background = '#fef9c3';
            setTimeout(() => {
                row.style.background = '';
            }, 3000);
        }
    }
});
</script>
</body>
</html><?php /**PATH C:\laragon\www\laporanpenjualan\resources\views/gudang_index.blade.php ENDPATH**/ ?>