@extends('layouts.app')

@section('title', 'Produk')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Header Section -->
    <div class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <h1 class="text-3xl font-bold text-gray-900">Produk Kami</h1>
            <p class="mt-2 text-gray-600">Temukan produk terbaik dengan kualitas terjamin</p>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex flex-col lg:flex-row gap-8">

        </div>

        <!-- Products Grid -->
        <div class="lg:w-3/4">
            <!-- Results Info -->
            <div class="flex justify-between items-center mb-6">
                <p class="text-gray-600">
                    Menampilkan {{ $products->firstItem() ?? 0 }}-{{ $products->lastItem() ?? 0 }} dari
                    {{ $products->total() }} produk
                </p>
            </div>

            @if ($products->count() > 0)
            <!-- Product Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                @foreach ($products as $product)
                <div
                    class="bg-white rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-300 overflow-hidden group">
                    <div class="relative overflow-hidden">
                        <img src="{{ $product->image_path ? asset('storage/' . $product->image_path) : 'https://via.placeholder.com/300x300?text=No+Image' }}"
                            alt="{{ $product->name }}"
                            class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">

                        @if ($product->is_halal)
                        <div
                            class="absolute top-2 left-2 bg-green-500 text-white px-2 py-1 rounded-md text-xs font-semibold">
                            Halal
                        </div>
                        @endif

                        @if ($product->stock_quantity <= 5 && $product->stock_quantity > 0)
                            <div
                                class="absolute top-2 right-2 bg-orange-500 text-white px-2 py-1 rounded-md text-xs">
                                Stok Terbatas
                            </div>
                            @elseif($product->stock_quantity <= 0)
                                <div
                                class="absolute top-2 right-2 bg-gray-500 text-white px-2 py-1 rounded-md text-xs">
                                Habis
                    </div>
                    @endif
                </div>

                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <span
                            class="text-xs text-blue-600 font-medium">{{ ucfirst($product->type) }}</span>
                        <span class="text-xs text-gray-500">{{ $product->weight }}kg</span>
                    </div>

                    <h3 class="font-semibold text-gray-900 mb-2 line-clamp-2">{{ $product->name }}</h3>

                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">{{ $product->description }}</p>

                    <div class="flex items-center justify-between mb-2">
                        <div class="flex flex-col">
                            <span class="text-lg font-bold text-gray-900">Rp
                                {{ number_format($product->total_price, 0, ',', '.') }}</span>
                            <span class="text-xs text-gray-500">Rp
                                {{ number_format($product->price_per_kg, 0, ',', '.') }}/kg</span>
                        </div>
                        <div class="text-xs text-gray-500">
                            Stok: {{ $product->stock_quantity }}
                        </div>
                    </div>

                    <div class="flex justify-between items-center gap-4">
                        <!-- Tombol Lihat Detail -->
                        <a href="{{ route('products.show', $product->id) }}"
                            class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-200 text-sm font-medium">
                            Lihat Detail
                        </a>

                        <!-- Form Tambah ke Keranjang -->
                        <form action="{{ route('cart.add') }}" method="POST"
                            class="flex items-center space-x-3">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <input type="hidden" name="quantity" value="1"
                                id="quantity{{ $product->id }}">

                            <button type="submit"
                                class="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-200 text-sm font-medium {{ $product->stock_quantity <= 0 ? 'opacity-50 cursor-not-allowed' : '' }}"
                                {{ $product->stock_quantity <= 0 ? 'disabled' : '' }}>
                                @if ($product->stock_quantity > 0)
                                <svg class="w-4 h-4 inline mr-2" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.5 9H19m-12 0a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4z">
                                    </path>
                                </svg>
                                Keranjang
                                @else
                                Stok Habis
                                @endif
                            </button>
                        </form>
                    </div>

                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="flex justify-center">
            {{ $products->appends(request()->query())->links() }}
        </div>
        @else
        <!-- No Products Found -->
        <div class="text-center py-12">
            <div class="mx-auto h-24 w-24 text-gray-400 mb-4">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13h2m13-8l-2-2m0 0l-2 2m2-2v6m-8 0V9m0 0l2-2m-2 2l-2-2" />
                </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">Produk tidak ditemukan</h3>
            <p class="text-gray-600 mb-4">Coba ubah filter pencarian atau kata kunci Anda</p>
            <a href="{{ route('products.index') }}"
                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition duration-200">
                Lihat Semua Produk
            </a>
        </div>
        @endif
    </div>
</div>
</div>
</div>


<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
@endsection