@extends('layouts.app')

@section('title', 'Dashboard de Inventario')

@section('content')
<div class="container-fluid">
    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gradient-primary">
            <i class="fas fa-tachometer-alt me-2"></i>Dashboard de Inventario
        </h1>
        <div class="btn-group" role="group">
            <x-professional-button 
                variant="info"
                size="sm"
                icon="fas fa-chart-bar"
                href="{{ route('admin.inventory.statistics') }}">
                Estadísticas Detalladas
            </x-professional-button>
            <x-professional-button 
                variant="warning"
                size="sm"
                icon="fas fa-file-alt"
                href="{{ route('admin.inventory.reports') }}">
                Reportes
            </x-professional-button>
        </div>
    </div>

    <!-- Estadísticas Generales -->
    <div class="row mb-4">
        <x-kpi-card 
            title="Total Productos"
            value="{{ number_format($stats['total_products']) }}"
            icon="fas fa-box"
            variant="primary"
            animation-delay="0s" />
        
        <x-kpi-card 
            title="Productos Activos"
            value="{{ number_format($stats['active_products']) }}"
            icon="fas fa-check-circle"
            variant="success"
            animation-delay="0.1s" />
        
        <x-kpi-card 
            title="Stock Bajo"
            value="{{ number_format($stats['low_stock_products']) }}"
            icon="fas fa-exclamation-triangle"
            variant="warning"
            animation-delay="0.2s" />
        
        <x-kpi-card 
            title="Sin Stock"
            value="{{ number_format($stats['out_of_stock_products']) }}"
            icon="fas fa-times-circle"
            variant="danger"
            animation-delay="0.3s" />
    </div>

    <!-- Estadísticas Adicionales -->
    <div class="row mb-4">
        <x-kpi-card 
            title="Categorías"
            value="{{ number_format($stats['categories_count']) }}"
            icon="fas fa-tags"
            variant="info"
            animation-delay="0.4s" />
        
        <x-kpi-card 
            title="Marcas"
            value="{{ number_format($stats['brands_count']) }}"
            icon="fas fa-award"
            variant="secondary"
            animation-delay="0.5s" />
        
        <x-kpi-card 
            title="Almacenes"
            value="{{ number_format($stats['warehouses_count']) }}"
            icon="fas fa-warehouse"
            variant="dark"
            animation-delay="0.6s" />
        
        <x-kpi-card 
            title="Valor Total Stock"
            value="${{ number_format($stats['total_stock_value'], 2) }}"
            icon="fas fa-dollar-sign"
            variant="primary"
            animation-delay="0.7s" />
    </div>

    <!-- Alertas del Sistema -->
    @if($stats['low_stock_products'] > 0 || $stats['out_of_stock_products'] > 0)
    <div class="row mb-4">
        <div class="col-12">
            <div class="card fade-in">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fas fa-exclamation-triangle me-2"></i>Alertas del Sistema
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if($stats['low_stock_products'] > 0)
                        <div class="col-md-6">
                            <x-professional-alert 
                                type="warning"
                                icon="fas fa-exclamation-triangle"
                                title="{{ $stats['low_stock_products'] }} productos con stock bajo">
                                Revisa el inventario y considera realizar pedidos de reposición.
                            </x-professional-alert>
                        </div>
                        @endif
                        
                        @if($stats['out_of_stock_products'] > 0)
                        <div class="col-md-6">
                            <x-professional-alert 
                                type="danger"
                                icon="fas fa-times-circle"
                                title="{{ $stats['out_of_stock_products'] }} productos sin stock">
                                Urgente: Algunos productos están agotados.
                            </x-professional-alert>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Acciones Rápidas -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card fade-in">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fas fa-bolt me-2"></i>Acciones Rápidas
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <x-professional-button 
                                variant="primary"
                                size="lg"
                                icon="fas fa-plus"
                                href="{{ route('admin.inventory.products.create') }}"
                                class="w-100">
                                Nuevo Producto
                            </x-professional-button>
                        </div>
                        <div class="col-md-3 mb-3">
                            <x-professional-button 
                                variant="success"
                                size="lg"
                                icon="fas fa-truck"
                                href="{{ route('admin.purchases.receptions.create') }}"
                                class="w-100">
                                Recepción de Mercancía
                            </x-professional-button>
                        </div>
                        <div class="col-md-3 mb-3">
                            <x-professional-button 
                                variant="warning"
                                size="lg"
                                icon="fas fa-adjust"
                                href="{{ route('admin.inventory.adjustments.create') }}"
                                class="w-100">
                                Ajuste de Inventario
                            </x-professional-button>
                        </div>
                        <div class="col-md-3 mb-3">
                            <x-professional-button 
                                variant="info"
                                size="lg"
                                icon="fas fa-chart-line"
                                href="{{ route('admin.inventory.movements.index') }}"
                                class="w-100">
                                Ver Movimientos
                            </x-professional-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Productos con Stock Bajo -->
    @if(isset($lowStockProducts) && $lowStockProducts->count() > 0)
    <div class="row mb-4">
        <div class="col-12">
            <div class="card fade-in">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fas fa-exclamation-triangle me-2 text-warning"></i>Productos con Stock Bajo
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Producto</th>
                                    <th>Categoría</th>
                                    <th>Stock Actual</th>
                                    <th>Stock Mínimo</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($lowStockProducts as $product)
                                <tr>
                                    <td>
                                        <strong>{{ $product->name }}</strong><br>
                                        <small class="text-muted">{{ $product->code }}</small>
                                    </td>
                                    <td>{{ $product->category->name ?? 'N/A' }}</td>
                                    <td>
                                        <span class="badge bg-warning">{{ $product->total_stock }}</span>
                                    </td>
                                    <td>{{ $product->stock_min }}</td>
                                    <td>
                                        <span class="badge bg-danger">Stock Bajo</span>
                                    </td>
                                    <td>
                                        <x-professional-button 
                                            variant="outline-primary"
                                            size="sm"
                                            icon="fas fa-eye"
                                            href="{{ route('admin.inventory.products.show', $product) }}">
                                            Ver
                                        </x-professional-button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Movimientos Recientes -->
    @if(isset($recentMovements) && $recentMovements->count() > 0)
    <div class="row">
        <div class="col-12">
            <div class="card fade-in">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fas fa-history me-2"></i>Movimientos Recientes
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Producto</th>
                                    <th>Tipo</th>
                                    <th>Cantidad</th>
                                    <th>Usuario</th>
                                    <th>Observaciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentMovements as $movement)
                                <tr>
                                    <td>{{ $movement->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <strong>{{ $movement->product->name }}</strong><br>
                                        <small class="text-muted">{{ $movement->product->code }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $movement->type === 'in' ? 'success' : 'danger' }}">
                                            {{ $movement->type === 'in' ? 'Entrada' : 'Salida' }}
                                        </span>
                                    </td>
                                    <td>{{ $movement->quantity }}</td>
                                    <td>{{ $movement->user->name ?? 'Sistema' }}</td>
                                    <td>{{ $movement->notes ?? '-' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
// Animaciones adicionales
document.addEventListener('DOMContentLoaded', function() {
    // Agregar efecto de hover a las tarjetas KPI
    const kpiCards = document.querySelectorAll('.card.bg-primary, .card.bg-success, .card.bg-warning, .card.bg-info, .card.bg-danger, .card.bg-secondary, .card.bg-dark');
    
    kpiCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px) scale(1.02)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
        });
    });
    
    // Efecto de conteo animado para los valores KPI
    const kpiValues = document.querySelectorAll('.card h2');
    kpiValues.forEach(element => {
        const finalValue = element.textContent;
        const numericValue = parseFloat(finalValue.replace(/[^0-9.-]/g, ''));
        
        if (!isNaN(numericValue)) {
            element.textContent = '0';
            const increment = numericValue / 50;
            let current = 0;
            
            const timer = setInterval(() => {
                current += increment;
                if (current >= numericValue) {
                    element.textContent = finalValue;
                    clearInterval(timer);
                } else {
                    element.textContent = Math.floor(current).toLocaleString();
                }
            }, 30);
        }
    });
});
</script>
@endpush