@extends('layouts.app')

@section('title', 'Reportes 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-gray-800">
            <i class="fas fa-file-alt me-2"></i>Reportes de Inventario
        </h1>
        <a href="{{ route('admin.inventory.dashboard') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Volver al Dashboard
        </a>
    </div>

    <!-- Reportes Disponibles -->
    <div class="row">
        <!-- Reporte de Stock Bajo -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow h-100">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Stock Bajo
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Lista de productos que están por debajo del stock mínimo establecido.</p>
                    <div class="mb-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Útil para identificar productos que necesitan reabastecimiento.
                        </small>
                    </div>
                    <a href="{{ route('admin.inventory.reports.low-stock') }}" class="btn btn-warning">
                        <i class="fas fa-eye me-2"></i>Ver Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Reporte Sin Stock -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow h-100">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-times-circle me-2"></i>Sin Stock
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Productos que no tienen stock disponible en el inventario.</p>
                    <div class="mb-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Crítico para evitar pérdidas de ventas por falta de productos.
                        </small>
                    </div>
                    <a href="{{ route('admin.inventory.reports.out-of-stock') }}" class="btn btn-danger">
                        <i class="fas fa-eye me-2"></i>Ver Reporte
                    </a>
                </div>
            </div>
        </div>

        <!-- Reporte de Movimientos -->
        <div class="col-lg-4 mb-4">
            <div class="card shadow h-100">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>Movimientos
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Historial completo de movimientos de inventario con filtros avanzados.</p>
                    <div class="mb-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Auditoría completa de entradas, salidas y ajustes de stock.
                        </small>
                    </div>
                    <a href="{{ route('admin.inventory.reports.movements') }}" class="btn btn-info">
                        <i class="fas fa-eye me-2"></i>Ver Reporte
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Herramientas Adicionales -->
    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-download me-2"></i>Exportar Datos
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Exportar información del inventario en diferentes formatos.</p>
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <a href="{{ route('admin.inventory.products.export') }}" class="btn btn-outline-primary w-100">
                                <i class="fas fa-file-excel me-2"></i>Exportar Productos
                            </a>
                        </div>
                        <div class="col-md-6 mb-2">
                            <button class="btn btn-outline-secondary w-100" disabled>
                                <i class="fas fa-file-pdf me-2"></i>Exportar PDF (Próximamente)
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>Estadísticas Avanzadas
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Análisis detallado del inventario con gráficos y métricas.</p>
                    <a href="{{ route('admin.inventory.statistics') }}" class="btn btn-success">
                        <i class="fas fa-chart-line me-2"></i>Ver Estadísticas
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Información Adicional -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Información sobre los Reportes
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="text-primary">Stock Bajo</h6>
                            <ul class="list-unstyled small">
                                <li><i class="fas fa-check text-success me-1"></i>Productos con stock menor al mínimo</li>
                                <li><i class="fas fa-check text-success me-1"></i>Alertas automáticas</li>
                                <li><i class="fas fa-check text-success me-1"></i>Filtros por categoría</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-danger">Sin Stock</h6>
                            <ul class="list-unstyled small">
                                <li><i class="fas fa-check text-success me-1"></i>Productos con stock cero</li>
                                <li><i class="fas fa-check text-success me-1"></i>Prioridad alta</li>
                                <li><i class="fas fa-check text-success me-1"></i>Notificaciones urgentes</li>
                            </ul>
                        </div>
                        <div class="col-md-4">
                            <h6 class="text-info">Movimientos</h6>
                            <ul class="list-unstyled small">
                                <li><i class="fas fa-check text-success me-1"></i>Historial completo</li>
                                <li><i class="fas fa-check text-success me-1"></i>Filtros por fecha</li>
                                <li><i class="fas fa-check text-success me-1"></i>Trazabilidad completa</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection