@extends('frontend.layout')

@section('content')
<h2 class="text-3xl font-bold text-center text-blue-600 mb-10">Produk Kami</h2>

<!-- Tabs Kategori -->
<div x-data="{ tab: 'produk_jadi' }" class="mb-8">
    <div class="flex justify-center space-x-4 mb-6">
        <button @click="tab = 'produk_jadi'" 
                :class="tab === 'produk_jadi' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
                class="px-4 py-2 rounded-lg font-semibold">Produk Jadi</button>
        <button @click="tab = 'bahan_baku'" 
                :class="tab === 'bahan_baku' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
                class="px-4 py-2 rounded-lg font-semibold">Bahan Baku</button>
        <button @click="tab = 'kemasan'" 
                :class="tab === 'kemasan' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
                class="px-4 py-2 rounded-lg font-semibold">Kemasan</button>
        <button @click="tab = 'bahan_penolong'" 
                :class="tab === 'bahan_penolong' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
                class="px-4 py-2 rounded-lg font-semibold">Bahan Penolong</button>
    </div>

    <!-- Produk Jadi -->
    <div x-show="tab === 'produk_jadi'" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <a href="{{ route('produk.detail', 'parfum-laundry') }}" class="bg-white shadow rounded-lg overflow-hidden hover:shadow-lg transition">
            <img src="https://placehold.co/300x200" alt="Parfum Laundry" class="w-full h-48 object-cover">
            <div class="p-4">
                <h4 class="font-bold">Parfum Laundry</h4>
                <p class="text-gray-600">Rp 50.000</p>
            </div>
        </a>
        <a href="{{ route('produk.detail', 'sabun-cuci-piring') }}" class="bg-white shadow rounded-lg overflow-hidden hover:shadow-lg transition">
            <img src="https://placehold.co/300x200" alt="Sabun Cuci Piring" class="w-full h-48 object-cover">
            <div class="p-4">
                <h4 class="font-bold">Sabun Cuci Piring</h4>
                <p class="text-gray-600">Rp 20.000</p>
            </div>
        </a>
        <a href="{{ route('produk.detail', 'hand-soap') }}" class="bg-white shadow rounded-lg overflow-hidden hover:shadow-lg transition">
            <img src="https://placehold.co/300x200" alt="Hand Soap" class="w-full h-48 object-cover">
            <div class="p-4">
                <h4 class="font-bold">Hand Soap</h4>
                <p class="text-gray-600">Rp 25.000</p>
            </div>
        </a>
    </div>

    <!-- Bahan Baku -->
    <div x-show="tab === 'bahan_baku'" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-white shadow rounded-lg p-4 hover:shadow-lg transition">
            <h4 class="font-bold">Alkohol 70%</h4>
            <p class="text-gray-600">Rp 100.000 / liter</p>
        </div>
        <div class="bg-white shadow rounded-lg p-4 hover:shadow-lg transition">
            <h4 class="font-bold">Fragrance Oil</h4>
            <p class="text-gray-600">Rp 150.000 / liter</p>
        </div>
    </div>

    <!-- Kemasan -->
    <div x-show="tab === 'kemasan'" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-white shadow rounded-lg p-4 hover:shadow-lg transition">
            <h4 class="font-bold">Botol 1L</h4>
            <p class="text-gray-600">Rp 5.000 / pcs</p>
        </div>
        <div class="bg-white shadow rounded-lg p-4 hover:shadow-lg transition">
            <h4 class="font-bold">Jerigen 5L</h4>
            <p class="text-gray-600">Rp 25.000 / pcs</p>
        </div>
    </div>

    <!-- Bahan Penolong -->
    <div x-show="tab === 'bahan_penolong'" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-white shadow rounded-lg p-4 hover:shadow-lg transition">
            <h4 class="font-bold">Pengawet</h4>
            <p class="text-gray-600">Rp 50.000 / 500ml</p>
        </div>
    </div>
</div>
@endsection