@extends('layouts.app')

@section('title', 'Painel de Administração')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <h2><i class="fas fa-crown"></i> Painel de Administração</h2>
        <p class="text-muted">Visão geral do sistema</p>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="metric-card">
            <h5>Total de Usuários</h5>
            <div class="number">{{ $stats['total_users'] }}</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="metric-card pending">
            <h5>Total de Empresas</h5>
            <div class="number">{{ $stats['total_companies'] }}</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="metric-card in-progress">
            <h5>Total de Ordens</h5>
            <div class="number">{{ $stats['total_orders'] }}</div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="metric-card completed">
            <h5>Ordens Finalizadas</h5>
            <div class="number">{{ $stats['completed_orders'] }}</div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index') }}" class="text-decoration-none">
            <div class="metric-card">
                <h5>Abertas no Mês</h5>
                <div class="number">{{ $metrics['total'] }}</div>
            </div>
        </a>
    </div>

    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index', ['status' => 'pending']) }}" class="text-decoration-none">
            <div class="metric-card pending">
                <h5>Pendentes</h5>
                <div class="number">{{ $metrics['pending'] }}</div>
            </div>
        </a>
    </div>

    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index', ['status' => 'in_progress']) }}" class="text-decoration-none">
            <div class="metric-card in-progress">
                <h5>Em Andamento</h5>
                <div class="number">{{ $metrics['in_progress'] }}</div>
            </div>
        </a>
    </div>

    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index', ['status' => 'completed']) }}" class="text-decoration-none">
            <div class="metric-card completed">
                <h5>Finalizadas no Mês</h5>
                <div class="number">{{ $metrics['completed'] }}</div>
            </div>
        </a>
    </div>
    
    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index', ['status' => 'rescheduled']) }}" class="text-decoration-none">
            <div class="metric-card rescheduled">
                <h5>Reagendada</h5>
                <div class="number">{{ $metrics['rescheduled'] }}</div>
            </div>
        </a>
    </div>
    
    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index', ['status' => 'awaiting_part']) }}" class="text-decoration-none">
            <div class="metric-card awaiting-part">
                <h5>Aguardando Peça</h5>
                <div class="number">{{ $metrics['awaiting_part'] }}</div>
            </div>
        </a>
    </div>

    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index', ['status' => 'part_available']) }}" class="text-decoration-none">
            <div class="metric-card part-available">
                <h5>Peça Disponível</h5>
                <div class="number">{{ $metrics['part_available'] }}</div>
            </div>
        </a>
    </div>

    <div class="col-md-3 mb-3">
        <a href="{{ route('service-orders.index', ['status' => 'planned']) }}" class="text-decoration-none">
            <div class="metric-card planned">
                <h5>Planejadas</h5>
                <div class="number">{{ $metrics['planned'] }}</div>
            </div>
        </a>
    </div>
    
</div>

<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">Estatísticas de Usuários</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Gestores</span>
                        <strong>{{ $stats['managers'] }}</strong>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-warning" style="width: {{ ($stats['managers'] / max($stats['total_users'], 1)) * 100 }}%"></div>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Usuários Comuns</span>
                        <strong>{{ $stats['regular_users'] }}</strong>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-info" style="width: {{ ($stats['regular_users'] / max($stats['total_users'], 1)) * 100 }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">Estatísticas de Ordens</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Pendentes</span>
                        <strong>{{ $stats['pending_orders'] }}</strong>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-danger" style="width: {{ ($stats['pending_orders'] / max($stats['total_orders'], 1)) * 100 }}%"></div>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Finalizadas</span>
                        <strong>{{ $stats['completed_orders'] }}</strong>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-success" style="width: {{ ($stats['completed_orders'] / max($stats['total_orders'], 1)) * 100 }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">Usuários Recentes</h5>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Nome</th>
                            <th>Email</th>
                            <th>Empresa</th>
                            <th>Função</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentUsers as $user)
                            <tr>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->company->name }}</td>
                                <td>
                                    @if($user->role == 'admin')
                                        <span class="badge bg-danger">Admin</span>
                                    @elseif($user->role == 'manager')
                                        <span class="badge bg-warning">Gestor</span>
                                    @else
                                        <span class="badge bg-info">Usuário</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-3">Nenhum usuário</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">Ordens Recentes</h5>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>ID</th>
                            <th>Setor</th>
                            <th>Empresa</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentOrders as $order)
                            <tr>
                                <td><strong>#{{ $order->id }}</strong></td>
                                <td>{{ $order->sector }}</td>
                                <td>{{ $order->company->name }}</td>
                                <td>
                                    @if($order->status == 'pending')
                                        <span class="badge badge-pending">Pendente</span>
                                    @elseif($order->status == 'in_progress')
                                        <span class="badge badge-in-progress">Em Andamento</span>
                                    @elseif($order->status == 'completed')
                                        <span class="badge badge-completed">Finalizada</span>
                                    @else
                                        <span class="badge badge-rescheduled">Reagendada</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-3">Nenhuma ordem</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-light">
                <h5 class="mb-0">Ordens por Empresa</h5>
            </div>
            <div class="card-body">
                <canvas id="companiesChart"></canvas>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const companiesCtx = document.getElementById('companiesChart').getContext('2d');
    const companiesData = {
        labels: [
            @foreach($ordersByCompany as $item)
                '{{ $item->company->name }}',
            @endforeach
        ],
        datasets: [{
            label: 'Quantidade de Ordens',
            data: [
                @foreach($ordersByCompany as $item)
                    {{ $item->count }},
                @endforeach
            ],
            backgroundColor: [
                '#667eea',
                '#764ba2',
                '#f093fb',
                '#4facfe',
                '#00f2fe',
                '#43e97b'
            ]
        }]
    };
    new Chart(companiesCtx, {
        type: 'bar',
        data: companiesData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endpush
@endsection