@extends('layouts.app')

@section('title', 'Products')
@section('page', 'Products')

@section('content')
<div class="flex items-center justify-between mb-8 fade-in">
    <div class="flex items-center gap-4">
        <div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-2xl flex items-center justify-center border border-blue-500/10">
            <i class="fas fa-pills text-blue-400 text-lg"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-white">Products</h1>
            <p class="text-sm text-slate-500">Manage your product inventory</p>
        </div>
    </div>
    @can('create_products')
    <div class="flex gap-3">
        <button onclick="document.getElementById('importModal').classList.remove('hidden')" class="bg-blue-500/10 text-blue-400 border border-blue-500/20 px-4 py-2.5 rounded-xl hover:bg-blue-500/20 flex items-center gap-2 text-sm font-bold transition-all">
            <i class="fas fa-file-import"></i> Import
        </button>
        <a href="{{ route('products.create') }}" class="btn-primary px-4 py-2.5 rounded-xl text-white flex items-center gap-2 text-sm font-bold shadow-lg">
            <i class="fas fa-plus"></i> Add Product
        </a>
    </div>
    @endcan
</div>

{{-- Filter Bar --}}
<div class="table-container rounded-2xl overflow-hidden mb-8 fade-in">
    <div class="p-4 border-b border-white/[0.06]">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <div class="relative">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-600 text-sm"></i>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search products..."
                        class="input-modern pl-10 w-full rounded-xl px-3 py-2 text-sm">
                </div>
            </div>
            <div class="w-48">
                <select name="category" class="input-modern w-full rounded-xl px-3 py-2 text-sm">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="w-48">
                <select name="stock_status" class="input-modern w-full rounded-xl px-3 py-2 text-sm">
                    <option value="">All Stock</option>
                    <option value="low" {{ request('stock_status') == 'low' ? 'selected' : '' }}>Low Stock</option>
                    <option value="expired" {{ request('stock_status') == 'expired' ? 'selected' : '' }}>Expired</option>
                    <option value="expiring" {{ request('stock_status') == 'expiring' ? 'selected' : '' }}>Expiring Soon</option>
                </select>
            </div>
            <button type="submit" class="btn-primary px-4 py-2 rounded-xl text-white text-sm font-bold shadow-lg">
                <i class="fas fa-filter mr-1"></i> Filter
            </button>
        </form>
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full">
            <thead class="table-header border-b border-white/[0.06]">
                <tr>
                    <th class="px-6 py-4 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Product</th>
                    <th class="px-6 py-4 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Category</th>
                    <th class="px-6 py-4 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Batch</th>
                    <th class="px-6 py-4 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Cost</th>
                    <th class="px-6 py-4 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Sell</th>
                    <th class="px-6 py-4 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Promo</th>
                    <th class="px-6 py-4 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Stock</th>
                    <th class="px-6 py-4 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest">Expiry</th>
                    <th class="px-6 py-4 text-center text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status</th>
                    @canany(['edit_products', 'delete_products'])
                    <th class="px-6 py-4 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Actions</th>
                    @endcanany
                </tr>
            </thead>
            <tbody class="divide-y divide-white/[0.04]">
                @forelse($products as $product)
                    <tr class="table-row">
                        <td class="px-6 py-4">
                            <div class="flex items-center gap-3">
                                @if($product->image)
                                    <img src="{{ asset('uploads/products/' . $product->image) }}" class="h-9 w-9 rounded-xl object-cover flex-shrink-0 border border-white/10">
                                @else
                                    <div class="h-9 w-9 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400 flex-shrink-0 border border-blue-500/10">
                                        <i class="fas fa-pills text-sm"></i>
                                    </div>
                                @endif
                                <div>
                                    <a href="{{ route('products.show', $product) }}" class="text-sm font-bold text-white hover:text-indigo-400 transition-colors">{{ $product->name }}</a>
                                    <p class="text-xs text-slate-600">{{ $product->generic_name }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2.5 py-1 text-xs font-bold bg-white/5 text-slate-400 rounded-lg border border-white/[0.06]">{{ $product->category->name }}</span>
                        </td>
                        <td class="px-6 py-4 text-sm text-slate-400">{{ $product->batch_no ?? '-' }}</td>
                        <td class="px-6 py-4 text-sm text-right text-slate-400">${{ number_format($product->cost_price, 2) }}</td>
                        <td class="px-6 py-4 text-sm text-right font-bold text-white">${{ number_format($product->selling_price, 2) }}</td>
                        <td class="px-6 py-4 text-sm text-right">
                            @if($product->isOnPromo())
                                <span class="px-2 py-1 text-xs font-bold bg-rose-500/10 text-rose-400 rounded-lg border border-rose-500/10">
                                    ${{ number_format($product->promo_price, 2) }}
                                </span>
                            @else
                                <span class="text-slate-600">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-sm text-right">
                            @if($product->isLowStock())
                                <span class="px-2.5 py-1 text-xs font-bold bg-amber-500/10 text-amber-400 rounded-lg border border-amber-500/10">{{ $product->quantity }}</span>
                            @else
                                <span class="px-2.5 py-1 text-xs font-bold bg-emerald-500/10 text-emerald-400 rounded-lg border border-emerald-500/10">{{ $product->quantity }}</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-sm {{ $product->isExpired() ? 'text-red-400 font-bold' : 'text-slate-400' }}">
                            {{ displayDate($product->expiry_date) }}
                            @if($product->isExpired())
                                <span class="ml-1 text-[9px] bg-red-500/10 text-red-400 px-1.5 py-0.5 rounded-lg border border-red-500/10 font-bold">Expired</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center">
                            @if($product->is_active)
                                <span class="px-2.5 py-1 text-xs font-bold bg-emerald-500/10 text-emerald-400 rounded-lg border border-emerald-500/10">Active</span>
                            @else
                                <span class="px-2.5 py-1 text-xs font-bold bg-slate-500/10 text-slate-500 rounded-lg border border-slate-500/10">Inactive</span>
                            @endif
                        </td>
                        @canany(['edit_products', 'delete_products'])
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end gap-1">
                                @can('edit_products')
                                <a href="{{ route('products.edit', $product) }}" class="w-8 h-8 flex items-center justify-center text-indigo-400 hover:text-indigo-300 hover:bg-indigo-500/10 rounded-lg transition-colors" title="Edit">
                                    <i class="fas fa-pen text-sm"></i>
                                </a>
                                @endcan
                                @can('delete_products')
                                <form action="{{ route('products.destroy', $product) }}" method="POST" class="inline" onsubmit="return confirm('Delete this product?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="w-8 h-8 flex items-center justify-center text-red-500/60 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors" title="Delete">
                                        <i class="fas fa-trash text-sm"></i>
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </td>
                        @endcanany
                    </tr>
                @empty
                    <tr><td colspan="10" class="px-6 py-16 text-center">
                        <div class="w-16 h-16 bg-white/[0.03] rounded-2xl flex items-center justify-center mx-auto mb-4 border border-white/[0.06]">
                            <i class="fas fa-pills text-2xl text-slate-700"></i>
                        </div>
                        <p class="text-slate-400 font-semibold">No products found</p>
                    </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="p-4 border-t border-white/[0.06] bg-white/[0.01]">
        {{ $products->links() }}
    </div>
</div>

{{-- Import Modal --}}
<div id="importModal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
    <div class="bg-slate-900 rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden border border-white/[0.08] fade-in">
        <div class="flex items-center justify-between p-5 border-b border-white/[0.06] bg-gradient-to-r from-indigo-500/20 to-purple-500/20">
            <h3 class="text-lg font-bold text-white flex items-center gap-2">
                <i class="fas fa-file-import text-indigo-400"></i> Import Products
            </h3>
            <button onclick="document.getElementById('importModal').classList.add('hidden')" class="text-slate-400 hover:text-white transition-colors">
                <i class="fas fa-xmark text-lg"></i>
            </button>
        </div>

        <div class="p-6">
            <div class="bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-4 mb-6">
                <div class="flex gap-3">
                    <i class="fas fa-circle-info text-indigo-400 mt-0.5"></i>
                    <div>
                        <p class="text-sm font-bold text-indigo-300">CSV Format Required</p>
                        <p class="text-xs text-indigo-400/70 mt-1">Required columns: <code class="bg-indigo-500/20 px-1.5 py-0.5 rounded text-indigo-300 font-mono">name</code>, <code class="bg-indigo-500/20 px-1.5 py-0.5 rounded text-indigo-300 font-mono">selling_price</code>, <code class="bg-indigo-500/20 px-1.5 py-0.5 rounded text-indigo-300 font-mono">unit</code>, <code class="bg-indigo-500/20 px-1.5 py-0.5 rounded text-indigo-300 font-mono">category_name</code></p>
                    </div>
                </div>
            </div>

            <div class="mb-4">
                <a href="{{ route('products.template') }}" class="flex items-center gap-3 p-4 border-2 border-dashed border-indigo-500/30 rounded-xl hover:bg-indigo-500/10 transition-colors group cursor-pointer">
                    <div class="w-10 h-10 bg-indigo-500/10 rounded-lg flex items-center justify-center group-hover:bg-indigo-500/20 transition-colors">
                        <i class="fas fa-download text-indigo-400"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-indigo-300">Download CSV Template</p>
                        <p class="text-xs text-slate-500">Pre-formatted sample file with examples</p>
                    </div>
                    <i class="fas fa-chevron-right text-indigo-500/50 ml-auto text-sm"></i>
                </a>
            </div>

            <form method="POST" action="{{ route('products.import') }}" enctype="multipart/form-data" id="importForm">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-slate-300 mb-2">Upload CSV File</label>
                    <div class="border-2 border-dashed border-white/10 rounded-xl p-10 text-center hover:border-indigo-500/50 transition-colors cursor-pointer bg-white/[0.02] hover:bg-indigo-500/5" onclick="document.getElementById('importFile').click()">
                        <div class="w-12 h-12 bg-indigo-500/10 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-cloud-arrow-up text-xl text-indigo-400"></i>
                        </div>
                        <p class="text-sm text-slate-300 font-medium">Click to browse or drag & drop</p>
                        <p class="text-xs text-slate-600 mt-1">CSV files only, max 5MB</p>
                        <input type="file" name="file" id="importFile" accept=".csv" class="hidden" required>
                    </div>
                    <p id="fileName" class="text-sm text-slate-300 mt-3 hidden">
                        <i class="fas fa-file-csv text-indigo-400 mr-1"></i>
                        <span id="fileNameText" class="font-medium"></span>
                    </p>
                </div>
            </form>
        </div>

        <div class="flex justify-end gap-3 p-5 border-t border-white/[0.06] bg-white/[0.02]">
            <button onclick="document.getElementById('importModal').classList.add('hidden')" class="px-4 py-2 text-sm text-slate-400 border border-white/10 rounded-xl hover:bg-white/5 transition-colors font-bold">
                Cancel
            </button>
            <button type="submit" form="importForm" class="px-5 py-2 text-sm bg-indigo-500 text-white rounded-xl hover:bg-indigo-600 transition-colors font-bold shadow-lg shadow-indigo-500/25">
                <i class="fas fa-upload mr-1"></i> Import
            </button>
        </div>
    </div>
</div>

<script>
document.getElementById('importFile').addEventListener('change', function() {
    const fileName = this.files[0]?.name;
    if (fileName) {
        document.getElementById('fileName').classList.remove('hidden');
        document.getElementById('fileNameText').textContent = fileName;
    }
});
</script>
@endsection