<x-app-layout>

    <x-slot name="header">

        <div class="flex items-center justify-between">

            <div>

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

                <p class="text-slate-500 text-sm mt-1">
                    Create new manufacturing product
                </p>

            </div>

            

        </div>

    </x-slot>

    <form action="{{ route('products.store') }}"
          method="POST">

        @csrf

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

            <!-- Top -->
            <div class="p-6 border-b bg-slate-50">

                <div class="flex items-center gap-4">

                    <div class="w-16 h-16 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center text-3xl">

                        <i class="bi bi-box-seam"></i>

                    </div>

                    <div>

                        <h3 class="text-xl font-bold text-slate-800">
                            Product Information
                        </h3>

                        <p class="text-slate-500 text-sm mt-1">
                            Enter product details and opening stock
                        </p>

                    </div>

                </div>

            </div>

            <!-- Form -->
            <div class="p-6">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    <!-- Product Name -->
                    <div>

                        <label class="font-semibold text-slate-700">
                            Product Name
                        </label>

                        <input type="text"
                               name="name"
                               required
                               placeholder="Enter product name"
                               class="w-full rounded-xl border-slate-300 mt-2 focus:border-blue-500 focus:ring-blue-500">

                    </div>

                   

                    <!-- HSN Code -->
                    <div>

                        <label class="font-semibold text-slate-700">
                            HSN Code
                        </label>

                        <input type="text"
                               name="hsn_code"
                               placeholder="Enter HSN code"
                               class="w-full rounded-xl border-slate-300 mt-2 focus:border-blue-500 focus:ring-blue-500">

                    </div>

                    <!-- GST -->
                    <div>

                        <label class="font-semibold text-slate-700">
                            GST %
                        </label>

                        <input type="number"
                               step="0.01"
                               name="gst"
                               placeholder="Enter GST percentage"
                               class="w-full rounded-xl border-slate-300 mt-2 focus:border-blue-500 focus:ring-blue-500">

                    </div>

                    <!-- Selling Price -->
                    <div>

                        <label class="font-semibold text-slate-700">
                            Selling Price
                        </label>

                        <input type="number"
                               step="0.01"
                               name="price"
                               placeholder="Enter selling price"
                               class="w-full rounded-xl border-slate-300 mt-2 focus:border-blue-500 focus:ring-blue-500">

                    </div>

                   

                </div>

                <!-- Buttons -->
                <div class="mt-10 flex flex-wrap gap-4">

                    <button type="submit"
                            class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl shadow-sm transition">

                        Save Product

                    </button>

                    <a href="{{ route('products.index') }}"
                       class="bg-slate-500 hover:bg-slate-600 text-white px-8 py-3 rounded-xl transition">

                        Cancel

                    </a>

                </div>

            </div>

        </div>

    </form>

</x-app-layout>