<template>
    <div class="min-h-screen bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 py-6">
            <!-- Header -->
            <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                <div class="flex justify-between items-center">
                    <h1 class="text-2xl font-bold text-gray-900">Products</h1>
                    <Link href="/business/products/create" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
                        Add Product
                    </Link>
                </div>
            </div>

            <!-- Products List -->
            <div class="bg-white rounded-lg shadow-sm">
                <div class="p-6">
                    <div v-if="products.length === 0" class="text-center py-8">
                        <p class="text-gray-500">No products yet. Add your first product!</p>
                    </div>
                    <div v-else class="space-y-4">
                        <div v-for="product in products" :key="product.id" class="border rounded-lg p-4">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h3 class="text-lg font-medium">{{ product.name }}</h3>
                                    <p class="text-sm text-gray-600">Cost: Rs. {{ product.cost_price }} | Sell: Rs. {{ product.selling_price }}</p>
                                    <p class="text-sm text-gray-600">Stock: {{ product.quantity }}</p>
                                </div>
                                <div class="flex space-x-2">
                                    <Link :href="`/business/products/${product.id}/edit`" class="text-blue-600 hover:text-blue-800">Edit</Link>
                                    <button @click="deleteProduct(product.id)" class="text-red-600 hover:text-red-800">Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3';

defineProps({
    products: Array,
});

const deleteProduct = (id) => {
    if (confirm('Are you sure you want to delete this product?')) {
        // Handle delete
    }
};
</script>