@extends('layouts.app')
@section('title', 'Kelola Produk')
@section('page-title', 'Kelola Produk')

@section('content')
<div class="space-y-4">
    {{-- Toolbar --}}
    <div class="flex flex-wrap items-center gap-3">
        <form method="GET" class="flex gap-2 flex-1 min-w-0">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="🔍 Cari nama, SKU, barcode..."
                class="flex-1 min-w-0 px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            <select name="category" class="px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none bg-white">
                <option value="">Semua Kategori</option>
                @foreach($categories as $cat)
                <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                @endforeach
            </select>
            <label class="flex items-center gap-1.5 px-3 py-2 border border-slate-200 rounded-xl text-sm cursor-pointer hover:bg-slate-50">
                <input type="checkbox" name="low_stock" value="1" {{ request('low_stock') ? 'checked' : '' }}> Stok Menipis
            </label>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-xl text-sm font-semibold hover:bg-blue-600 transition">Filter</button>
        </form>
        <a href="{{ route('products.create') }}"
           class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold rounded-xl text-sm transition flex items-center gap-2 shadow-sm">
            ➕ Tambah Produk
        </a>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr class="text-xs text-slate-500">
                        <th class="text-left px-4 py-3 font-semibold">Produk</th>
                        <th class="text-left px-4 py-3 font-semibold">SKU / Barcode</th>
                        <th class="text-left px-4 py-3 font-semibold">Kategori</th>
                        <th class="text-right px-4 py-3 font-semibold">Harga Modal</th>
                        <th class="text-right px-4 py-3 font-semibold">Harga Jual</th>
                        <th class="text-right px-4 py-3 font-semibold">Margin</th>
                        <th class="text-center px-4 py-3 font-semibold">Stok</th>
                        <th class="text-center px-4 py-3 font-semibold">Status</th>
                        <th class="text-center px-4 py-3 font-semibold">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($products as $product)
                    <tr class="hover:bg-slate-50 transition">
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center flex-shrink-0">
                                    @if($product->image)
                                    <img src="{{ asset('storage/'.$product->image) }}" class="w-full h-full object-cover rounded-xl" alt="">
                                    @else
                                    <span class="text-lg">{{ $product->category?->icon ?? '📦' }}</span>
                                    @endif
                                </div>
                                <div>
                                    <div class="font-semibold text-slate-800">{{ $product->name }}</div>
                                    <div class="text-xs text-slate-400">{{ $product->unit }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3">
                            <div class="font-mono text-xs text-blue-600">{{ $product->sku }}</div>
                            @if($product->barcode)
                            <div class="font-mono text-xs text-slate-400">{{ $product->barcode }}</div>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            @if($product->category)
                            <span class="px-2 py-0.5 rounded-lg text-xs font-medium" style="background:{{ $product->category->color }}20;color:{{ $product->category->color }}">
                                {{ $product->category->name }}
                            </span>
                            @else
                            <span class="text-slate-400 text-xs">—</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-right text-slate-600">Rp {{ number_format($product->cost_price, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-slate-800">Rp {{ number_format($product->selling_price, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right">
                            <span class="text-xs font-bold {{ $product->margin >= 20 ? 'text-emerald-600' : ($product->margin >= 10 ? 'text-amber-600' : 'text-red-500') }}">
                                {{ number_format($product->margin, 1) }}%
                            </span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            @if(!$product->track_stock)
                            <span class="text-xs text-slate-400">∞</span>
                            @else
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold
                                {{ $product->is_low_stock ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700' }}">
                                {{ $product->stock }}
                            </span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $product->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">
                                {{ $product->is_active ? 'Aktif' : 'Nonaktif' }}
                            </span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center justify-center gap-1">
                                <a href="{{ route('products.edit', $product) }}"
                                   class="px-2 py-1 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg text-xs transition">✏️ Edit</a>
                                <button onclick="showAdjustStock({{ $product->id }}, '{{ addslashes($product->name) }}', {{ $product->stock }})"
                                    class="px-2 py-1 bg-amber-50 hover:bg-amber-100 text-amber-600 rounded-lg text-xs transition">📦 Stok</button>
                                <form method="POST" action="{{ route('products.destroy', $product) }}" onsubmit="return confirm('Hapus produk ini?')">
                                    @csrf @method('DELETE')
                                    <button class="px-2 py-1 bg-red-50 hover:bg-red-100 text-red-500 rounded-lg text-xs transition">🗑️</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-16 text-center text-slate-400">
                            <div class="text-4xl mb-3">📦</div>
                            <div>Tidak ada produk</div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-slate-200">
            {{ $products->withQueryString()->links() }}
        </div>
    </div>
</div>

{{-- Modal Adjust Stok --}}
<div id="adjustStockModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 hidden">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
        <h3 class="font-bold text-slate-800 mb-1">Penyesuaian Stok</h3>
        <div class="text-sm text-slate-500 mb-4" id="adjustProductName"></div>
        <form id="adjustStockForm" method="POST" class="space-y-3">
            @csrf
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Jenis Penyesuaian</label>
                <select name="type" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                    <option value="in">➕ Tambah Stok (Barang Masuk)</option>
                    <option value="out">➖ Kurangi Stok (Barang Keluar/Rusak)</option>
                    <option value="adjustment">🔄 Sesuaikan ke Jumlah Tertentu</option>
                </select>
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Jumlah</label>
                <input type="number" name="quantity" min="1" required placeholder="0"
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="text-xs font-semibold text-slate-600 block mb-1">Keterangan</label>
                <input type="text" name="reason" required placeholder="Misal: Terima dari supplier..."
                    class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div class="flex gap-2 pt-1">
                <button type="button" onclick="document.getElementById('adjustStockModal').classList.add('hidden')"
                    class="flex-1 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-sm transition">Batal</button>
                <button type="submit"
                    class="flex-1 py-2 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-xl text-sm transition">Simpan</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function showAdjustStock(id, name, stock) {
    document.getElementById('adjustProductName').textContent = name + ' (Stok saat ini: ' + stock + ')';
    document.getElementById('adjustStockForm').action = `/products/${id}/adjust-stock`;
    document.getElementById('adjustStockModal').classList.remove('hidden');
}
</script>
@endpush
@endsection