@extends('layouts.app')

@section('title', 'Détails Article')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tableau de bord</a></li>
    <li class="breadcrumb-item"><a href="{{ route('stock-items.index') }}">Stock</a></li>
    <li class="breadcrumb-item active">Détails</li>
@endsection

@section('content')
<div class="row">
    <div class="col-md-4 mb-3">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="display-3 text-primary mb-3">
                    <i class="bi bi-box-seam"></i>
                </div>
                <h3>{{ $stockItem->name }}</h3>
                <p class="text-muted">{{ $stockItem->category }} ({{ $stockItem->code }})</p>
                
                <hr>
                
                <h2 class="fw-bold {{ $stockItem->current_quantity <= $stockItem->minimum_quantity ? 'text-danger' : 'text-success' }}">
                    {{ $stockItem->current_quantity }} {{ $stockItem->unit }}
                </h2>
                <span class="text-muted">En stock</span>

                @if($stockItem->current_quantity <= $stockItem->minimum_quantity)
                <div class="alert alert-danger mt-3 mb-0">
                    <i class="bi bi-exclamation-triangle"></i> Stock faible (Min: {{ $stockItem->minimum_quantity }})
                </div>
                @endif
                
                <div class="mt-4 text-start small text-muted">
                    <p class="mb-1"><strong>Valeur unitaire:</strong> {{ number_format($stockItem->unit_price, 0, ',', ' ') }} FCFA</p>
                    <p class="mb-1"><strong>Valeur totale:</strong> {{ number_format($stockItem->unit_price * $stockItem->current_quantity, 0, ',', ' ') }} FCFA</p>
                </div>

                <div class="d-grid gap-2 mt-4">
                    <a href="{{ route('stock-items.edit', $stockItem) }}" class="btn btn-warning">
                        <i class="bi bi-pencil"></i> Modifier
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Mouvements Récents</h5>
                <a href="{{ route('stock-movements.create') }}?stock_item_id={{ $stockItem->id }}" class="btn btn-sm btn-primary">
                    <i class="bi bi-arrow-left-right"></i> Nouveau Mouvement
                </a>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Date</th>
                            <th>Type</th>
                            <th>Quantité</th>
                            <th>Raison</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($stockItem->movements as $movement)
                        <tr>
                            <td>{{ $movement->movement_date->format('d/m/Y') }}</td>
                            <td>
                                @if($movement->movement_type == 'in')
                                    <span class="badge bg-success"><i class="bi bi-arrow-down"></i> Entrée</span>
                                @elseif($movement->movement_type == 'out')
                                    <span class="badge bg-warning text-dark"><i class="bi bi-arrow-up"></i> Sortie</span>
                                @else
                                    <span class="badge bg-info">Ajustement</span>
                                @endif
                            </td>
                            <td>{{ $movement->quantity }}</td>
                            <td>{{ Str::limit($movement->reason, 30) }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center py-4 text-muted">
                                Aucun mouvement récent.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection