@extends('admin.layouts.app')

@section('title', 'Products')

@section('content')
    <div class="space-y-6" x-data>
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-white tracking-tight">Products</h1>
                <p class="text-slate-400 mt-1">{{ $products->total() }} total products managed.</p>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <!-- Search & Filter Form -->
                <form id="filterForm" action="{{ route('admin.products.index') }}" method="GET"
                    class="flex flex-wrap items-center gap-3">
                    <!-- Category Filter -->
                    <div x-data="categoryFilter()" class="relative w-64" @click.away="open = false">
                        <input type="hidden" name="category" :value="selected">
                        <button type="button" @click="open = !open"
                            class="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-2.5 text-left text-sm text-slate-300 focus:ring-2 focus:ring-blue-500 transition-all flex items-center justify-between">
                            <span class="truncate" x-text="selectedName"></span>
                            <i data-lucide="chevron-down" class="w-4 h-4 text-slate-500"></i>
                        </button>
                        <!-- Dropdown -->
                        <div x-show="open" x-cloak
                            class="absolute z-50 mt-2 w-full bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden py-2">
                            <div class="px-3 pb-2 border-b border-slate-800">
                                <input type="text" x-model="search" placeholder="Search categories..."
                                    class="w-full bg-slate-800 border-none rounded-lg px-3 py-1.5 text-xs text-white focus:ring-1 focus:ring-blue-500">
                            </div>
                            <ul class="max-h-60 overflow-y-auto no-scrollbar">
                                <li @click="select('')"
                                    class="px-4 py-2 text-sm text-slate-400 hover:bg-slate-800 hover:text-white cursor-pointer transition-colors"
                                    :class="{'bg-blue-600/10 text-blue-400': selected === ''}">
                                    All Categories
                                </li>
                                <template x-for="cat in filteredCategories" :key="cat.id">
                                    <li @click="select(cat.id)"
                                        class="px-4 py-2 text-sm text-slate-400 hover:bg-slate-800 hover:text-white cursor-pointer transition-colors"
                                        :class="{'bg-blue-600/10 text-blue-400': selected == cat.id}" x-text="cat.name">
                                    </li>
                                </template>
                            </ul>
                        </div>
                    </div>

                    <!-- Product Search -->
                    <div class="relative w-64" x-data="productAutocomplete()" @click.away="showSuggestions = false">
                        <i data-lucide="search" class="absolute left-3 top-3 w-4 h-4 text-slate-500"></i>
                        <input type="text" name="search" x-model.debounce.300ms="query" placeholder="Search products..."
                            class="w-full bg-slate-800 border border-slate-700 rounded-xl pl-10 pr-4 py-2.5 text-sm text-white focus:ring-2 focus:ring-blue-500 transition-all"
                            @focus="showSuggestions = true">
                        <!-- Suggestions Dropdown -->
                        <div x-show="showSuggestions && suggestions.length > 0" x-cloak
                            class="absolute z-50 mt-2 w-full bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden py-2">
                            <template x-for="product in suggestions" :key="product.id">
                                <div @click="selectSuggestion(product)"
                                    class="px-4 py-2 hover:bg-slate-800 cursor-pointer transition-colors">
                                    <p class="text-xs font-medium text-white" x-text="product.name"></p>
                                </div>
                            </template>
                        </div>
                    </div>
                </form>

                <div class="flex items-center gap-2">
                    <a href="{{ route('admin.products.export-pdf') }}"
                        class="p-2.5 bg-slate-800 border border-slate-700 rounded-xl text-slate-400 hover:text-white hover:bg-slate-700 transition-all"
                        title="Export PDF">
                        <i data-lucide="download" class="w-5 h-5"></i>
                    </a>
                    <a href="{{ route('admin.products.create') }}"
                        class="flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-2.5 rounded-xl shadow-lg shadow-blue-500/20 transition-all text-sm font-medium">
                        <i data-lucide="plus" class="w-4 h-4"></i>
                        Add Product
                    </a>
                </div>
            </div>
        </div>

        <!-- Stats & Bulk Actions -->
        <div
            class="flex flex-wrap items-center justify-between gap-4 bg-slate-900/50 border border-white/5 p-4 rounded-2xl">
            <div class="flex items-center gap-4">
                <span
                    class="text-xs font-bold text-blue-400 uppercase tracking-widest bg-blue-400/10 px-3 py-1 rounded-full">Inventory
                    Overview</span>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.products.sample') }}"
                    class="text-emerald-400 hover:text-emerald-300 transition-colors p-2 bg-emerald-500/10 rounded-lg flex items-center gap-2 text-xs font-bold"
                    title="Download Sample Excel">
                    <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
                    SAMPLE.XLSX
                </a>
                <form action="{{ route('admin.products.import') }}" method="POST" enctype="multipart/form-data"
                    class="flex items-center">
                    @csrf
                    <label
                        class="cursor-pointer bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl px-4 py-2 text-xs font-bold text-slate-300 transition-all flex items-center gap-2">
                        <i data-lucide="upload-cloud" class="w-4 h-4"></i>
                        BULK UPLOAD
                        <input type="file" name="file" onchange="this.form.submit()" class="hidden">
                    </label>
                </form>
            </div>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
            <div
                class="bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 p-4 rounded-xl flex items-center gap-3 animate-in fade-in slide-in-from-top-4 duration-300">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
                <p class="text-sm font-medium">{{ session('success') }}</p>
            </div>
        @endif

        @if(session('error'))
            <div
                class="bg-rose-500/10 border border-rose-500/20 text-rose-400 p-4 rounded-xl flex items-center gap-3 animate-in fade-in slide-in-from-top-4 duration-300">
                <i data-lucide="alert-circle" class="w-5 h-5"></i>
                <p class="text-sm font-medium">{{ session('error') }}</p>
            </div>
        @endif

        <!-- Product Table -->
        <div class="glass-card rounded-2xl overflow-hidden border border-white/5 shadow-2xl">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-white/5 border-b border-white/5">
                        <tr>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Product</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500">Category</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 text-center">
                                Price (SP)</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 text-center">
                                Variations</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 text-center">
                                Status</th>
                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 text-right">
                                Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        @forelse($products as $product)
                            <tr class="hover:bg-white/5 transition-all group">
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-4">
                                        <div
                                            class="w-12 h-12 rounded-xl border border-white/10 overflow-hidden bg-slate-800 flex-shrink-0">
                                            @if($product->images->isNotEmpty())
                                                <img src="{{ $product->images->first()->image_path }}" alt="{{ $product->name }}"
                                                    class="w-full h-full object-cover">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center text-slate-600">
                                                    <i data-lucide="image" class="w-5 h-5"></i>
                                                </div>
                                            @endif
                                        </div>
                                        <div>
                                            <p class="text-sm font-bold text-white group-hover:text-blue-400 transition-colors">
                                                {{ $product->name }}</p>
                                            <p class="text-[10px] text-slate-500 font-mono mt-0.5">ID: #{{ $product->id }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <p class="text-sm text-slate-400 font-medium">{{ $product->category->name }}</p>
                                    @if($product->subcategory)
                                        <p class="text-[10px] text-slate-600 mt-1 uppercase tracking-widest font-bold">
                                            {{ $product->subcategory->name }}</p>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <p class="text-sm font-bold text-white">₹{{ number_format($product->sp, 2) }}</p>
                                    <p class="text-xs text-slate-500 line-through">₹{{ number_format($product->mrp, 2) }}</p>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div
                                        class="inline-flex items-center gap-2 px-3 py-1 bg-slate-800 rounded-lg border border-slate-700">
                                        <span class="text-xs font-bold text-blue-400">{{ $product->variations_count }}</span>
                                        <a href="{{ route('admin.products.edit', $product->id) }}#variations"
                                            class="text-slate-500 hover:text-blue-400 transition-colors">
                                            <i data-lucide="settings-2" class="w-3.5 h-3.5"></i>
                                        </a>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" onclick="toggleStatus({{ $product->id }})" class="sr-only peer"
                                            {{ $product->status ? 'checked' : '' }}>
                                        <div
                                            class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                        </div>
                                    </label>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="{{ route('shop.product', $product->slug) }}" target="_blank"
                                            class="p-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-all"
                                            title="View on Shop">
                                            <i data-lucide="external-link" class="w-4 h-4"></i>
                                        </a>
                                        <button @click="$dispatch('open-quick-edit-modal', { productId: {{ $product->id }} })"
                                            class="p-2 text-amber-400 hover:bg-amber-400/10 rounded-lg transition-all"
                                            title="Quick Edit">
                                            <i data-lucide="zap" class="w-4 h-4"></i>
                                        </button>
                                        <a href="{{ route('admin.products.edit', $product->id) }}"
                                            class="p-2 text-blue-400 hover:bg-blue-400/10 rounded-lg transition-all"
                                            title="Edit">
                                            <i data-lucide="edit-3" class="w-4 h-4"></i>
                                        </a>
                                        <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST"
                                            class="inline" onsubmit="return confirm('Delete this product permanently?');">
                                            @csrf
                                            @method('DELETE')
                                            <button class="p-2 text-rose-400 hover:bg-rose-400/10 rounded-lg transition-all">
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center">
                                        <i data-lucide="package-search" class="w-12 h-12 text-slate-700 mb-4"></i>
                                        <p class="text-slate-500 font-bold uppercase tracking-widest text-xs">No products
                                            discovered</p>
                                        <a href="{{ route('admin.products.create') }}"
                                            class="mt-4 text-blue-400 hover:text-blue-300 text-sm font-bold flex items-center gap-2">
                                            <i data-lucide="plus" class="w-4 h-4"></i>
                                            CREATE YOUR FIRST PRODUCT
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-8">
            {{ $products->links() }}
        </div>
    </div>

    <!-- All the previous Modals and Scripts preserved and updated for dark theme -->
    @include('admin.products.partials.modals')

