@php
$title = 'Nova Ordem de Produção';
@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">Nova</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-plus-circle me-2 text-primary"></i>Nova Ordem de Produção
            </h1>
            <span class="text-muted small">Cadastre uma nova ordem de produção no sistema</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>

    <form id="formNovaOrdem">
        @csrf
        
        <div class="card shadow border-0 mb-3">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold">Dados da Ordem</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="numero_ordem" class="form-label">Número</label>
                        <input type="text" class="form-control" id="numero_ordem" name="numero_ordem" value="{{ $numero_ordem }}" disabled>
                    </div>
                    <div class="col-md-6">
                        <label for="descricao" class="form-label">Descrição <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="descricao" name="descricao" required>
                    </div>
                    <div class="col-md-3">
                        <label for="prioridade" class="form-label">Prioridade <span class="text-danger">*</span></label>
                        <select class="form-select" id="prioridade" name="prioridade" required>
                            <option value="BAIXA">Baixa</option>
                            <option value="MEDIA" selected>Média</option>
                            <option value="ALTA">Alta</option>
                            <option value="URGENTE">Urgente</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="venda_id" class="form-label">Venda <span class="text-danger">*</span></label>
                        <select class="form-select" id="venda_id" name="venda_id" required {{ $vendaSelecionada ? 'disabled' : '' }}>
                            <option value="">Selecione...</option>
                            @foreach($vendas as $venda)
                                <option value="{{ $venda->id }}" {{ $vendaSelecionada && $vendaSelecionada->id == $venda->id ? 'selected' : '' }}>{{ $venda->codigo }} - {{ $venda->cliente->nome_fantasia }}</option>
                            @endforeach
                            @if($vendaSelecionada && !$vendas->contains('id', $vendaSelecionada->id))
                                <option value="{{ $vendaSelecionada->id }}" selected>{{ $vendaSelecionada->codigo }} - {{ $vendaSelecionada->cliente->nome_fantasia }}</option>
                            @endif
                        </select>
                        @if($vendaSelecionada)
                            <input type="hidden" name="venda_id" value="{{ $vendaSelecionada->id }}">
                        @endif
                    </div>
                    <div class="col-md-4">
                        <label for="data_inicio_prevista" class="form-label">Data Início Prevista <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="data_inicio_prevista"
                                style="z-index: 1 !important;"
                                name="data_inicio_prevista"
                                data-mask="date"
                                readonly
                                required>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="data_fim_prevista" class="form-label">Data Fim Prevista <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="data_fim_prevista"
                                style="z-index: 1 !important;"
                                name="data_fim_prevista"
                                data-mask="date"
                                readonly
                                required>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="observacoes" class="form-label">Observações</label>
                        <textarea class="form-control" id="observacoes" name="observacoes" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow border-0 mb-3">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold">Itens da Ordem</span>
            </div>
            <div class="card-body">
                <div class="table-responsive mb-3">
                    <table class="table table-bordered" id="tabelaItensOrdem">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 4%">#</th>
                                <th style="width: 46%">Produto</th>
                                <th style="width: 15%">Qtd Planejada</th>
                                <th style="width: 15%">Unidade</th>
                                <th style="width: 5%">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="itensOrdem">
                            <tr data-index="0">
                                <td>
                                    <span class="numero-linha">1</span>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm" name="itens[0][produto_id]" onchange="atualizarUnidadeItem(this)" required>
                                        <option value="">Selecione o produto...</option>
                                        @foreach($produtos as $produto)
                                        <option value="{{ $produto->id }}" data-unidade-id="{{ $produto->unidade_id }}">{{ $produto->nome }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="number" class="form-control form-control-sm" name="itens[0][quantidade_planejada]" step="0.01" min="0.01" value="1" required>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm unidade-item" name="itens[0][unidade_id]" required>
                                        <option value="">Selecione...</option>
                                        @foreach($unidades as $unidade)
                                        <option value="{{ $unidade->id }}">{{ $unidade->unidade }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-danger" onclick="removerItemOrdem(this)" disabled>
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5">
                                    <button type="button" class="btn btn-sm btn-success" id="btnAdicionarItemOrdem" onclick="adicionarItemOrdem()">
                                        <i class="bi bi-plus-circle me-1"></i>Adicionar Item
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="card shadow border-0 mb-3">
            <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 mb-3">
                    <table class="table table-bordered" id="tabelaAtividades">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 8%">Ordem</th>
                                <th style="width: 30%">Serviço</th>
                                <th style="width: 57%">Descrição</th>
                                <th style="width: 5%">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="atividadesOrdem">
                            <tr data-index="0">
                                <td>
                                    <input type="number" class="form-control form-control-sm bg-light" name="atividades[0][ordem]" value="1" readonly>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm select2-servico" name="atividades[0][servico_id]" data-nome-target="atividades[0][nome]" disabled>
                                        <option value="">Selecione...</option>
                                        @foreach($servicos as $servico)
                                            <option value="{{ $servico->id }}" data-nome="{{ $servico->nome }}">{{ $servico->nome }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="atividades[0][nome]">
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" name="atividades[0][descricao]" placeholder="Detalhes da operação...">
                                </td>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-danger" onclick="removerAtividade(this)" disabled>
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="4">
                                    <button type="button" class="btn btn-sm btn-success" id="btnAdicionarAtividade" onclick="adicionarAtividade()">
                                        <i class="bi bi-plus-circle me-1"></i>Adicionar Atividade
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-2">
            <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('producao.ordens') }}`)">
                <i class="bi bi-x-circle me-2"></i>Cancelar
            </button>
            <button type="button" class="btn btn-primary" onclick="salvar(`{{ route('producao.ordens.store') }}`, 'formNovaOrdem')">
                <i class="bi bi-save me-2"></i>Criar Ordem
            </button>
        </div>
    </form>
</div>

@include('producao.ordens.novo-scripts')