@php
$title = 'Visualizar Ordem de Produção';
$modoEdicao = request()->get('editar') == 1;
@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">Visualizar</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-gear me-2 text-primary"></i>Ordem de Produção
            </h1>
            <span class="text-muted small">{{ $ordem->numero_ordem }} - {{ $ordem->descricao }}</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="carregarConteudo(`{{ route('producao.ordens') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
            
            @if(!$modoEdicao && $ordem->status == 'PLANEJADO')
                <button type="button" class="btn btn-sm btn-warning me-2" onclick="carregarConteudo(`{{ route('producao.ordens.visualizar', $ordem->id) }}?editar=1`)">
                    <i class="bi bi-pencil me-2"></i>Editar
                </button>
            @endif
            
            @if($ordem->status == 'PLANEJADO')
                <button type="button" class="btn btn-sm btn-success" onclick="iniciarProducao({{ $ordem->id }})">
                    <i class="bi bi-play-fill me-2"></i>Iniciar Produção
                </button>
            @elseif($ordem->status == 'EM_PRODUCAO')
                <button type="button" class="btn btn-sm btn-primary" onclick="concluirProducao({{ $ordem->id }})">
                    <i class="bi bi-check-circle me-2"></i>Concluir Produção
                </button>
            @endif
        </div>
    </div>

    @if($modoEdicao)
        <form id="formEditarOrdem">
            @csrf
    @endif
    
    @if($modoEdicao)
        <div class="alert alert-info border-0 mb-3">
            <i class="bi bi-info-circle me-2"></i>
            <small>Você pode editar a <strong>Prioridade</strong> (no resumo ao lado) e a <strong>Descrição das Atividades</strong> (na tabela abaixo).</small>
        </div>
    @endif

    <div class="row">
        <!-- Resumo da Ordem -->
        <div class="col-md-3">
            <div class="card shadow border-0 mb-4" style="height: calc(100% - 1.5rem);">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold">Resumo da Ordem</span>
                </div>
                <div class="card-body" style="overflow-y: auto;">
                    <div class="mb-3">
                        <label class="form-label text-muted small">Número da Ordem</label>
                        <div><span class="badge bg-primary bg-opacity-75">{{ $ordem->numero_ordem }}</span></div>
                    </div>
                    
                    @if($ordem->venda)
                    <div class="mb-3">
                        <label class="form-label text-muted small">Venda Vinculada</label>
                        <div class="fw-bold small">{{ $ordem->venda->codigo }}</div>
                        <small class="text-muted">{{ $ordem->venda->cliente->nome_fantasia }}</small>
                    </div>
                    @endif
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small">Data Início</label>
                        <div class="fw-bold small">{{ \Carbon\Carbon::parse($ordem->data_inicio_prevista)->format('d/m/Y') }}</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small">Data Fim</label>
                        <div class="fw-bold small">{{ \Carbon\Carbon::parse($ordem->data_fim_prevista)->format('d/m/Y') }}</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small">Prioridade</label>
                        @if($modoEdicao)
                            <select class="form-select form-select-sm" name="prioridade">
                                <option value="BAIXA" {{ $ordem->prioridade == 'BAIXA' ? 'selected' : '' }}>Baixa</option>
                                <option value="MEDIA" {{ $ordem->prioridade == 'MEDIA' ? 'selected' : '' }}>Média</option>
                                <option value="ALTA" {{ $ordem->prioridade == 'ALTA' ? 'selected' : '' }}>Alta</option>
                                <option value="URGENTE" {{ $ordem->prioridade == 'URGENTE' ? 'selected' : '' }}>Urgente</option>
                            </select>
                        @else
                            <div>
                                @if($ordem->prioridade == 'URGENTE')
                                    <span class="badge bg-danger">Urgente</span>
                                @elseif($ordem->prioridade == 'ALTA')
                                    <span class="badge bg-warning">Alta</span>
                                @elseif($ordem->prioridade == 'MEDIA')
                                    <span class="badge bg-info">Média</span>
                                @else
                                    <span class="badge bg-secondary">Baixa</span>
                                @endif
                            </div>
                        @endif
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-muted small">Status</label>
                        <div>
                            @if($ordem->status == 'FINALIZADO')
                                <span class="badge bg-success">Finalizado</span>
                            @elseif($ordem->status == 'EM_PRODUCAO')
                                <span class="badge bg-primary">Em Produção</span>
                            @elseif($ordem->status == 'PAUSADO')
                                <span class="badge bg-warning">Pausado</span>
                            @elseif($ordem->status == 'CANCELADO')
                                <span class="badge bg-danger">Cancelado</span>
                            @elseif($ordem->status == 'PLANEJADO')
                                <span class="badge bg-info">Planejado</span>
                            @else
                                <span class="badge bg-secondary">{{ $ordem->status }}</span>
                            @endif
                        </div>
                    </div>
                    
                    @if($progresso > 0)
                    <div class="mb-0">
                        <label class="form-label text-muted small">Progresso</label>
                        <div class="progress" style="height: 20px">
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ $progresso }}%">
                                <small>{{ number_format($progresso, 0) }}%</small>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if($ordem->observacoes && !$modoEdicao)
                    <div class="mt-4">
                        <hr>
                        <label class="form-label fw-bold small">Observações</label>
                        <p class="mb-0 small text-muted">{{ $ordem->observacoes }}</p>
                    </div>
                    @endif
                </div>
                <div class="card-footer bg-light border-top">
                    <div class="mb-2">
                        <p class="mb-1 small"><strong>Registrado por:</strong></p>
                        <p class="mb-0 small text-muted">{{ $ordem->usuarioInclusao->name ?? '-' }}</p>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <p class="mb-1 small"><strong>Data de Registro:</strong></p>
                            <p class="mb-0 small text-muted">{{ $ordem->created_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                        @if($ordem->updated_at != $ordem->created_at)
                        <div class="col-md-6 mb-2">
                            <p class="mb-1 small"><strong>Última Atualização:</strong></p>
                            <p class="mb-0 small text-muted">{{ $ordem->updated_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Coluna direita com Itens e Atividades -->
        <div class="col-md-9">
            <!-- Itens da Produção -->
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold">Itens da Produção</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 5%">#</th>
                                    <th style="width: 45%">Produto</th>
                                    <th style="width: 15%" class="text-center">Qtd Prevista</th>
                                    <th style="width: 15%" class="text-center">Qtd Produzida</th>
                                    <th style="width: 20%" class="text-center">Unidade</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ordem->itens as $index => $item)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <strong>{{ $item->produto->codigo }}</strong> - {{ $item->produto->nome }}
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-primary">{{ number_format($item->quantidade_planejada, 0, ',', '.') }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-success">{{ number_format($item->quantidade_produzida, 0, ',', '.') }}</span>
                                    </td>
                                    <td class="text-center">{{ $item->produto->unidadeMedida->unidade ?? '-' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Atividades -->
            @if($ordem->atividades->count() > 0)
            <div class="card shadow border-0 mb-4">
                <div class="card-header bg-white border-0 pb-1">
                    <span class="fw-bold">Atividades</span>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 8%" class="text-center">Ordem</th>
                                    <th style="width: 22%">Serviço</th>
                                    <th style="width: 35%">Descrição</th>
                                    <th style="width: 12%" class="text-center">Status</th>
                                    <th style="width: 8%" class="text-center">Duração</th>
                                    @if($ordem->status == 'EM_PRODUCAO')
                                    <th style="width: 15%" class="text-center">Ações</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ordem->atividades->sortBy('sequencia') as $index => $atividade)
                                <tr>
                                    <td class="text-center">
                                        @if($modoEdicao)
                                            <input type="number" 
                                                   class="form-control form-control-sm text-center" 
                                                   name="atividades[{{ $index }}][sequencia]" 
                                                   value="{{ $atividade->sequencia > 0 ? $atividade->sequencia : ($index + 1) }}"
                                                   min="1"
                                                   style="width: 60px;">
                                        @else
                                            {{ $atividade->sequencia > 0 ? $atividade->sequencia : ($index + 1) }}
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ $atividade->servico->nome ?? '-' }}</strong>
                                    </td>
                                    <td>
                                        @if($modoEdicao)
                                            <input type="text" 
                                                   class="form-control form-control-sm" 
                                                   name="atividades[{{ $index }}][descricao]" 
                                                   value="{{ $atividade->descricao }}"
                                                   placeholder="Descreva os detalhes da operação...">
                                            <input type="hidden" name="atividades[{{ $index }}][id]" value="{{ $atividade->id }}">
                                        @else
                                            {{ $atividade->descricao ?? '-' }}
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($atividade->status == 'CONCLUIDA')
                                            <span class="badge bg-success">Concluída</span>
                                        @elseif($atividade->status == 'EM_ANDAMENTO')
                                            <span class="badge bg-primary">Em Andamento</span>
                                        @else
                                            <span class="badge bg-secondary">Pendente</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($atividade->data_inicio && $atividade->data_fim)
                                            {{ \Carbon\Carbon::parse($atividade->data_inicio)->diffInHours(\Carbon\Carbon::parse($atividade->data_fim)) }}h
                                        @else
                                            -
                                        @endif
                                    </td>
                                    @if($ordem->status == 'EM_PRODUCAO')
                                    <td class="text-center">
                                        @if($atividade->status == 'PENDENTE')
                                            <a href="#" onclick="iniciarAtividade({{ $atividade->id }}, {{ $ordem->id }})" class="text-decoration-none" title="Iniciar Atividade">
                                                <i class="bi bi-play-circle icon-action text-success" style="font-size: 1.3rem;"></i>
                                            </a>
                                        @elseif($atividade->status == 'EM_ANDAMENTO')
                                            <a href="#" onclick="concluirAtividade({{ $atividade->id }}, {{ $ordem->id }})" class="text-decoration-none" title="Concluir Atividade">
                                                <i class="bi bi-check-circle icon-action text-primary" style="font-size: 1.3rem;"></i>
                                            </a>
                                        @elseif($atividade->status == 'CONCLUIDA')
                                            <i class="bi bi-check-circle-fill text-success" style="font-size: 1.3rem;"></i>
                                        @endif
                                    </td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
    
    @if($modoEdicao)
        <div class="d-flex justify-content-end gap-2 mb-4">
            <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('producao.ordens.visualizar', $ordem->id) }}`)">
                <i class="bi bi-x-circle me-2"></i>Cancelar
            </button>
            <button type="button" class="btn btn-primary" onclick="atualizar(`{{ route('producao.ordens.update', $ordem->id) }}`, 'formEditarOrdem')">
                <i class="bi bi-save me-2"></i>Salvar Alterações
            </button>
        </div>
    @endif
    
    @if($modoEdicao)
        </form>
    @endif
</div>