@extends('layouts.admin')

@section('title', 'Data Produk')

@section('content')
<!-- Global Search -->
<div class="mb-10">
    <form action="{{ route('admin.products.index') }}" method="GET" class="relative max-w-2xl">
        @if(request('category'))
            <input type="hidden" name="category" value="{{ request('category') }}">
        @endif
        <input type="text" name="q" value="{{ request('q') }}" 
               placeholder="Cari nama produk..." 
               class="w-full pl-14 pr-6 py-5 bg-white rounded-[30px] pro-shadow border-none outline-none focus:ring-2 focus:ring-amber-500 transition-base text-slate-700">
        <div class="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300">
            <i class="fas fa-search text-xl"></i>
        </div>
        @if(request('q') || request('category'))
            <a href="{{ route('admin.products.index') }}" class="absolute right-6 top-1/2 -translate-y-1/2 text-[10px] font-bold text-amber-600 uppercase tracking-widest hover:text-red-500">
                Reset
            </a>
        @endif
    </form>
</div>

@if (!request('category') && !request('q'))
    <!-- CATEGORY OVERVIEW -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        @foreach ($categories as $cat)
            <a href="{{ route('admin.products.index', ['category' => $cat->id]) }}" class="glass-card pro-shadow rounded-[35px] p-8 hover:bg-amber-500 group transition-base">
                <div class="flex flex-col items-center text-center">
                    <div class="w-20 h-20 bg-amber-50 rounded-3xl flex items-center justify-center mb-6 group-hover:bg-white/20 transition-base">
                        <i class="fas fa-folder-open text-amber-500 text-2xl group-hover:text-white"></i>
                    </div>
                    <h4 class="font-heading text-xl font-bold text-slate-800 group-hover:text-white transition-base">{{ $cat->name }}</h4>
                    <p class="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-400 mt-2 group-hover:text-white/70">{{ $cat->products_count }} Produk</p>
                    
                    <div class="mt-8 px-6 py-2 bg-slate-50 rounded-full text-[10px] font-bold text-slate-500 group-hover:bg-white group-hover:text-amber-600 transition-base">
                        Kelola Produk &rarr;
                    </div>
                </div>
            </a>
        @endforeach
        
        <!-- Add Category Shortcut -->
        <a href="{{ route('admin.categories.index') }}" class="border-2 border-dashed border-slate-200 rounded-[35px] p-8 flex flex-col items-center justify-center text-slate-400 hover:border-amber-500 hover:text-amber-500 transition-base">
            <i class="fas fa-plus-circle text-2xl mb-4"></i>
            <span class="text-xs font-bold uppercase tracking-widest">Tambah Kategori</span>
        </a>
    </div>

