<x-app-layout>

    <x-slot name="header">

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

            <div>

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

                <p class="text-slate-500 text-sm mt-1">
                    Manufacture products using BOM formula
                </p>

            </div>

           

        </div>

    </x-slot>

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

        @csrf

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

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

                <!-- Product -->
                <div>

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

                    <select name="product_id"
                            required
                            class="w-full rounded-xl border-slate-300 mt-2">

                        <option value="">
                            Select Product
                        </option>

                        @foreach($products as $product)

                            <option value="{{ $product->id }}">

                                {{ $product->name }}
                                | Current Stock: {{ $product->stock }}

                            </option>

                        @endforeach

                    </select>

                </div>

                <!-- Production Qty -->
                <div>

                    <label class="font-semibold text-slate-700">
                        Production Quantity
                    </label>

                    <input type="number"
                           name="quantity"
                           min="1"
                           required
                           class="w-full rounded-xl border-slate-300 mt-2">

                </div>

            </div>

            <!-- Button -->
            <div class="mt-8">

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

                    Create Production

                </button>

            </div>

        </div>

    </form>

</x-app-layout>