@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="h3 mb-1">{{ $producto->nombre }}</h2>
                    <p class="text-muted mb-0">Código: {{ $producto->codigo }}</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('inventario.edit', $producto) }}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                    <a href="{{ route('inventario.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Información del Producto -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Información del Producto</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold">Nombre:</td>
                                    <td>{{ $producto->nombre }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Código:</td>
                                    <td><span class="badge bg-primary">{{ $producto->codigo }}</span></td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Categoría:</td>
                                    <td><span class="badge bg-secondary">{{ $producto->categoria }}</span></td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Marca:</td>
                                    <td>{{ $producto->marca }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Modelo:</td>
                                    <td>{{ $producto->modelo }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Proveedor:</td>
                                    <td>{{ $producto->proveedor->nombre ?? 'No asignado' }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold">Precio Compra:</td>
                                    <td class="text-success fw-bold">Bs. {{ number_format($producto->precio_compra, 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Precio Venta:</td>
                                    <td class="text-primary fw-bold">Bs. {{ number_format($producto->precio_venta, 2) }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Unidad:</td>
                                    <td>{{ $producto->unidad_medida }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Ubicación:</td>
                                    <td>{{ $producto->ubicacion }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Estado:</td>
                                    <td>
                                        <span class="badge {{ $producto->estado ? 'bg-success' : 'bg-danger' }}">
                                            {{ $producto->estado ? 'Activo' : 'Inactivo' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Fecha Registro:</td>
                                    <td>{{ $producto->fecha_registro ? $producto->fecha_registro->format('d/m/Y') : 'No registrada' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    @if($producto->descripcion)
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6 class="fw-bold">Descripción:</h6>
                            <p class="text-muted">{{ $producto->descripcion }}</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Stock y Acciones -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Control de Stock</h5>
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        <h2 class="display-4 {{ $producto->stock_actual <= $producto->stock_minimo ? 'text-danger' : 'text-success' }}">
                            {{ $producto->stock_actual }}
                        </h2>
                        <p class="mb-0">{{ $producto->unidad_medida }}</p>
                        <small class="text-muted">Stock actual</small>
                    </div>
                    
                    <div class="mb-3">
                        <div class="row text-center">
                            <div class="col-6">
                                <p class="mb-0 fw-bold">{{ $producto->stock_minimo }}</p>
                                <small class="text-muted">Stock mínimo</small>
                            </div>
                            <div class="col-6">
                                <p class="mb-0 fw-bold text-info">Bs. {{ number_format($producto->stock_actual * $producto->precio_compra, 2) }}</p>
                                <small class="text-muted">Valor stock</small>
                            </div>
                        </div>
                    </div>

                    @if($producto->stock_actual <= $producto->stock_minimo)
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i> Stock bajo
                    </div>
                    @endif

                    <button class="btn btn-warning w-100 mb-2" onclick="ajustarStock({{ $producto->id }})">
                        <i class="fas fa-adjust"></i> Ajustar Stock
                    </button>
                </div>
            </div>

            <!-- Historial de Movimientos Recientes -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">Movimientos Recientes</h6>
                </div>
                <div class="card-body p-2">
                    @if($producto->movimientos && $producto->movimientos->count() > 0)
                        @foreach($producto->movimientos->take(5) as $movimiento)
                        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                            <div>
                                <small class="fw-bold {{ $movimiento->tipo_movimiento === 'entrada' ? 'text-success' : 'text-danger' }}">
                                    {{ ucfirst($movimiento->tipo_movimiento) }}
                                </small>
                                <br>
                                <small class="text-muted">{{ $movimiento->fecha_movimiento->format('d/m/Y') }}</small>
                            </div>
                            <div class="text-end">
                                <span class="fw-bold">{{ $movimiento->cantidad }}</span>
                                <br>
                                <small class="text-muted">{{ $movimiento->usuario->name ?? 'Sistema' }}</small>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <p class="text-muted text-center">No hay movimientos registrados</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para ajustar stock -->
<div class="modal fade" id="ajustarStockModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajustar Stock - {{ $producto->nombre }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('inventario.ajustar-stock', $producto) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="tipo_movimiento" class="form-label">Tipo de Movimiento</label>
                        <select class="form-select" id="tipo_movimiento" name="tipo_movimiento" required>
                            <option value="entrada">Entrada</option>
                            <option value="salida">Salida</option>
                            <option value="ajuste">Ajuste</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="cantidad" class="form-label">Cantidad</label>
                        <input type="number" class="form-control" id="cantidad" name="cantidad" required min="1">
                    </div>
                    <div class="mb-3">
                        <label for="observaciones" class="form-label">Observaciones</label>
                        <textarea class="form-control" id="observaciones" name="observaciones" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar Ajuste</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function ajustarStock(productoId) {
    new bootstrap.Modal(document.getElementById('ajustarStockModal')).show();
}
</script>
@endpush