@extends('sistema.layout')
@section('titulo', 'Dashboard Executivo')
@section('conteudo')

<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3">
                <i class="fa-solid fa-square-poll-horizontal me-2"></i>
                Dashboard Executivo
            </h1>
            <p class="text-muted mb-0">Indicadores-chave de desempenho e métricas críticas</p>
        </div>
    </div>

    <!-- KPIs Principais -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-primary">
                <div class="card-body">
                    <div class="d-flex flex-column">
                        <small class="text-muted text-uppercase mb-2">
                            <i class="fa-solid fa-clock me-1"></i>
                            Tempo Médio de Resolução
                        </small>
                        <h3 class="fw-bold">
                            {{ $kpis['tempo_medio'] ?? '—' }} dias
                        </h3>
                        <small class="text-muted mt-1">Processos</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-success">
                <div class="card-body">
                    <div class="d-flex flex-column">
                        <small class="text-muted text-uppercase mb-2">
                            <i class="fa-solid fa-percent me-1"></i>
                            Taxa de Digitalização
                        </small>
                        <h3 class="fw-bold">
                            {{ $kpis['taxa_digitalizacao'] ?? 0 }}%
                        </h3>
                        <small class="text-muted mt-1">Documentos</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-warning">
                <div class="card-body">
                    <div class="d-flex flex-column">
                        <small class="text-muted text-uppercase mb-2">
                            <i class="fa-solid fa-hand-holding-hand me-1"></i>
                            Itens em Empréstimo
                        </small>
                        <h3 class="fw-bold">
                            {{ $kpis['emprestimos_ativos'] ?? 0 }}
                        </h3>
                        <small class="text-muted mt-1">Livros e Museu</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-left-danger">
                <div class="card-body">
                    <div class="d-flex flex-column">
                        <small class="text-muted text-uppercase mb-2">
                            <i class="fa-solid fa-exclamation-triangle me-1"></i>
                            Itens em Atraso
                        </small>
                        <h3 class="fw-bold text-danger">
                            {{ $kpis['itens_atraso'] ?? 0 }}
                        </h3>
                        <small class="text-muted mt-1">Ação necessária</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Alertas Críticos -->
    @if(isset($alertas) && count($alertas) > 0)
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-danger border-start-4 alert-dismissible fade show" role="alert">
                <h6 class="mb-2">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    Alertas Críticos
                </h6>
                <ul class="mb-0">
                    @foreach($alertas as $alerta)
                        <li>{{ $alerta }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>
    </div>
    @endif

    <!-- Gestão de Processos -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">
                                <i class="fa-solid fa-hourglass-end me-1"></i>
                                Processos Pendentes
                            </h6>
                            <h3 class="fw-bold">{{ $processos['pendentes'] ?? 0 }}</h3>
                            <div class="progress mt-2" style="height: 4px;">
                                <div class="progress-bar bg-warning" style="width: 40%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">
                                <i class="fa-solid fa-check-circle me-1"></i>
                                Processos Resolvidos (Mês)
                            </h6>
                            <h3 class="fw-bold">{{ $processos['resolvidos_mes'] ?? 0 }}</h3>
                            <div class="progress mt-2" style="height: 4px;">
                                <div class="progress-bar bg-success" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="text-muted mb-2">
                                <i class="fa-solid fa-arrow-trend-up me-1"></i>
                                Taxa de Conclusão
                            </h6>
                            <h3 class="fw-bold">{{ $processos['taxa_conclusao'] ?? 0 }}%</h3>
                            <div class="progress mt-2" style="height: 4px;">
                                <div class="progress-bar bg-info" style="width: {{ $processos['taxa_conclusao'] ?? 0 }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Distribuição por Departamento -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Top Departamentos</h6>
                </div>
                <div class="list-group list-group-flush">
                    @forelse($departamentos ?? [] as $dept)
                        <div class="list-group-item px-3 py-2">
                            <div class="d-flex justify-content-between">
                                <small class="fw-500">{{ $dept['nome'] ?? '—' }}</small>
                                <span class="badge bg-primary">{{ $dept['total'] ?? 0 }}</span>
                            </div>
                            <div class="progress mt-1" style="height: 4px;">
                                <div class="progress-bar" style="width: {{ ($dept['percentual'] ?? 0) }}%"></div>
                            </div>
                        </div>
                    @empty
                        <div class="list-group-item px-3 py-3 text-center text-muted">
                            Nenhum dado
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Biblioteca e Museu -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fa-solid fa-book me-1"></i>
                        Indicadores da Biblioteca
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Total de Livros</small>
                            <h4 class="fw-bold">{{ $biblioteca['total'] ?? 0 }}</h4>
                        </div>
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Disponíveis</small>
                            <h4 class="fw-bold text-success">{{ $biblioteca['disponiveis'] ?? 0 }}</h4>
                        </div>
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Emprestados</small>
                            <h4 class="fw-bold text-warning">{{ $biblioteca['emprestados'] ?? 0 }}</h4>
                        </div>
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Em Atraso</small>
                            <h4 class="fw-bold text-danger">{{ $biblioteca['atraso'] ?? 0 }}</h4>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height: 6px;">
                        <div class="progress-bar bg-success" style="width: {{ $biblioteca['percentual_disponivel'] ?? 0 }}%"></div>
                        <div class="progress-bar bg-warning" style="width: {{ $biblioteca['percentual_emprestado'] ?? 0 }}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fa-solid fa-museum me-1"></i>
                        Indicadores do Museu
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Total de Itens</small>
                            <h4 class="fw-bold">{{ $museu['total'] ?? 0 }}</h4>
                        </div>
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Em Acervo</small>
                            <h4 class="fw-bold text-success">{{ $museu['acervo'] ?? 0 }}</h4>
                        </div>
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Emprestados</small>
                            <h4 class="fw-bold text-warning">{{ $museu['emprestados'] ?? 0 }}</h4>
                        </div>
                        <div class="col-6 mb-3">
                            <small class="text-muted d-block">Restauração</small>
                            <h4 class="fw-bold text-info">{{ $museu['restauracao'] ?? 0 }}</h4>
                        </div>
                    </div>
                    <div class="progress mt-2" style="height: 6px;">
                        <div class="progress-bar bg-success" style="width: {{ $museu['percentual_acervo'] ?? 0 }}%"></div>
                        <div class="progress-bar bg-warning" style="width: {{ $museu['percentual_emprestado'] ?? 0 }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Documentação -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fa-solid fa-file-pdf me-1"></i>
                        Progresso de Digitalização
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="progress" style="height: 20px;">
                                <div class="progress-bar bg-success" style="width: {{ $documentos['taxa_digitalizacao'] ?? 0 }}%">
                                    {{ $documentos['taxa_digitalizacao'] ?? 0 }}%
                                </div>
                            </div>
                            <small class="text-muted d-block mt-2">
                                {{ $documentos['digitalizados'] ?? 0 }} de {{ $documentos['total'] ?? 0 }} documentos digitalizados
                            </small>
                        </div>
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-muted d-block">Pendentes</small>
                                    <h5 class="fw-bold">{{ $documentos['pendentes'] ?? 0 }}</h5>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted d-block">Meta Mensal</small>
                                    <h5 class="fw-bold text-primary">{{ $documentos['meta_mes'] ?? 0 }}</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .border-left-primary { border-left: 4px solid #0066cc; }
    .border-left-success { border-left: 4px solid #28a745; }
    .border-left-warning { border-left: 4px solid #ffc107; }
    .border-left-danger { border-left: 4px solid #dc3545; }
</style>

@endsection