@php
$title = 'Painel por Setores';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('producao.ordens') }}`)" class="text-decoration-none text-secondary">Ordens de Produção</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Painel por Setores</li>
        </ol>
    </nav>
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-kanban me-2 text-info"></i>Painel por Setores
            </h1>
            <span class="text-muted small">Visualização em tempo real da produção em andamento por setor</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('producao.ordens') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <!-- Kanban Board -->
    <div class="row">
        @forelse($wipPorSetor as $setor => $items)
        <div class="col-md-4 mb-4">
            <div class="card shadow border-0 h-100">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-building me-2"></i>{{ $setor }}
                        </h5>
                        <span class="badge bg-white text-primary">{{ count($items) }}</span>
                    </div>
                </div>
                <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                    @forelse($items as $wip)
                    <div class="card mb-3 border shadow-sm">
                        <div class="card-body">
                            <!-- Cabeçalho do Card -->
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <h6 class="mb-0 fw-bold">
                                        <a href="#" onclick="carregarConteudo(`{{ route('producao.ordens.visualizar', $wip->ordem_producao_id) }}`)" 
                                           class="text-decoration-none">
                                            OP {{ $wip->ordemProducao->numero_ordem }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">{{ $wip->produto->nome ?? 'N/A' }}</small>
                                </div>
                                <span class="badge" style="background-color: {{ $wip->getCorStatus() }}">
                                    {{ $wip->status }}
                                </span>
                            </div>

                            <!-- Atividade Atual -->
                            <div class="mb-2">
                                <small class="text-muted d-block">
                                    <i class="bi bi-gear me-1"></i>
                                    <strong>Atividade:</strong> {{ $wip->atividade->descricao ?? 'N/A' }}
                                </small>
                            </div>

                            <!-- Quantidade -->
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">Quantidade</small>
                                    <strong>{{ number_format($wip->quantidade, 2, ',', '.') }}</strong>
                                </div>
                            </div>

                            <!-- Datas -->
                            <div class="mb-3">
                                <small class="text-muted d-block">
                                    <i class="bi bi-calendar-check me-1"></i>
                                    Entrada: {{ \Carbon\Carbon::parse($wip->data_entrada_setor)->format('d/m/Y H:i') }}
                                </small>
                                @if($wip->data_saida_setor)
                                <small class="text-muted d-block">
                                    <i class="bi bi-calendar-x me-1"></i>
                                    Saída: {{ \Carbon\Carbon::parse($wip->data_saida_setor)->format('d/m/Y H:i') }}
                                </small>
                                @endif
                            </div>

                            <!-- Tempo no Setor -->
                            @if($wip->status == 'EM_PROCESSO')
                            <div class="alert alert-info py-1 px-2 mb-2">
                                <small>
                                    <i class="bi bi-clock me-1"></i>
                                    Tempo no setor: {{ \Carbon\Carbon::parse($wip->data_entrada_setor)->diffForHumans() }}
                                </small>
                            </div>
                            @endif

                            <!-- Ações -->
                            @if($wip->status == 'EM_PROCESSO' && $wip->atividade->status != 'CONCLUIDA')
                            <div class="d-grid gap-2">
                                <button type="button" class="btn btn-sm btn-success" 
                                        onclick="carregarConteudo(`{{ route('producao.atividades.apontar', $wip->atividade_id) }}`)">
                                    <i class="bi bi-clipboard-check me-1"></i>Apontar
                                </button>
                            </div>
                            @endif
                        </div>
                    </div>
                    @empty
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-inbox display-4 d-block mb-2"></i>
                        <p class="mb-0">Nenhum item neste setor</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="card shadow border-0">
                <div class="card-body text-center py-5">
                    <i class="bi bi-inbox display-1 text-muted d-block mb-3"></i>
                    <h4 class="text-muted">Nenhuma produção em andamento</h4>
                    <p class="text-muted">Inicie ordens de produção para visualizar o WIP por setor</p>
                    <button type="button" class="btn btn-primary mt-3" onclick="carregarConteudo(`{{ route('producao.ordens.novo') }}`)">
                        <i class="bi bi-plus-circle me-2"></i>Nova Ordem de Produção
                    </button>
                </div>
            </div>
        </div>
        @endforelse
    </div>

    <!-- Legenda de Status -->
    <div class="card shadow border-0 mt-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">Legenda de Status</span>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <span class="badge bg-warning text-dark me-2">AGUARDANDO</span>
                    <small class="text-muted">Aguardando início no setor</small>
                </div>
                <div class="col-md-3">
                    <span class="badge bg-info text-white me-2">EM_PROCESSO</span>
                    <small class="text-muted">Em processamento no setor</small>
                </div>
                <div class="col-md-3">
                    <span class="badge bg-success text-white me-2">CONCLUIDO</span>
                    <small class="text-muted">Processamento concluído</small>
                </div>
                <div class="col-md-3">
                    <span class="badge bg-danger text-white me-2">REFUGO</span>
                    <small class="text-muted">Marcado como refugo</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas Resumidas -->
    @php
        $totalWip = collect($wipPorSetor)->flatten(1)->count();
        $emProcesso = collect($wipPorSetor)->flatten(1)->where('status', 'EM_PROCESSO')->count();
        $aguardando = collect($wipPorSetor)->flatten(1)->where('status', 'AGUARDANDO')->count();
        $concluido = collect($wipPorSetor)->flatten(1)->where('status', 'CONCLUIDO')->count();
    @endphp

    @if($totalWip > 0)
    <div class="row mt-4">
        <div class="col-md-3">
            <div class="card shadow border-0 text-center">
                <div class="card-body">
                    <h2 class="display-4 mb-0 text-primary">{{ $totalWip }}</h2>
                    <small class="text-muted">Total de Itens WIP</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow border-0 text-center">
                <div class="card-body">
                    <h2 class="display-4 mb-0 text-info">{{ $emProcesso }}</h2>
                    <small class="text-muted">Em Processo</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow border-0 text-center">
                <div class="card-body">
                    <h2 class="display-4 mb-0 text-warning">{{ $aguardando }}</h2>
                    <small class="text-muted">Aguardando</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow border-0 text-center">
                <div class="card-body">
                    <h2 class="display-4 mb-0 text-success">{{ $concluido }}</h2>
                    <small class="text-muted">Concluído</small>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>