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

name('stock.history');

new class extends Component {
    public $movements;
    public $selectedFibreType = '';

    public function mount()
    {
        $this->loadMovements();
    }

    public function loadMovements()
    {
        $query = StockMovement::with('fibreType')->latest();
        
        if ($this->selectedFibreType) {
            $query->where('fibre_type_id', $this->selectedFibreType);
        }
        
        $this->movements = $query->get();
    }

    public function updatedSelectedFibreType()
    {
        $this->loadMovements();
    }
};
?>

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

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

            <!-- Filter -->
            <div class="mb-6">
                <select wire:model.live="selectedFibreType" class="block w-full max-w-xs px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                    <option value="">Tous les types de fil</option>
                    @foreach(\App\Models\FibreType::all() as $fibreType)
                        <option value="{{ $fibreType->id }}">{{ $fibreType->name }}</option>
                    @endforeach
                </select>
            </div>

            @if($this->movements?->isEmpty())
                <div class="w-full p-20 text-center bg-gray-100 rounded-xl">
                    <p class="text-gray-500">Aucun mouvement de stock trouvé.</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">Date </th>
                                <th class="px-4 py-2 text-left">Type de fil</th>
                                <th class="px-4 py-2 text-left">Type</th>
                                <th class="px-4 py-2 text-left">Quantité (kg)</th>
                                <th class="px-4 py-2 text-left">Avant</th>
                                <th class="px-4 py-2 text-left">Après</th>
                                <th class="px-4 py-2 text-left">Raison</th>
                                <th class="px-4 py-2 text-left">Référence</th>
                                <th class="px-4 py-2 text-left">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($this->movements as $movement)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-2 text-sm text-gray-900">
                                        {{ $movement->created_at->format('d/m/Y à H:i') }}
                                    </td>
                                    <td class="px-4 py-2">
                                        <div class="flex items-center">
                                            <span class="text-sm text-gray-900">{{ $movement->fibreType->name }} ({{ $movement->fibreType->color }})</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-2">
                                        <span class="px-2 py-1 text-xs rounded-full 
                                            @if($movement->type === 'in') bg-green-100 text-green-800
                                            @else bg-red-100 text-red-800
                                            @endif">
                                            {{ $movement->type === 'in' ? 'IN' : 'OUT' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-900">
                                        {{ number_format($movement->quantity, 2) }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-900">
                                        {{ number_format($movement->quantity_before, 2) }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-900">
                                        {{ number_format($movement->quantity_after, 2) }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-900">
                                        {{ $movement->reason }}
                                    </td>
                                    <td class="px-4 py-2 text-sm text-gray-900">
                                        @if($movement->reference_type && $movement->reference_id)
                                            @if($movement->reference_type === 'order')
                                                <a href="/order" class="text-blue-600 hover:text-blue-800">Order #{{ $movement->reference_id }}</a>
                                            @else
                                                {{ ucfirst(str_replace('_', ' ', $movement->reference_type)) }} #{{ $movement->reference_id }}
                                            @endif
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="px-4 py-2">
                                        <a href="/stock/movement/{{ $movement->id }}/edit" 
                                           class="inline-flex items-center px-3 py-1 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-200 rounded-md hover:bg-indigo-100 transition">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                            </svg>
                                            Modifier
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

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

