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

name('stocks');

new class extends Component {
    public $stocks;

    public function mount()
    {
        // Fetch all stocks with fibre type
        $this->stocks = Stock::with('fibreType')->latest()->get();
    }

    // Example method if you want to restore delete functionality later:
    public function deleteStock($stockId)
    {
        Stock::find($stockId)->delete();
        $this->stocks = Stock::with('fibreType')->latest()->get();
    }
};
?>

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

            <div class="flex items-center justify-between mb-5">
                <x-app.heading
                    title="Mouvements de stock"
                    description="Tous les mouvements et transactions de stock"
                    :border="false"
                />
                <div class="flex space-x-2">
                    <x-button tag="a" href="/stock/summary" variant="outline">Résumé du stock</x-button>
                    <x-button tag="a" href="/stock/create">Nouvelle entrée de stock</x-button>
                </div>
            </div>

            @if($this->stocks?->isEmpty())
                <div class="w-full p-20 text-center bg-gray-100 rounded-xl">
                    <p class="text-gray-500">Vous n'avez pas encore de stock.</p>
                </div>
            @else
                <div class="overflow-x-auto border rounded-lg">
                    <table class="min-w-full bg-white">
                        <thead class="text-sm bg-gray-200">
                            <tr>
                                <th class="px-4 py-2 text-left">Type de fil</th>
                                <th class="px-4 py-2 text-left">Couleur</th>
                                <th class="px-4 py-2 text-left">Prix (DT)</th>
                                <th class="px-4 py-2 text-left">Quantité (kg)</th>
                                <th class="px-4 py-2 text-left">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($this->stocks as $stock)
                                <tr>
                                    <td class="px-4 py-2">{{ $stock->fibreType->name }}</td>
                                    <td class="px-4 py-2">
                                        <div class="flex items-center">
                                            <span>{{ $stock->fibreType->color }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-2">{{ number_format($stock->fibreType->price, 2) }} DT</td>
                                    <td class="px-4 py-2">
                                        <div class="flex items-center">
                                            <span class="mr-2">{{ number_format($stock->quantity, 2) }}</span>
                                            @if($stock->stock_status === 'out_of_stock')
                                                <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Rupture de stock</span>
                                            @elseif($stock->stock_status === 'low_stock')
                                                <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Stock faible</span>
                                            @elseif($stock->stock_status === 'medium_stock')
                                                <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Stock moyen</span>
                                            @else
                                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Stock bon</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-4 py-2 text-left">
                                        <div class="flex space-x-2">
                                            <x-button tag="a" href="/stock/adjust/{{ $stock->id }}" variant="outline" size="sm">
                                                Ajuster
                                            </x-button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

        </x-app.container>
    @endvolt
</x-layouts.app>
