<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Pesanan Saya - Glow Beauty</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <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=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        * { font-family: 'Poppins', 'Inter', sans-serif; }
        body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; background: linear-gradient(135deg, #fdf2f8 0%, #fff1f3 100%); }
        .nav-link { transition: all 0.2s ease; padding: 0.5rem 1rem; border-radius: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; }
        .nav-link:hover { background-color: #fef2f8; color: #ec489a; }
        .active-nav { background-color: #fef2f8; color: #ec489a; font-weight: 600; }
        .order-card { transition: all 0.3s ease; border: 1px solid #fbcfe8; background: white; }
        .order-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(244,114,182,0.15), 0 10px 10px -5px rgba(0,0,0,0.04); border-color: #f9a8d4; }
        .status-badge { transition: all 0.2s ease; }
        .status-badge:hover { transform: scale(1.05); }
        .btn-primary { background: linear-gradient(135deg, #f472b6 0%, #ec489a 100%); transition: all 0.3s ease; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(244, 114, 182, 0.3); }
        .action-btn { transition: all 0.2s ease; }
        .action-btn:hover { transform: translateY(-2px); }
        .empty-state { animation: fadeInUp 0.6s ease; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .filter-btn { transition: all 0.2s ease; cursor: pointer; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
        .filter-btn:hover { transform: translateY(-2px); filter: brightness(0.95); }
        .filter-btn.active { border: 2px solid #f472b6; box-shadow: 0 0 0 2px rgba(244,114,182,0.3); }
        .filter-btn[data-filter="all"]        { background-color: #f472b6 !important; color: white !important; }
        .filter-btn[data-filter="pending"]    { background-color: #fef3c7 !important; color: #b45309 !important; }
        .filter-btn[data-filter="dibayar"]    { background-color: #dbeafe !important; color: #1e40af !important; }
        .filter-btn[data-filter="diproses"]   { background-color: #fed7aa !important; color: #c2410c !important; }
        .filter-btn[data-filter="dikirim"]    { background-color: #f3e8ff !important; color: #6b21a8 !important; }
        .filter-btn[data-filter="selesai"]    { background-color: #d1fae5 !important; color: #065f46 !important; }
        .filter-btn[data-filter="dibatalkan"] { background-color: #fee2e2 !important; color: #b91c1c !important; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
        .notification-badge { animation: pulse 2s infinite; }
        .modal-enter { animation: modalFadeIn 0.3s ease; }
        @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
        .star-btn { transition: transform 0.15s ease; }
        .star-btn:hover { transform: scale(1.15); }
        @keyframes ulasModalIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
        .ulas-modal-content { animation: ulasModalIn 0.25s ease; }
        @keyframes chatPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
        .chat-badge { animation: chatPulse 2s infinite; }
        @keyframes invoiceModalIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
        .invoice-modal-content { animation: invoiceModalIn 0.25s ease; }
        .invoice-sent-badge {
            background-color: #10b981;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .border-pink-light { border-color: #fbcfe8; }
    </style>
</head>
<body class="min-h-screen">

    <!-- NAVBAR -->
    <nav class="bg-white/95 backdrop-blur-md border-b border-pink-light shadow-sm sticky top-0 z-50 w-full">
        <div class="px-4 sm:px-6 lg:px-8 py-3">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex items-center gap-3 mb-3 md:mb-0">
                    <div class="w-10 h-10 bg-gradient-to-br from-pink-400 to-pink-500 rounded-lg flex items-center justify-center shadow-md">
                        <span class="text-white font-bold text-lg">✨</span>
                    </div>
                    <div>
                        <h1 class="font-bold text-lg text-gray-800">Glow Beauty</h1>
                        <p class="text-xs text-pink-400">Manajemen Pesanan Skincare</p>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-1">
                    <a href="<?php echo e(route('dashboard')); ?>" class="nav-link text-gray-700 hover:text-pink-600 <?php echo e(request()->routeIs('dashboard') ? 'active-nav' : ''); ?>">
                        <i class="fas fa-home"></i> Dashboard
                    </a>
                    <a href="<?php echo e(route('produk.index')); ?>" class="nav-link text-gray-700 hover:text-pink-600 <?php echo e(request()->routeIs('produk.*') ? 'active-nav' : ''); ?>">
                        <i class="fas fa-store"></i> Produk Skincare
                    </a>
                    <?php $jumlahKeranjang = \App\Models\Keranjang::where('user_id', auth()->id())->count(); ?>
                    <a href="/keranjang" class="relative nav-link text-gray-700 hover:text-pink-600 <?php echo e(request()->is('keranjang*') ? 'active-nav' : ''); ?>">
                        <i class="fas fa-shopping-cart"></i> Keranjang
                        <?php if(isset($jumlahKeranjang) && $jumlahKeranjang > 0): ?>
                            <span class="absolute -top-1 -right-2 bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full leading-none"><?php echo e($jumlahKeranjang); ?></span>
                        <?php endif; ?>
                    </a>
                    <a href="<?php echo e(route('pesanan.index')); ?>" class="nav-link active-nav">
                        <i class="fas fa-clipboard-list"></i> Pesanan
                    </a>
                    <?php
                        $unreadChatCount = 0;
                        $chats = \App\Models\Chat::where('user_id', auth()->id())->get();
                        foreach ($chats as $chatItem) {
                            $unreadChatCount += \App\Models\ChatMessage::where('chat_id', $chatItem->id)
                                ->where('sender_id', $chatItem->penjual_id)
                                ->where('is_read', false)->count();
                        }
                    ?>
                    <a href="<?php echo e(route('chat.index')); ?>" class="nav-link text-gray-700 hover:text-pink-600 <?php echo e(request()->routeIs('chat.*') ? 'active-nav' : ''); ?> relative">
                        <i class="fas fa-comments"></i> Chat
                        <?php if($unreadChatCount > 0): ?>
                            <span class="absolute -top-1 -right-2 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full chat-badge"><?php echo e($unreadChatCount); ?></span>
                        <?php endif; ?>
                    </a>
                </div>

                <!-- USER MENU -->
                <div class="flex items-center gap-2 mt-3 md:mt-0">
                    <?php if(Auth::user()->role == 'penjual'): ?>
                    <div class="relative" id="notifWrapper">
                        <button onclick="toggleNotif(event)" class="relative p-2.5 text-gray-600 hover:text-pink-600 hover:bg-pink-50 rounded-full transition-all duration-200">
                            <i class="fas fa-bell text-lg"></i>
                            <span id="notifBadge" class="absolute top-1 right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs hidden items-center justify-center font-bold">0</span>
                        </button>
                        <div id="notifDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-2xl border border-pink-100 z-50 overflow-hidden" style="animation: fadeInDown 0.2s ease">
                            <div class="bg-gradient-to-r from-pink-400 to-pink-500 px-4 py-3 flex items-center justify-between">
                                <span class="text-white font-semibold text-sm flex items-center gap-2"><i class="fas fa-exclamation-triangle"></i> Stok Skincare Hampir Habis</span>
                                <a href="<?php echo e(route('restok.index')); ?>" class="text-white/80 hover:text-white text-xs underline">Kelola Restok →</a>
                            </div>
                            <div id="notifList" class="max-h-72 overflow-y-auto divide-y divide-gray-50">
                                <div class="px-4 py-5 text-center text-gray-400 text-sm"><i class="fas fa-spinner fa-spin mr-2"></i> Memuat...</div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

                    <div class="relative" id="userDropdown">
                        <button onclick="toggleUserDropdown(event)" class="flex items-center gap-3 px-3 py-2 hover:bg-pink-50 rounded-xl transition-all duration-200 border border-transparent hover:border-pink-200 group">
                            <div class="w-9 h-9 bg-gradient-to-br from-pink-400 to-pink-500 rounded-full flex items-center justify-center text-white font-semibold shadow-md">
                                <?php echo e(substr(Auth::user()->name, 0, 1)); ?>

                            </div>
                            <div class="hidden md:block text-left">
                                <p class="text-sm font-medium text-gray-700 group-hover:text-pink-600"><?php echo e(Auth::user()->name); ?></p>
                                <p class="text-xs text-gray-500">
                                    <?php if(Auth::user()->role == 'penjual'): ?> <i class="fas fa-store mr-1 text-pink-500"></i> Penjual Skincare
                                    <?php elseif(Auth::user()->role == 'admin'): ?> <i class="fas fa-shield-alt mr-1 text-purple-500"></i> Admin
                                    <?php else: ?> <i class="fas fa-user mr-1 text-pink-500"></i> Customer <?php endif; ?>
                                </p>
                            </div>
                            <i class="fas fa-chevron-down text-sm text-gray-400 group-hover:text-pink-600 transition-transform duration-200" id="dropdownIcon"></i>
                        </button>

                        <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-100 py-2 z-50">
                            <div class="px-4 py-4 border-b border-gray-100">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 bg-gradient-to-br from-pink-400 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-md">
                                        <?php echo e(substr(Auth::user()->name, 0, 1)); ?>

                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-800"><?php echo e(Auth::user()->name); ?></p>
                                        <p class="text-sm text-gray-500"><?php echo e(Auth::user()->email); ?></p>
                                        <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium <?php if(Auth::user()->role == 'penjual'): ?> bg-pink-100 text-pink-600 <?php elseif(Auth::user()->role == 'admin'): ?> bg-purple-100 text-purple-600 <?php else: ?> bg-pink-100 text-pink-600 <?php endif; ?>">
                                            <?php if(Auth::user()->role == 'penjual'): ?> <i class="fas fa-store mr-1"></i> Penjual Skincare
                                            <?php elseif(Auth::user()->role == 'admin'): ?> <i class="fas fa-shield-alt mr-1"></i> Admin
                                            <?php else: ?> <i class="fas fa-user mr-1"></i> Customer <?php endif; ?>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <?php if(Auth::user()->role == 'penjual'): ?>
                                <?php $toko = App\Models\Toko::where('user_id', auth()->id())->first(); ?>
                                <?php if($toko): ?>
                                    <a href="<?php echo e(route('toko.edit', $toko->id)); ?>" class="flex items-center gap-3 px-4 py-3 hover:bg-pink-50 text-gray-700 transition group">
                                        <div class="w-8 h-8 bg-pink-100 rounded-lg flex items-center justify-center group-hover:bg-pink-200"><i class="fas fa-store text-pink-600"></i></div>
                                        <div><p class="font-medium">Pengaturan Toko Skincare</p><p class="text-xs text-gray-500">Kelola informasi toko Anda</p></div>
                                    </a>
                                <?php else: ?>
                                    <a href="<?php echo e(route('toko.create')); ?>" class="flex items-center gap-3 px-4 py-3 hover:bg-pink-50 text-gray-700 transition group">
                                        <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200"><i class="fas fa-store-alt text-green-600"></i></div>
                                        <div><p class="font-medium">Buka Toko Skincare</p><p class="text-xs text-gray-500">Mulai berjualan sekarang</p></div>
                                    </a>
                                <?php endif; ?>
                            <?php else: ?>
                                <a href="<?php echo e(route('profile.edit')); ?>" class="flex items-center gap-3 px-4 py-3 hover:bg-pink-50 text-gray-700 transition group">
                                    <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center group-hover:bg-pink-100"><i class="fas fa-user text-gray-500 group-hover:text-pink-600"></i></div>
                                    <div><p class="font-medium">Profil Saya</p><p class="text-xs text-gray-500">Lihat dan edit profil</p></div>
                                </a>
                            <?php endif; ?>

                            <div class="border-t border-gray-100 mt-1 pt-1">
                                <form method="POST" action="<?php echo e(route('logout')); ?>">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="w-full flex items-center gap-3 px-4 py-3 hover:bg-red-50 text-red-600 transition group">
                                        <div class="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center group-hover:bg-red-100"><i class="fas fa-sign-out-alt text-red-500"></i></div>
                                        <div class="text-left"><p class="font-medium">Keluar</p><p class="text-xs text-red-400">Akhiri sesi</p></div>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- MAIN CONTENT -->
    <div class="w-full px-4 sm:px-6 lg:px-8 py-6">

<?php if(session('success')): ?>
<div id="toast-success"
    class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border border-green-200 shadow-2xl rounded-2xl px-5 py-4 max-w-sm w-full"
    style="animation: slideInRight 0.4s ease;">
    <div class="w-10 h-10 bg-green-500 rounded-xl flex items-center justify-center flex-shrink-0">
        <i class="fas fa-check text-white text-sm"></i>
    </div>
    <div class="flex-1 min-w-0">
        <p class="font-semibold text-gray-800 text-sm">Berhasil!</p>
        <p class="text-gray-500 text-xs mt-0.5"><?php echo e(session('success')); ?></p>
    </div>
    <button onclick="closeToast('toast-success')" class="text-gray-400 hover:text-gray-600 flex-shrink-0 ml-1">
        <i class="fas fa-times text-xs"></i>
    </button>
    <div class="absolute bottom-0 left-0 h-1 bg-green-500 rounded-b-2xl toastProgress"
        style="width: 100%; transition: width 5s linear;"></div>
</div>
<?php endif; ?>

<?php if(session('error')): ?>
<div id="toast-error"
    class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border border-red-200 shadow-2xl rounded-2xl px-5 py-4 max-w-sm w-full"
    style="animation: slideInRight 0.4s ease;">
    <div class="w-10 h-10 bg-red-500 rounded-xl flex items-center justify-center flex-shrink-0">
        <i class="fas fa-times text-white text-sm"></i>
    </div>
    <div class="flex-1 min-w-0">
        <p class="font-semibold text-gray-800 text-sm">Gagal!</p>
        <p class="text-gray-500 text-xs mt-0.5"><?php echo e(session('error')); ?></p>
    </div>
    <button onclick="closeToast('toast-error')" class="text-gray-400 hover:text-gray-600 flex-shrink-0 ml-1">
        <i class="fas fa-times text-xs"></i>
    </button>
    <div class="absolute bottom-0 left-0 h-1 bg-red-500 rounded-b-2xl toastProgress"
        style="width: 100%; transition: width 5s linear;"></div>
</div>
<?php endif; ?>

<?php if(session('warning')): ?>
<div id="toast-warning"
    class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border border-yellow-200 shadow-2xl rounded-2xl px-5 py-4 max-w-sm w-full"
    style="animation: slideInRight 0.4s ease;">
    <div class="w-10 h-10 bg-yellow-500 rounded-xl flex items-center justify-center flex-shrink-0">
        <i class="fas fa-exclamation text-white text-sm"></i>
    </div>
    <div class="flex-1 min-w-0">
        <p class="font-semibold text-gray-800 text-sm">Perhatian!</p>
        <p class="text-gray-500 text-xs mt-0.5"><?php echo e(session('warning')); ?></p>
    </div>
    <button onclick="closeToast('toast-warning')" class="text-gray-400 hover:text-gray-600 flex-shrink-0 ml-1">
        <i class="fas fa-times text-xs"></i>
    </button>
    <div class="absolute bottom-0 left-0 h-1 bg-yellow-500 rounded-b-2xl toastProgress"
        style="width: 100%; transition: width 5s linear;"></div>
</div>
<?php endif; ?>

<style>
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(100px); }
}
</style>

<script>
    // Jalankan progress bar semua toast
    setTimeout(() => {
        document.querySelectorAll('.toastProgress').forEach(bar => bar.style.width = '0%');
    }, 100);

    // Auto-hide semua toast setelah 5 detik
    setTimeout(() => {
        ['toast-success', 'toast-error', 'toast-warning'].forEach(id => closeToast(id));
    }, 5100);

    function closeToast(id) {
        const toast = document.getElementById(id);
        if (toast) {
            toast.style.animation = 'slideOutRight 0.3s ease forwards';
            setTimeout(() => toast.remove(), 300);
        }
    }
</script>

        <!-- PAGE HEADER - PESANAN SAYA -->
        <div class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 p-6 text-white shadow-xl w-full">
            
            <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
                <i class="fas fa-clipboard-list text-8xl absolute top-10 right-10"></i>
                <i class="fas fa-box text-7xl absolute bottom-0 right-32"></i>
                <i class="fas fa-truck text-6xl absolute top-20 right-48"></i>
                <i class="fas fa-spa text-7xl absolute bottom-10 left-10"></i>
            </div>
            <div class="absolute bottom-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -ml-16 -mb-16"></div>
            
            <div class="relative flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                
                <div class="flex-1">
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center shadow-inner border border-white/30">
                            <i class="fas fa-clipboard-list text-white text-2xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl md:text-3xl font-bold text-white">Pesanan Saya</h1>
                            <p class="text-pink-100 text-sm md:text-base">Kelola dan lacak semua pesanan skincare Anda di sini</p>
                        </div>
                    </div>
                    
                    
                    <div class="flex flex-wrap items-center gap-3 mt-4">
                        <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                            <i class="fas fa-chart-line text-pink-200 text-xs"></i>
                            <span class="text-pink-100 text-sm">Total:</span>
                            <span class="font-bold text-white"><?php echo e($totalPesanan ?? 0); ?></span>
                        </div>
                        <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                            <i class="fas fa-clock text-pink-200 text-xs"></i>
                            <span class="text-pink-100 text-sm">Belum Dibayar:</span>
                            <span class="font-bold text-white"><?php echo e($pendingCount ?? 0); ?></span>
                        </div>
                        <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                            <i class="fas fa-truck text-pink-200 text-xs"></i>
                            <span class="text-pink-100 text-sm">Dikirim:</span>
                            <span class="font-bold text-white"><?php echo e($dikirimCount ?? 0); ?></span>
                        </div>
                        <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                            <i class="fas fa-check-circle text-pink-200 text-xs"></i>
                            <span class="text-pink-100 text-sm">Selesai:</span>
                            <span class="font-bold text-white"><?php echo e($selesaiCount ?? 0); ?></span>
                        </div>
                        <div class="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-xl">
                            <i class="fas fa-times-circle text-pink-200 text-xs"></i>
                            <span class="text-pink-100 text-sm">Dibatalkan:</span>
                            <span class="font-bold text-white"><?php echo e($dibatalkanCount ?? 0); ?></span>
                        </div>
                    </div>
                </div>
                
                
                <div class="flex-shrink-0">
                    <a href="/produk" 
                    class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold bg-white text-pink-600 hover:bg-pink-50 transition-all shadow-lg hover:shadow-xl transform hover:scale-105 duration-200">
                        <i class="fas fa-shopping-bag"></i> Belanja Skincare Lagi
                    </a>
                </div>
            </div>
        </div>

<!-- FILTER & SEARCH -->
<div class="bg-white rounded-xl shadow-lg border border-pink-100 p-5 mb-6 w-full">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div class="flex items-center gap-2 overflow-x-auto pb-2 lg:pb-0">
            <span class="text-sm font-medium text-gray-700 mr-2 flex items-center gap-1">
                <i class="fas fa-filter text-pink-500"></i> Filter Status:
            </span>
            <button class="filter-btn px-4 py-2 text-sm rounded-lg font-medium flex items-center gap-1 transition-all duration-200 border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500" data-filter="all">
                <i class="fas fa-list"></i> Semua
            </button>
            <button class="filter-btn px-4 py-2 text-sm rounded-lg font-medium flex items-center gap-1 transition-all duration-200 border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500" data-filter="pending">
                <i class="fas fa-clock"></i> Pending
            </button>
            <button class="filter-btn px-4 py-2 text-sm rounded-lg font-medium flex items-center gap-1 transition-all duration-200 border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500" data-filter="dibayar">
                <i class="fas fa-credit-card"></i> Dibayar
            </button>
            <button class="filter-btn px-4 py-2 text-sm rounded-lg font-medium flex items-center gap-1 transition-all duration-200 border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500" data-filter="diproses">
                <i class="fas fa-box-open"></i> Diproses
            </button>
            <button class="filter-btn px-4 py-2 text-sm rounded-lg font-medium flex items-center gap-1 transition-all duration-200 border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500" data-filter="dikirim">
                <i class="fas fa-truck"></i> Dikirim
            </button>
            <button class="filter-btn px-4 py-2 text-sm rounded-lg font-medium flex items-center gap-1 transition-all duration-200 border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500" data-filter="selesai">
                <i class="fas fa-check-circle"></i> Selesai
            </button>
            <button class="filter-btn px-4 py-2 text-sm rounded-lg font-medium flex items-center gap-1 transition-all duration-200 border border-pink-200 bg-white text-gray-600 hover:border-pink-400 hover:text-pink-500" data-filter="dibatalkan">
                <i class="fas fa-times-circle"></i> Dibatalkan
            </button>
        </div>
        <div class="flex items-center gap-2">
            <div class="relative border border-pink-200 rounded-lg">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <i class="fas fa-search text-gray-400"></i>
                </div>
                <input type="text" id="searchInput" placeholder="Cari kode pesanan..."
                    class="pl-10 pr-4 py-2.5 border-none rounded-lg focus:ring-2 focus:ring-pink-500 focus:outline-none w-full lg:w-80 bg-white">
            </div>
            <a href="<?php echo e(route('pesanan.index')); ?>" title="Reset Filter" 
               class="p-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center justify-center border border-pink-200">
                <i class="fas fa-undo-alt"></i>
            </a>
        </div>
    </div>
</div>

        <?php if($pesanan->isEmpty()): ?>
            <div class="bg-white rounded-2xl shadow-lg border border-pink-100 p-12 text-center empty-state w-full">
                <div class="mx-auto w-24 h-24 bg-pink-50 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-clipboard-list text-pink-400 text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-3">Belum Ada Pesanan Skincare</h3>
                <p class="text-gray-500 mb-8 max-w-md mx-auto">Anda belum melakukan pemesanan skincare. Yuk, mulai belanja sekarang!</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="/produk" class="btn-primary text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center gap-2 action-btn shadow-lg">
                        <i class="fas fa-shopping-bag"></i> Mulai Belanja Skincare
                    </a>
                    <a href="<?php echo e(route('dashboard')); ?>" class="px-6 py-3 rounded-lg font-semibold border-2 border-pink-200 text-gray-700 hover:bg-pink-50 inline-flex items-center justify-center gap-2 transition-all">
                        <i class="fas fa-home"></i> Ke Dashboard
                    </a>
                </div>
            </div>
        <?php else: ?>
            <div class="space-y-6 w-full" id="ordersList">
                <?php $__currentLoopData = $pesanan; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php
                        $statusDisplay = $item->status;
                        $statusLabel = strtoupper($item->status);
                        $additionalLabel = '';
                        if($item->kurirAssignment) {
                            $assignment = $item->kurirAssignment;
                            if($assignment->status == 'ditugaskan') { $statusDisplay = 'diproses'; $statusLabel = 'DIPROSES'; $additionalLabel = '(DIKEMAS)'; }
                            elseif(in_array($assignment->status, ['dijemput', 'diantar'])) { $statusDisplay = 'dikirim'; $statusLabel = 'DIKIRIM'; }
                            elseif($assignment->status == 'selesai') { $statusDisplay = 'selesai'; $statusLabel = 'SELESAI'; }
                        }
                        $statusIcon = match($statusDisplay) {
                            'pending' => 'fa-clock', 'dibayar' => 'fa-credit-card', 'diproses' => 'fa-box-open',
                            'dikirim' => 'fa-truck', 'selesai' => 'fa-check-circle', 'dibatalkan' => 'fa-times-circle', default => 'fa-circle'
                        };
                        $statusColor = match($statusDisplay) {
                            'pending' => 'bg-yellow-100 text-yellow-700 border-yellow-200', 'dibayar' => 'bg-blue-100 text-blue-700 border-blue-200',
                            'diproses' => 'bg-pink-100 text-pink-700 border-pink-200', 'dikirim' => 'bg-purple-100 text-purple-700 border-purple-200',
                            'selesai' => 'bg-green-100 text-green-700 border-green-200', 'dibatalkan' => 'bg-red-100 text-red-700 border-red-200', default => 'bg-gray-100 text-gray-700 border-gray-200'
                        };
                        $trackingProgress = match($statusDisplay) {
                            'pending' => '25%', 'dibayar' => '50%', 'diproses' => '50%', 'dikirim' => '75%', 'selesai' => '100%', default => '0%'
                        };
                        $chat = \App\Models\Chat::where('pesanan_id', $item->id)->first();
                        $unreadChatMessages = 0;
                        if ($chat) {
                            $unreadChatMessages = \App\Models\ChatMessage::where('chat_id', $chat->id)
                                ->where('sender_id', $chat->penjual_id)->where('is_read', false)->count();
                        }
                        
                        // Cek apakah invoice sudah dikirim oleh penjual
                        $invoiceSent = false;
                        if($item->invoice_sent_at) {
                            $invoiceSent = true;
                        }
                    ?>

                    <div class="bg-white rounded-xl shadow-lg border border-pink-100 overflow-hidden order-card w-full"
                         data-status="<?php echo e($statusDisplay); ?>" data-kode="<?php echo e($item->kode_pesanan); ?>">

                        <!-- HEADER CARD -->
                        <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center px-6 py-4 border-b border-pink-100 bg-gradient-to-r from-pink-50/50 to-white">
                            <div class="flex items-start gap-3">
                                <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-receipt text-pink-600"></i>
                                </div>
                                <div>
                                    <div class="flex items-center gap-3 mb-1">
                                        <p class="text-xs font-medium text-gray-500 uppercase tracking-wider flex items-center gap-1">
                                            <i class="fas fa-hashtag"></i> Kode Pesanan
                                        </p>
                                        <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-md font-mono">#<?php echo e($loop->iteration); ?></span>
                                    </div>
                                    <h3 class="font-bold text-gray-800 text-lg mb-1"><?php echo e($item->kode_pesanan); ?></h3>
                                    <div class="flex items-center gap-3 text-sm">
                                       <span class="text-gray-500 flex items-center gap-2 flex-wrap">
    <span class="flex items-center gap-1"><i class="fas fa-calendar-alt text-pink-400"></i> <?php echo e($item->created_at->format('d M Y')); ?></span>
    <span class="text-gray-300">|</span>
    <span class="flex items-center gap-1"><i class="fas fa-clock text-pink-400"></i> <?php echo e($item->created_at->format('H:i')); ?> WIB</span>
    <span class="text-gray-300">|</span>
    <span class="flex items-center gap-1"><i class="fas fa-history text-pink-400"></i> <?php echo e($item->created_at->diffForHumans()); ?></span>
</span>
                                        <span class="text-gray-300">|</span>
                                        <span class="text-gray-500 flex items-center gap-1">
                                            <i class="far fa-user text-pink-400"></i>
                                            <?php echo e($item->alamat->nama_penerima ?? '-'); ?>

                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-3 mt-4 lg:mt-0">
                                <span class="status-badge px-3 py-1.5 rounded-full text-xs font-semibold <?php echo e($statusColor); ?> border flex items-center gap-1">
                                    <i class="fas <?php echo e($statusIcon); ?>"></i> <?php echo e($statusLabel); ?>

                                    <?php if($additionalLabel): ?><span class="text-xs bg-white/30 px-2 py-0.5 rounded-full"><?php echo e($additionalLabel); ?></span><?php endif; ?>
                                </span>
                                <?php if($item->status == 'pending'): ?>
                                    <span class="bg-red-100 text-red-700 px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
                                        <i class="fas fa-exclamation-circle"></i> Belum Dibayar
                                    </span>
                                <?php endif; ?>
                                <?php if($chat && $unreadChatMessages > 0): ?>
                                    <span class="bg-red-100 text-red-700 px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
                                        <i class="fas fa-comment"></i> <?php echo e($unreadChatMessages); ?> pesan baru
                                    </span>
                                <?php endif; ?>
                                <?php if($invoiceSent): ?>
                                    <span class="invoice-sent-badge">
                                        <i class="fas fa-check-circle"></i> Invoice Terkirim
                                    </span>
                                <?php endif; ?>
                            </div>
                        </div>

                        <!-- INFO KURIR -->
                        <?php if($item->kurirAssignment && $item->kurir): ?>
                        <div class="px-6 py-2 bg-pink-50/50 border-b border-pink-100 flex flex-wrap items-center gap-4 text-xs">
                            <span class="flex items-center gap-1"><i class="fas fa-truck text-pink-500"></i> Kurir: <span class="font-medium"><?php echo e($item->kurir->name); ?></span></span>
                            <span class="flex items-center gap-1"><i class="fas fa-phone-alt text-pink-500"></i> <?php echo e($item->kurir->no_hp); ?></span>
                            <?php if($item->kurirAssignment->status == 'ditugaskan'): ?> <span class="flex items-center gap-1 text-blue-600"><i class="fas fa-clock"></i> Menunggu dijemput kurir</span>
                            <?php elseif($item->kurirAssignment->status == 'dijemput'): ?> <span class="flex items-center gap-1 text-yellow-600"><i class="fas fa-box"></i> Kurir sudah menjemput</span>
                            <?php elseif($item->kurirAssignment->status == 'diantar'): ?> <span class="flex items-center gap-1 text-purple-600"><i class="fas fa-truck"></i> Pesanan sedang diantar</span>
                            <?php elseif($item->kurirAssignment->status == 'selesai'): ?> <span class="flex items-center gap-1 text-green-600"><i class="fas fa-check-circle"></i> Pesanan telah diterima</span>
                            <?php endif; ?>
                        </div>
                        <?php endif; ?>

                        <!-- TRACKING PROGRESS -->
                        <?php if(in_array($statusDisplay, ['pending', 'dibayar', 'diproses', 'dikirim'])): ?>
                        <div class="px-6 py-4 bg-gray-50/50 border-b border-gray-100">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700 flex items-center gap-1"><i class="fas fa-truck text-pink-500"></i> Status Pengiriman</span>
                                <span class="text-sm font-medium text-pink-600 flex items-center gap-1"><i class="fas <?php echo e($statusIcon); ?>"></i> <?php echo e(ucfirst($statusDisplay)); ?></span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-gradient-to-r from-pink-400 to-pink-500 h-2 rounded-full transition-all duration-500" style="<?php echo \Illuminate\Support\Arr::toCssStyles(['width' => $trackingProgress . '%']) ?>"></div>
                            </div>
                            <div class="flex justify-between mt-2 text-xs text-gray-500">
                                <span class="flex items-center gap-1"><i class="fas fa-check-circle text-green-500"></i> Dibuat</span>
                                <span class="flex items-center gap-1"><i class="fas <?php echo e(in_array($statusDisplay, ['dibayar', 'diproses', 'dikirim', 'selesai']) ? 'fa-spinner fa-spin text-blue-500' : 'fa-circle text-gray-300'); ?>"></i> Diproses</span>
                                <span class="flex items-center gap-1"><i class="fas <?php echo e(in_array($statusDisplay, ['dikirim', 'selesai']) ? 'fa-truck text-purple-500' : 'fa-circle text-gray-300'); ?>"></i> Dikirim</span>
                                <span class="flex items-center gap-1"><i class="fas <?php echo e($statusDisplay == 'selesai' ? 'fa-check-circle text-green-500' : 'fa-circle text-gray-300'); ?>"></i> Selesai</span>
                            </div>
                        </div>
                        <?php endif; ?>

                        <!-- PRODUCT SUMMARY -->
                        <div class="px-6 py-4">
                            <div class="flex items-center gap-4 mb-4">
                                <div class="flex -space-x-2">
                                    <?php for($i = 0; $i < min(3, count($item->detail)); $i++): ?>
                                    <?php
                                        $detail = $item->detail[$i];
                                        $fotoTampil = null;
                                        if(!empty($detail->produk->foto)){
                                            $allPhotos = explode('|', $detail->produk->foto);
                                            $warnaDipesan = strtolower(trim($detail->warna));
                                            foreach($allPhotos as $p) {
                                                if(str_contains($p, ':')) {
                                                    $parts = explode(':', $p);
                                                    if(strtolower(trim($parts[0])) === $warnaDipesan) { $fotoTampil = $parts[1]; break; }
                                                }
                                            }
                                            if (!$fotoTampil) { $first = $allPhotos[0]; $fotoTampil = str_contains($first, ':') ? explode(':', $first)[1] : $first; }
                                        }
                                    ?>
                                    <div class="w-8 h-8 rounded-lg border-2 border-white shadow-sm overflow-hidden bg-gray-100">
                                        <?php if($fotoTampil): ?>
                                            <img src="<?php echo e(asset('storage/'.$fotoTampil)); ?>" class="w-full h-full object-cover" onerror="this.onerror=null; this.src='/images/no-image.png';">
                                        <?php else: ?>
                                            <div class="w-full h-full flex items-center justify-center"><i class="fas fa-box text-gray-400 text-xs"></i></div>
                                        <?php endif; ?>
                                    </div>
                                    <?php endfor; ?>
                                    <?php if(count($item->detail) > 3): ?>
                                        <div class="w-8 h-8 rounded-lg border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">+<?php echo e(count($item->detail) - 3); ?></div>
                                    <?php endif; ?>
                                </div>
                                <span class="text-sm text-gray-600 flex items-center gap-1"><i class="fas fa-boxes text-pink-400"></i> <?php echo e(count($item->detail)); ?> item produk skincare</span>
                            </div>

                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                                <div class="flex items-center gap-4">
                                    <div>
                                        <p class="text-xs text-gray-500 mb-1 flex items-center gap-1"><i class="fas fa-calculator"></i> Total Belanja</p>
                                        <span class="text-xl font-bold text-pink-600 flex items-center gap-1"><i class="fas fa-tag"></i> Rp <?php echo e(number_format($item->total_harga, 0, ',', '.')); ?></span>
                                    </div>
                                    <?php if($statusDisplay == 'selesai'): ?>
                                        <span class="px-3 py-1.5 bg-green-100 text-green-700 rounded-lg text-xs font-medium flex items-center gap-1"><i class="fas fa-check-circle"></i> Pesanan telah diterima</span>
                                    <?php endif; ?>
                                </div>

                                <!-- ACTION BUTTONS -->
                                <div class="flex gap-2 flex-wrap">
                                    <?php if($item->status == 'pending'): ?>
                                        <button type="button" data-id="<?php echo e($item->id); ?>" onclick="openCancelModal(this.getAttribute('data-id'))"
                                            class="action-btn px-4 py-2 text-sm rounded-lg border-2 border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300 transition flex items-center gap-1 font-medium">
                                            <i class="fas fa-times"></i> Batalkan
                                        </button>
                                        <a href="<?php echo e(route('pembayaran.create', $item->id)); ?>"
                                            class="action-btn px-4 py-2 text-sm rounded-lg bg-gradient-to-r from-pink-400 to-pink-500 text-white hover:from-pink-500 hover:to-pink-600 transition flex items-center gap-1 shadow-md hover:shadow-lg font-medium">
                                            <i class="fas fa-credit-card"></i> Bayar
                                        </a>
                                    <?php endif; ?>

                                    <?php if($item->status == 'dikirim' && $item->kurirAssignment && $item->kurirAssignment->status == 'selesai'): ?>
                                        <form action="<?php echo e(route('pesanan.selesai', $item->id)); ?>" method="POST" class="inline">
                                            <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                                            <button type="submit" onclick="return confirm('Konfirmasi bahwa Anda telah menerima pesanan?')"
                                                class="action-btn px-4 py-2 text-sm rounded-lg bg-green-500 text-white hover:bg-green-600 transition flex items-center gap-1 font-medium shadow-md">
                                                <i class="fas fa-check-circle"></i> Konfirmasi Terima
                                            </button>
                                        </form>
                                    <?php endif; ?>

                                    <a href="<?php echo e(route('pesanan.show', $item->id)); ?>"
                                        class="action-btn px-4 py-2 text-sm rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 transition flex items-center gap-1 font-medium">
                                        <i class="fas fa-search"></i> Detail
                                    </a>

                                    <!-- TOMBOL INVOICE - HANYA MUNCUL JIKA INVOICE SUDAH DIKIRIM PENJUAL -->
                                    <?php if(in_array($item->status, ['dibayar','diproses','dikirim','selesai']) && $item->invoice_sent_at): ?>
                                    <button type="button" onclick="lihatInvoiceModal(<?php echo e($item->id); ?>)"
                                        class="action-btn px-4 py-2 text-sm rounded-lg bg-purple-100 text-purple-700 hover:bg-purple-200 transition flex items-center gap-1 font-medium border border-purple-200">
                                        <i class="fas fa-file-invoice"></i> Lihat Invoice
                                    </button>
                                    <?php endif; ?>

                                    
                                    <?php if($item->status != 'dibatalkan'): ?>
                                        <?php if($chat): ?>
                                            <a href="<?php echo e(route('chat.show', $chat->id)); ?>"
                                                class="action-btn px-4 py-2 text-sm rounded-lg bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition flex items-center gap-1 font-medium shadow-md relative">
                                                <i class="fas fa-comments"></i> Chat
                                                <?php if($unreadChatMessages > 0): ?>
                                                    <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full chat-badge"><?php echo e($unreadChatMessages); ?></span>
                                                <?php endif; ?>
                                            </a>
                                        <?php else: ?>
                                            <button type="button" onclick="createChat(<?php echo e($item->id); ?>)"
                                                class="action-btn px-4 py-2 text-sm rounded-lg bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition flex items-center gap-1 font-medium shadow-md">
                                                <i class="fas fa-comments"></i> Mulai Chat
                                            </button>
                                        <?php endif; ?>
                                    <?php endif; ?>

                                    <?php if($statusDisplay == 'selesai'): ?>
                                        <?php
                                            $totalProduk = $item->detail->count();
                                            $totalSudahUlas = \App\Models\Ulasan::where('user_id', auth()->id())->where('pesanan_id', $item->id)->count();
                                            $semuaSudahUlas = $totalProduk > 0 && $totalSudahUlas >= $totalProduk;
                                        ?>
                                        <?php if($semuaSudahUlas): ?>
                                            <span class="px-4 py-2 text-sm rounded-lg bg-green-100 text-green-700 flex items-center gap-1 font-medium">
                                                <i class="fas fa-check-circle"></i> Sudah Diulas
                                            </span>
                                        <?php else: ?>
                                            <?php
                                                $produkBelumUlas = $item->detail->first(function($d) use ($item) {
                                                    return !\App\Models\Ulasan::where('user_id', auth()->id())->where('pesanan_id', $item->id)->where('produk_id', $d->produk_id)->exists();
                                                });
                                            ?>
                                            <?php if($produkBelumUlas): ?>
                                            <button type="button" onclick="bukaModalUlas('<?php echo e($item->id); ?>', '<?php echo e($produkBelumUlas->produk_id); ?>', '<?php echo e(addslashes($produkBelumUlas->nama_produk)); ?>')"
                                                class="action-btn px-4 py-2 text-sm rounded-lg bg-yellow-100 text-yellow-700 hover:bg-yellow-200 transition flex items-center gap-1 font-medium border border-yellow-200">
                                                <i class="fas fa-star"></i> Ulas
                                            </button>
                                            <?php endif; ?>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        <!-- FOOTER -->
                        <div class="px-6 py-3 bg-gray-50/80 border-t border-pink-100 flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center gap-4 text-sm text-gray-500">
                                <span class="flex items-center gap-1">
                                    <i class="fas fa-map-marker-alt text-pink-400"></i> Alamat:
                                    <span class="font-medium text-gray-700 truncate max-w-md"><?php echo e($item->alamat->alamat_lengkap ?? 'Alamat tidak tersedia'); ?></span>
                                </span>
                            </div>
                            <?php if($item->status == 'dikirim' && $item->no_resi): ?>
                                <div class="flex items-center gap-2">
                                    <span class="text-xs bg-purple-100 text-purple-700 px-3 py-1.5 rounded-lg font-medium flex items-center gap-1">
                                        <i class="fas fa-barcode"></i> No. Resi: <?php echo e($item->no_resi); ?>

                                    </span>
                                    <button onclick="copyToClipboard('<?php echo e($item->no_resi); ?>')" class="text-gray-500 hover:text-pink-600 transition p-1 hover:bg-pink-50 rounded" title="Salin Resi">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        <?php endif; ?>
    </div>

    <!-- ===================== MODAL INVOICE ===================== -->
    <div id="invoiceModal" class="fixed inset-0 z-[70] hidden">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="tutupInvoiceModal()"></div>
        <div class="invoice-modal-content absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col" style="height:90vh;">
            <div class="flex items-center justify-between px-5 py-3 bg-gradient-to-r from-pink-400 to-pink-500 flex-shrink-0">
                <span class="text-white font-semibold flex items-center gap-2">
                    <i class="fas fa-file-invoice"></i> Invoice Pesanan Skincare
                </span>
                <button onclick="tutupInvoiceModal()" class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition">
                    <i class="fas fa-times text-white"></i>
                </button>
            </div>
            <!-- Konten Invoice -->
            <div id="invoiceContent" class="overflow-y-auto flex-1 bg-white"></div>
        </div>
    </div>

    <!-- ===================== MODAL BATAL ===================== -->
    <div id="cancelModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4 modal-enter">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800"><i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>Batalkan Pesanan</h3>
                <button type="button" onclick="closeCancelModal()" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times text-xl"></i></button>
            </div>
            <p class="text-sm text-gray-600 mb-4">Mohon berikan alasan mengapa Anda ingin membatalkan pesanan ini:</p>
            <form id="cancelForm" method="POST">
                <?php echo csrf_field(); ?>
                <div class="mb-4">
                    <textarea name="catatan" id="alasan" rows="4"
                        class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
                        placeholder="Contoh: Saya salah pilih produk, ingin mengganti alamat, dll..." required></textarea>
                    <p class="text-xs text-gray-500 mt-1 flex items-center gap-1"><i class="fas fa-info-circle"></i> Maksimal 1000 karakter</p>
                </div>
                <div class="flex justify-end gap-3">
                    <button type="button" onclick="closeCancelModal()" class="px-5 py-2.5 text-sm rounded-lg border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition flex items-center gap-1 font-medium">
                        <i class="fas fa-times"></i> Tidak
                    </button>
                    <button type="submit" class="px-5 py-2.5 text-sm rounded-lg bg-red-500 text-white hover:bg-red-600 transition flex items-center gap-1 font-medium shadow-md">
                        <i class="fas fa-check-circle"></i> Ya, Batalkan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ===================== MODAL ULASAN ===================== -->
    <div id="modalUlas" class="fixed inset-0 z-[60] hidden" aria-modal="true">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="tutupModalUlas()"></div>
        <div class="ulas-modal-content absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
            <div class="bg-gradient-to-r from-pink-400 to-pink-500 p-5 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-bold flex items-center gap-2"><i class="fas fa-star"></i> Beri Ulasan Produk Skincare</h3>
                        <p id="modalNamaProduk" class="text-pink-100 text-sm mt-0.5 truncate max-w-xs"></p>
                    </div>
                    <button onclick="tutupModalUlas()" class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition">
                        <i class="fas fa-times text-white"></i>
                    </button>
                </div>
            </div>
            <form id="formUlas" action="<?php echo e(route('ulasan.store')); ?>" method="POST" class="p-6">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="pesanan_id" id="inputPesananId">
                <input type="hidden" name="produk_id" id="inputProdukId">
                <div class="mb-6 text-center">
                    <p class="text-gray-600 text-sm mb-3 font-medium">Seberapa puas kamu dengan produk skincare ini?</p>
                    <div class="flex justify-center gap-1" id="starRow">
                        <?php for($s = 1; $s <= 5; $s++): ?>
                            <button type="button" data-value="<?php echo e($s); ?>" onclick="setBintang(<?php echo e($s); ?>)" onmouseover="hoverBintang(<?php echo e($s); ?>)" onmouseout="resetHover()"
                                class="star-btn text-5xl text-gray-300 focus:outline-none leading-none select-none">★</button>
                        <?php endfor; ?>
                    </div>
                    <input type="hidden" name="bintang" id="inputBintang" value="0">
                    <p id="labelBintang" class="text-sm font-medium text-pink-500 mt-2 h-5 transition-all"></p>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2"><i class="fas fa-comment-dots text-pink-400 mr-1"></i> Komentar (opsional)</label>
                    <textarea name="komentar" rows="4" placeholder="Ceritakan pengalamanmu dengan produk skincare ini..."
                        class="w-full border border-gray-300 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none resize-none transition"></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="button" onclick="tutupModalUlas()" class="flex-1 py-3 rounded-xl border-2 border-gray-200 text-gray-600 font-semibold hover:bg-gray-50 transition">Batal</button>
                    <button type="submit" id="btnKirimUlas" disabled
                        class="flex-1 py-3 rounded-xl bg-gradient-to-r from-pink-400 to-pink-500 text-white font-semibold hover:from-pink-500 hover:to-pink-600 transition shadow-md disabled:opacity-40 disabled:cursor-not-allowed">
                        <i class="fas fa-paper-plane mr-1"></i> Kirim Ulasan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
    // ===================== MODAL INVOICE (YANG DIPERBAIKI) =====================
    function lihatInvoiceModal(pesananId) {
        const modal = document.getElementById('invoiceModal');
        const content = document.getElementById('invoiceContent');

        // Tampilkan loading
        content.innerHTML = `
            <div class="flex items-center justify-center h-64">
                <div class="text-center">
                    <i class="fas fa-circle-notch fa-spin text-pink-500 text-4xl mb-3"></i>
                    <p class="text-gray-500">Memuat invoice...</p>
                </div>
            </div>
        `;
        
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';

        // Fetch konten invoice
        fetch('/pesanan/' + pesananId + '/cetak-invoice?mode=html', {
            headers: { 
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'text/html'
            }
        })
        .then(res => {
            if (!res.ok) {
                throw new Error('Gagal memuat invoice (Status: ' + res.status + ')');
            }
            return res.text();
        })
        .then(html => { 
            content.innerHTML = html; 
        })
        .catch(err => {
            console.error('Error:', err);
            content.innerHTML = `
                <div class="text-center p-8 text-red-500">
                    <i class="fas fa-exclamation-circle text-5xl mb-3"></i>
                    <p class="text-lg font-medium">Gagal memuat invoice</p>
                    <p class="text-sm text-gray-500 mt-2">${err.message}</p>
                    <button onclick="tutupInvoiceModal()" 
                        class="mt-4 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
                        Tutup
                    </button>
                </div>
            `;
        });
    }

    function tutupInvoiceModal() {
        document.getElementById('invoiceModal').classList.add('hidden');
        document.getElementById('invoiceContent').innerHTML = '';
        document.body.style.overflow = 'auto';
    }

// ============================================================
    // USER DROPDOWN TOGGLE
    // ============================================================
    function toggleUserDropdown(event) {
        event.stopPropagation();
        const dropdown = document.getElementById('dropdownMenu');
        const icon = document.getElementById('dropdownIcon');
        
        if (dropdown.classList.contains('hidden')) {
            dropdown.classList.remove('hidden');
            if (icon) icon.style.transform = 'rotate(180deg)';
        } else {
            dropdown.classList.add('hidden');
            if (icon) icon.style.transform = 'rotate(0deg)';
        }
    }

    // Tutup dropdown saat klik di luar
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('dropdownMenu');
        const userDropdown = document.getElementById('userDropdown');
        
        if (dropdown && userDropdown && !userDropdown.contains(event.target)) {
            if (!dropdown.classList.contains('hidden')) {
                dropdown.classList.add('hidden');
                const icon = document.getElementById('dropdownIcon');
                if (icon) icon.style.transform = 'rotate(0deg)';
            }
        }
    });

    // ============================================================
    // NOTIFIKASI TOGGLE (untuk penjual)
    // ============================================================
    function toggleNotif(event) {
        event.stopPropagation();
        const notifDropdown = document.getElementById('notifDropdown');
        if (notifDropdown) {
            notifDropdown.classList.toggle('hidden');
        }
    }

    // Tutup notifikasi saat klik di luar
    document.addEventListener('click', function(event) {
        const notifDropdown = document.getElementById('notifDropdown');
        const notifWrapper = document.getElementById('notifWrapper');
        
        if (notifDropdown && notifWrapper && !notifWrapper.contains(event.target)) {
            if (!notifDropdown.classList.contains('hidden')) {
                notifDropdown.classList.add('hidden');
            }
        }
    });


    // ===================== COPY RESI =====================
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(
            () => alert('No. Resi berhasil disalin!'),
            () => alert('Gagal menyalin teks')
        );
    }

    // ===================== FILTER + SEARCH =====================
    document.addEventListener('DOMContentLoaded', function () {
        const filterButtons = document.querySelectorAll('.filter-btn');
        const orders = document.querySelectorAll('.order-card');
        const searchInput = document.getElementById('searchInput');

        function filterOrders() {
            const activeFilter = document.querySelector('.filter-btn.active')?.dataset.filter || 'all';
            const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
            orders.forEach(order => {
                const status = order.dataset.status;
                const orderCode = order.querySelector('h3.font-bold')?.textContent.toLowerCase() || '';
                let statusMatch = false;
                if (activeFilter === 'all') statusMatch = true;
                else if (activeFilter === 'dibayar' && (status === 'dibayar' || status === 'diproses')) statusMatch = true;
                else if (activeFilter === status) statusMatch = true;
                const searchMatch = searchTerm === '' || orderCode.includes(searchTerm);
                order.style.display = (statusMatch && searchMatch) ? 'block' : 'none';
            });
        }

        filterButtons.forEach(btn => {
            btn.addEventListener('click', function () {
                filterButtons.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                filterOrders();
            });
        });

        if (searchInput) searchInput.addEventListener('keyup', filterOrders);
        filterOrders();
    });

    // ===================== MODAL BATAL =====================
    function openCancelModal(id) {
        const modal = document.getElementById('cancelModal');
        const form = document.getElementById('cancelForm');
        form.action = `/pesanan/${id}/batal`;
        form.reset();
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.style.overflow = 'hidden';
        setTimeout(() => document.getElementById('alasan').focus(), 100);
    }

    function closeCancelModal() {
        const modal = document.getElementById('cancelModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = 'auto';
    }

    // ===================== MODAL ULASAN =====================
    const labelMap = { 1: '😞 Sangat Tidak Puas', 2: '😕 Tidak Puas', 3: '😐 Cukup', 4: '😊 Puas', 5: '🤩 Sangat Puas!' };
    let bintangTerpilih = 0;

    function bukaModalUlas(pesananId, produkId, namaProduk) {
        document.getElementById('inputPesananId').value = pesananId;
        document.getElementById('inputProdukId').value = produkId;
        document.getElementById('modalNamaProduk').textContent = namaProduk;
        bintangTerpilih = 0;
        document.getElementById('inputBintang').value = 0;
        document.getElementById('labelBintang').textContent = '';
        document.getElementById('btnKirimUlas').disabled = true;
        document.querySelector('#formUlas textarea').value = '';
        renderBintang(0);
        document.getElementById('modalUlas').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function tutupModalUlas() {
        document.getElementById('modalUlas').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }

    function setBintang(nilai) {
        bintangTerpilih = nilai;
        document.getElementById('inputBintang').value = nilai;
        document.getElementById('labelBintang').textContent = labelMap[nilai] || '';
        document.getElementById('btnKirimUlas').disabled = false;
        renderBintang(nilai);
    }

    function hoverBintang(nilai) { renderBintang(nilai); }
    function resetHover() { renderBintang(bintangTerpilih); }

    function renderBintang(aktif) {
        document.querySelectorAll('.star-btn').forEach(btn => {
            const val = parseInt(btn.dataset.value);
            btn.classList.toggle('text-yellow-400', val <= aktif);
            btn.classList.toggle('text-gray-300', val > aktif);
        });
    }

    // ===================== FUNGSI CHAT =====================
    function createChat(pesananId) {
        fetch('<?php echo e(route("chat.create-or-get")); ?>', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
            body: JSON.stringify({ pesanan_id: pesananId })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) window.location.href = data.redirect_url;
            else alert(data.message || 'Gagal membuat chat');
        })
        .catch(() => alert('Terjadi kesalahan saat membuat chat'));
    }

    // ===================== AUTO REFRESH UNREAD CHAT =====================
    function refreshUnreadChat() {
        fetch('<?php echo e(route("chat.unread-count")); ?>')
            .then(res => res.json())
            .then(data => {
                const chatBadge = document.querySelector('a[href*="chat.index"] .absolute');
                if (chatBadge) {
                    if (data.unread_count > 0) { chatBadge.textContent = data.unread_count; chatBadge.classList.remove('hidden'); }
                    else chatBadge.classList.add('hidden');
                }
            });
    }
    setInterval(refreshUnreadChat, 30000);

    // ===================== ESC KEY =====================
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeCancelModal();
            tutupModalUlas();
            tutupInvoiceModal();
        }
    });

    setTimeout(function() {
        document.querySelectorAll('[role="alert"], .alert-dismissible').forEach(el => {
            el.style.transition = 'opacity 0.5s';
            el.style.opacity = '0';
            setTimeout(() => el.remove(), 500);
        });
    }, 5000);
    </script>

</body>
</html><?php /**PATH C:\laragon\www\ecommerce\resources\views/pesanan/index.blade.php ENDPATH**/ ?>