<?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, []); ?> 
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div class="flex items-center">
                <div class="gradient-primary w-1 h-6 sm:h-8 rounded-full mr-3"></div>
                <h2 class="text-xl sm:text-2xl font-bold text-slate-800 flex items-center">
                    <i class="fas fa-shopping-bag mr-2 text-amber-600"></i>
                    <?php echo e(__('Manajemen Pesanan')); ?>

                </h2>
            </div>
        </div>
     <?php $__env->endSlot(); ?>

    <?php
    $statusColors = [
    'processing' => 'bg-amber-50 text-amber-700 border-amber-200',
    'shipped' => 'bg-blue-50 text-blue-700 border-blue-200',
    'delivered' => 'bg-purple-50 text-purple-700 border-purple-200',
    'completed' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
    'cancelled' => 'bg-rose-50 text-rose-700 border-rose-200',
    ];
    $statusLabels = [
    'processing' => 'Diproses',
    'shipped' => 'Dikirim',
    'delivered' => 'Dalam Pengantaran',
    'completed' => 'Selesai',
    'cancelled' => 'Dibatalkan',
    ];
    ?>

    <div class="space-y-4 sm:space-y-6">

            <?php if(session('error')): ?>
            <div class="mb-4 p-4 bg-gradient-to-r from-rose-600 to-red-600 text-white rounded-xl shadow-lg animate-fade-in flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <i class="fas fa-exclamation-circle text-xl"></i>
                    <span class="font-medium"><?php echo e(session('error')); ?></span>
                </div>
                <button onclick="this.parentElement.remove()" class="text-white/80 hover:text-white">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <?php endif; ?>

            
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5 sm:p-6 transition-all duration-200 hover:shadow-md">
                <h3 class="text-base font-semibold text-slate-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-search text-amber-600"></i>
                    Filter Pesanan
                </h3>
                <form method="GET" action="<?php echo e(route('admin.order.index')); ?>" class="flex flex-col lg:flex-row gap-3">
                    <div class="flex-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-search text-slate-400 text-sm"></i>
                        </div>
                        <input type="text" name="search" value="<?php echo e(request('search')); ?>"
                            placeholder="Cari pesanan (ID atau nama user)..."
                            class="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent transition placeholder:text-slate-400">
                    </div>
                    <div class="w-full lg:w-64 relative">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <i class="fas fa-filter text-slate-400 text-sm"></i>
                        </div>
                        <select name="status"
                            class="w-full pl-11 pr-10 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent appearance-none cursor-pointer text-slate-700">
                            <option value="">Semua Status</option>
                            <option value="processing" <?php echo e(request('status') == 'processing' ? 'selected' : ''); ?>>Diproses</option>
                            <option value="shipped" <?php echo e(request('status') == 'shipped' ? 'selected' : ''); ?>>Dikirim</option>
                            <option value="delivered" <?php echo e(request('status') == 'delivered' ? 'selected' : ''); ?>>Dalam Pengantaran</option>
                            <option value="completed" <?php echo e(request('status') == 'completed' ? 'selected' : ''); ?>>Selesai</option>
                            <option value="cancelled" <?php echo e(request('status') == 'cancelled' ? 'selected' : ''); ?>>Dibatalkan</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                            <i class="fas fa-chevron-down text-slate-400 text-xs"></i>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button type="submit"
                            class="px-6 py-3 btn-primary text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-2 whitespace-nowrap">
                            <i class="fas fa-search text-sm"></i>
                            <span>Cari</span>
                        </button>
                        <?php if(request('search') || request('status')): ?>
                        <a href="<?php echo e(route('admin.order.index')); ?>"
                            class="px-6 py-3 bg-slate-500 hover:bg-slate-600 text-white font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-2 whitespace-nowrap">
                            <i class="fas fa-undo-alt text-sm"></i>
                            <span>Reset</span>
                        </a>
                        <?php endif; ?>
                    </div>
                </form>
            </div>

            <?php if($orders->count() > 0): ?>
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-gradient-to-r from-slate-50 to-white">
                            <tr>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">ID Pesanan</th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Customer</th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Total</th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Status</th>
                                <th class="px-4 sm:px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Tanggal</th>
                                <th class="px-4 sm:px-6 py-4 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <?php $__currentLoopData = $orders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $order): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <?php
                            $statusClass = $statusColors[$order->status] ?? 'bg-slate-50 text-slate-700 border-slate-200';
                            $statusLabel = $statusLabels[$order->status] ?? ucfirst($order->status);
                            ?>
                            <tr class="hover:bg-slate-50 transition-colors duration-200">
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-amber-100 to-amber-50 rounded-xl flex items-center justify-center shadow-sm border border-amber-200">
                                            <i class="fas fa-receipt text-amber-600 text-sm"></i>
                                        </div>
                                        <div>
                                            <div class="text-sm font-semibold text-slate-800">#<?php echo e($order->order_id); ?></div>
                                            <div class="text-xs text-slate-500 mt-0.5"><?php echo e($order->items_count ?? 0); ?> item</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-slate-800"><?php echo e($order->user->name ?? '-'); ?></div>
                                    <div class="text-xs text-slate-500 mt-0.5 truncate max-w-[180px]"><?php echo e($order->user->email ?? ''); ?></div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-bold text-amber-600">Rp <?php echo e(number_format($order->total_price, 0, ',', '.')); ?></div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-full <?php echo e($statusClass); ?> border">
                                        <i class="fas fa-circle text-[6px]"></i>
                                        <?php echo e($statusLabel); ?>

                                    </span>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-slate-800"><?php echo e($order->created_at->translatedFormat('d M Y')); ?></div>
                                    <div class="text-xs text-slate-500 mt-0.5"><?php echo e($order->created_at->format('H:i')); ?> WIB</div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center justify-center gap-2">
                                        <a href="<?php echo e(route('admin.order.show', $order->order_id)); ?>"
                                            class="group relative w-9 h-9 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:shadow-lg hover:scale-110 transition-all duration-200 flex items-center justify-center"
                                            title="Lihat Detail">
                                            <i class="fas fa-eye text-sm"></i>
                                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                                                Detail
                                            </span>
                                        </a>
                                        <?php if(!in_array($order->status, ['completed', 'cancelled'])): ?>
                                        <button onclick="openStatusModal('<?php echo e($order->order_id); ?>', '<?php echo e($order->status); ?>')"
                                            class="group relative w-9 h-9 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl hover:shadow-lg hover:scale-110 transition-all duration-200 flex items-center justify-center"
                                            title="Update Status">
                                            <i class="fas fa-sync-alt text-sm"></i>
                                            <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                                                Update
                                            </span>
                                        </button>
                                        <?php endif; ?>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </tbody>
                    </table>
                </div>
            </div>

            
            <?php if($orders->hasPages()): ?>
            <div class="mt-4">
                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <span class="text-xs text-slate-600">
                            Menampilkan <?php echo e($orders->firstItem()); ?> - <?php echo e($orders->lastItem()); ?> dari <?php echo e($orders->total()); ?> pesanan
                        </span>
                        <div class="flex items-center gap-1">
                            <?php echo e($orders->onEachSide(1)->links()); ?>

                        </div>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <?php else: ?>
            
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
                <div class="py-12 sm:py-16 md:py-20 text-center">
                    <div class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 mx-auto bg-gradient-to-br from-slate-100 to-slate-50 rounded-2xl flex items-center justify-center shadow-sm border border-slate-200 mb-4 sm:mb-6">
                        <i class="fas fa-shopping-bag text-4xl sm:text-5xl text-slate-400"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-slate-800 mb-2">Belum Ada Pesanan</h3>
                    <p class="text-sm text-slate-600">Belum ada pesanan yang masuk ke sistem.</p>
                </div>
            </div>
            <?php endif; ?>

    </div>


    
