<?php
    use function Laravel\Folio\{middleware, name};
    use Livewire\Attributes\Validate;
    use Livewire\Volt\Component;
    use App\Models\FibreType;
    use App\Models\Stock;
    middleware('auth');
    name('fibre_types.edit');

    new class extends Component
    {
        public FibreType $fibreType;

        #[Validate('required|min:3|max:255')]
        public $name = '';

        #[Validate('required|min:3|max:255')]
        public $color = '';

        public $description = '';

    public function mount()
    {
        $fibreTypeId = request()->route('id');
        $this->fibreType = FibreType::findOrFail($fibreTypeId);
        $this->name = $this->fibreType->name;
        $this->color = $this->fibreType->color;
        $this->description = $this->fibreType->description ?? '';
    }

        public function save()
        {
            $validated = $this->validate();

            // Update the fibre type
            $this->fibreType->update([
                'name' => $validated['name'],
                'color' => $validated['color'],
                'description' => $this->description,
            ]);

            session()->flash('message', 'Fibre type updated successfully.');

            $this->redirect(route('fibre_types'));
        }
    }
?>

<x-layouts.app>
    @volt('fibre_types.edit')
        <x-app.container class="max-w-full">

            <x-elements.back-button
                class="max-w-full mx-auto mb-3"
                text="Retour à la liste des types de fibre"
                :href="route('fibre_types')"
            />

            <div class="flex items-center justify-between mb-3">
                <x-app.heading
                        title="Modifier le type de fibre"
                        description="Mettre à jour les informations du type de fibre"
                        :border="false"
                    />
            </div>

            <form wire:submit="save" class="space-y-4">
                <div>
                    <label for="name" class="block mb-2 text-sm font-medium text-gray-700">Nom</label>
                    <input type="text" id="name" wire:model="name" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    @error('name') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label for="color" class="block mb-2 text-sm font-medium text-gray-700">Couleur</label>
                    <input type="text" id="color" wire:model="color" placeholder="ex : #FF5733 ou Rouge" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    @error('color') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                

                <div>
                    <label for="description" class="block mb-2 text-sm font-medium text-gray-700">Description</label>
                    <textarea id="description" wire:model="description" rows="3" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"></textarea>
                    @error('description') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>

                <div>
                    <x-button type="submit">
                        Mettre à jour le type de fibre
                    </x-button>
                </div>
            </form>
        </x-app.container>
    @endvolt
</x-layouts.app>