@else
    <!-- PRODUCT LIST FOR CATEGORY -->
    <div class="mb-8 flex items-center justify-between">
        <a href="{{ route('admin.products.index') }}" class="inline-flex items-center text-xs font-bold text-slate-400 hover:text-amber-600 transition-base">
            <i class="fas fa-arrow-left mr-2"></i>
            Kembali ke Kategori
        </a>
        @if ($activeCat = $categories->firstWhere('id', request('category')))
            <div class="px-6 py-2 bg-amber-500 text-white rounded-full text-[10px] font-bold uppercase tracking-widest shadow-lg shadow-amber-500/20">
                Kategori: {{ $activeCat->name }}
            </div>
        @elseif (request('q'))
            <div class="px-6 py-2 bg-slate-800 text-white rounded-full text-[10px] font-bold uppercase tracking-widest">
                Pencarian Global
            </div>
        @endif
    </div>

    <div class="glass-card pro-shadow rounded-[40px] overflow-hidden">
        <div class="p-10 border-b border-slate-50 flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div>
                @if(request('q'))
                    <h3 class="font-heading text-2xl font-bold text-slate-800">Hasil Pencarian: "{{ request('q') }}"</h3>
                    <p class="text-xs text-slate-600 mt-1">Ditemukan {{ count($products) }} produk yang cocok</p>
                @else
                    <h3 class="font-heading text-2xl font-bold text-slate-800">Koleksi {{ $activeCat ? $activeCat->name : 'Semua' }}</h3>
                    <p class="text-xs text-slate-600 mt-1">Mengelola produk dalam kategori {{ $activeCat ? $activeCat->name : 'Semua' }}</p>
                @endif
            </div>
            <div class="flex items-center gap-4">
                <a href="{{ route('admin.products.create') }}" class="bg-slate-900 hover:bg-black text-white px-8 py-3 rounded-2xl text-xs font-bold transition-base flex items-center gap-2">
                    <i class="fas fa-plus"></i>
                    <span>Tambah Produk Baru</span>
                </a>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-slate-50/50 text-[10px] uppercase tracking-[0.2em] text-slate-600">
                    <tr>
                        <th class="px-10 py-6 font-bold">Nama Produk</th>
                        <th class="px-10 py-6 font-bold">Kategori</th>
                        <th class="px-10 py-6 font-bold">Berat</th>
                        <th class="px-10 py-6 font-bold">Harga</th>
                        <th class="px-10 py-6 text-right font-bold">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse ($products as $p)
                        <tr class="hover:bg-slate-50/50 transition-base group">
                            <td class="px-10 py-8">
                                <div class="flex items-center space-x-6">
                                    <div class="w-16 h-16 rounded-3xl overflow-hidden bg-slate-100 pro-shadow flex-shrink-0">
                                        @if ($p->main_image)
                                            <img src="{{ asset('uploads/' . $p->main_image) }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-slate-200">
                                                <i class="fas fa-image text-xl"></i>
                                            </div>
                                        @endif
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold text-slate-800 line-clamp-2 max-w-[300px]" title="{{ $p->name }}">{{ $p->name }}</p>
                                        <p class="text-[10px] text-slate-400 mt-1 uppercase tracking-wider font-semibold">{{ $p->availability }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-10 py-8">
                                <span class="px-3 py-1.5 bg-slate-100 text-slate-500 rounded-full text-[10px] font-bold uppercase tracking-widest whitespace-nowrap">
                                    {{ $p->category->name ?? 'Umum' }}
                                </span>
                            </td>
                            <td class="px-10 py-8">
                                <span class="text-sm text-slate-600 font-medium whitespace-nowrap">{{ $p->weight }} gram</span>
                            </td>
                            <td class="px-10 py-8">
                                <p class="text-sm font-bold text-slate-700 whitespace-nowrap">
                                    @if ($p->price_to > $p->price)
                                        Rp {{ number_format($p->price, 0, ',', '.') }} - Rp {{ number_format($p->price_to, 0, ',', '.') }}
                                    @else
                                        Rp {{ number_format($p->price, 0, ',', '.') }}
                                    @endif
                                </p>
                            </td>
                            <td class="px-10 py-8 text-right">
                                <div class="flex items-center justify-end space-x-3 opacity-0 group-hover:opacity-100 transition-base">
                                    <a href="{{ route('admin.products.copy', $p->id) }}" title="Salin Produk" class="w-10 h-10 inline-flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:bg-emerald-500 hover:text-white transition-base">
                                        <i class="fas fa-copy text-xs"></i>
                                    </a>
                                    <a href="{{ route('admin.products.edit', $p->id) }}" title="Edit Produk" class="w-10 h-10 inline-flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:bg-amber-500 hover:text-white transition-base">
                                        <i class="fas fa-pencil-alt text-xs"></i>
                                    </a>
                                    <a href="{{ route('admin.products.destroy', $p->id) }}" onclick="deleteProduct(event, this.href)" title="Hapus Produk" class="w-10 h-10 inline-flex items-center justify-center rounded-xl bg-slate-50 text-slate-400 hover:bg-red-500 hover:text-white transition-base">
                                        <i class="fas fa-trash-alt text-xs"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-10 py-32 text-center">
                                <div class="opacity-20 flex flex-col items-center">
                                    <i class="fas fa-box-open text-6xl mb-6"></i>
                                    <p class="text-[10px] uppercase tracking-[0.5em] font-bold">Belum Ada Produk di Kategori Ini</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endif

<script>
    function deleteProduct(event, url) {
        event.preventDefault();
        Swal.fire({
            title: 'Hapus Produk Permanen?',
            text: 'Apakah Anda yakin ingin menghapus produk ini secara permanen?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#111111',
            cancelButtonColor: '#B08256',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal',
            background: '#ffffff',
            customClass: {
                popup: 'rounded-2xl',
            }
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = url;
            }
        });
    }
</script>
@endsection