@extends('layouts.app')

@section('content')
    <div class="bg-gray-50 min-h-screen py-10">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">

            {{-- <nav class="flex text-sm text-gray-500 mb-8" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('beranda') }}" class="hover:text-blue-600 transition-colors">
                            Beranda
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                            </svg>
                            <a href="{{ route('produk.binaan') }}" class="ml-1 hover:text-blue-600 transition-colors">
                                Produk Binaan
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                            </svg>
                            <span class="ml-1 text-gray-900 font-medium truncate max-w-xs">
                                {{ $produk->nama_produk }}
                            </span>
                        </div>
                    </li>
                </ol>
            </nav> --}}

            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">

                    <div class="bg-gray-50 p-6 flex items-center justify-center relative min-h-[400px] lg:min-h-[500px]">
                        {{-- <div class="absolute top-6 left-6 z-10">
                            <span class="bg-orange-500 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg tracking-wide uppercase">
                                Produk Unggulan
                            </span>
                        </div> --}}

                        @if($produk->gambar)
                            <div class="relative w-full h-full max-h-[500px] rounded-xl overflow-hidden group">
                                <img src="{{ asset('storage/' . $produk->gambar) }}" 
                                     alt="{{ $produk->nama_produk }}" 
                                     class="w-full h-full object-contain mix-blend-multiply transform transition duration-500 hover:scale-105">
                            </div>
                        @else
                            <div class="flex flex-col items-center justify-center text-gray-400">
                                <svg class="w-20 h-20 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span class="text-sm">Gambar tidak tersedia</span>
                            </div>
                        @endif
                    </div>

                    <div class="p-8 lg:p-12 flex flex-col h-full">
                        
                        <div class="mb-4 flex items-center gap-3 flex-wrap">

    <!-- LABEL UMKM -->
    <span class="text-blue-600 font-semibold text-sm tracking-wider uppercase">
        UMKM Kecamatan Kanigoro
    </span>

    <!-- STATUS PRODUK -->
    @if($produk->status == 'tersedia')
        <span class="bg-green-100 text-green-700 text-xs font-bold px-3 py-1 rounded-full">
            ● Tersedia
        </span>
    @else
        <span class="bg-red-100 text-red-700 text-xs font-bold px-3 py-1 rounded-full">
            ● Habis
        </span>
    @endif

</div>

                        <h1 class="text-3xl lg:text-4xl font-extrabold text-gray-900 mb-4 leading-tight">
                            {{ $produk->nama_produk }}
                        </h1>

                        <div class="flex items-end gap-2 mb-6">
                            <span class="text-4xl font-bold text-green-600 tracking-tight">
                                Rp {{ number_format($produk->harga, 0, ',', '.') }}
                            </span>
                        </div>

                        <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-8 flex items-start gap-3">
                            <div class="bg-blue-100 p-2 rounded-full text-blue-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm">Mitra Resmi Binaan</h4>
                                <p class="text-xs text-gray-600 mt-1">
                                    Produk ini diproduksi oleh warga lokal dan diawasi oleh tim pemberdayaan Kecamatan Kanigoro. Kualitas terjamin.
                                </p>
                            </div>
                        </div>

                        <div class="prose prose-blue text-gray-600 mb-8 flex-grow">
                            <h3 class="text-lg font-bold text-gray-800 mb-2">Deskripsi Lengkap</h3>
                            <p class="leading-relaxed whitespace-pre-line text-sm md:text-base">
                                {{ $produk->deskripsi }}
                            </p>
                        </div>

                        <div class="mt-auto pt-6 border-t border-gray-100 flex flex-col sm:flex-row gap-4">

    @if($produk->status == 'tersedia')
        <a href="https://wa.me/{{ $produk->no_hp }}?text=Halo,%20saya%20tertarik%20dengan%20produk%20{{ urlencode($produk->nama_produk) }}"
           target="_blank"
           class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-3.5 px-6 rounded-xl shadow-md hover:shadow-lg transition flex items-center justify-center gap-2">
            Beli via WhatsApp
        </a>
    @else
        <div class="flex-1 bg-gray-300 text-gray-600 font-bold py-3.5 px-6 rounded-xl text-center cursor-not-allowed">
            Stok Habis
        </div>
    @endif

    <a href="{{ route('produk.binaan') }}" 
       class="flex-none bg-white text-gray-700 font-bold py-3.5 px-6 rounded-xl border border-gray-200 hover:bg-gray-50 transition flex items-center justify-center gap-2">
        Kembali
    </a>

</div>
                    </div>

                </div>
            </div>
            
            <div class="mt-8 text-center text-gray-400 text-sm">
                &copy; {{ date('Y') }} UMKM Binaan Kecamatan Kanigoro. Mendukung Pertumbuhan Ekonomi Lokal.
            </div>

        </div>
    </div>
@endsection