<?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.create');

    new class extends Component
    {
        #[Validate('required|min:3|max:255')]
        public $name = '';

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

        public $description = '';

        #[Validate('required|numeric|min:0')]
        public $quantity = '';

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

            // Create the fibre type
            $fibreType = FibreType::create([
                'name' => $validated['name'],
                'color' => $validated['color'],
                'description' => $this->description,
            ]);

            // Create the stock entry and record movement
            $stock = \App\Models\Stock::create([
                'fibre_type_id' => $fibreType->id,
                'quantity' => $validated['quantity'],
            ]);

            // Record the movement manually
            \App\Models\StockMovement::create([
                'fibre_type_id' => $fibreType->id,
                'type' => 'in',
                'quantity' => $validated['quantity'],
                'quantity_before' => 0,
                'quantity_after' => $validated['quantity'],
                'reason' => 'Initial stock',
                'reference_type' => 'fibre_type_creation',
                'reference_id' => $fibreType->id,
                'notes' => 'Initial stock for new fibre type',
            ]);

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

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

<x-layouts.app>
    @volt('fibre_types.create')
        <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="Nouveau type de fibre"
                        description=""
                        :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="quantity" class="block mb-2 text-sm font-medium text-gray-700">Quantité de stock initiale (kg)</label>
                    <input type="number" id="quantity" wire:model="quantity" step="0.01" min="0" placeholder="Entrez le stock initial en kilogrammes" 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('quantity') <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">
                        Créer
                    </x-button>
                </div>
            </form>
        </x-app.container>
    @endvolt
</x-layouts.app>
