@php
$title = 'Planilha de Lucro - Ordem de Serviço';
@endphp

<div>
    {{-- ID da Ordem de Serviço para JavaScript --}}
    <input type="hidden" id="ordem-servico-id" value="{{ $ordemServico->id }}">
    
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: 10px;">
        <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('ordemServicos.list') }}`)" class="text-decoration-none text-secondary">Ordens de Serviço</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('ordemServicos.show', $ordemServico->id) }}`)" class="text-decoration-none text-secondary">{{ $ordemServico->codigo }}</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Planilha de Lucro</li>
        </ol>
    </nav>
    
    {{-- Cabeçalho --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-1" style="font-size:1.8rem;">
                Ordem de Serviço Nº {{ $ordemServico->codigo }}
            </h1>
            <p class="text-muted mb-0">Cliente: {{ $proposta->cliente->nome_fantasia ?? 'Não informado' }}</p>
        </div>
        <div>
            <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('ordemServicos.show', $ordemServico->id) }}`)">
                <i class="bi bi-arrow-left me-1"></i>Voltar
            </button>
        </div>
    </div>

    {{-- SEÇÃO: Informações Básicas --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">Informações Básicas</h5>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <label class="form-label fw-bold mb-1">Cliente</label>
                    <p class="mb-0">{{ $proposta->cliente->nome_fantasia ?? 'Não informado' }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold mb-1">Nº da Proposta</label>
                    <p class="mb-0">
                        @if(isset($proposta->id))
                            <a href="#" onclick="carregarConteudo(`{{ route('propostas.show', $proposta->id) }}`)">
                                {{ $proposta->codigo ?? 'Não informado' }}
                            </a>
                        @else
                            {{ $proposta->codigo ?? 'Não informado' }}
                        @endif
                    </p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold mb-1">Roteiro</label>
                    <p class="mb-0">
                        @if($proposta->destinos && $proposta->destinos->count() > 0)
                            {{ $proposta->destinos->map(function($pd) { 
                                return $pd->destino->nome_fantasia ?? $pd->destino->razao_social; 
                            })->implode(', ') }}
                        @else
                            Não informado
                        @endif
                    </p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold mb-1">Data Agendada</label>
                    <p class="mb-0">{{ $proposta->data_agendada_formatada }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label fw-bold mb-1">Nº de Alunos Convidados</label>
                    <p class="mb-0">{{ $proposta->numero_alunos ?? '-' }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold mb-1">Valor por Aluno</label>
                    <p class="mb-0">
                        @if($ordemServico->valor_contrato)
                            R$ {{ number_format($ordemServico->valor_contrato, 2, ',', '.') }}
                        @else
                            -
                        @endif
                    </p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold mb-1">Nº de Alunos Confirmados</label>
                    <input type="number" class="form-control form-control-sm" id="qtd_alunos_confirmados" name="qtd_alunos_confirmados" value="{{ $ordemServico->qtd_alunos_confirmados ?? '' }}" min="0" placeholder="Digite a quantidade">
                </div>                
            </div>              
        </div>      
    </div>

    {{-- SEÇÃO: Custos --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Custos</h5>
            <div>
                <button type="button" class="btn btn-success btn-sm" title="Adicionar Linha" onclick="adicionarLinhaCusto()">
                    <i class="bi bi-plus-lg me-1"></i>Adicionar
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 120px;">Tipo</th>
                            <th style="width: 250px;">Nome</th>
                            <th style="width: 350px;">Observação</th>
                            <th style="width: 120px;">Valor (R$)</th>
                            <th style="width: 120px;">Data</th>
                            <th style="width: 120px;">Status</th>
                            <th style="width: 80px;" class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-custos-body">
                        @php
                            // Carregar custos de ordem_servico_itens
                            $custos = $ordemServico->itens ?? collect();
                            $totalCustos = $custos->count();
                        @endphp
                        @if($totalCustos > 0)
                            @foreach($custos as $index => $custo)
                                @php
                                    // Identificar categoria
                                    $categoria = $custo->categoria->value ?? 'OUTRO';
                                    
                                    // Desabilitar APENAS se for TRANSPORTE ou EDUCADOR (vêm de outras telas)
                                    // OUTROS sempre ficam habilitados (editáveis)
                                    $isTransporteOuEducador = in_array($categoria, ['TRANSPORTE', 'EDUCADOR']);
                                    
                                    // Origem: db se tem ID, novo se não tem
                                    $origem = isset($custo->id) ? 'db' : 'novo';
                                    
                                    // Mapear categoria do banco para o tipo exibido
                                    $tipoValue = match($categoria) {
                                        'TRANSPORTE' => 'TRANSPORTE',
                                        'EDUCADOR' => 'EDUCADOR (A)',
                                        'OUTRO' => strtoupper($custo->tipo ?? 'OUTROS'),
                                        default => 'OUTROS'
                                    };
                                @endphp
                                <tr data-origem="{{ $origem }}" data-categoria="{{ $categoria }}">
                                    @if(isset($custo->id))
                                        <input type="hidden" name="custos[{{ $index }}][id]" value="{{ $custo->id }}">
                                        <input type="hidden" name="custos[{{ $index }}][categoria]" value="{{ $categoria }}">
                                    @endif
                                    <td>
                                        @if($isTransporteOuEducador)
                                            {{-- Linhas TRANSPORTE/EDUCADOR: select desabilitado com todas as opções --}}
                                            <select class="form-select form-select-sm bg-light" name="custos[{{ $index }}][tipo]" disabled>
                                                <option value="">Selecione</option>
                                                <option value="EDUCADOR (A)" {{ $tipoValue === 'EDUCADOR (A)' || $tipoValue === 'EDUCADORES' ? 'selected' : '' }}>EDUCADOR (A)</option>
                                                <option value="TRANSPORTE" {{ $tipoValue === 'TRANSPORTE' ? 'selected' : '' }}>TRANSPORTE</option>
                                                <option value="OUTROS" {{ $tipoValue === 'OUTROS' ? 'selected' : '' }}>OUTROS</option>
                                            </select>
                                        @else
                                            {{-- Linhas OUTROS: apenas opção OUTROS --}}
                                            <select class="form-select form-select-sm" name="custos[{{ $index }}][tipo]">
                                                <option value="OUTROS" selected>OUTROS</option>
                                            </select>
                                        @endif
                                    </td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm {{ $isTransporteOuEducador ? 'bg-light' : '' }}" name="custos[{{ $index }}][nome]" value="{{ $custo->nome ?? '' }}" {{ $isTransporteOuEducador ? 'disabled' : 'required' }}>
                                        @if(!$isTransporteOuEducador)
                                            <div class="invalid-feedback">Por favor, preencha o nome.</div>
                                        @endif
                                    </td>
                                    <td><input type="text" class="form-control form-control-sm {{ $isTransporteOuEducador ? 'bg-light' : '' }}" name="custos[{{ $index }}][observacao]" value="{{ $custo->observacao ?? '' }}" {{ $isTransporteOuEducador ? 'disabled' : '' }}></td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm {{ $isTransporteOuEducador ? 'bg-light' : '' }}" name="custos[{{ $index }}][valor]" value="{{ isset($custo->valor) ? number_format($custo->valor, 2, ',', '.') : '' }}" data-mask="money" {{ $isTransporteOuEducador ? 'disabled' : 'required' }}>
                                        @if(!$isTransporteOuEducador)
                                            <div class="invalid-feedback">Por favor, preencha o valor.</div>
                                        @endif
                                    </td>
                                    <td><input type="text" class="form-control form-control-sm datepicker {{ $isTransporteOuEducador ? 'bg-light' : '' }}" name="custos[{{ $index }}][data]" value="{{ $custo->data_vencimento?->format('d/m/Y') ?? '' }}" autocomplete="off" {{ $isTransporteOuEducador ? 'disabled' : '' }}></td>
                                    <td>
                                        <select class="form-select form-select-sm {{ $isTransporteOuEducador ? 'bg-light' : '' }}" name="custos[{{ $index }}][status]" {{ $isTransporteOuEducador ? 'disabled' : '' }}>
                                            <option value="">Selecione</option>
                                            <option value="PENDENTE" {{ $custo->status->value === 'PENDENTE' ? 'selected' : '' }}>Pendente</option>
                                            <option value="PAGO" {{ $custo->status->value === 'PAGO' ? 'selected' : '' }}>Pago</option>
                                        </select>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-danger btn-sm" title="Remover" onclick="removerLinhaCusto(this)" {{ $isTransporteOuEducador ? 'disabled' : '' }}>
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr data-origem="novo" data-categoria="OUTRO">
                                <td>
                                    <select class="form-select form-select-sm" name="custos[0][tipo]">
                                        <option value="OUTROS" selected>OUTROS</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" name="custos[0][nome]" value="" required>
                                    <div class="invalid-feedback">Por favor, preencha o nome.</div>
                                </td>
                                <td><input type="text" class="form-control form-control-sm" name="custos[0][observacao]" value=""></td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" name="custos[0][valor]" value="" data-mask="money" required>
                                    <div class="invalid-feedback">Por favor, preencha o valor.</div>
                                </td>
                                <td><input type="text" class="form-control form-control-sm datepicker" name="custos[0][data]" value="" autocomplete="off"></td>
                                <td>
                                    <select class="form-select form-select-sm" name="custos[0][status]">
                                        <option value="">Selecione</option>
                                        <option value="PENDENTE" selected>Pendente</option>
                                        <option value="PAGO">Pago</option>
                                    </select>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-danger btn-sm" title="Remover" onclick="removerLinhaCusto(this)">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            
            {{-- Totalização --}}
            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <h6 class="text-muted text-uppercase fw-bold mb-3" style="font-size: 0.85rem;">Total a Receber</h6>
                            <div class="mb-2">
                                <label class="form-label mb-1" style="font-size: 0.9rem;">Valor do Pacote</label>
                                @php
                                    $numeroAlunos = $ordemServico->qtd_alunos_confirmados ?? 0;
                                    $valorPorAluno = $ordemServico->valor_contrato ?? 0;
                                    $valorTotalPacote = $numeroAlunos * $valorPorAluno;
                                @endphp
                                <h4 class="mb-0 text-success" id="valor-pacote" data-qtd-alunos="{{ $numeroAlunos }}" data-valor-aluno="{{ $valorPorAluno }}">R$ {{ number_format($valorTotalPacote, 2, ',', '.') }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <h6 class="text-muted text-uppercase fw-bold mb-3" style="font-size: 0.85rem;">Total a Pagar</h6>
                            <div class="mb-2">
                                <label class="form-label mb-1" style="font-size: 0.9rem;">Total de Custos</label>
                                <h4 class="mb-0 text-danger" id="total-custos">R$ 0,00</h4>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <h6 class="text-muted text-uppercase fw-bold mb-3" style="font-size: 0.85rem;">Lucro</h6>
                            <div class="row">
                                <div class="col-12 mb-2">
                                    <label class="form-label mb-1" style="font-size: 0.9rem;">Lucro Líquido</label>
                                    <h4 class="mb-0 text-primary" id="lucro-liquido">R$ 0,00</h4>
                                </div>
                                <div class="col-12">
                                    <label class="form-label mb-1" style="font-size: 0.9rem;">Margem de Lucro</label>
                                    <h4 class="mb-0 text-info" id="margem-lucro">0,00%</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            {{-- Botão Salvar --}}
            <div class="mt-4">
                <button type="button" class="btn btn-success" id="btn-salvar-custos" onclick="salvarCustos()">
                    <i class="bi bi-save me-1"></i>Salvar Custos
                </button>
            </div>
        </div>
    </div>

    {{-- SEÇÃO: Informações do Sistema --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">Informações do Sistema</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Criado em:</label>
                    <p class="mb-0">{{ $ordemServico->created_at ? $ordemServico->created_at->format('d/m/Y H:i:s') : 'Não informado' }}</p>
                    @if($ordemServico->usuarioInclusao)
                        <p class="text-muted small mb-0">por {{ $ordemServico->usuarioInclusao->name ?? 'Sistema' }}</p>
                    @endif
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Atualizado em:</label>
                    <p class="mb-0">{{ $ordemServico->updated_at ? $ordemServico->updated_at->format('d/m/Y H:i:s') : 'Não informado' }}</p>
                    @if($ordemServico->usuarioAlteracao)
                        <p class="text-muted small mb-0">por {{ $ordemServico->usuarioAlteracao->name ?? 'Sistema' }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>