<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Data Produk - Raja Futsal</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&display=swap" rel="stylesheet">

    <style>
        * { font-family: 'Inter', sans-serif; }
        body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
        .btn-primary { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); transition: all 0.3s ease; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
        .action-btn { transition: all 0.2s ease; }
        .action-btn:hover { transform: translateY(-2px); }
        .product-card { transition: all 0.3s ease; border: 1px solid #f3f4f6; }
        .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border-color: #fed7aa; }
        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        
        /* Pagination Styling */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }
        .pagination a, .pagination span {
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .pagination a {
            background-color: white;
            border: 1px solid #e5e7eb;
            color: #374151;
        }
        .pagination a:hover {
            background-color: #f97316;
            color: white;
            border-color: #f97316;
        }
        .pagination .active span {
            background-color: #f97316;
            color: white;
            border-color: #f97316;
        }
        .pagination .disabled span {
            background-color: #f3f4f6;
            color: #9ca3af;
            cursor: not-allowed;
        }
        
        @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); }
        }
        @keyframes ring {
            0% { transform: rotate(0); }
            25% { transform: rotate(15deg); }
            75% { transform: rotate(-15deg); }
            100% { transform: rotate(0); }
        }
        .animate-ring {
            animation: ring 0.5s ease-in-out infinite;
            transform-origin: top center;
        }
    </style>
</head>

<body class="bg-gradient-to-br from-gray-50 to-gray-100">

