@php
$title = 'Visualizar Ordem de Serviço';
$proposta = $ordemServico->proposta;
@endphp

{{-- Styles para loading spinners --}}
<link rel="stylesheet" href="{{ asset('css/custos-transporte.css') }}">

<div>
    <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 active text-dark" aria-current="page">Visualizar OS</li>
        </ol>
    </nav>

    <form id="formEditarOS">
        @csrf
        @method('PUT')
    
    {{-- 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 ?? 'N/A' }}
            </h1>
            <span class="text-muted small">Cliente: {{ $proposta->cliente->nome_fantasia ?? 'Não informado' }}</span>
        </div>
        <div>
            {{-- TODO: Implementar rota ordemServicos.planilhaLucro
            <button type="button" class="btn btn-success" onclick="window.open(`{{ route('ordemServicos.planilhaLucro', $ordemServico->id) }}`, '_blank')">
                <i class="bi bi-file-earmark-spreadsheet me-1"></i>Planilha de Lucro
            </button>
            --}}
            <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('ordemServicos.list') }}`)">
                <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">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Informações Básicas</h5>
                @php
                    $cargoNome = auth()->user()->cargo ? strtolower(auth()->user()->cargo->nome) : null;
                    // DEBUG: mostrar valores para identificar por que o botão aparece erroneamente
                    // remover após investigação
                    //dd(['cargoNome' => $cargoNome, 'raw' => auth()->user()->cargo?->nome]);
                @endphp
                {{-- somente administradores COM cargo exatamente "Diretor(a)" --}}
                @if(is_admin() && $cargoNome === 'diretor(a)')
                <button type="button" class="btn btn-success btn-sm" onclick="carregarConteudo(`{{ route('ordemServicos.lucro', $ordemServico->id) }}`)">
                    <i class="bi bi-filetype-xlsx me-1"></i>Planilha de Lucro
                </button>
                @endif
            </div>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-4">
                    <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-4">
                    <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-4">
                    <label class="form-label fw-bold mb-1">Status</label>
                    <span class="badge {{ $ordemServico->status->badgeClass() }} fw-normal">
                        {{ $ordemServico->status->label() }}
                    </span>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Roteiro</label>
                    <p class="mb-0 fw-bold">
                        @if($proposta->destinos && $proposta->destinos->count() > 0)
                            @foreach($proposta->destinos as $propostaDestino)
                                {{ $propostaDestino->destino->nome ?? $propostaDestino->destino->nome_fantasia }}{{ !$loop->last ? ', ' : '' }}
                            @endforeach
                        @else
                            {{ $proposta->roteiro_personalizado ?? 'Não informado' }}
                        @endif
                    </p>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Data Agendada</label>
                    <p class="mb-0">{{ $proposta->data_agendada_formatada }}</p>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Observação</label>
                    <p class="mb-0">{{ $proposta->observacao_data_agendada ?? '-' }}</p>
                </div>
            </div>

            @if(isset($ordemServico->created_at) || isset($ordemServico->updated_at))
                <hr class="my-4">
                <h5 class="mb-3">Informações do Sistema</h5>
                <div class="row">
                    @if(isset($ordemServico->created_at))
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Criado em:</label>
                            <p class="form-control-plaintext mb-0">{{ $ordemServico->created_at->format('d/m/Y H:i:s') }}</p>
                            <small class="text-muted">por {{ $ordemServico->usuarioInclusao->name ?? 'Sistema' }}</small>
                        </div>
                    @endif
                    @if(isset($ordemServico->updated_at))
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Atualizado em:</label>
                            <p class="form-control-plaintext mb-0">{{ $ordemServico->updated_at->format('d/m/Y H:i:s') }}</p>
                            <small class="text-muted">por {{ $ordemServico->usuarioAlteracao->name ?? $ordemServico->usuarioInclusao->name ?? 'Sistema' }}</small>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>

    {{-- SEÇÃO: Cronograma Ilustrado --}}
    @if($proposta->cronogramas && $proposta->cronogramas->count() > 0)
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-white border-bottom">
                <h5 class="mb-0 fw-bold">Cronograma ilustrado</h5>
            </div>
            <div class="card-body">
                @foreach($proposta->cronogramas as $cronograma)
                    <div class="mb-3">
                        <p class="fw-bold mb-2">{{ $cronograma->titulo ?? $proposta->destinos->first()->destino->nome_fantasia ?? '' }} - Equipe Universo</p>
                        
                        @if($cronograma->atividades && $cronograma->atividades->count() > 0)
                            @foreach($cronograma->atividades as $atividade)
                                <p class="mb-1">
                                    <strong>{{ substr($atividade->horario, 0, 5) }}</strong> - {{ $atividade->descricao }}
                                </p>
                            @endforeach
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- SEÇÃO: Valor --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">Valor</h5>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Investimento por aluno (proposta)</label>
                    <p class="mb-0">R$ {{ number_format($proposta->investimentos->first()->valor ?? 0, 2, ',', '.') }}</p>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Seguro por aluno (proposta)</label>
                    <p class="mb-0">R$ {{ number_format($proposta->valor_seguro, 2, ',', '.') }}</p>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Investimento por aluno (contrato)</label>
                    <input type="text" class="form-control" id="valor_contrato" name="dados[valor_contrato]" value="{{ isset($ordemServico->valor_contrato) ? number_format($ordemServico->valor_contrato, 2, ',', '.') : '' }}" placeholder="R$ 0,00" data-mask="money">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Observação</label>
                    <textarea class="form-control" rows="2" id="observacao_investimento" name="dados[observacao_investimento]">{{ $ordemServico->observacao_investimento ?? $proposta->observacao_investimento ?? '' }}</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Condições de Pagamento contrato</label>
                    <textarea class="form-control" rows="2" id="condicoes_pagamento_contrato" name="dados[condicoes_pagamento_contrato]">{{ $ordemServico->condicoes_pagamento_contrato ?? $proposta->condicoes_pagamento ?? '' }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- SEÇÃO: Convidados --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">Convidados</h5>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Nº mínimo de alunos</label>
                    <p class="mb-0">{{ $proposta->transporte->numero_minimo_alunos ?? 'Não informado' }}</p>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Número de alunos</label>
                    <input type="number" class="form-control" id="numero_alunos" name="dados[qtd_alunos]" value="{{ $proposta->numero_alunos ?? '' }}" disabled>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold mb-1">Turmas</label>
                    <input type="text" class="form-control" id="turmas" name="dados[turmas]" value="{{ $ordemServico->turmas ?? $proposta->turmas ?? '' }}">
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="os_tipos_transporte_url" value="{{ route('api.transportes.tipos') }}">

    {{-- SEÇÃO: Roteiro --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Roteiro</h5>
            </div>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Data de Saída</label>
                    <div class="input-group">
                        <input type="text" class="form-control datepicker" id="data_saida" name="dados[data_saida]" value="{{ isset($proposta->data_agendada_inicio) ? $proposta->data_agendada_inicio->format('d/m/Y') : '' }}" style="z-index: 1 !important;" autocomplete="off" data-mask="date" readonly>
                        <span class="input-group-text" data-datepicker-toggle><i class="bi bi-calendar"></i></span>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Data de Chegada</label>
                    <div class="input-group">
                        <input type="text" class="form-control datepicker" id="data_chegada" name="dados[data_chegada]" value="{{ isset($proposta->data_agendada_fim) ? $proposta->data_agendada_fim->format('d/m/Y') : (isset($proposta->data_agendada_inicio) ? $proposta->data_agendada_inicio->format('d/m/Y') : '') }}" style="z-index: 1 !important;" autocomplete="off" data-mask="date" readonly>
                        <span class="input-group-text" data-datepicker-toggle><i class="bi bi-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Horário de Saída</label>
                    <input type="time" class="form-control" id="horario_saida" name="dados[hora_saida]" value="{{ $ordemServico->hora_saida ? $ordemServico->hora_saida->format('H:i') : ($proposta->horario_saida ?? '07:30') }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Horário de Chegada</label>
                    <input type="time" class="form-control" id="horario_chegada" name="dados[hora_retorno]" value="{{ $ordemServico->hora_retorno ? $ordemServico->hora_retorno->format('H:i') : ($proposta->horario_chegada ?? '18:00') }}">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Código da viagem</label>
                    <span class="badge bg-success fw-semibold small" id="codigo_viagem">{{ $ordemServico->codigo_viagem ?? $proposta->codigo_viagem ?? '-' }}</span>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Validade</label>
                    <div class="input-group">
                        <input type="text" class="form-control datepicker" id="data_validade" name="dados[data_validade]" value="{{ isset($ordemServico->data_validade) ? $ordemServico->data_validade->format('d/m/Y') : (isset($proposta->data_validade) ? $proposta->data_validade->format('d/m/Y') : '') }}" style="z-index: 1 !important;" autocomplete="off" data-mask="date" readonly>
                        <span class="input-group-text" data-datepicker-toggle><i class="bi bi-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Qtd. parcelas</label>
                    <select class="form-select" id="qtd_parcelas" name="dados[qtd_parcelas]">
                        @php
                            $qtdParcelasSelecionada = $ordemServico->qtd_parcelas ?? $proposta->quantidade_parcelas ?? 6;
                        @endphp
                        @for ($i = 1; $i <= 12; $i++)
                            <option value="{{ $i }}" {{ $qtdParcelasSelecionada == $i ? 'selected' : '' }}>{{ $i }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-6">
                    <button type="button" class="btn btn-info mt-4" onclick="gerarNovoCodigo()" {{ !empty($ordemServico->codigo_viagem) ? 'disabled' : '' }}>
                        Gerar novo Código
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- SEÇÃO: Transporte --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">Transporte</h5>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Detalhe do transporte</label>
                    <textarea class="form-control" rows="2" id="detalhe_transporte" name="dados[detalhe_transporte]">{{ $ordemServico->detalhe_transporte ?? $proposta->transporte->observacao ?? '' }}</textarea>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Agendado</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[transporte_agendado]" id="transporte_agendado_nao" value="0" {{ !($ordemServico->transporte_agendado ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="transporte_agendado_nao">Não</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[transporte_agendado]" id="transporte_agendado_sim" value="1" {{ ($ordemServico->transporte_agendado ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="transporte_agendado_sim">Sim</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Transporte Liberado</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[transporte_liberado]" id="transporte_liberado_nao" value="0" {{ !($ordemServico->transporte_liberado ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="transporte_liberado_nao">Não</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[transporte_liberado]" id="transporte_liberado_sim" value="1" {{ ($ordemServico->transporte_liberado ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="transporte_liberado_sim">Sim</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p class="mb-2 fw-bold">Custos de Transporte: R$ {{ number_format($ordemServico->total_custos_transporte, 2, ',', '.') }}</p>
                    @if($ordemServico->transportes->count() == 0)
                        <p class="text-muted small mb-2">(Valores da proposta - preencha a tabela abaixo para editar)</p>
                    @endif
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Rota</label>
                    <div class="d-flex align-items-center gap-2">
                        <div style="flex: 1;">
                            <select class="form-select select-search" id="custos_transporte_rota" data-placeholder="Selecione a rota">
                                <option value="">Selecione a rota</option>
                            </select>
                        </div>
                        <div class="tipo-veiculo-loading" id="tipo-veiculo-loading">
                            <div class="tipo-veiculo-spinner"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold mb-1">Tipo de Transporte</label>
                    <select class="form-select select-search" id="custos_transporte_tipo_veiculo" data-placeholder="Selecione o tipo">
                        <option value="">Selecione a rota primeiro</option>
                    </select>
                </div>
            </div>

            {{-- Card de Melhores Opções --}}
            <div class="row mb-3">
                <div class="col-md-12">
                    <div id="melhores-opcoes-card" class="alert alert-info mb-0" role="alert">
                        <div class="text-start"><strong><i class="bi bi-info-circle me-2"></i>Melhores Opções</strong></div>
                        <div id="melhores-opcoes-lista" class="mt-2">
                            <small class="text-muted"><strong>OBS:</strong> Aqui aparecerão as 3 melhores opções de valores da rota escolhida após selecionar a rota e o tipo de veículo.</small>
                        </div>
                    </div>
                    <div class="melhores-opcoes-loading" id="melhores-opcoes-loading">
                        <div class="melhores-opcoes-spinner"></div>
                    </div>
                </div>
            </div>

            <h6 class="fw-bold mt-4 mb-3">Detalhes dos Transportes</h6>
            <div class="table-responsive">
                @php
                    $transportesLista = $transportesAtivos ?? [];
                    $transportesNomes = collect($transportesLista)->pluck('text')->all();
                @endphp
                <table class="table table-bordered table-sm">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 360px;">Nome Empresa</th>
                            <th style="width: 230px;">Tipo de Transporte</th>
                            <th style="width: 160px;">Valor (R$)</th>
                            <th style="width: 440px;">Observação</th>
                            <th style="width: 90px;" class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-transportes-body">
                        @php
                            // Carregar transportes de ordem_servico_itens
                            $transportes = $ordemServico->transportes ?? collect();
                            $totalTransportes = $transportes->count();
                        @endphp
                        @if($totalTransportes > 0)
                            @foreach($transportes as $index => $transporte)
                                <tr>
                                    @if(isset($transporte->id))
                                        <input type="hidden" name="transportes[{{ $index }}][id]" value="{{ $transporte->id }}">
                                    @endif
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div style="flex: 1;">
                                                <select class="form-select form-select-sm select-search os-transporte-empresa" name="transportes[{{ $index }}][nome_empresa]" data-placeholder="Buscar empresa" onchange="carregarTiposTransporteOS(this, '{{ route('api.transportes.tipos') }}')">
                                                    <option value="">Buscar empresa</option>
                                                    @if(!empty($transporte->nome_empresa) && !in_array($transporte->nome_empresa, $transportesNomes, true))
                                                        <option value="{{ $transporte->nome_empresa }}" selected>{{ $transporte->nome_empresa }}</option>
                                                    @endif
                                                    @foreach($transportesLista as $empresa)
                                                        <option value="{{ $empresa['text'] }}" data-transporte-id="{{ $empresa['transporte_id'] }}" {{ ($transporte->nome_empresa ?? '') === $empresa['text'] ? 'selected' : '' }}>
                                                            {{ $empresa['text'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="tipo-veiculo-loading os-empresa-loading">
                                                <div class="tipo-veiculo-spinner"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <select class="form-select form-select-sm select-search os-transporte-tipo" name="transportes[{{ $index }}][tipo_veiculo]" data-placeholder="Selecione o tipo" {{ empty($transporte->nome_empresa) ? 'disabled' : '' }}>
                                            @if(!empty($transporte->tipo_veiculo))
                                                <option value="{{ $transporte->tipo_veiculo }}" selected>{{ $transporte->tipo_veiculo }}</option>
                                            @else
                                                <option value="">Selecione a empresa primeiro</option>
                                            @endif
                                        </select>
                                    </td>
                                    <td><input type="text" class="form-control form-control-sm" name="transportes[{{ $index }}][valor]" value="{{ isset($transporte->valor) ? number_format($transporte->valor, 2, ',', '.') : '' }}" data-mask="money"></td>
                                    <td><input type="text" class="form-control form-control-sm" name="transportes[{{ $index }}][observacao]" value="{{ $transporte->observacao ?? '' }}"></td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-success btn-sm me-1" title="Adicionar" onclick="adicionarLinhaTransporte()">
                                            <i class="bi bi-plus-lg"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm btn-remover-transporte" title="Remover" onclick="removerLinhaTransporte(this)" {{ $totalTransportes === 1 ? 'disabled' : '' }}>
                                            <i class="bi bi-dash-lg"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div style="flex: 1;">
                                            <select class="form-select form-select-sm select-search os-transporte-empresa" name="transportes[0][nome_empresa]" data-placeholder="Buscar empresa" onchange="carregarTiposTransporteOS(this, '{{ route('api.transportes.tipos') }}')">
                                                <option value="">Buscar empresa</option>
                                                @foreach($transportesLista as $empresa)
                                                    <option value="{{ $empresa['text'] }}" data-transporte-id="{{ $empresa['transporte_id'] }}">
                                                        {{ $empresa['text'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="tipo-veiculo-loading os-empresa-loading">
                                            <div class="tipo-veiculo-spinner"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm select-search os-transporte-tipo" name="transportes[0][tipo_veiculo]" data-placeholder="Selecione o tipo" disabled>
                                        <option value="">Selecione a empresa primeiro</option>
                                    </select>
                                </td>
                                <td><input type="text" class="form-control form-control-sm" name="transportes[0][valor]" value="" data-mask="money"></td>
                                <td><input type="text" class="form-control form-control-sm" name="transportes[0][observacao]" value=""></td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success btn-sm me-1" title="Adicionar" onclick="adicionarLinhaTransporte()">
                                        <i class="bi bi-plus-lg"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger btn-sm btn-remover-transporte" title="Remover" onclick="removerLinhaTransporte(this)" disabled>
                                        <i class="bi bi-dash-lg"></i>
                                    </button>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Observações Transporte</label>
                    <textarea class="form-control" rows="3" name="dados[observacoes_transporte]">{{ $ordemServico->observacoes_transporte ?? $proposta->transporte->observacao ?? '' }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- SEÇÃO: Educadores --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">Educadores</h5>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Detalhe do educador</label>
                    <textarea class="form-control" rows="2" id="detalhe_educador" name="dados[observacoes_educador]">{{ $ordemServico->observacoes_educador ?? '' }}</textarea>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Agendado</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[equipe_agendada]" id="equipe_agendada_nao" value="0" {{ !($ordemServico->equipe_agendada ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="equipe_agendada_nao">Não</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[equipe_agendada]" id="equipe_agendada_sim" value="1" {{ ($ordemServico->equipe_agendada ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="equipe_agendada_sim">Sim</label>
                        </div>
                    </div>
                </div>
            </div>

            <h6 class="fw-bold mt-4 mb-3">Detalhes dos Educadores</h6>
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 160px;">Tipo</th>
                            <th style="width: 320px;">Nome</th>
                            <th style="width: 160px;">Valor (R$)</th>
                            <th style="width: 520px;">Observação</th>
                            <th style="width: 90px;" class="text-center">Ações</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-educadores-body">
                        @php
                            // Carregar educadores de ordem_servico_itens
                            $educadores = $ordemServico->educadores ?? collect();
                            $totalEducadores = $educadores->count();
                        @endphp
                        @if($totalEducadores > 0)
                            @foreach($educadores as $index => $educador)
                                <tr>
                                    @if(isset($educador->id))
                                        <input type="hidden" name="educadores[{{ $index }}][id]" value="{{ $educador->id }}">
                                    @endif
                                    <td><input type="text" class="form-control form-control-sm" name="educadores[{{ $index }}][tipo]" value="{{ $educador->tipo ?? 'Educador(a)' }}" readonly></td>
                                    <td>
                                        <select class="form-select form-select-sm select-search os-educador-nome" name="educadores[{{ $index }}][nome]" data-placeholder="Buscar educador">
                                            @if(!empty($educador->nome))
                                                <option value="{{ $educador->nome }}" selected>{{ $educador->nome }}</option>
                                            @endif
                                            @foreach($educadoresAtivos as $educ)
                                                @if($educ->nome !== $educador->nome)
                                                    <option value="{{ $educ->nome }}">{{ $educ->nome }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input type="text" class="form-control form-control-sm" name="educadores[{{ $index }}][valor]" value="{{ isset($educador->valor) ? number_format($educador->valor, 2, ',', '.') : '' }}" data-mask="money"></td>
                                    <td><input type="text" class="form-control form-control-sm" name="educadores[{{ $index }}][observacao]" value="{{ $educador->observacao ?? '' }}"></td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-success btn-sm me-1" title="Adicionar" onclick="adicionarLinhaEducador()">
                                            <i class="bi bi-plus-lg"></i>
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm btn-remover-educador" title="Remover" onclick="removerLinhaEducador(this)" {{ $totalEducadores === 1 ? 'disabled' : '' }}>
                                            <i class="bi bi-dash-lg"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td><input type="text" class="form-control form-control-sm" name="educadores[0][tipo]" value="Educador(a)" readonly></td>
                                <td>
                                    <select class="form-select form-select-sm select-search os-educador-nome" name="educadores[0][nome]" data-placeholder="Buscar educador">
                                        <option value="">Buscar educador</option>
                                        @foreach($educadoresAtivos as $educador)
                                            <option value="{{ $educador->nome }}">{{ $educador->nome }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td><input type="text" class="form-control form-control-sm" name="educadores[0][valor]" value="" data-mask="money"></td>
                                <td><input type="text" class="form-control form-control-sm" name="educadores[0][observacao]" value=""></td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success btn-sm me-1" title="Adicionar" onclick="adicionarLinhaEducador()">
                                        <i class="bi bi-plus-lg"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger btn-sm btn-remover-educador" title="Remover" onclick="removerLinhaEducador(this)" disabled>
                                        <i class="bi bi-dash-lg"></i>
                                    </button>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- SEÇÃO: Local --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white border-bottom">
            <h5 class="mb-0 fw-bold">Local</h5>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Agendado</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[local_agendado]" id="local_agendado_nao" value="0" {{ !($ordemServico->local_agendado ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="local_agendado_nao">Não</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="dados[local_agendado]" id="local_agendado_sim" value="1" {{ ($ordemServico->local_agendado ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="local_agendado_sim">Sim</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Detalhe do local</label>
                    <textarea class="form-control" rows="2" id="detalhe_local" name="dados[detalhe_local]">{{ $ordemServico->detalhe_local ?? $proposta->observacao_local ?? '' }}</textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label class="form-label fw-bold mb-1">Observações Local</label>
                    <textarea class="form-control" rows="3" id="observacoes_local" name="dados[observacoes_local]">{{ $ordemServico->observacoes_local ?? $proposta->observacao_local ?? '' }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end mb-3">
        <button type="button" class="btn btn-primary" onclick="salvar(`{{ route('ordemServicos.update', $ordemServico->id) }}`, 'formEditarOS')">
            <i class="bi bi-save me-2"></i>Salvar
        </button>
    </div>

    </form>
</div>