@extends('layouts.frontend')

@section('title', $barang->nama_barang)

@section('content')
<div class="max-w-5xl mx-auto space-y-10">

    <div>
        <a href="{{ route('katalog') }}" class="text-xs font-bold text-gray-500 hover:text-gray-900 transition flex items-center gap-1">
            ⬅️ Kembali ke Katalog Utama Sembako
        </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">

        <div class="space-y-4">
            <div class="border border-gray-100 rounded-xl overflow-hidden bg-gray-50 aspect-square flex items-center justify-center p-2 shadow-inner">
                <img src="{{ !empty($barang->foto) && file_exists(public_path('images/' . $barang->foto)) ? asset('images/' . $barang->foto) : 'https://placehold.co/600x600?text=Produk+Sembako' }}"
                    alt="{{ $barang->nama_barang }}"
                    class="max-w-full max-h-full object-cover rounded-lg">
            </div>
            <div class="w-20 h-20 border-2 border-emerald-600 rounded-lg overflow-hidden p-1 bg-white shadow-sm cursor-pointer">
                <img src="{{ !empty($barang->foto) && file_exists(public_path('images/' . $barang->foto)) ? asset('images/' . $barang->foto) : 'https://placehold.co/100x100?text=Sembako' }}" class="w-full h-full object-cover rounded">
            </div>
        </div>

        <div class="space-y-6">
            <div class="space-y-1">
                <h1 class="text-2xl font-black text-gray-800 tracking-tight uppercase">
                    {{ $barang->nama_barang }}
                </h1>
            </div>

            <div class="border-t border-b border-gray-100 py-2">
                <table class="w-full text-xs text-gray-600 font-medium">
                    <tr class="border-b border-gray-50">
                        <td class="py-2 text-gray-400 w-1/3">Merek</td>
                        <td class="py-2 text-gray-800 font-bold uppercase">{{ $barang->merek ?? 'MEGA MART' }}</td>
                    </tr>
                    <tr class="border-b border-gray-50">
                        <td class="py-2 text-gray-400">Kategori</td>
                        <td class="py-2 text-blue-600 font-bold uppercase">{{ $barang->kategori ?? 'SEMBAKO' }}</td>
                    </tr>
                    <tr class="border-b border-gray-50">
                        <td class="py-2 text-gray-400">SKU / Kode</td>
                        <td class="py-2 text-gray-500 font-mono font-bold">8992{{ $barang->id }}752121</td>
                    </tr>
                    <tr>
                        <td class="py-2 text-gray-400">Stok</td>
                        <td class="py-2 {{ $barang->stok > 0 ? 'text-gray-800' : 'text-red-600' }} font-bold">
                            {{ $barang->stok > 0 ? ($barang->stok > 20 ? 'Stok lebih dari 20' : 'Tersisa ' . $barang->stok . ' Pcs') : 'Stok Habis' }}
                        </td>
                    </tr>
                </table>
            </div>

            <div class="text-3xl font-black text-red-600 tracking-tight">
                Rp {{ number_format($barang->harga, 0, ',', '.') }}
            </div>

            @if($barang->stok > 0)
            <form action="{{ route('keranjang.tambah') }}" method="POST">
                @csrf
                <input type="hidden" name="barang_id" value="{{ $barang->id }}">

                <div class="flex items-center gap-2">
                    <div class="flex border border-gray-300 rounded-lg overflow-hidden h-10 text-xs shadow-sm">
                        <span class="bg-gray-100 text-gray-500 px-3 flex items-center font-bold">Qty</span>
                        <input type="number" name="qty_input" value="1" min="1" max="{{ $barang->stok }}" class="w-16 px-2 text-center font-bold outline-none border-l text-gray-800">
                    </div>

                    <button type="submit" class="flex-1 bg-emerald-700 hover:bg-emerald-800 text-white text-xs font-bold h-10 px-4 rounded-lg transition shadow-sm uppercase tracking-wide flex items-center justify-center">
                        Tambahkan ke Keranjang
                    </button>
                </div>
            </form>
            @else
            <button disabled class="w-full bg-gray-100 text-gray-400 text-xs py-3 rounded-lg font-bold cursor-not-allowed uppercase border">
                ❌ Maaf, Stok Produk Ini Sedang Habis
            </button>
            @endif

            <div class="pt-4 border-t border-gray-100 space-y-1">
                <h4 class="text-[11px] font-black text-gray-400 uppercase tracking-wider">Deskripsi Produk</h4>
                <p class="text-xs text-gray-500 leading-relaxed font-medium">
                    {{ $barang->deskripsi ?: 'Produk komoditas unggulan jaminan mutu terbaik dari Mega Mart CRM. Diproses secara higienis dan terstandarisasi penuh.' }}
                </p>
            </div>
        </div>
    </div>

    <div class="space-y-4">
        <div class="border-b border-gray-200 pb-2">
            <h3 class="text-sm font-black text-gray-900 uppercase tracking-wider">🛒 Komoditas Terkait yang Mungkin Anda Butuhkan</h3>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
            @forelse($produkTerkait as $terkait)
            <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition flex flex-col justify-between p-3 relative">
                <a href="{{ route('katalog.detail', $terkait->id) }}" class="block space-y-2 group">
                    <div class="h-32 bg-gray-50 rounded-lg overflow-hidden flex items-center justify-center border border-gray-50 relative">
                        <img src="{{ !empty($terkait->foto) && file_exists(public_path('images/' . $terkait->foto)) ? asset('images/' . $terkait->foto) : 'https://placehold.co/300x300?text=Sembako' }}"
                            alt="{{ $terkait->nama_barang }}"
                            class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                    </div>
                    <h4 class="font-bold text-gray-800 text-xs line-clamp-2 min-h-[2rem] group-hover:text-blue-600 transition">
                        {{ $terkait->nama_barang }}
                    </h4>
                </a>
                <div class="pt-2 flex items-center justify-between border-t border-gray-50 mt-2">
                    <span class="text-xs font-black text-blue-600">Rp {{ number_format($terkait->harga, 0, ',', '.') }}</span>
                    <span class="text-[9px] font-bold text-gray-400">Stok: {{ $terkait->stok }}</span>
                </div>
            </div>
            @empty
            <div class="col-span-full bg-slate-50 text-center py-6 text-xs text-gray-400 font-medium rounded-xl border border-dashed">
                ℹ️ Belum ada komoditas sembako sejenis lainnya di kategori ini.
            </div>
            @endforelse
        </div>
    </div>

</div>
@endsection