<?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>
            .orders-header-title {
                font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
                font-weight: 800;
                font-size: 1.5rem;
                letter-spacing: -0.01em;
                background: linear-gradient(135deg, #1e1e2f 0%, #ea580c 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
        </style>
        <h2 class="orders-header-title">PESANAN SAYA</h2>
     <?php $__env->endSlot(); ?>

    <style>
        * {
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        .order-customer-wrap {
            background: #f5f7fa;
            min-height: 100vh;
        }
        .order-customer-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 32px 24px;
        }

        /* Header */
        .order-customer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 28px;
        }
        .order-customer-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #1f2937;
            margin: 0;
        }
        .order-customer-count {
            font-size: 0.875rem;
            font-weight: 700; /* DIBUAT BOLD */
            color: #6b7280;
            background: white;
            padding: 6px 12px;
            border-radius: 20px;
        }

        /* Stats Grid - Warna Oranye pada Card */
        .order-customer-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 32px;
        }
        .order-customer-stat {
            background: white;
            padding: 20px 24px;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border: 1px solid #e5e7eb;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        .order-customer-stat::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #f97316, #ea580c);
        }
        .order-customer-stat:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
            border-color: #fed7aa;
        }
        .order-customer-stat-label {
            font-size: 0.7rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6b7280;
            margin-bottom: 8px;
        }
        .order-customer-stat-value {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #1f2937, #ea580c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Tabs */
        .order-customer-tabs {
            display: flex;
            gap: 4px;
            background: white;
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 24px;
            border: 1px solid #e5e7eb;
            overflow-x: auto;
        }
        .order-customer-tab {
            flex-shrink: 0;
            padding: 10px 24px;
            font-size: 0.875rem;
            font-weight: 700; /* DIBUAT BOLD */
            text-decoration: none;
            color: #6b7280;
            border-radius: 8px;
            transition: all 0.2s;
        }
        .order-customer-tab.active {
            background: #ea580c;
            color: white;
        }
        .order-customer-tab:hover:not(.active) {
            background: #fff7ed;
            color: #ea580c;
        }
        .order-customer-tab-badge {
            display: inline-block;
            margin-left: 6px;
            padding: 2px 8px;
            background: #e5e7eb;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700; /* DIBUAT BOLD */
        }
        .order-customer-tab.active .order-customer-tab-badge {
            background: rgba(255,255,255,0.2);
            color: white;
        }

        /* Table */
        .order-customer-table {
            background: white;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .order-customer-thead {
            display: grid;
            grid-template-columns: 2fr 1.5fr 1.2fr 1.2fr 0.8fr;
            padding: 16px 24px;
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
        }
        .order-customer-th {
            font-size: 0.7rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6b7280;
        }

        .order-customer-row {
            display: grid;
            grid-template-columns: 2fr 1.5fr 1.2fr 1.2fr 0.8fr;
            padding: 18px 24px;
            border-bottom: 1px solid #f0f0f0;
            align-items: center;
            transition: background 0.2s;
        }
        .order-customer-row:last-child {
            border-bottom: none;
        }
        .order-customer-row:hover {
            background: #f9fafb;
        }

        .order-customer-number {
            font-size: 0.875rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            color: #1f2937;
            text-decoration: none;
            transition: color 0.2s;
        }
        .order-customer-number:hover {
            color: #ea580c;
        }

        .order-customer-date {
            font-size: 0.875rem;
            font-weight: 700; /* DIBUAT BOLD */
            color: #4b5563;
        }
        .order-customer-time {
            font-size: 0.7rem;
            font-weight: 700; /* DIBUAT BOLD */
            color: #9ca3af;
            margin-left: 6px;
        }

        .order-customer-total {
            font-size: 0.875rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            color: #1f2937;
        }

        .order-customer-badge {
            display: inline-block;
            padding: 4px 12px;
            font-size: 0.7rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            border-radius: 20px;
        }
        .order-customer-badge-pending { background: #fef3c7; color: #92400e; }
        .order-customer-badge-paid { background: #ffedd5; color: #9a3412; }
        .order-customer-badge-processing { background: #fed7aa; color: #9a3412; }
        .order-customer-badge-shipped { background: #ffedd5; color: #c2410c; }
        .order-customer-badge-completed { background: #dcfce7; color: #166534; }
        .order-customer-badge-cancelled { background: #fee2e2; color: #991b1b; }

        /* Tombol Oranye */
        .order-customer-action {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            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, #f97316 0%, #ea580c 100%);
            box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
        }

        .order-customer-action:hover {
            background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
        }

        /* Empty State Button Oranye */
        .order-customer-empty {
            padding: 80px 32px;
            text-align: center;
        }
        .order-customer-empty-title {
            font-size: 1.125rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            color: #6b7280;
            margin-bottom: 8px;
        }
        .order-customer-empty-desc {
            font-size: 0.875rem;
            font-weight: 700; /* DIBUAT BOLD */
            color: #9ca3af;
            margin-bottom: 24px;
        }
        .order-customer-empty-btn {
            display: inline-block;
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            color: white;
            font-size: 0.875rem;
            font-weight: 800; /* DIBUAT EXTRA BOLD */
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-decoration: none;
            padding: 12px 32px;
            border-radius: 40px;
            transition: all 0.3s;
            box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
        }
        .order-customer-empty-btn:hover {
            background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
        }

        /* Pagination Oranye */
        .order-customer-pagination {
            margin-top: 24px;
        }
        .order-customer-pagination .pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        .order-customer-pagination .page-item .page-link {
            padding: 8px 14px;
            border-radius: 8px;
            color: #4b5563;
            font-weight: 700; /* DIBUAT BOLD */
            background: white;
            border: 1px solid #e5e7eb;
            text-decoration: none;
            transition: all 0.2s;
        }
        .order-customer-pagination .page-item .page-link:hover {
            background: #fff7ed;
            color: #ea580c;
            border-color: #fed7aa;
            transform: translateY(-1px);
        }
        .order-customer-pagination .page-item.active .page-link {
            background: #ea580c;
            color: white;
            border-color: #ea580c;
        }

        @media (max-width: 768px) {
            .order-customer-inner {
                padding: 20px 16px;
            }
            .order-customer-thead {
                display: none;
            }
            .order-customer-row {
                grid-template-columns: 1fr;
                gap: 10px;
                padding: 20px;
            }
            .order-customer-stats {
                grid-template-columns: repeat(3, 1fr);
            }
            .order-customer-stat-value {
                font-size: 1.25rem;
            }
            .order-customer-action {
                display: inline-block;
                width: fit-content;
            }
        }
    </style>

    <div class="order-customer-wrap">
        <div class="order-customer-inner">
            
            
            <div class="order-customer-stats">
                <div class="order-customer-stat">
                    <div class="order-customer-stat-label">Total Pesanan</div>
                    <div class="order-customer-stat-value"><?php echo e(number_format($counts->sum(), 0)); ?></div>
                </div>
                <div class="order-customer-stat">
                    <div class="order-customer-stat-label">Selesai</div>
                    <div class="order-customer-stat-value"><?php echo e(number_format($counts->get('completed', 0), 0)); ?></div>
                </div>
                <div class="order-customer-stat">
                    <div class="order-customer-stat-label">Dalam Proses</div>
                    <div class="order-customer-stat-value"><?php echo e(number_format($counts->get('pending',0) + $counts->get('processing',0) + $counts->get('shipped',0), 0)); ?></div>
                </div>
            </div>

            
            <?php
                $tabs = [
                    ['key'=>'semua',      'label'=>'Semua',      'status'=>null],
                    ['key'=>'pending',    'label'=>'Pending',    'status'=>'pending'],
                    ['key'=>'processing', 'label'=>'Diproses',   'status'=>'processing'],
                    ['key'=>'shipped',    'label'=>'Dikirim',    'status'=>'shipped'],
                    ['key'=>'completed',  'label'=>'Selesai',    'status'=>'completed'],
                    ['key'=>'cancelled',  'label'=>'Dibatalkan', 'status'=>'cancelled'],
                ];
            ?>

            <div class="order-customer-tabs">
                <?php $__currentLoopData = $tabs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tab): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $url      = $tab['status']
                                    ? route('customer.orders.index', ['status' => $tab['status']])
                                    : route('customer.orders.index');
                        $isActive = $activeTab === $tab['key'];
                        $count    = $tab['status'] ? $counts->get($tab['status'], 0) : $counts->sum();
                    ?>
                    <a href="<?php echo e($url); ?>" class="order-customer-tab <?php echo e($isActive ? 'active' : ''); ?>">
                        <?php echo e($tab['label']); ?>

                        <?php if($count > 0): ?>
                            <span class="order-customer-tab-badge"><?php echo e(number_format($count, 0)); ?></span>
                        <?php endif; ?>
                    </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            
            <div class="order-customer-table">
                <?php if($orders->count() > 0): ?>

                    <div class="order-customer-thead">
                        <div class="order-customer-th">No. Pesanan</div>
                        <div class="order-customer-th">Tanggal & Waktu</div>
                        <div class="order-customer-th">Total</div>
                        <div class="order-customer-th">Status</div>
                        <div class="order-customer-th">Aksi</div>
                    </div>

                    <?php $__currentLoopData = $orders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $order): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $badgeClass = [
                                'pending' => 'order-customer-badge-pending',
                                'paid' => 'order-customer-badge-paid',
                                'processing' => 'order-customer-badge-processing',
                                'shipped' => 'order-customer-badge-shipped',
                                'completed' => 'order-customer-badge-completed',
                                'cancelled' => 'order-customer-badge-cancelled',
                            ];
                            $statusLabel = [
                                'pending' => 'Menunggu Bayar',
                                'paid' => 'Dibayar',
                                'processing' => 'Diproses',
                                'shipped' => 'Dikirim',
                                'completed' => 'Selesai',
                                'cancelled' => 'Dibatalkan',
                            ];
                            $bc = $badgeClass[$order->status] ?? 'order-customer-badge-pending';
                            $bl = $statusLabel[$order->status] ?? ucfirst($order->status);
                        ?>
                        <div class="order-customer-row">
                            <div>
                                <a href="<?php echo e(route('customer.orders.show', $order->id)); ?>" class="order-customer-number">
                                    #<?php echo e($order->order_number); ?>

                                </a>
                            </div>
                            <div>
                                <span class="order-customer-date"><?php echo e($order->created_at->format('d M Y')); ?></span>
                                <span class="order-customer-time"><?php echo e($order->created_at->format('H:i')); ?> WIB</span>
                            </div>
                            <div class="order-customer-total">Rp <?php echo e(number_format($order->total, 0, ',', '.')); ?></div>
                            <div>
                                <span class="order-customer-badge <?php echo e($bc); ?>"><?php echo e($bl); ?></span>
                            </div>
                            <div>
                                <a href="<?php echo e(route('customer.orders.show', $order->id)); ?>" class="order-customer-action">
                                    Detail
                                </a>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                <?php else: ?>
                    <div class="order-customer-empty">
                        <div class="order-customer-empty-title">
                            <?php if($activeTab !== 'semua'): ?>
                                Tidak ada pesanan "<?php echo e(ucfirst($activeTab)); ?>"
                            <?php else: ?>
                                Belum Ada Pesanan
                            <?php endif; ?>
                        </div>
                        <div class="order-customer-empty-desc">
                            <?php if($activeTab !== 'semua'): ?>
                                Coba pilih tab lain atau mulai belanja sekarang.
                            <?php else: ?>
                                Kamu belum pernah melakukan pembelian.
                            <?php endif; ?>
                        </div>
                        <a href="<?php echo e(route('products.index')); ?>" class="order-customer-empty-btn">
                            Mulai Belanja
                        </a>
                    </div>
                <?php endif; ?>
            </div>

            
            <?php if($orders->hasPages()): ?>
                <div class="order-customer-pagination">
                    <?php echo e($orders->links()); ?>

                </div>
            <?php endif; ?>

        </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/orders/orders.blade.php ENDPATH**/ ?>