<x-app-layout>

    <x-slot name="header">

        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">

            <div>

                <h2 class="text-2xl font-bold text-slate-800">
                    Products
                </h2>

                <p class="text-slate-500 text-sm mt-1">
                    Manage all manufacturing products
                </p>

            </div>

        </div>

    </x-slot>

    <!-- Main Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">

        <!-- Top Bar -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 p-5 border-b bg-slate-50">

            <!-- Search -->
            <form method="GET"
                class="relative w-full md:w-80">

                <input type="text"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="Search product..."
                    class="w-full rounded-xl border border-slate-300 pl-11 pr-4 py-3 focus:border-blue-500 focus:ring-blue-500 shadow-sm">

                <button type="submit"
                    class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">

                    <i class="bi bi-search"></i>

                </button>

            </form>

            <!-- Add Button -->
            <a href="{{ route('products.create') }}"
                class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-3 rounded-xl shadow-sm transition flex items-center justify-center gap-2 whitespace-nowrap">

                <i class="bi bi-plus-circle"></i>

                Add Product

            </a>


        </div>

        <!-- Table -->
        <div class="overflow-x-auto">

            <table class="w-full">

                <thead class="bg-slate-100">

                    <tr>

                        <th class="p-4 text-left">Name</th>
                        <th class="p-4 text-left">Code</th>
                        <th class="p-4 text-left">HSN</th>
                        <th class="p-4 text-left">GST</th>
                        <th class="p-4 text-left">Price</th>
                        <th class="p-4 text-left">Stock</th>
                        <th class="p-4 text-center">Action</th>

                    </tr>

                </thead>

                <tbody>

                    @forelse($products as $product)

                    <tr class="border-t hover:bg-slate-50">

                        <td class="p-4 font-medium">
                            {{ $product->name }}
                        </td>

                        <td class="p-4">
                            {{ $product->code }}
                        </td>

                        <td class="p-4">
                            {{ $product->hsn_code }}
                        </td>

                        <td class="p-4">
                            {{ $product->gst }}%
                        </td>

                        <td class="p-4 text-green-600 font-semibold">
                            ₹ {{ $product->price }}
                        </td>

                        <td class="p-4">
                            {{ $product->stock }}
                        </td>

                        <td class="p-4">

                            <div class="flex flex-wrap justify-center gap-2">

                                <a href="{{ route('products.show', $product->id) }}"
                                    class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">

                                    View

                                </a>

                                <a href="{{ route('products.edit', $product->id) }}"
                                    class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm">

                                    Edit

                                </a>
                                <a href="{{ route('products.formula', $product->id) }}"
                                    class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm">

                                    Formula

                                </a>

                                <form action="{{ route('products.destroy', $product->id) }}"
                                    method="POST">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                        onclick="return confirm('Delete Product?')"
                                        class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm">

                                        Delete

                                    </button>

                                </form>

                            </div>

                        </td>

                    </tr>

                    @empty

                    <tr>

                        <td colspan="7"
                            class="text-center p-8 text-slate-500">

                            No Products Found

                        </td>

                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        <!-- Pagination -->
        <div class="p-5">

            {{ $products->links() }}

        </div>

    </div>

</x-app-layout>