<!-- ========== NAVBAR ========== -->
<nav class="bg-white/80 backdrop-blur-md border-b shadow-sm sticky top-0 z-50 w-full">
    <div class="px-4 sm:px-6 lg:px-8 py-3">
        <div class="relative flex flex-col md:flex-row md:items-center md:justify-between">
            <!-- LOGO -->
            <div class="flex items-center gap-3 mb-3 md:mb-0">
                <div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-md">
                    <span class="text-white font-bold text-lg">R</span>
                </div>
                <div>
                    <h1 class="font-bold text-lg text-gray-800">Raja Futsal</h1>
                    <p class="text-xs text-gray-500">Manajemen Produk</p>
                </div>
            </div>

            <!-- MENU -->
            <div class="hidden md:flex flex-wrap items-center gap-3 absolute left-1/2 transform -translate-x-1/2">
                    <a href="{{ route('dashboard') }}"
                    class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('dashboard') ? 'bg-orange-100 text-orange-600' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }} transition">
                    <i class="fas fa-home"></i> Dashboard
                </a>

                @auth
                @if(auth()->user()->role === 'penjual')
                    @php
                        $uid = auth()->user()->getAttribute('ID');

                        // Badge Pesanan Masuk (pending + dibayar)
                        $pendingPesananCount = \App\Models\Pesanan::whereIn('status', ['pending', 'dibayar'])
                            ->whereHas('detail', function($q) use ($uid) {
                                $q->whereHas('produk', function($q2) use ($uid) {
                                    $q2->where('user_id', $uid);
                                });
                            })->count();
                    @endphp

                    <a href="{{ route('kategori.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition
                        {{ request()->routeIs('kategori.*') ? 'bg-orange-50 text-orange-600 border border-orange-100' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }}">
                        <i class="fas fa-tags {{ request()->routeIs('kategori.*') ? 'text-orange-500' : '' }}"></i> Kategori
                    </a>

                    <a href="{{ route('produk.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition
                        {{ request()->routeIs('produk.*') ? 'bg-orange-50 text-orange-600 border border-orange-100' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }}">
                        <i class="fas fa-store {{ request()->routeIs('produk.*') ? 'text-orange-500' : '' }}"></i> Produk
                    </a>

                    <a href="{{ route('pesanan.masuk.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition
                        {{ request()->routeIs('pesanan.masuk.*') ? 'bg-orange-50 text-orange-600 border border-orange-100' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }}">
                        <i class="fas fa-truck {{ request()->routeIs('pesanan.masuk.*') ? 'text-orange-500' : '' }}"></i> Pesanan Masuk
                        @if($pendingPesananCount > 0)
                            <span class="bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center notification-badge">
                                {{ $pendingPesananCount > 99 ? '99+' : $pendingPesananCount }}
                            </span>
                        @endif
                    </a>

                    <a href="{{ route('user.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition
                        {{ request()->routeIs('user.*') ? 'bg-orange-50 text-orange-600 border border-orange-100' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }}">
                        <i class="fas fa-users {{ request()->routeIs('user.*') ? 'text-orange-500' : '' }}"></i> User
                    </a>
                @endif

                @if(auth()->user()->role === 'user')

                    <a href="{{ route('produk.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('produk.*') ? 'bg-orange-100 text-orange-600' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }} transition">
                        <i class="fas fa-store"></i> Produk
                    </a>

                    <a href="{{ route('pesanan.index') }}"
                        class="flex items-center gap-2 px-4 py-2 rounded-lg {{ request()->routeIs('pesanan.*') ? 'bg-orange-100 text-orange-600' : 'text-gray-600 hover:bg-orange-50 hover:text-orange-600' }} transition">
                        <i class="fas fa-clipboard-list"></i> Pesanan
                    </a>
                @endif
                @endauth
            </div>

            <!-- USER MENU -->
            <div class="flex items-center gap-4 mt-3 md:mt-0">
                <!-- NOTIF ICONS FOR SELLER -->
                @if(auth()->check() && auth()->user()->role === 'penjual')
                    <!-- Restok Icon -->
                    <a href="{{ route('restok.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center" title="Restok">
                        <i class="fas fa-boxes text-xl"></i>
                        @if(isset($sellerRestokCount) && $sellerRestokCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $sellerRestokCount > 99 ? '99+' : $sellerRestokCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- Chat Icon -->
                    <a href="{{ route('chat.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center" title="Chat">
                        <i class="fas fa-comments text-xl"></i>
                        @if(isset($sellerUnreadChatCount) && $sellerUnreadChatCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $sellerUnreadChatCount > 99 ? '99+' : $sellerUnreadChatCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- Ulasan Icon -->
                    <a href="{{ route('ulasan.penjual.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center" title="Ulasan">
                        <i class="fas fa-star text-xl"></i>
                        @if(isset($sellerUnreadUlasanCount) && $sellerUnreadUlasanCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $sellerUnreadUlasanCount > 99 ? '99+' : $sellerUnreadUlasanCount }}
                                </span>
                            </span>
                        @endif
                    </a>
                @endif

                <!-- CART & CHAT NOTIF FOR USER -->
                @if(auth()->check() && auth()->user()->role === 'user')
                    <!-- Cart Icon -->
                    <a href="{{ route('keranjang.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        @if(isset($cartCount) && $cartCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $cartCount > 99 ? '99+' : $cartCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- Chat Icon -->
                    <a href="{{ route('chat.index') }}" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100 flex items-center justify-center">
                        <i class="fas fa-comments text-xl"></i>
                        @if(isset($unreadChatCount) && $unreadChatCount > 0)
                            <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                    {{ $unreadChatCount > 99 ? '99+' : $unreadChatCount }}
                                </span>
                            </span>
                        @endif
                    </a>

                    <!-- NOTIF BELL FOR USER -->
                    <div class="relative">
                        <button id="notifButtonUser" onclick="toggleNotifDropdown(event)" class="relative p-2 text-gray-500 hover:text-orange-600 transition-all duration-200 focus:outline-none bg-gray-50 hover:bg-orange-50 rounded-xl border border-transparent hover:border-orange-100">
                            <i class="fas fa-bell text-xl"></i>
                            @if($unreadReviews->count() > 0)
                                <span class="absolute top-1.5 right-1.5 flex h-4 w-4">
                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                    <span class="relative inline-flex rounded-full h-4 w-4 bg-red-500 text-white text-[10px] items-center justify-center font-bold">
                                        {{ $unreadReviews->count() }}
                                    </span>
                                </span>
                            @endif
                        </button>
                        <!-- Dropdown Notif -->
                        <div id="notifDropdownUser" class="hidden absolute right-0 mt-3 w-80 bg-white rounded-2xl shadow-2xl border border-gray-100 py-0 z-50 overflow-hidden">
                            <div class="px-4 py-4 border-b bg-gradient-to-r from-orange-50 to-white">
                                <h3 class="text-sm font-bold text-gray-800 flex items-center gap-2">
                                    <i class="fas fa-bell text-orange-500"></i> Notifikasi
                                </h3>
                            </div>
                            <div class="max-h-[400px] overflow-y-auto custom-scrollbar">
                                @forelse($unreadReviews as $item)
                                    <a href="{{ route('pesanan.show', $item['pesanan_id']) }}?review_produk={{ $item['produk_id'] }}" class="block px-4 py-4 border-b last:border-0 hover:bg-orange-50 transition border-gray-50">
                                        <div class="flex gap-3 items-start">
                                            <div class="w-12 h-12 rounded-xl bg-gray-50 flex-shrink-0 overflow-hidden border border-gray-100">
                                                <img src="{{ $item['foto'] ? asset('storage/'.$item['foto']) : asset('images/no-image.png') }}" class="w-full h-full object-cover">
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-xs font-bold text-orange-600 mb-1 uppercase tracking-wider">Silahkan mengulas produk ini</p>
                                                <p class="text-sm text-gray-800 font-semibold line-clamp-2 leading-snug mb-2">{{ $item['nama_produk'] }}</p>
                                                <div class="flex items-center justify-between">
                                                    <p class="text-[10px] text-gray-400 flex items-center gap-1">
                                                        <i class="fas fa-receipt text-[9px]"></i> {{ $item['kode_pesanan'] }}
                                                    </p>
                                                    <span class="text-[10px] bg-orange-100 text-orange-600 px-2 py-0.5 rounded-full font-bold">BELUM DIULAS</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                @empty
                                    <div class="px-6 py-10 text-center">
                                        <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-gray-100">
                                            <i class="fas fa-bell-slash text-gray-300 text-2xl"></i>
                                        </div>
                                        <p class="text-sm text-gray-500 font-bold">Tidak ada notifikasi baru</p>
                                        <p class="text-xs text-gray-400 mt-2 px-10">Semua produk yang Anda beli sudah diulas. Terima kasih!</p>
                                    </div>
                                @endforelse
                            </div>
                            @if($unreadReviews->count() > 0)
                                <div class="px-4 py-3 bg-gray-50 text-center border-t border-gray-100">
                                    <p class="text-[10px] text-gray-400 italic">* Klik pada notifikasi untuk memberikan ulasan</p>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                <div class="relative" id="userDropdown">
                    <button onclick="toggleUserDropdown(event)" class="flex items-center gap-3 px-3 py-2 hover:bg-orange-50 rounded-xl transition-all duration-200 border border-transparent hover:border-orange-200 group">
                        <div class="w-9 h-9 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center text-white font-semibold shadow-md">
                            {{ 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-orange-600">{{ Auth::user()->name }}</p>
                            <p class="text-xs text-gray-500">
                                @if(Auth::user()->role == 'penjual') <i class="fas fa-store mr-1 text-orange-500"></i> Penjual
                                @elseif(Auth::user()->role == 'admin') <i class="fas fa-shield-alt mr-1 text-purple-500"></i> Admin
                                @else <i class="fas fa-user mr-1 text-blue-500"></i> Customer @endif
                            </p>
                        </div>
                        <i class="fas fa-chevron-down text-sm text-gray-400 group-hover:text-orange-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-orange-500 to-orange-600 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-md">
                                    {{ substr(Auth::user()->name, 0, 1) }}
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-800">{{ Auth::user()->name }}</p>
                                    <p class="text-sm text-gray-500">{{ Auth::user()->email }}</p>
                                    <span class="inline-block mt-1 px-2 py-0.5 rounded-full text-xs font-medium @if(Auth::user()->role == 'penjual') bg-orange-100 text-orange-600 @elseif(Auth::user()->role == 'admin') bg-purple-100 text-purple-600 @else bg-blue-100 text-blue-600 @endif">
                                        @if(Auth::user()->role == 'penjual') <i class="fas fa-store mr-1"></i> Penjual
                                        @elseif(Auth::user()->role == 'admin') <i class="fas fa-shield-alt mr-1"></i> Admin
                                        @else <i class="fas fa-user mr-1"></i> Customer @endif
                                    </span>
                                </div>
                            </div>
                        </div>

                        @if(Auth::user()->role == 'penjual')
                            @php $toko = App\Models\Toko::where('user_id', auth()->id())->first(); @endphp
                            @if($toko)
                                <a href="{{ route('toko.edit', $toko->id) }}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-50 text-gray-700 transition group">
                                    <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center group-hover:bg-orange-200"><i class="fas fa-store text-orange-600"></i></div>
                                    <div><p class="font-medium">Pengaturan Toko</p><p class="text-xs text-gray-500">Kelola informasi toko Anda</p></div>
                                </a>
                            @else
                                <a href="{{ route('toko.create') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-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</p><p class="text-xs text-gray-500">Mulai berjualan sekarang</p></div>
                                </a>
                            @endif
                        @else
                            <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-4 py-3 hover:bg-orange-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-orange-100"><i class="fas fa-user text-gray-500 group-hover:text-orange-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>
                        @endif

                        <div class="border-t border-gray-100 mt-1 pt-1">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <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>

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

        <!-- HEADER -->
        <div class="relative mb-8 bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 rounded-2xl p-6 text-white shadow-lg overflow-hidden w-full">
            <div class="absolute top-0 right-0 w-64 h-64 opacity-10">
                <i class="fas fa-box text-8xl absolute top-10 right-10"></i>
                <i class="fas fa-tag text-7xl absolute bottom-0 right-32"></i>
                <i class="fas fa-cube text-6xl absolute top-20 right-48"></i>
            </div>
            <div class="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                            <i class="fas fa-cubes text-white text-2xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold flex items-center gap-2">Manajemen Produk</h2>
                    </div>
                    <p class="text-orange-100">Kelola semua produk Anda dengan mudah dan efisien</p>
                    <div class="flex items-center gap-4 mt-3">
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-lg text-sm flex items-center gap-2">
                            <i class="fas fa-boxes"></i> Total Produk: <span class="font-bold">{{ $produk->total() }}</span>
                        </span>
                        <span class="bg-white/20 backdrop-blur-sm px-3 py-1.5 rounded-lg text-sm flex items-center gap-2">
                            <i class="fas fa-cubes"></i> Total Stok: <span class="font-bold">{{ $produk->sum('stok') }}</span>
                        </span>
                    </div>
                </div>
                @auth
                    @if(auth()->user()->role === 'penjual')
                    <div class="flex-shrink-0 flex gap-2">
                        <a href="{{ route('penjual.diskon.edit') }}"
                            class="inline-flex items-center gap-2 border-2 border-orange-300 text-orange-600 bg-white px-6 py-2.5 rounded-xl font-semibold hover:bg-orange-50 hover:border-orange-400 transition-all action-btn">
                            <i class="fas fa-tags"></i> Edit Diskon
                        </a>
                        <a href="{{ route('produk.create') }}"
                            class="inline-flex items-center gap-2 border-2 border-gray-300 text-gray-600 bg-white px-6 py-2.5 rounded-xl font-semibold hover:border-gray-400 transition-all action-btn">
                            <i class="fas fa-plus-circle"></i> Tambah Produk Baru
                        </a>
                    </div>
                    @endif
                @endauth
            </div>
        </div>

        <!-- ===== FILTER & SEARCH ===== -->
<!-- ===== FILTER & SEARCH ===== -->
<form method="GET" action="{{ route('produk.index') }}" id="filterForm">
    <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 mb-6 w-full">
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">

            <!-- SEARCH -->
            <div class="flex items-center gap-3 flex-1">
                <div class="relative flex-1">
                    <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" name="search" id="searchProduct"
                        value="{{ request('search') }}"
                        placeholder="Cari Berdasarkan Nama Produk..."
                        class="pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent text-sm w-full">
                </div>
            </div>

            <div class="flex items-center gap-3 flex-wrap">

                <!-- FILTER KATEGORI -->
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-tags text-gray-400"></i>
                    </div>
                    <select name="kategori" id="categoryFilter"
                            onchange="document.getElementById('filterForm').submit()"
                            class="pl-10 pr-8 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 text-sm appearance-none bg-white min-w-[180px]">
                        <option value="">Filter Kategori</option>
                        @foreach($kategoris as $kat)
                            <option value="{{ $kat->ID }}" {{ request('kategori') == $kat->ID ? 'selected' : '' }}>
                                {{ $kat->nama }}
                            </option>
                        @endforeach
                    </select>
                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                        <i class="fas fa-chevron-down text-gray-400 text-xs"></i>
                    </div>
                </div>

                <!-- FILTER SORT -->
                <div class="flex gap-2">
                    <button type="submit" name="sort" value="latest"
                        class="flex items-center gap-1.5 px-4 py-2.5 rounded-lg text-sm font-semibold transition border
                        {{ request('sort') === 'latest' ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-200 hover:border-orange-400 hover:text-orange-500' }}">
                        <i class="fas fa-clock text-xs"></i> Terbaru
                    </button>
                    <button type="submit" name="sort" value="terlaris"
                        class="flex items-center gap-1.5 px-4 py-2.5 rounded-lg text-sm font-semibold transition border
                        {{ request('sort') === 'terlaris' ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-200 hover:border-orange-400 hover:text-orange-500' }}">
                        <i class="fas fa-fire text-xs"></i> Terlaris
                    </button>
                </div>

                <!-- RESET -->
                <a href="{{ route('produk.index') }}" title="Reset Filter"
                    class="p-2.5 bg-gray-100 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-200 transition">
                    <i class="fas fa-undo-alt"></i>
                </a>
            </div>
        </div>
    </div>
</form>

        <!-- TOAST NOTIFICATION -->
        @if (session('success') || session('error'))
        <div id="toast-notification"
            class="fixed bottom-6 right-6 z-50 flex items-center gap-3 bg-white border {{ session('success') ? 'border-green-200' : '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 {{ session('success') ? 'bg-green-500' : 'bg-red-500' }} rounded-xl flex items-center justify-center flex-shrink-0">
                <i class="fas {{ session('success') ? 'fa-check' : 'fa-exclamation' }} text-white text-sm"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="font-semibold text-gray-800 text-sm">{{ session('success') ? 'Berhasil!' : 'Gagal!' }}</p>
                <p class="text-gray-500 text-xs mt-0.5 truncate">{{ session('success') ?? session('error') }}</p>
            </div>
            <button onclick="closeToast()" 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 {{ session('success') ? 'bg-green-500' : 'bg-red-500' }} rounded-b-2xl" id="toastProgress"
                style="width: 100%; transition: width 5s linear;"></div>
        </div>

        <script>
            setTimeout(() => {
                const bar = document.getElementById('toastProgress');
                if (bar) bar.style.width = '0%';
            }, 100);
            setTimeout(() => closeToast(), 5100);
            function closeToast() {
                const toast = document.getElementById('toast-notification');
                if (toast) {
                    toast.style.animation = 'slideOutRight 0.3s ease forwards';
                    setTimeout(() => toast.remove(), 300);
                }
            }
        </script>
        @endif

        <!-- GRID PRODUK -->
        @if($produk->isEmpty())
            <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-12 text-center w-full">
                <div class="mx-auto w-24 h-24 bg-orange-50 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-box-open text-orange-400 text-3xl"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">Belum Ada Produk</h3>
                <p class="text-gray-500 mb-6">Mulai dengan menambahkan produk pertama Anda</p>
                <a href="{{ route('produk.create') }}"
                   class="btn-primary text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center gap-2 shadow-lg">
                    <i class="fas fa-plus"></i> Tambah Produk Pertama
                </a>
            </div>
        @else

        {{-- BANNER DISKON - hanya untuk user --}}
        @if(auth()->check() && auth()->user()->role === 'user')
        @php
            $tokoUntukBanner  = \App\Models\Toko::whereHas('produk', function($q) {
                $q->where('status', 'aktif');
            })->first();
            $minBelanjaBanner = $tokoUntukBanner->min_belanja ?? 0;
            $diskonBanner     = $tokoUntukBanner->diskon_nominal ?? 0;
            $pctBanner        = ($minBelanjaBanner > 0 && $diskonBanner > 0)
                ? round($diskonBanner / $minBelanjaBanner * 100) . '%'
                : 'Rp ' . number_format($diskonBanner, 0, ',', '.');
        @endphp
        @if($diskonBanner > 0)
        <div class="relative bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 rounded-2xl p-5 mb-6 shadow-lg overflow-hidden">
            <div class="absolute top-0 right-0 w-48 h-48 opacity-10">
                <i class="fas fa-tags text-8xl absolute top-5 right-5"></i>
                <i class="fas fa-percent text-7xl absolute bottom-0 right-20"></i>
                <i class="fas fa-gift text-6xl absolute top-20 right-40"></i>
            </div>
            
            <div class="relative flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div class="flex items-center gap-4 flex-1">
                    <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center flex-shrink-0 shadow-inner">
                        <i class="fas fa-tags text-white text-2xl"></i>
                    </div>
                    
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="bg-white/30 backdrop-blur-sm px-2 py-0.5 rounded-full text-xs font-semibold text-white">
                                🎉 PROMO TERBATAS
                            </span>
                        </div>
                        <h3 class="text-white font-bold text-lg mb-1">
                            Spesial Diskon {{ $pctBanner }}!
                        </h3>
                        <p class="text-orange-100 text-sm">
                            Belanja minimal
                            <span class="font-bold text-white">Rp {{ number_format($minBelanjaBanner, 0, ',', '.') }}</span>
                            dan dapatkan potongan
                            <span class="font-bold text-white">Rp {{ number_format($diskonBanner, 0, ',', '.') }}</span>
                            untuk semua pesanan kamu!
                        </p>
                    </div>
                </div>
                
                <div class="flex-shrink-0 bg-white/20 backdrop-blur-sm px-5 py-3 rounded-2xl text-center shadow-inner border border-white/30">
                    <span class="text-white font-bold text-2xl">{{ $pctBanner }}</span>
                    <p class="text-orange-100 text-xs font-medium">DISKON</p>
                </div>
            </div>
        </div>
        @endif
        @endif

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 w-full" id="productGrid">
                @foreach ($produk as $p)
                @php
                    // Get product-specific image based on product name
                    $productImages = [
                        'mizuno' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                        'specs sweep' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                        'joma top flex pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                        'erke pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                        'nike tiempo pro' => 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop',
                    ];
                    
                    $productNameLower = strtolower($p->nama_produk);
                    $defaultImage = 'https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=400&h=400&fit=crop';
                    
                    $firstFoto = $defaultImage;
                    foreach ($productImages as $key => $imageUrl) {
                        if (strpos($productNameLower, $key) !== false) {
                            $firstFoto = $imageUrl;
                            break;
                        }
                    }
                    
                    // If product has its own photo in database, use that instead
                    if ($p->foto) {
                        foreach(explode('|', $p->foto) as $item) {
                            $item = trim($item);
                            if (preg_match('/^https?:\/\//i', $item)) {
                                $firstFoto = $item;
                                break;
                            } elseif (str_contains($item, ':')) {
                                $parts = explode(':', $item, 2);
                                $path = trim($parts[1]);
                                if ($path) { 
                                    $firstFoto = asset('storage/'.$path);
                                    break;
                                }
                            } elseif ($item) {
                                $firstFoto = asset('storage/'.$item);
                                break;
                            }
                        }
                    }
                    
                    $stokColor = $p->stok > 10 ? 'bg-green-500' : ($p->stok > 0 ? 'bg-amber-400' : 'bg-red-500');
                    $terjualP = \App\Models\PesananDetail::where('produk_id', $p->id)
                        ->whereHas('pesanan', function($q) {
                            $q->whereIn('status', ['selesai','dibayar','diproses','dikirim']);
                        })->sum('qty');
                    $ulasanP = \App\Models\Ulasan::where('produk_id', $p->id)->get();
                    $avgRatingP = $ulasanP->count() > 0 ? round($ulasanP->avg('bintang'), 1) : 0;
                    $jumlahUlasanP = $ulasanP->count();
                    $tokoP = \App\Models\Toko::where('user_id', $p->user_id)->first();
                    $lokasiP = $tokoP && $tokoP->city ? $tokoP->city->name
                        : ($tokoP && $tokoP->district ? $tokoP->district->name : 'Lokasi tidak tersedia');
                    $namaKatP = $p->kategori->nama ?? $p->kategori->nama_kategori ?? 'Umum';
                    $warnaArr = $p->warna ? array_filter(explode(',', $p->warna)) : [];
                    $ukuranArr = $p->ukuran ? array_filter(explode(',', $p->ukuran)) : [];
                    $isNew = $p->created_at >= now()->subDays(7) ? '1' : '0';
                @endphp

                <div class="product-card bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col"
                     data-name="{{ strtolower($p->nama_produk) }}"
                     data-stock="{{ $p->stok }}"
                     data-kategori="{{ $p->kategori_id }}"
                     data-terjual="{{ $terjualP }}"
                     data-index="{{ $loop->index }}"
                     data-isnew="{{ $isNew }}">

                    {{-- IMAGE --}}
                    {{-- IMAGE --}}
                    <div class="relative bg-gray-50 overflow-hidden aspect-square flex items-center justify-center">

                    <img src="{{ $firstFoto }}"
                        class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                        alt="{{ $p->nama_produk }}"
                        onerror="this.src='https://via.placeholder.com/400x400?text=No+Image'">

                    <!-- Badge kategori -->
                    <span class="absolute top-2 left-2 bg-orange-500 text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                        {{ $namaKatP }}
                    </span>

                    <!-- Badge stok -->
                    <span class="absolute top-2 right-2 {{ $stokColor }} text-white text-[10px] font-semibold px-2.5 py-1 rounded-full shadow-sm">
                        {{ $p->stok > 0 ? 'Stok ' . $p->stok : 'Habis' }}
                    </span>

                    <!-- Hover detail -->
                    <div class="absolute inset-0 bg-black/0 hover:bg-black/20 transition-all duration-300 flex items-center justify-center opacity-0 hover:opacity-100">
                        <a href="{{ route('produk.show', $p->id) }}"
                        class="w-11 h-11 bg-white rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition shadow-lg">
                            <i class="fas fa-eye"></i>
                        </a>
                    </div>

                    </div>

                    <div class="p-4 flex flex-col flex-1">
                        <h3 class="font-semibold text-gray-800 text-sm line-clamp-2 mb-2 leading-snug" style="min-height:40px;">
                            {{ $p->nama_produk }}
                        </h3>

                        <div class="flex items-center gap-2 mb-3">
                            @if(count($warnaArr) > 0)
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
                                    <i class="fas fa-palette text-purple-400 text-[9px]"></i>
                                    {{ count($warnaArr) }} warna
                                </span>
                            @endif
                            @if(count($ukuranArr) > 0)
                                <span class="flex items-center gap-1 text-[11px] text-gray-500 bg-gray-50 px-2 py-0.5 rounded-full border border-gray-100">
                                    <i class="fas fa-ruler text-blue-400 text-[9px]"></i>
                                    {{ count($ukuranArr) }} ukuran
                                </span>
                            @endif
                        </div>

                        <div class="flex items-center justify-between gap-2 mb-3">
                            <span class="text-lg font-bold text-orange-500 whitespace-nowrap">
                                Rp {{ number_format($p->harga, 0, ',', '.') }}
                            </span>
                            @if($terjualP > 0)
                                <span class="flex items-center gap-1 text-[11px] text-orange-500 bg-orange-50 px-2 py-0.5 rounded-full whitespace-nowrap flex-shrink-0">
                                    <i class="fas fa-fire text-[9px]"></i>
                                    {{ number_format($terjualP) }} terjual
                                </span>
                            @else
                                <span class="flex items-center gap-1 text-[11px] text-gray-400 whitespace-nowrap flex-shrink-0">
                                    <i class="fas fa-fire text-[9px]"></i>
                                    0 terjual
                                </span>
                            @endif
                        </div>
                        
                        <div class="border-t border-gray-100 mb-3"></div>

                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-0.5">
                                @if($avgRatingP > 0)
                                    @for($star = 1; $star <= 5; $star++)
                                        @if($star <= floor($avgRatingP))
                                            <i class="fas fa-star text-yellow-400 text-[11px]"></i>
                                        @elseif($star - $avgRatingP < 1)
                                            <i class="fas fa-star-half-alt text-yellow-400 text-[11px]"></i>
                                        @else
                                            <i class="far fa-star text-gray-200 text-[11px]"></i>
                                        @endif
                                    @endfor
                                    <span class="text-[11px] font-semibold text-gray-600 ml-1">{{ $avgRatingP }}</span>
                                    <span class="text-[11px] text-gray-400">({{ $jumlahUlasanP }})</span>
                                @else
                                    @for($star = 1; $star <= 5; $star++)
                                        <i class="far fa-star text-gray-200 text-[11px]"></i>
                                    @endfor
                                    <span class="text-[11px] text-gray-400 ml-1">Belum ada</span>
                                @endif
                            </div>
                            <div class="flex items-center gap-1 text-[11px] text-gray-400">
                                <i class="fas fa-map-marker-alt text-orange-300 text-[10px]"></i>
                                <span class="truncate max-w-[80px]">{{ $lokasiP }}</span>
                            </div>
                        </div>

                        <p class="text-[10px] text-gray-300 text-center italic mb-3">
                            Klik untuk lihat detail & beli produk ini
                        </p>

                        <div class="mt-auto">
                            @auth
                            @if(auth()->user()->role === 'penjual')
                                <div class="flex gap-2">
                                    <a href="{{ route('produk.edit', $p->id) }}"
                                       class="flex-1 text-center text-xs font-semibold border border-gray-300 text-gray-600 bg-white px-3 py-2 rounded-xl hover:border-orange-400 hover:text-orange-500 transition flex items-center justify-center gap-1">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <form action="{{ route('produk.destroy', $p->id) }}" method="POST" class="flex-1"
                                          onsubmit="return confirm('Yakin ingin menghapus produk {{ addslashes($p->nama_produk) }}?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="w-full text-xs font-semibold bg-orange-500 hover:bg-orange-600 text-white px-3 py-2 rounded-xl transition flex items-center justify-center gap-1">
                                            <i class="fas fa-trash"></i> Hapus
                                        </button>
                                    </form>
                                </div>
                            @else
                                @if(count($warnaArr) <= 1 && count($ukuranArr) <= 1)
                                    <div class="flex gap-2 w-full">
                                        <!-- Form Keranjang -->
                                        <form action="{{ route('keranjang.store') }}" method="POST" class="flex-1">
                                            @csrf
                                            <input type="hidden" name="produk_id" value="{{ $p->id }}">
                                            <input type="hidden" name="jumlah" value="1">
                                            @if(count($warnaArr) == 1)
                                                <input type="hidden" name="warna" value="{{ trim(array_values($warnaArr)[0]) }}">
                                            @endif
                                            @if(count($ukuranArr) == 1)
                                                <input type="hidden" name="ukuran" value="{{ trim(array_values($ukuranArr)[0]) }}">
                                            @endif
                                            <button type="submit"
                                               class="w-full h-full flex items-center justify-center gap-1.5 py-2.5 bg-white hover:bg-orange-50 border border-orange-400 text-orange-500 rounded-xl text-xs font-semibold transition shadow-sm">
                                                <i class="fas fa-shopping-cart text-[11px]"></i> Keranjang
                                            </button>
                                        </form>

                                        <!-- Form Beli -->
                                        <form action="{{ route('checkout.buynow') }}" method="POST" class="flex-1">
                                            @csrf
                                            <input type="hidden" name="produk_id" value="{{ $p->id }}">
                                            <input type="hidden" name="jumlah" value="1">
                                            @if(count($warnaArr) == 1)
                                                <input type="hidden" name="warna" value="{{ trim(array_values($warnaArr)[0]) }}">
                                            @endif
                                            @if(count($ukuranArr) == 1)
                                                <input type="hidden" name="ukuran" value="{{ trim(array_values($ukuranArr)[0]) }}">
                                            @endif
                                            <button type="submit"
                                               class="w-full h-full flex items-center justify-center gap-1.5 py-2.5 bg-orange-500 hover:bg-orange-600 text-white rounded-xl text-xs font-semibold transition shadow-sm">
                                                <i class="fas fa-bolt text-[11px]"></i> Beli
                                            </button>
                                        </form>
                                    </div>
                                @else
                                    <div class="flex gap-2 w-full">
                                        <a href="{{ route('produk.show', $p->id) }}"
                                           class="flex-1 flex items-center justify-center gap-1.5 py-2.5 bg-white hover:bg-orange-50 border border-orange-400 text-orange-500 rounded-xl text-xs font-semibold transition shadow-sm">
                                            <i class="fas fa-shopping-cart text-[11px]"></i> Keranjang
                                        </a>
                                        <a href="{{ route('produk.show', $p->id) }}"
                                           class="flex-1 flex items-center justify-center gap-1.5 py-2.5 bg-orange-500 hover:bg-orange-600 text-white rounded-xl text-xs font-semibold transition shadow-sm">
                                            <i class="fas fa-bolt text-[11px]"></i> Beli
                                        </a>
                                    </div>
                                @endif
                            @endif
                            @endauth
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- PAGINATION -->
            <div class="pagination-wrapper mt-8">
                {{ $produk->links() }}
            </div>

            <!-- NO RESULTS -->
            <div id="noResults" class="hidden bg-white rounded-xl shadow-lg border border-gray-100 p-8 text-center mt-6 w-full">
                <div class="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                    <i class="fas fa-search text-gray-400 text-xl"></i>
                </div>
                <h4 class="font-bold text-gray-800 mb-1">Produk Tidak Ditemukan</h4>
                <p class="text-gray-500 text-sm">Coba gunakan kata kunci pencarian yang berbeda</p>
            </div>
        @endif
    </div>

<script>
    function toggleNotifDropdown(event) {
        if (event) { event.preventDefault(); event.stopPropagation(); }
        const dropdown = document.getElementById('notifDropdownUser');
        if (dropdown) {
            dropdown.classList.toggle('hidden');
        }
        // Close user dropdown if open
        const userDropdown = document.getElementById('dropdownMenu');
        if (userDropdown) userDropdown.classList.add('hidden');
    }

    function toggleUserDropdown(event) {
        if (event) { event.preventDefault(); event.stopPropagation(); }
        const dropdown = document.getElementById('dropdownMenu');
        const icon = document.getElementById('dropdownIcon');
        if (!dropdown) return;
        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)';
        }
        // Close notif dropdown if open
        const notifDropdown = document.getElementById('notifDropdownUser');
        if (notifDropdown) notifDropdown.classList.add('hidden');
    }

    document.addEventListener('click', function(event) {
        const userDropdown = document.getElementById('userDropdown');
        const dropdownMenu = document.getElementById('dropdownMenu');
        const dropdownIcon = document.getElementById('dropdownIcon');
        const notifDropdown = document.getElementById('notifDropdownUser');
        const notifButton = document.getElementById('notifButtonUser');

        if (userDropdown && !userDropdown.contains(event.target)) {
            if (dropdownMenu && !dropdownMenu.classList.contains('hidden')) {
                dropdownMenu.classList.add('hidden');
                if (dropdownIcon) dropdownIcon.style.transform = 'rotate(0deg)';
            }
        }

        if (notifDropdown && notifButton && !notifButton.contains(event.target) && !notifDropdown.contains(event.target)) {
            notifDropdown.classList.add('hidden');
        }
    });

    document.getElementById('dropdownMenu')?.addEventListener('click', function(event) {
        event.stopPropagation();
    });

    document.addEventListener('DOMContentLoaded', function() {
        // Auto submit search dengan debounce 500ms
        const searchInput = document.getElementById('searchProduct');
        if (searchInput) {
            let timeout;
            searchInput.addEventListener('input', function() {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    document.getElementById('filterForm').submit();
                }, 500);
            });
        }

        // Auto submit kategori saat berubah
        const categoryFilter = document.getElementById('categoryFilter');
        if (categoryFilter) {
            categoryFilter.addEventListener('change', function() {
                document.getElementById('filterForm').submit();
            });
        }
    });

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

    setTimeout(() => {
        const bar = document.getElementById('toastProgress');
        if (bar) bar.style.width = '0%';
    }, 100);

    setTimeout(() => closeToast(), 5100);

    window.toggleUserDropdown = toggleUserDropdown;
    window.closeToast = closeToast;
</script>
</body>
</html>