<x-app-layout>

    <x-slot name="header">

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

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

            

        </div>

    </x-slot>

    <div class="bg-white rounded-3xl shadow-sm p-8 max-w-5xl">

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

            @csrf
            @method('PUT')

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

                <!-- Name -->
                <div>

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

                    <input type="text"
                           name="name"
                           value="{{ old('name', $material->name) }}"
                           class="w-full mt-2 rounded-2xl border-slate-300 focus:border-blue-500 focus:ring-blue-500">

                    @error('name')

                        <p class="text-red-500 text-sm mt-2">
                            {{ $message }}
                        </p>

                    @enderror

                </div>

                <!-- Code -->
                <div>

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

                    <input type="text"
                           name="code"
                           value="{{ old('code', $material->code) }}"
                           class="w-full mt-2 rounded-2xl border-slate-300 focus:border-blue-500 focus:ring-blue-500">

                </div>

                <!-- Unit -->
                <div>

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

                    <input type="text"
                           name="unit"
                           value="{{ old('unit', $material->unit) }}"
                           placeholder="KG / PCS / LTR"
                           class="w-full mt-2 rounded-2xl border-slate-300 focus:border-blue-500 focus:ring-blue-500">

                </div>

                <!-- Price -->
                <div>

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

                    <input type="number"
                           step="0.01"
                           name="price"
                           value="{{ old('price', $material->price) }}"
                           class="w-full mt-2 rounded-2xl border-slate-300 focus:border-blue-500 focus:ring-blue-500">

                </div>

                <!-- Stock -->
                <div>

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

                    <input type="number"
                           step="0.01"
                           name="stock"
                           value="{{ old('stock', $material->stock) }}"
                           class="w-full mt-2 rounded-2xl border-slate-300 focus:border-blue-500 focus:ring-blue-500">

                </div>

                <!-- Description -->
                <div class="md:col-span-2">

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

                    <textarea name="description"
                              rows="5"
                              class="w-full mt-2 rounded-2xl border-slate-300 focus:border-blue-500 focus:ring-blue-500">{{ old('description', $material->description) }}</textarea>

                </div>

            </div>

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

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

                    Update Material

                </button>

                <a href="{{ route('materials.index') }}"
                   class="bg-slate-200 hover:bg-slate-300 text-slate-800 px-8 py-3 rounded-2xl font-semibold transition">

                    Cancel

                </a>

            </div>

        </form>

    </div>

</x-app-layout>