@extends('admin.layouts.app')

@push('styles')
<style>
    .stat-card {
        transition: transform 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-5px);
    }
    .stat-icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 24px;
    }
    .chart-container {
        position: relative;
        height: 300px;
    }
    @media print {
        .no-print {
            display: none !important;
        }
        .page-content {
            margin: 0 !important;
            padding: 15px !important;
        }
    }
</style>
@endpush

@section('title', 'Gráficos e Estatísticas')

@section('content')
    <main class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3 no-print">
            <div class="breadcrumb-title pe-3">Gráficos e Estatísticas</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('inicio') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item active" aria-current="page">Gráficos</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary btn-sm" onclick="window.print()">
                    <i class="bi bi-printer me-1"></i> Imprimir
                </button>
                <a href="{{ route('dashboard.imprimir') }}?data_inicio={{ $dataInicio }}&data_fim={{ $dataFim }}&user_id={{ $userId }}&tipo={{ $tipo }}"
                   class="btn btn-success btn-sm" target="_blank">
                    <i class="bi bi-file-pdf me-1"></i> Relatório Completo
                </a>
                <a href="{{ route('inicio') }}" class="btn btn-info btn-sm">
                    <i class="bi bi-calendar3 me-1"></i> Ver Calendário
                </a>
            </div>
        </div>
        <!--end breadcrumb-->

        <!-- Filtros -->
        <div class="card shadow-sm radius-10 border-0 mb-3 no-print">
            <div class="card-body">
                <form method="GET" action="{{ route('graficos') }}" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Data Início</label>
                        <input type="date" class="form-control" name="data_inicio" value="{{ $dataInicio }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Data Fim</label>
                        <input type="date" class="form-control" name="data_fim" value="{{ $dataFim }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Utilizador</label>
                        <select class="form-select" name="user_id">
                            <option value="">Todos</option>
                            @foreach($usuarios as $usuario)
                                <option value="{{ $usuario->id }}" {{ $userId == $usuario->id ? 'selected' : '' }}>
                                    {{ $usuario->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Tipo de Movimentação</label>
                        <select class="form-select" name="tipo">
                            <option value="">Todos</option>
                            <option value="entrada" {{ $tipo == 'entrada' ? 'selected' : '' }}>Entrada</option>
                            <option value="saida" {{ $tipo == 'saida' ? 'selected' : '' }}>Saída</option>
                            <option value="transferencia" {{ $tipo == 'transferencia' ? 'selected' : '' }}>Transferência</option>
                            <option value="ajuste" {{ $tipo == 'ajuste' ? 'selected' : '' }}>Ajuste</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-funnel me-1"></i> Filtrar
                        </button>
                        <a href="{{ route('graficos') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-clockwise me-1"></i> Limpar
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Cards de Estatísticas -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
            <div class="col">
                <div class="card radius-10 stat-card overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Total de Artigos</p>
                                <h4 class="my-1 text-primary">{{ number_format($totalItens, 0, ',', '.') }}</h4>
                                <p class="mb-0 font-13 text-success"><i class="bi bi-box-seam"></i> Cadastrados</p>
                            </div>
                            <div class="stat-icon bg-gradient-primary text-white ms-auto">
                                <i class="bi bi-box-seam"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10 stat-card overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Valor Total Gasto</p>
                                <h4 class="my-1 text-success">Kz {{ number_format($valorTotalEstoque, 2, ',', '.') }}</h4>
                                <p class="mb-0 font-13 text-success"><i class="bi bi-currency-dollar"></i> Em inventário</p>
                            </div>
                            <div class="stat-icon bg-gradient-success text-white ms-auto">
                                <i class="bi bi-currency-dollar"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10 stat-card overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Baixo Stock</p>
                                <h4 class="my-1 text-warning">{{ $itensBaixoEstoque }}</h4>
                                <p class="mb-0 font-13 text-warning"><i class="bi bi-exclamation-triangle"></i> Atenção</p>
                            </div>
                            <div class="stat-icon bg-gradient-warning text-white ms-auto">
                                <i class="bi bi-exclamation-triangle"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10 stat-card overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Sem Stock</p>
                                <h4 class="my-1 text-danger">{{ $itensSemEstoque }}</h4>
                                <p class="mb-0 font-13 text-danger"><i class="bi bi-x-circle"></i> Crítico</p>
                            </div>
                            <div class="stat-icon bg-gradient-danger text-white ms-auto">
                                <i class="bi bi-x-circle"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Segunda linha de cards -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 mt-3">
            <div class="col">
                <div class="card radius-10 stat-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Categorias</p>
                                <h4 class="my-1">{{ $totalCategorias }}</h4>
                            </div>
                            <div class="stat-icon bg-gradient-info text-white ms-auto">
                                <i class="bi bi-tags"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10 stat-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Depósitos</p>
                                <h4 class="my-1">{{ $totalDepositos }}</h4>
                            </div>
                            <div class="stat-icon bg-gradient-dark text-white ms-auto">
                                <i class="bi bi-building"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10 stat-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Requisições Abertas</p>
                                <h4 class="my-1 text-info">{{ $requisicoesAbertasCount }}</h4>
                            </div>
                            <div class="stat-icon bg-gradient-info text-white ms-auto">
                                <i class="bi bi-journal-text"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card radius-10 stat-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Requisições Pendentes</p>
                                <h4 class="my-1 text-warning">{{ $requisicoesPendentesCount }}</h4>
                            </div>
                            <div class="stat-icon bg-gradient-warning text-white ms-auto">
                                <i class="bi bi-clock-history"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="row mt-3">
            <div class="col-12 col-lg-8">
                <div class="card radius-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <h5 class="mb-0">Movimentações nos Últimos 30 Dias</h5>
                            </div>
                        </div>
                        <div class="chart-container mt-3">
                            <canvas id="chartMovimentacoes"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card radius-10">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div>
                                <h5 class="mb-0">Movimentações por Tipo</h5>
                            </div>
                        </div>
                        <div class="chart-container">
                            <canvas id="chartTipos"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabelas -->
        <div class="row mt-3">
            <div class="col-12 col-lg-6">
                <div class="card radius-10">
                    <div class="card-body">
                        <h5 class="mb-3">Utilizadores Mais Ativos</h5>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Utilizador</th>
                                        <th class="text-end">Movimentações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($usuariosMaisAtivos as $usuario)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar bg-primary text-white rounded-circle me-2" style="width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;">
                                                    {{ substr($usuario->user->name ?? 'U', 0, 1) }}
                                                </div>
                                                <span>{{ $usuario->user->name ?? 'N/A' }}</span>
                                            </div>
                                        </td>
                                        <td class="text-end">
                                            <span class="badge bg-primary">{{ $usuario->total_movimentacoes }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card radius-10">
                    <div class="card-body">
                        <h5 class="mb-3">Artigos Mais Movimentados</h5>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th class="text-end">Qtd. Movimentações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($itensMaisMovimentados as $itemMov)
                                    <tr>
                                        <td>{{ $itemMov->item->nome ?? 'N/A' }}</td>
                                        <td class="text-end">
                                            <span class="badge bg-success">{{ $itemMov->total_movimentacoes }}</span>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabela de Movimentações Recentes -->
        <div class="card radius-10 mt-3">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <h5 class="mb-0">Movimentações Recentes</h5>
                    <div class="ms-auto">
                        <small class="text-muted">Período: {{ \Carbon\Carbon::parse($dataInicio)->format('d/m/Y') }} a {{ \Carbon\Carbon::parse($dataFim)->format('d/m/Y') }}</small>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Data</th>
                                <th>Item</th>
                                <th>Tipo</th>
                                <th>Quantidade</th>
                                <th>Utilizador</th>
                                <th>Origem/Destino</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($movimentacoes as $mov)
                            <tr>
                                <td>{{ \Carbon\Carbon::parse($mov->data_mov)->format('d/m/Y H:i') }}</td>
                                <td>{{ $mov->item->nome ?? 'N/A' }}</td>
                                <td>
                                    @if($mov->tipo == 'entrada')
                                        <span class="badge bg-success">Entrada</span>
                                    @elseif($mov->tipo == 'saida')
                                        <span class="badge bg-danger">Saída</span>
                                    @elseif($mov->tipo == 'transferencia')
                                        <span class="badge bg-info">Transferência</span>
                                    @else
                                        <span class="badge bg-warning">{{ ucfirst($mov->tipo) }}</span>
                                    @endif
                                </td>
                                <td>{{ $mov->quantidade }}</td>
                                <td>{{ $mov->user->name ?? 'N/A' }}</td>
                                <td>
                                    @if($mov->depositoOrigem)
                                        {{ $mov->depositoOrigem->nome }}
                                    @endif
                                    @if($mov->depositoOrigem && $mov->depositoDestino)
                                        <i class="bi bi-arrow-right"></i>
                                    @endif
                                    @if($mov->depositoDestino)
                                        {{ $mov->depositoDestino->nome }}
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center">Nenhuma movimentação encontrada no período selecionado</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </main>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    // Gráfico de Movimentações
    const ctxMovimentacoes = document.getElementById('chartMovimentacoes').getContext('2d');
    const chartMovimentacoes = new Chart(ctxMovimentacoes, {
        type: 'line',
        data: {
            labels: {!! json_encode($movimentacoesPorDia->pluck('data')->map(function($date) {
                return \Carbon\Carbon::parse($date)->format('d/m');
            })) !!},
            datasets: [{
                label: 'Movimentações',
                data: {!! json_encode($movimentacoesPorDia->pluck('total')) !!},
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });

    // Gráfico de Tipos
    const ctxTipos = document.getElementById('chartTipos').getContext('2d');
    const chartTipos = new Chart(ctxTipos, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($movimentacoesPorTipo->pluck('tipo')->map(function($tipo) {
                return ucfirst($tipo);
            })) !!},
            datasets: [{
                data: {!! json_encode($movimentacoesPorTipo->pluck('total')) !!},
                backgroundColor: [
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)',
                    'rgba(153, 102, 255, 0.8)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
</script>
@endpush