@extends('mitra.layouts.app')

@section('title', 'Inventory Barang - ' . $sppg->nama)

@section('content')
    <div class="mb-6">
        <a href="{{ route('mitra.monitoring.show', $sppg) }}" class="inline-flex items-center text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 font-medium mb-4">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            Kembali ke Monitoring
        </a>
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Inventory Barang</h1>
                <p class="text-sm text-slate-500 dark:text-gray-400 mt-1">{{ $sppg->nama }}</p>
            </div>
            <a href="{{ route('mitra.inventory-barang.create', $sppg) }}" class="inline-flex items-center px-4 py-2.5 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transition text-sm font-medium">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                Tambah Barang
            </a>
        </div>
    </div>

    <form method="GET" class="mb-4 flex flex-wrap gap-3">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama, kategori, lokasi..."
            class="px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white text-sm w-64 focus:ring-2 focus:ring-emerald-500">
        <select name="kategori" class="px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-700 text-slate-900 dark:text-white text-sm" onchange="this.form.submit()">
            <option value="">Semua Kategori</option>
            @foreach($kategoris ?? [] as $k)
                <option value="{{ $k }}" {{ request('kategori') === $k ? 'selected' : '' }}>{{ $k }}</option>
            @endforeach
        </select>
        <button type="submit" class="px-4 py-2.5 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 text-sm font-medium">Cari</button>
        @if(request()->hasAny(['search', 'kategori']))
            <a href="{{ route('mitra.inventory-barang.index', $sppg) }}" class="px-4 py-2.5 border border-slate-300 dark:border-gray-600 rounded-xl text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-gray-700 text-sm">Reset</a>
        @endif
    </form>

    @if(isset($inventoryStats) && ((float)($inventoryStats->baik ?? 0) + (float)($inventoryStats->rusak ?? 0) + (float)($inventoryStats->perlu_perbaikan ?? 0) + (float)($inventoryStats->lainnya ?? 0) > 0))
        <div class="mb-4 p-4 bg-slate-50 dark:bg-gray-700/50 rounded-xl border border-slate-200 dark:border-gray-600 flex flex-wrap gap-4">
            <span class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-sm font-medium">
                <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                Baik: {{ number_format((float)($inventoryStats->baik ?? 0), 0) }} unit
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-sm font-medium">
                <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                Perlu Perbaikan: {{ number_format((float)($inventoryStats->perlu_perbaikan ?? 0), 0) }} unit
            </span>
            <span class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300 text-sm font-medium">
                <span class="w-2 h-2 rounded-full bg-rose-500"></span>
                Rusak: {{ number_format((float)($inventoryStats->rusak ?? 0), 0) }} unit
            </span>
            @if((float)($inventoryStats->lainnya ?? 0) > 0)
                <span class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-gray-400 text-sm font-medium">
                    Lainnya: {{ number_format((float)($inventoryStats->lainnya ?? 0), 0) }} unit
                </span>
            @endif
        </div>
    @endif

    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-slate-200 dark:border-gray-700 overflow-hidden">
        <div class="overflow-x-auto">
            @if($items->isEmpty())
                <div class="p-12 text-center text-slate-500 dark:text-gray-400">
                    <svg class="w-16 h-16 mx-auto mb-4 text-slate-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                    </svg>
                    <p class="font-medium">Belum ada barang di inventory.</p>
                    <a href="{{ route('mitra.inventory-barang.create', $sppg) }}" class="inline-block mt-3 text-emerald-600 dark:text-emerald-400 hover:underline font-medium">Tambah barang pertama</a>
                </div>
            @else
                <table class="min-w-full divide-y divide-slate-200 dark:divide-gray-700">
                    <thead class="bg-slate-50 dark:bg-gray-700/50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Nama</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Kategori</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Harga</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Total</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Baik</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Rusak</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Perbaikan</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase hidden md:table-cell">Lokasi</th>
                            <th class="px-4 py-3 text-right text-xs font-semibold text-slate-600 dark:text-gray-300 uppercase">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-gray-700">
                        @foreach($items as $item)
                        <tr class="hover:bg-slate-50 dark:hover:bg-gray-700/30">
                            <td class="px-4 py-3">
                                <span class="text-sm font-medium text-slate-900 dark:text-white">{{ $item->nama }}</span>
                                @if($item->laporan_kerusakan_count > 0)
                                    <span class="ml-2 px-1.5 py-0.5 text-[10px] font-medium rounded bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300" title="Ada laporan kerusakan">Laporan</span>
                                @endif
                                @if($item->kontak_wa_service)
                                    <a href="{{ $item->wa_service_link }}" target="_blank" rel="noopener" class="inline-flex items-center ml-2 text-xs text-emerald-600 dark:text-emerald-400 hover:underline">
                                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                                        WA
                                    </a>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-sm text-slate-600 dark:text-gray-400">{{ $item->kategori ?? '-' }}</td>
                            <td class="px-4 py-3 text-sm text-right text-slate-700 dark:text-gray-300">Rp {{ $item->nilai_estimasi ? number_format($item->nilai_estimasi, 0, ',', '.') : '-' }}</td>
                            <td class="px-4 py-3 text-sm text-right font-mono text-slate-900 dark:text-white">{{ number_format($item->total_qty ?? $item->jumlah, 0) }} {{ $item->satuan ?? 'unit' }}</td>
                            <td class="px-4 py-3 text-sm text-right text-emerald-600 dark:text-emerald-400 font-medium">{{ number_format($item->qty_baik ?? 0, 0) }}</td>
                            <td class="px-4 py-3 text-sm text-right text-rose-600 dark:text-rose-400 font-medium">{{ number_format($item->qty_rusak ?? 0, 0) }}</td>
                            <td class="px-4 py-3 text-sm text-right text-amber-600 dark:text-amber-400 font-medium">{{ number_format($item->qty_perlu_perbaikan ?? 0, 0) }}</td>
                            <td class="px-4 py-3 text-sm text-slate-600 dark:text-gray-400 hidden md:table-cell">{{ $item->lokasi ?? '-' }}</td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex items-center justify-end gap-3">
                                    <a href="{{ route('mitra.inventory-barang.edit', [$sppg, $item]) }}" class="text-emerald-600 dark:text-emerald-400 hover:underline text-sm font-medium">Edit</a>
                                    <form action="{{ route('mitra.inventory-barang.destroy', [$sppg, $item]) }}" method="POST" class="inline" onsubmit="return confirm('Yakin hapus barang ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-rose-600 dark:text-rose-400 hover:underline text-sm font-medium">Hapus</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @if($items->hasPages())
                    <div class="px-4 py-3 border-t border-slate-200 dark:border-gray-700">
                        {{ $items->links() }}
                    </div>
                @endif
            @endif
        </div>
    </div>
@endsection