<div id="statusModalBackdrop" 
     class="hidden fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50"
     style="display:none;">
</div>
<div id="statusModal" 
     class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
     style="display:none; pointer-events:none;">
    <div id="statusModalCard"
         class="bg-white rounded-2xl shadow-2xl border border-slate-200 w-full max-w-md"
         style="pointer-events:auto;">
        <div class="p-6">
            <div class="mx-auto flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-amber-100 to-amber-50 mb-4 border border-amber-200">
                <i class="fas fa-sync-alt text-2xl text-amber-600"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 text-center mb-2">Update Status Pesanan</h3>
            <p class="text-sm text-slate-600 text-center mb-6">
                Pilih status baru untuk pesanan
                <span id="orderIdDisplay" class="font-semibold text-amber-600"></span>
            </p>
            <form id="statusForm" method="POST">
                <?php echo csrf_field(); ?>
                <?php echo method_field('PUT'); ?>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
                    <select name="status"
                        class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent appearance-none cursor-pointer text-slate-700">
                    </select>
                </div>
                <div class="flex gap-3">
                    <button type="button" onclick="closeStatusModal()"
                        class="flex-1 px-4 py-3 bg-slate-100 text-slate-700 font-medium rounded-xl text-sm hover:bg-slate-200 transition-colors duration-200 border border-slate-300">
                        <i class="fas fa-times mr-2"></i>Batal
                    </button>
                    <button type="submit"
                        class="flex-1 px-4 py-3 btn-primary text-white font-medium rounded-xl text-sm shadow-md hover:shadow-lg transition-all duration-200">
                        <i class="fas fa-save mr-2"></i>Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const statusFlow = {
        processing: { shipped: 'Dikirim' },
        shipped:    { delivered: 'Hampir Tiba' },
        delivered:  { completed: 'Selesai' },
    };

    const statusLabels = {
        processing: 'Sedang Dikemas',
        shipped:    'Dikirim',
        delivered:  'Hampir Tiba',
        completed:  'Selesai',
        cancelled:  'Dibatalkan',
    };

    function openStatusModal(orderId, currentStatus) {
        const backdrop = document.getElementById('statusModalBackdrop');
        const modal    = document.getElementById('statusModal');
        const form     = document.getElementById('statusForm');
        const select   = form.querySelector('select[name="status"]');

        document.getElementById('orderIdDisplay').textContent = '#' + orderId;
        form.action = "<?php echo e(route('admin.order.update-status', ':id')); ?>".replace(':id', orderId);

        // Rebuild options
        select.innerHTML = '';

        const placeholder = new Option(
            (statusLabels[currentStatus] ?? currentStatus) + ' (saat ini)', '', true, true
        );
        placeholder.disabled = true;
        select.add(placeholder);

        const nextOptions = statusFlow[currentStatus] ?? {};
        for (const [value, label] of Object.entries(nextOptions)) {
            select.add(new Option(label, value));
        }
        select.add(new Option('Dibatalkan', 'cancelled'));

        // Tampilkan — backdrop & modal terpisah
        backdrop.style.display = 'block';
        modal.style.display    = 'flex';
        document.body.style.overflow = 'hidden';
    }

    function closeStatusModal() {
        document.getElementById('statusModalBackdrop').style.display = 'none';
        document.getElementById('statusModal').style.display         = 'none';
        document.body.style.overflow = '';
    }

    // Klik backdrop = tutup modal
    document.getElementById('statusModalBackdrop').addEventListener('click', function () {
        closeStatusModal();
    });
</script>
 <?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\interia\resources\views/orders/admin/index.blade.php ENDPATH**/ ?>