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

@section('content')
<div class="space-y-5">

    {{-- Summary Cards --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">NILAI STOK (MODAL)</div>
            <div class="text-lg font-black text-blue-600">Rp {{ number_format($stockValue->total_value ?? 0, 0, ',', '.') }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">NILAI STOK (JUAL)</div>
            <div class="text-lg font-black text-emerald-600">Rp {{ number_format($stockValue->potential_value ?? 0, 0, ',', '.') }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">POTENSI PROFIT</div>
            <div class="text-lg font-black text-purple-600">Rp {{ number_format(($stockValue->potential_value ?? 0) - ($stockValue->total_value ?? 0), 0, ',', '.') }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">TOTAL PRODUK</div>
            <div class="text-2xl font-black text-slate-800">{{ $products->total() }}</div>
        </div>
    </div>

    {{-- Filter --}}
    <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
        <form method="GET" class="flex flex-wrap gap-3 items-end">
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="low_stock" value="1" {{ request('low_stock') ? 'checked' : '' }} class="rounded">
                <span class="text-sm font-medium text-red-600">⚠️ Tampilkan hanya stok menipis</span>
            </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>
            <a href="{{ route('reports.stock') }}" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-xl text-sm font-semibold hover:bg-slate-200 transition">Reset</a>
        </form>
    </div>

    {{-- Tabel Stok --}}
    <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">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-center px-4 py-3 font-semibold">Stok</th>
                        <th class="text-center px-4 py-3 font-semibold">Min. Stok</th>
                        <th class="text-right px-4 py-3 font-semibold">Nilai Modal</th>
                        <th class="text-right px-4 py-3 font-semibold">Nilai Jual</th>
                        <th class="text-center px-4 py-3 font-semibold">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($products as $p)
                    <tr class="hover:bg-slate-50 {{ $p->is_low_stock ? 'bg-red-50/50' : '' }}">
                        <td class="px-4 py-3 font-semibold text-slate-800">
                            {{ $p->name }}
                            <div class="text-xs text-slate-400 font-mono">{{ $p->sku }}</div>
                        </td>
                        <td class="px-4 py-3 text-slate-500">{{ $p->category?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-right">Rp {{ number_format($p->cost_price, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold">Rp {{ number_format($p->selling_price, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-center">
                            @if(!$p->track_stock)
                            <span class="text-slate-400 text-xs">∞</span>
                            @else
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold {{ $p->is_low_stock ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700' }}">
                                {{ $p->stock }} {{ $p->unit }}
                            </span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center text-slate-500">{{ $p->min_stock }}</td>
                        <td class="px-4 py-3 text-right text-slate-700">Rp {{ number_format($p->cost_price * $p->stock, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right text-emerald-700 font-semibold">Rp {{ number_format($p->selling_price * $p->stock, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-center">
                            @if($p->is_low_stock)
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-700">⚠️ Menipis</span>
                            @else
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">✅ Aman</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="9" class="px-4 py-12 text-center text-slate-400">Tidak ada data produk</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-slate-200">
            {{ $products->withQueryString()->links() }}
        </div>
    </div>
</div>
@endsection