<x-app-layout>

    <x-slot name="header">

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

            <div>

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

                <p class="text-slate-500 text-sm mt-1">
                    Update manufactured quantity
                </p>

            </div>

           

        </div>

    </x-slot>

    <form action="{{ route('production.update', $production->id) }}"
          method="POST">

        @csrf
        @method('PUT')

        <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">
                        Product
                    </label>

                    <input type="text"
                           readonly
                           value="{{ $production->product->name }}"
                           class="w-full rounded-xl border-slate-300 bg-slate-100 mt-2">

                </div>

                <!-- Quantity -->
                <div>

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

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

                </div>

            </div>

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

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

                    Update Production

                </button>

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

                    Cancel

                </a>

            </div>

        </div>

    </form>

</x-app-layout>