@extends('layouts.app')
@section('title', 'Manajemen Produk')
@section('content')

<div class="bg-[#fdf8f9] min-h-screen pb-20">
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10">

        {{-- HEADER --}}
        <div class="mb-12 flex flex-col md:flex-row md:items-center justify-between gap-6 bg-white p-8 rounded-[40px] shadow-sm border border-pink-100/50">
            <div>
                <div class="flex items-center gap-2 mb-3">
                    <span class="w-8 h-[2px] bg-pink-400"></span>
                    <span class="text-[11px] font-black uppercase tracking-[0.3em] text-pink-500">
                        {{ Auth::check() && Auth::user()->role == 'admin' ? 'Inventory Control' : 'Premium ATK Collection' }}
                    </span>
                </div>
                <h1 class="text-4xl md:text-5xl font-black text-slate-900 tracking-tight">
                    @if(Auth::check() && Auth::user()->role == 'admin')
                        Product <span class="text-pink-500">Management</span>
                    @else
                        Our <span class="text-pink-500">Collection</span>
                    @endif
                </h1>
                <p class="text-slate-400 text-sm mt-3 font-medium flex items-center gap-2">
                    <i data-lucide="package" class="w-4 h-4 text-pink-400"></i>
                    Menampilkan <span class="text-slate-900 font-bold mx-1">{{ $products->count() }}</span> produk pilihan
                </p>
            </div>

            @if(Auth::check() && Auth::user()->role == 'admin')
                <a href="{{ route('admin.products.create') }}"
                   class="group inline-flex items-center gap-3 px-8 py-5 bg-slate-900 text-white text-sm font-bold rounded-2xl hover:bg-pink-500 transition-all duration-500 shadow-xl shadow-slate-200 hover:shadow-pink-200 uppercase tracking-widest">
                   <i data-lucide="plus-circle" class="w-5 h-5 group-hover:rotate-90 transition-transform duration-500"></i>
                   Tambah Produk
                </a>
            @endif
        </div>

        {{-- ============================================================ --}}
        {{-- SEARCH & FILTER — ADMIN                                       --}}
        {{-- ============================================================ --}}
        @if(Auth::check() && Auth::user()->role == 'admin')
        <div class="mb-8">
            <form method="GET" action="{{ route('admin.products.index') }}"
                  class="bg-white rounded-[32px] p-6 shadow-sm border border-pink-50 flex flex-col md:flex-row gap-4 items-stretch md:items-center">

                {{-- Search Input --}}
                <div class="flex-1 relative">
                    <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                        <i data-lucide="search" class="w-4 h-4 text-pink-400"></i>
                    </div>
                    <input type="text"
                           name="search"
                           value="{{ request('search') }}"
                           placeholder="Cari nama produk..."
                           class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border-2 border-slate-100 focus:border-pink-400 rounded-2xl text-sm font-medium outline-none transition-all placeholder:text-slate-300">
                </div>

                {{-- Category Filter --}}
                <div class="relative md:w-56">
                    <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                        <i data-lucide="layers" class="w-4 h-4 text-pink-400"></i>
                    </div>
                    <select name="category"
                            class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border-2 border-slate-100 focus:border-pink-400 rounded-2xl text-sm font-medium outline-none transition-all appearance-none cursor-pointer">
                        <option value="">Semua Kategori</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
                        <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
                    </div>
                </div>

                {{-- Tombol Cari --}}
                <button type="submit"
                        class="px-8 py-3.5 bg-slate-900 hover:bg-pink-500 text-white font-black text-xs uppercase tracking-widest rounded-2xl transition-all shadow-lg shadow-slate-200 hover:shadow-pink-200 flex items-center gap-2 justify-center">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Cari
                </button>

                {{-- Reset --}}
                @if(request('search') || request('category'))
                <a href="{{ route('admin.products.index') }}"
                   class="px-6 py-3.5 bg-pink-50 hover:bg-pink-100 text-pink-500 font-black text-xs uppercase tracking-widest rounded-2xl transition-all flex items-center gap-2 justify-center">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    Reset
                </a>
                @endif

            </form>

            {{-- Info hasil filter --}}
            @if(request('search') || request('category'))
            <div class="mt-4 flex items-center gap-3 flex-wrap px-2">
                <span class="text-xs text-slate-400 font-bold uppercase tracking-widest">Filter aktif:</span>
                @if(request('search'))
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-pink-50 text-pink-600 rounded-full text-[10px] font-black uppercase">
                    <i data-lucide="search" class="w-3 h-3"></i>
                    "{{ request('search') }}"
                </span>
                @endif
                @if(request('category'))
                    @php $activeCat = $categories->firstWhere('id', request('category')); @endphp
                    @if($activeCat)
                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-600 rounded-full text-[10px] font-black uppercase">
                        <i data-lucide="layers" class="w-3 h-3"></i>
                        {{ $activeCat->name }}
                    </span>
                    @endif
                @endif
                <span class="text-[10px] text-slate-400 font-bold italic">— {{ $products->count() }} produk ditemukan</span>
            </div>
            @endif
        </div>
        @endif
        {{-- ============================================================ --}}

        {{-- ============================================================ --}}
        {{-- SEARCH & FILTER — USER                                        --}}
        {{-- ============================================================ --}}
        @if(Auth::check() && Auth::user()->role != 'admin')
        <div class="mb-10">
            <form method="GET" action="{{ route('user.products.index') }}"
                  class="bg-white rounded-[32px] p-6 shadow-sm border border-pink-50 flex flex-col md:flex-row gap-4 items-stretch md:items-center">

                {{-- Search Input --}}
                <div class="flex-1 relative">
                    <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                        <i data-lucide="search" class="w-4 h-4 text-pink-400"></i>
                    </div>
                    <input type="text"
                           name="search"
                           value="{{ request('search') }}"
                           placeholder="Cari produk..."
                           class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border-2 border-slate-100 focus:border-pink-400 rounded-2xl text-sm font-medium outline-none transition-all placeholder:text-slate-300">
                </div>

                {{-- Category Filter --}}
                <div class="relative md:w-56">
                    <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
                        <i data-lucide="layers" class="w-4 h-4 text-pink-400"></i>
                    </div>
                    <select name="category"
                            class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border-2 border-slate-100 focus:border-pink-400 rounded-2xl text-sm font-medium outline-none transition-all appearance-none cursor-pointer">
                        <option value="">Semua Kategori</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
                        <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
                    </div>
                </div>

                {{-- Tombol Cari --}}
                <button type="submit"
                        class="px-8 py-3.5 bg-slate-900 hover:bg-pink-500 text-white font-black text-xs uppercase tracking-widest rounded-2xl transition-all shadow-lg shadow-slate-200 hover:shadow-pink-200 flex items-center gap-2 justify-center">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Cari
                </button>

                {{-- Reset (muncul kalau ada filter aktif) --}}
                @if(request('search') || request('category'))
                <a href="{{ route('user.products.index') }}"
                   class="px-6 py-3.5 bg-pink-50 hover:bg-pink-100 text-pink-500 font-black text-xs uppercase tracking-widest rounded-2xl transition-all flex items-center gap-2 justify-center">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    Reset
                </a>
                @endif

            </form>

            {{-- Info hasil filter --}}
            @if(request('search') || request('category'))
            <div class="mt-4 flex items-center gap-3 flex-wrap px-2">
                <span class="text-xs text-slate-400 font-bold uppercase tracking-widest">Filter aktif:</span>
                @if(request('search'))
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-pink-50 text-pink-600 rounded-full text-[10px] font-black uppercase">
                    <i data-lucide="search" class="w-3 h-3"></i>
                    "{{ request('search') }}"
                </span>
                @endif
                @if(request('category'))
                    @php $activeCat = $categories->firstWhere('id', request('category')); @endphp
                    @if($activeCat)
                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-600 rounded-full text-[10px] font-black uppercase">
                        <i data-lucide="layers" class="w-3 h-3"></i>
                        {{ $activeCat->name }}
                    </span>
                    @endif
                @endif
                <span class="text-[10px] text-slate-400 font-bold italic">— {{ $products->count() }} produk ditemukan</span>
            </div>
            @endif
        </div>
        @endif
        {{-- ============================================================ --}}

        @if(Auth::check() && Auth::user()->role == 'admin')
            {{-- ================= ADMIN VIEW (TABLE) ================= --}}
            <div class="bg-white rounded-[35px] shadow-sm border border-pink-50 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-separate border-spacing-0">
                        <thead>
                            <tr class="bg-slate-50/50">
                                <th class="px-8 py-6 text-[10px] font-black uppercase tracking-widest text-slate-400 border-b border-slate-100">Info Produk</th>
                                <th class="px-8 py-6 text-[10px] font-black uppercase tracking-widest text-slate-400 border-b border-slate-100">Kategori</th>
                                <th class="px-8 py-6 text-[10px] font-black uppercase tracking-widest text-slate-400 border-b border-slate-100">Harga</th>
                                <th class="px-8 py-6 text-[10px] font-black uppercase tracking-widest text-slate-400 border-b border-slate-100 text-center">Stok</th>
                                <th class="px-8 py-6 text-[10px] font-black uppercase tracking-widest text-slate-400 border-b border-slate-100 text-right">Kelola</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @forelse($products as $product)
                            <tr class="hover:bg-pink-50/20 transition-colors group">
                                <td class="px-8 py-5">
                                    <div class="flex items-center gap-5">
                                        <div class="w-16 h-16 rounded-2xl overflow-hidden border-2 border-white shadow-sm ring-1 ring-slate-100 flex-shrink-0 group-hover:ring-pink-200 transition-all">
                                            <img src="{{ asset('storage/' . $product->image) }}" class="w-full h-full object-cover">
                                        </div>
                                        <div>
                                            <div class="font-bold text-slate-900 group-hover:text-pink-600 transition-colors">{{ $product->name }}</div>
                                            <div class="text-[10px] text-slate-400 font-bold mt-1 uppercase tracking-tighter">SKU: {{ str_pad($product->id, 5, '0', STR_PAD_LEFT) }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-8 py-5">
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-slate-100 text-slate-500 rounded-lg text-[10px] font-black uppercase tracking-tight">
                                        <span class="w-1 h-1 rounded-full bg-slate-400"></span>
                                        {{ $product->category->name }}
                                    </span>
                                </td>
                                <td class="px-8 py-5">
                                    <span class="font-black text-slate-700">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
                                </td>
                                <td class="px-8 py-5 text-center">
                                    @php
                                        $stockColor = $product->stock == 0
                                            ? 'text-red-500 bg-red-50 ring-red-100'
                                            : ($product->stock <= 5
                                                ? 'text-orange-500 bg-orange-50 ring-orange-100'
                                                : 'text-emerald-500 bg-emerald-50 ring-emerald-100');
                                    @endphp
                                    <span class="inline-block min-w-[40px] px-3 py-1.5 rounded-xl font-black text-xs ring-1 ring-inset {{ $stockColor }}">
                                        {{ $product->stock }}
                                    </span>
                                </td>
                                <td class="px-8 py-5 text-right">
                                    <div class="flex justify-end items-center gap-1">
                                        <a href="{{ route('admin.products.show', $product) }}" class="p-2.5 text-slate-400 hover:text-pink-500 hover:bg-pink-50 rounded-xl transition-all">
                                            <i data-lucide="eye" class="w-4 h-4"></i>
                                        </a>
                                        <a href="{{ route('admin.products.edit', $product->id) }}" class="p-2.5 text-slate-400 hover:text-amber-500 hover:bg-amber-50 rounded-xl transition-all">
                                            <i data-lucide="edit-3" class="w-4 h-4"></i>
                                        </a>
                                        <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" onsubmit="return confirm('Hapus produk ini?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="p-2.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all">
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="py-20 text-center">
                                    <div class="flex flex-col items-center gap-3">
                                        <div class="w-16 h-16 bg-pink-50 text-pink-300 rounded-full flex items-center justify-center">
                                            <i data-lucide="package-x" class="w-8 h-8"></i>
                                        </div>
                                        <p class="font-black text-slate-700">Produk tidak ditemukan</p>
                                        @if(request('search') || request('category'))
                                        <p class="text-slate-400 text-sm">Coba kata kunci atau kategori lain</p>
                                        <a href="{{ route('admin.products.index') }}"
                                           class="inline-block mt-2 px-6 py-2.5 bg-slate-900 text-white font-black text-xs uppercase tracking-widest rounded-2xl hover:bg-pink-500 transition-all">
                                            Lihat Semua Produk
                                        </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        @else
            {{-- ================= USER VIEW (GRID) ================= --}}
            @if($products->isEmpty())
            <div class="text-center py-24 bg-white rounded-[50px] border-2 border-dashed border-pink-100">
                <div class="w-20 h-20 bg-pink-50 text-pink-300 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="package-x" class="w-10 h-10"></i>
                </div>
                <p class="font-black text-slate-700 text-lg">Produk tidak ditemukan</p>
                <p class="text-slate-400 text-sm mt-1">Coba kata kunci atau kategori lain</p>
                <a href="{{ route('user.products.index') }}"
                   class="inline-block mt-6 px-8 py-3 bg-slate-900 text-white font-black text-xs uppercase tracking-widest rounded-2xl hover:bg-pink-500 transition-all">
                    Lihat Semua Produk
                </a>
            </div>
            @else
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-12">
                @foreach($products as $product)
                <div class="group relative flex flex-col">
                    {{-- Image Container --}}
                    <div class="relative aspect-[4/5] rounded-[40px] overflow-hidden bg-white border border-pink-50/50 shadow-sm transition-all duration-700 hover:shadow-2xl hover:shadow-pink-100/50">
                        <img src="{{ asset('storage/' . $product->image) }}"
                             class="w-full h-full object-cover transition duration-1000 group-hover:scale-110">

                        {{-- Stock Badge --}}
                        <div class="absolute top-5 left-5">
                            @if($product->stock > 0)
                                <span class="bg-white/90 backdrop-blur-md px-4 py-2 rounded-2xl text-[10px] font-black text-slate-800 shadow-sm uppercase tracking-widest border border-white/50">
                                    Stok: <span class="text-pink-500">{{ $product->stock }}</span>
                                </span>
                            @else
                                <span class="bg-red-500/90 backdrop-blur-md px-4 py-2 rounded-2xl text-[10px] font-black text-white shadow-sm uppercase tracking-widest">
                                    Out of Stock
                                </span>
                            @endif
                        </div>

                        {{-- Category Badge --}}
                        <div class="absolute top-5 right-5">
                            <span class="bg-slate-900/30 backdrop-blur-md px-3 py-1.5 rounded-xl text-[9px] font-bold text-white uppercase tracking-wider border border-white/20">
                                {{ $product->category->name }}
                            </span>
                        </div>

                        {{-- Overlay Actions --}}
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end p-6">
                            <a href="{{ route('user.products.show', $product) }}"
                               class="w-full py-3 bg-white text-slate-900 text-xs font-black uppercase tracking-widest rounded-2xl text-center transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                                Lihat Detail
                            </a>
                        </div>
                    </div>

                    {{-- Product Info --}}
                    <div class="mt-6 px-2">
                        <div class="flex justify-between items-start gap-4">
                            <div class="flex-1 min-w-0">
                                <h3 class="font-black text-lg text-slate-800 leading-tight truncate group-hover:text-pink-500 transition-colors">
                                    {{ $product->name }}
                                </h3>
                                {{-- Rating mini --}}
                                @php
                                    $avg = $product->averageRating();
                                    $totalReviews = $product->reviews()->count();
                                @endphp
                                @if($totalReviews > 0)
                                <div class="flex items-center gap-1 mt-1">
                                    <span class="text-amber-400 text-xs">★</span>
                                    <span class="text-xs font-black text-slate-600">{{ $avg }}</span>
                                    <span class="text-[9px] text-slate-400 font-bold">({{ $totalReviews }})</span>
                                </div>
                                @endif
                                <p class="text-pink-500 font-black text-xl mt-1">Rp {{ number_format($product->price, 0, ',', '.') }}</p>
                            </div>

                            @if($product->stock > 0)
                            <form action="{{ route('user.cart.add', $product->id) }}" method="POST">
                                @csrf
                                <button type="submit"
                                        class="w-12 h-12 flex items-center justify-center bg-pink-50 text-pink-500 rounded-2xl hover:bg-pink-500 hover:text-white transition-all shadow-sm hover:shadow-pink-200 flex-shrink-0">
                                    <i data-lucide="shopping-bag" class="w-5 h-5"></i>
                                </button>
                            </form>
                            @endif
                        </div>

                        @if($product->stock > 0)
                        <a href="{{ route('user.cart.checkout', $product->id) }}"
                           class="mt-4 flex items-center justify-center w-full h-14 bg-white border-2 border-slate-900 text-slate-900 text-[11px] font-black uppercase tracking-[0.2em] rounded-2xl hover:bg-slate-900 hover:text-white transition-all duration-300">
                            Beli Langsung
                        </a>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        @endif

    </main>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        if (typeof lucide !== 'undefined') lucide.createIcons();
    });
</script>
@endsection