<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        <style>
            .dash-header-title {
                font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
                font-weight: 700;
                font-size: 1.5rem;
                letter-spacing: -0.01em;
                color: #0f0f0f;
            }
        </style>
        <h2 class="dash-header-title">Dashboard Saya</h2>
     <?php $__env->endSlot(); ?>

    <style>
        /* Font system biasa */
        .dashboard-wrap, 
        .dashboard-wrap * {
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
        }

        .dashboard-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 32px;
        }

        /* ── WELCOME CARD ── */
        .dashboard-welcome {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 16px;
            padding: 32px 36px;
            margin-bottom: 32px;
        }

        .dashboard-welcome-title {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 1.5rem;
            font-weight: 500;
            color: #0f0f0f;
            margin-bottom: 8px;
        }

        .dashboard-welcome-text {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.5;
        }

        /* ── STATS GRID ── */
        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .dashboard-stat-card {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 20px;
            padding: 28px 24px;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }

        .dashboard-stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #FF8C42, #FFB366);
        }

        .dashboard-stat-card:hover {
            border-color: #FFB366;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 140, 66, 0.1);
        }

        .dashboard-stat-label {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #888;
            margin-bottom: 12px;
        }

        .dashboard-stat-value {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: #FF8C42;
        }

        /* ── MENU GRID ── */
        .dashboard-menu {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .dashboard-menu-item {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 16px;
            padding: 20px 16px;
            text-align: center;
            text-decoration: none;
            transition: all 0.2s;
        }

        .dashboard-menu-item:hover {
            border-color: #FF8C42;
            background: linear-gradient(135deg, #fff, #FFF8F0);
            transform: translateY(-2px);
        }

        .dashboard-menu-label {
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: #555;
            transition: color 0.2s;
        }

        .dashboard-menu-item:hover .dashboard-menu-label {
            color: #FF8C42;
        }

        /* ── ORDERS TABLE ── */
        .dashboard-table-wrap {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 20px;
            overflow: hidden;
        }

        .dashboard-table-header {
            padding: 20px 24px;
            border-bottom: 1px solid #e5e5e5;
            background: linear-gradient(135deg, #FFF8F0, #fff);
        }

        .dashboard-table-title {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: #0f0f0f;
            margin: 0;
            position: relative;
            display: inline-block;
        }

        .dashboard-table-title::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 40px;
            height: 2px;
            background: #FF8C42;
        }

        .dashboard-table {
            width: 100%;
            border-collapse: collapse;
        }

        .dashboard-table thead th {
            padding: 16px 24px;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #888;
            background: #fafafa;
            border-bottom: 1px solid #e5e5e5;
            text-align: left;
        }

        .dashboard-table thead th.right {
            text-align: right;
        }

        .dashboard-table tbody tr {
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.15s;
        }

        .dashboard-table tbody tr:last-child { border-bottom: none; }
        .dashboard-table tbody tr:hover { background: #FFF8F0; }

        .dashboard-table td {
            padding: 18px 24px;
            vertical-align: middle;
        }

        .dashboard-order-number {
            font-size: 0.9rem;
            font-weight: 600;
            color: #0f0f0f;
            text-decoration: none;
            transition: color 0.2s;
        }

        .dashboard-order-number:hover {
            color: #FF8C42;
        }

        .dashboard-order-date {
            font-size: 0.85rem;
            color: #444;
        }

        .dashboard-order-time {
            font-size: 0.7rem;
            color: #999;
            margin-top: 2px;
        }

        .dashboard-order-total {
            font-size: 0.9rem;
            font-weight: 700;
            color: #FF8C42;
        }

        .dashboard-order-status {
            display: inline-block;
            padding: 6px 14px;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            border-radius: 40px;
        }

        .dashboard-order-status-pending { background: #FFF8F0; color: #FF8C42; border: 1px solid #FFE0B5; }
        .dashboard-order-status-processing { background: #FFF3E0; color: #E65100; border: 1px solid #FFE0B5; }
        .dashboard-order-status-shipped { background: #E3F2FD; color: #1565C0; }
        .dashboard-order-status-paid { background: #E8F5E9; color: #2E7D32; }
        .dashboard-order-status-completed { background: #E8F5E9; color: #2E7D32; }
        .dashboard-order-status-cancelled { background: #FFEBEE; color: #C62828; }

        .dashboard-order-action {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: #ffffff;
            text-decoration: none;
            transition: all 0.2s;
            padding: 8px 18px;
            border-radius: 40px;
            background: linear-gradient(135deg, #FF8C42, #FFA559);
            box-shadow: 0 2px 4px rgba(255, 140, 66, 0.2);
        }

        .dashboard-order-action:hover {
            background: linear-gradient(135deg, #E67A30, #FF8C42);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(255, 140, 66, 0.3);
        }

        /* ── EMPTY STATE ── */
        .dashboard-empty {
            padding: 80px 32px;
            text-align: center;
        }

        .dashboard-empty-title {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 1.2rem;
            font-weight: 600;
            color: #999;
            margin-bottom: 8px;
        }

        .dashboard-empty-desc {
            font-size: 0.85rem;
            font-weight: 400;
            color: #aaa;
            margin-bottom: 24px;
        }

        .dashboard-empty-btn {
            display: inline-block;
            background: linear-gradient(135deg, #FF8C42, #FFA559);
            color: #fff;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-decoration: none;
            padding: 12px 32px;
            border-radius: 40px;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(255, 140, 66, 0.2);
        }

        .dashboard-empty-btn:hover { 
            background: linear-gradient(135deg, #E67A30, #FF8C42);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(255, 140, 66, 0.3);
        }
    </style>

    <div class="dashboard-wrap">
        <div class="dashboard-inner">

            
            <div class="dashboard-stats">
                <div class="dashboard-stat-card">
                    <div class="dashboard-stat-label">Menunggu Pembayaran</div>
                    <div class="dashboard-stat-value"><?php echo e($pendingOrders ?? 0); ?></div>
                </div>
                <div class="dashboard-stat-card">
                    <div class="dashboard-stat-label">Sedang Diproses</div>
                    <div class="dashboard-stat-value"><?php echo e($processingOrders ?? 0); ?></div>
                </div>
                <div class="dashboard-stat-card">
                    <div class="dashboard-stat-label">Pesanan Selesai</div>
                    <div class="dashboard-stat-value"><?php echo e($completedOrders ?? 0); ?></div>
                </div>
            </div>

            
            <div class="dashboard-table-wrap">
                <div class="dashboard-table-header">
                    <h3 class="dashboard-table-title">Pesanan Terbaru</h3>
                </div>

                <?php if($recentOrders->count() > 0): ?>
                    <table class="dashboard-table">
                        <thead>
                            <tr>
                                <th>No. Order</th>
                                <th>Tanggal & Waktu</th>
                                <th>Total</th>
                                <th>Status Pesanan</th>
                                <th class="right">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__currentLoopData = $recentOrders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $order): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr>
                                <td>
                                    <a href="<?php echo e(route('customer.orders.show', $order)); ?>" class="dashboard-order-number">
                                        #<?php echo e($order->order_number ?? $order->id); ?>

                                    </a>
                                </td>
                                <td>
                                    <div class="dashboard-order-date"><?php echo e($order->created_at->format('d M Y')); ?></div>
                                    <div class="dashboard-order-time"><?php echo e($order->created_at->format('H:i')); ?> WIB</div>
                                </td>
                                <td class="dashboard-order-total">Rp <?php echo e(number_format($order->total, 0, ',', '.')); ?></td>
                                <td>
                                    <?php
                                        $statusClass = match($order->status) {
                                            'paid', 'completed', 'success' => 'dashboard-order-status-completed',
                                            'pending', 'unpaid' => 'dashboard-order-status-pending',
                                            'cancelled', 'failed' => 'dashboard-order-status-cancelled',
                                            'processing' => 'dashboard-order-status-processing',
                                            'shipped' => 'dashboard-order-status-shipped',
                                            default => 'dashboard-order-status-pending'
                                        };
                                        $statusLabel = match($order->status) {
                                            'paid' => 'Dibayar',
                                            'completed', 'success' => 'Selesai',
                                            'pending', 'unpaid' => 'Menunggu',
                                            'cancelled', 'failed' => 'Dibatalkan',
                                            'processing' => 'Diproses',
                                            'shipped' => 'Dikirim',
                                            default => ucfirst($order->status)
                                        };
                                    ?>
                                    <span class="dashboard-order-status <?php echo e($statusClass); ?>">
                                        <?php echo e($statusLabel); ?>

                                    </span>
                                </td>
                                <td class="right">
                                    <a href="<?php echo e(route('customer.orders.show', $order)); ?>" class="dashboard-order-action">
                                        Detail
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                <?php else: ?>
                    <div class="dashboard-empty">
                        <div class="dashboard-empty-title">Belum ada pesanan</div>
                        <div class="dashboard-empty-desc">Mulai belanja untuk melihat pesanan Anda</div>
                        <a href="<?php echo e(route('products.index')); ?>" class="dashboard-empty-btn">Mulai Belanja</a>
                    </div>
                <?php endif; ?>
            </div>

        </div>
    </div>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?><?php /**PATH C:\laragon\www\toko\resources\views/customer/dashboard.blade.php ENDPATH**/ ?>