@endsection

@push('scripts')
    <script>
        // Preserving all the product page specific JS logic
        function categoryFilter() {
            return {
                open: false,
                search: '',
                selected: '{{ request('category') }}',
                selectedName: '{{ request('category') ? ($products->isNotEmpty() && $products->first()->category ? $products->first()->category->name : 'Category') : 'All Categories' }}',
                categories: @json($categories),
                get filteredCategories() {
                    if (this.search === '') return this.categories;
                    return this.categories.filter(c => c.name.toLowerCase().includes(this.search.toLowerCase()));
                },
                select(id) {
                    this.selected = id;
                    this.open = false;
                    document.getElementById('filterForm').submit();
                }
            }
        }

        function productAutocomplete() {
            return {
                query: '{{ request('search') }}',
                suggestions: [],
                showSuggestions: false,
                async init() {
                    this.$watch('query', async (val) => {
                        if (val.length < 2) {
                            this.suggestions = [];
                            return;
                        }
                        try {
                            const res = await fetch(`/admin/products/search?q=${val}`);
                            this.suggestions = await res.json();
                        } catch (e) { console.error(e); }
                    });
                },
                selectSuggestion(p) {
                    this.query = p.name;
                    this.showSuggestions = false;
                    document.getElementById('filterForm').submit();
                }
            }
        }

        async function toggleStatus(id) {
            try {
                await fetch(`/admin/products/${id}/toggle-status`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
            } catch (e) { console.error(e); }
        }
    </script>
@endpush