@php
$title = 'Novo Produto';
@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('cadastro.produtos') }}`)" class="text-decoration-none text-secondary">Produtos</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Novo Produto</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>Novo Produto
            </h1>
            <span class="text-muted small">Cadastre um novo produto no sistema</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('cadastro.produtos') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <form id="formNovoProduto" class="needs-validation" novalidate>
        @csrf
        
        <!-- Informações Básicas -->
        <div class="card shadow border-0 mb-3">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold"><i class="bi bi-info-circle me-2"></i>Informações Básicas</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="codigo" class="form-label">Código <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ $codigo }}" readonly required>
                    </div>
                    <div class="col-md-6">
                        <label for="nome" class="form-label">Nome <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nome" name="dados[nome]" required>
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select" id="status" name="dados[status]" required>
                            <option value="">Selecione...</option>
                            <option value="ATIVO" selected>Ativo</option>
                            <option value="INATIVO">Inativo</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="categoria_id" class="form-label">Categoria <span class="text-danger">*</span></label>
                        <select class="form-select" id="categoria_id" name="dados[categoria_id]" required>
                            <option value="">Selecione...</option>
                            @foreach($categorias as $categoria)
                                <option value="{{ $categoria->id }}">{{ $categoria->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="unidade_id" class="form-label">Unidade de Medida <span class="text-danger">*</span></label>
                        <select class="form-select" id="unidade_id" name="dados[unidade_id]" required>
                            <option value="">Selecione...</option>
                            @foreach($unidadesProduto as $unidade)
                                <option value="{{ $unidade->id }}">{{ $unidade->unidade }} ({{ $unidade->tipo }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="codigo_barras" class="form-label">Código de Barras</label>
                        <input type="text" class="form-control" id="codigo_barras" name="dados[codigo_barras]">
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-5">
                        <label for="ncm_id" class="form-label">
                            NCM - Nomenclatura Comum do Mercosul
                            <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" 
                               title="Classificação fiscal do produto conforme tabela oficial. Obrigatório para emissão de notas fiscais."></i>
                        </label>
                        <select class="form-select" id="ncm_id" name="dados[ncm_id]">
                            <option value="">Digite para buscar NCM...</option>
                        </select>
                        <small class="text-muted">
                            <i class="bi bi-search"></i> Busque por código (8 dígitos) ou descrição do produto
                        </small>
                        
                        <!-- Campos hidden para compatibilidade -->
                        <input type="hidden" id="ncm_codigo" name="dados[ncm_codigo]">
                        <input type="hidden" id="ncm_descricao" name="dados[ncm_descricao]">
                    </div>
                    <div class="col-md-4">
                        <label for="tipo_produto" class="form-label">Tipo de Produto <span class="text-danger">*</span></label>
                        <select class="form-select" id="tipo_produto" name="dados[tipo_produto]" onchange="alterarTipoProduto(this)" required>
                            <option value="">Selecione o tipo...</option>
                            <option value="MATERIA_PRIMA"><i class="bi bi-cart-check"></i> Matéria Prima</option>
                            <option value="FABRICADO"><i class="bi bi-tools"></i> Produto Fabricado</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="estoque_minimo" class="form-label">Estoque Mínimo</label>
                        <input type="text" class="form-control" id="estoque_minimo" name="dados[estoque_minimo]" placeholder="0,00" data-mask="decimal">
                        <small class="text-muted">Parâmetro de alerta</small>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-12">
                        <label for="descricao" class="form-label">Descrição</label>
                        <input type="text" class="form-control" id="descricao" name="dados[descricao]" placeholder="Descrição detalhada do produto">
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção: Matéria Prima -->
        <div id="secaoMateriaPrima" class="card shadow border-0 mb-3" style="display:none;">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold"><i class="bi bi-cash-coin me-2"></i>Custos e Valores (Matéria Prima)</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="valorCustoMateriaPrima" class="form-label">Valor de Custo (R$) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="valorCustoMateriaPrima" name="dados[valor_custo]" placeholder="0,00" data-mask="money" onchange="calcularValorVendaMateriaPrima()" required>
                    </div>
                    <div class="col-md-4">
                        <label for="margemLucroMateriaPrima" class="form-label">Margem de Lucro (%) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="margemLucroMateriaPrima" placeholder="0,00" data-mask="percentage" onblur="calcularValorVendaMateriaPrima()" required>
                    </div>
                    <div class="col-md-4">
                        <label for="valorVendaMateriaPrima" class="form-label">Valor de Venda (R$)</label>
                        <input type="text" class="form-control bg-light" id="valorVendaMateriaPrima" name="dados[valor_venda]" placeholder="0,00" data-mask="money" readonly>
                        <small class="text-muted">Calculado automaticamente</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Seção: Produto FABRICADO -->
        <div id="secaoFabricado" class="card shadow border-0 mb-3" style="display:none;">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold"><i class="bi bi-hammer me-2"></i>Estrutura de Materiais e Serviços (BOM)</span>
            </div>
            <div class="card-body">
                <div class="table-responsive mb-3">
                    <table class="table table-bordered" id="tabelaMateriais">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 4%">#</th>
                                <th style="width: 12%">Tipo</th>
                                <th style="width: 28%">Item</th>
                                <th style="width: 10%">Qtd</th>
                                <th style="width: 14%">Unidade</th>
                                <th style="width: 12%">Custo Unit.</th>
                                <th style="width: 12%">Custo Total</th>
                                <th style="width: 8%">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="materiaisProduto" 
                            data-unidades-servico='@json($unidadesServico ?? [])' 
                            data-unidades-produto='@json($unidadesProduto ?? [])'>
                            <!-- Linhas de materiais serão adicionadas aqui dinamicamente -->
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="8">
                                    <button type="button" class="btn btn-sm btn-success" onclick="adicionarMaterial()">
                                        <i class="bi bi-plus-circle me-1"></i>Adicionar Material/Serviço
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Resumo de Custos -->
                <div class="row">
                    <div class="col-12">
                        <div class="border rounded p-3 bg-light">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Total Materiais:</span>
                                <span id="custoTotalMateriais" class="text-nowrap">R$ 0,00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Total Serviços:</span>
                                <span id="custoTotalServicos" class="text-nowrap">R$ 0,00</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between mb-3 align-items-center">
                                <span class="fw-bold fs-5">CUSTO TOTAL:</span>
                                <span id="custoTotalProdutoDisplay" class="fw-bold fs-5">R$ 0,00</span>
                                <input type="hidden" id="custoTotalProduto" value="0,00">
                            </div>
                            <div class="row mb-3">
                                <div class="col-12">
                                    <label for="margemLucroFabricado" class="form-label">Margem de Lucro (%) <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="margemLucroFabricado" placeholder="0,00" data-mask="percentage" onblur="calcularValorVendaFabricado()">
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold fs-5 text-primary">VALOR DE VENDA:</span>
                                <span id="valorVendaFabricadoDisplay" class="fw-bold fs-5 text-primary">R$ 0,00</span>
                                <input type="hidden" id="valorCustoFabricado" value="0,00">
                                <input type="hidden" id="valorVendaFabricado" value="0,00">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dimensões e Peso -->
        <div class="card shadow border-0 mb-3">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold"><i class="bi bi-rulers me-2"></i>Dimensões e Peso</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-2">
                        <label for="peso_bruto" class="form-label">Peso Bruto (kg)</label>
                        <input type="text" class="form-control" id="peso_bruto" name="dados[peso_bruto]" placeholder="0,00" data-mask="decimal">
                    </div>
                    <div class="col-md-2">
                        <label for="peso_liquido" class="form-label">Peso Líquido (kg)</label>
                        <input type="text" class="form-control" id="peso_liquido" name="dados[peso_liquido]" placeholder="0,00" data-mask="decimal">
                    </div>
                    <div class="col-md-3">
                        <label for="altura" class="form-label">Altura (cm)</label>
                        <input type="text" class="form-control" id="altura" name="dados[altura]" placeholder="0,00" data-mask="decimal">
                    </div>
                    <div class="col-md-3">
                        <label for="largura" class="form-label">Largura (cm)</label>
                        <input type="text" class="form-control" id="largura" name="dados[largura]" placeholder="0,00" data-mask="decimal">
                    </div>
                    <div class="col-md-2">
                        <label for="comprimento" class="form-label">Comprimento (cm)</label>
                        <input type="text" class="form-control" id="comprimento" name="dados[comprimento]" placeholder="0,00" data-mask="decimal">
                    </div>
                </div>
            </div>
        </div>

        <!-- Observações -->
        <div class="card shadow border-0 mb-3">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold"><i class="bi bi-chat-left-text me-2"></i>Observações</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-12">
                        <textarea class="form-control" id="observacoes" name="dados[observacoes]" rows="3" placeholder="Informações adicionais sobre o produto"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botões de Ação -->
        <div class="d-flex justify-content-end gap-2 mt-4 mb-4">
            <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('cadastro.produtos') }}`)">
                <i class="bi bi-x-circle me-2"></i>Cancelar
            </button>
            <button type="button" class="btn btn-primary" onclick="salvar(`{{ route('produtos.store') }}`, 'formNovoProduto')">
                <i class="bi bi-check-circle me-2"></i>Salvar
            </button>
        </div>
    </form>
</div>

<!-- Template para nova linha de material (oculto) -->
<template id="templateMaterialProduto">
    <option value="">Selecione o produto...</option>
    @foreach($produtos as $produto)
        @if($produto->tipo_produto == 'MATERIA_PRIMA')
        <option value="{{ $produto->id }}" data-custo="{{ $produto->valor_custo }}" data-unidade="{{ $produto->unidade_id }}">
            {{ $produto->nome }}
        </option>
        @endif
    @endforeach
</template>

<template id="templateMaterialServico">
    <option value="">Selecione o serviço...</option>
    @foreach($servicos as $servico)
        <option value="{{ $servico->id }}" data-valor="{{ $servico->valor_venda }}" data-unidade="{{ $servico->unidade_id }}">
            {{ $servico->nome }}
        </option>
    @endforeach
</template>