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

    <form id="formNovoServico" class="needs-validation" novalidate>
        @csrf
        <div class="card shadow border-0 mb-4">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold">Dados do Serviço</span>
            </div>
            <div class="card-body">
                <div class="border rounded p-3 mb-3" style="border-color: #dee2e6 !important;">
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <label for="codigo" class="form-label">Código</label>
                            <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ $codigo }}" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="nome" class="form-label required-field">Nome do Serviço</label>
                            <input type="text" class="form-control" id="nome" name="dados[nome]" required>
                            <div class="invalid-feedback">
                                Por favor, informe o nome do serviço.
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="tipoServico" class="form-label required-field">Tipo de Serviço</label>
                            <select class="form-select" id="tipoServico" name="dados[tipo_servico_id]" required>
                                <option value="">Selecione...</option>
                                @foreach($tiposServico as $tipo)
                                <option value="{{ $tipo->id }}">{{ $tipo->nome }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                Por favor, selecione o tipo de serviço.
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="unidade_id" class="form-label required-field">Unidade</label>
                            <select class="form-select" id="unidade_id" name="dados[unidade_id]" required>
                                <option value="">Selecione...</option>
                                @foreach($unidades ?? [] as $unidade)
                                <option value="{{ $unidade->id }}">{{ $unidade->unidade }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                Por favor, selecione a unidade.
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="status" class="form-label required-field">Status</label>
                              <select class="form-select" id="status" name="dados[status]" required>
                                <option value="ativo">Ativo</option>
                                <option value="inativo">Inativo</option>
                              </select>
                               <div class="invalid-feedback">
                                  Por favor, selecione o status.
                               </div>
                        </div>                 
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="descricao" class="form-label required-field">Descrição</label>
                            <textarea class="form-control" id="descricao" name="dados[descricao]" rows="3" required></textarea>
                            <div class="invalid-feedback">
                                Por favor, informe a descrição do serviço.
                            </div>
                        </div>
                    </div>

                    <!-- Composição de Custos -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <h6 class="fw-bold text-muted"><i class="bi bi-calculator me-2"></i>Composição de Custos Fixos</h6>
                            <hr class="mt-2 mb-3">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label for="custoMaoObra" class="form-label">Custo de Mão de Obra</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" class="form-control" id="custoMaoObra" name="dados[custo_mao_obra]" data-mask="money" placeholder="0,00" onblur="calcularCustosTotais()">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="custoEquipamento" class="form-label">Custo de Equipamento</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" class="form-control" id="custoEquipamento" name="dados[custo_equipamento]" data-mask="money" placeholder="0,00" onblur="calcularCustosTotais()">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="custoOverhead" class="form-label">Outros Custos</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" class="form-control" id="custoOverhead" name="dados[custo_overhead]" data-mask="money" placeholder="Água, luz, aluguel etc." onblur="calcularCustosTotais()">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="impostoIss" class="form-label">Alíquota ISS (%)</label>
                            <div class="input-group">
                                <span class="input-group-text">%</span>
                                <input type="text" class="form-control" id="impostoIss" name="dados[imposto_iss]" data-mask="percentage" placeholder="0,00" onblur="calcularCustosTotais()">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Materiais Consumíveis -->
        <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-box-seam me-2"></i>Materiais Consumíveis</span>
            </div>
            <div class="card-body">
                <div class="table-responsive mb-3">
                    <table class="table table-bordered" id="tabelaMateriaisServico">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 4%">#</th>
                                <th style="width: 30%">Produto (Matéria Prima)</th>
                                <th style="width: 10%">Quantidade</th>
                                <th style="width: 14%">Unidade</th>
                                <th style="width: 16%">Custo Unit.</th>
                                <th style="width: 18%">Custo Total</th>
                                <th style="width: 8%">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="materiaisServico" data-unidades='@json($unidadesProduto ?? [])'>
                            <!-- Primeira linha inicial -->
                            <tr data-index="0">
                                <td>
                                    <span class="numero-linha">1</span>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm produto-select" name="materiais[0][produto_id]" onchange="buscarDadosProdutoServico(this)" required>
                                        <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
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm quantidade-material" name="materiais[0][quantidade]" value="1" oninput="formatarQuantidade(this)" onchange="calcularTotalMaterialServico(this.closest('tr'))" required>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm unidade-material" name="materiais[0][unidade_id]" required>
                                        <option value="">Selecione...</option>
                                        @foreach($unidadesProduto ?? [] as $unidade)
                                            <option value="{{ $unidade->id }}">{{ $unidade->unidade }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-select-sm custo-unitario-material" name="materiais[0][custo_unitario]" value="" placeholder="0,00" data-mask="money" onblur="calcularTotalMaterialServico(this.closest('tr'))" required>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm custo-total-material bg-light" name="materiais[0][custo_total]" value="0,00" readonly>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-danger btn-remover-material" onclick="removerMaterialServico(this)" disabled>
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="7">
                                    <button type="button" class="btn btn-sm btn-success" onclick="adicionarMaterialServico()">
                                        <i class="bi bi-plus-circle me-1"></i>Adicionar Material
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Templates ocultos -->
                <template id="templateMaterialServico">
                    @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="templateUnidadesMaterial">
                    <option value="">Selecione...</option>
                    @foreach($unidadesProduto ?? [] as $unidade)
                        <option value="{{ $unidade->id }}">{{ $unidade->unidade }}</option>
                    @endforeach
                </template>

                <!-- 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">Custo Mão de Obra:</span>
                                <span id="displayCustoMaoObra" class="text-nowrap">R$ 0,00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Custo Equipamento:</span>
                                <span id="displayCustoEquipamento" class="text-nowrap">R$ 0,00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Outros Custos:</span>
                                <span id="displayCustoOverhead" class="text-nowrap">R$ 0,00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Imposto ISS:</span>
                                <span id="displayImpostoIss" class="text-nowrap">R$ 0,00</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">Total Materiais:</span>
                                <span id="custoTotalMateriaisServico" 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="custoTotalServicoDisplay" class="fw-bold fs-5">R$ 0,00</span>
                            </div>
                            <div class="row mb-3">
                                <div class="col-12">
                                    <label for="margemLucroServico" class="form-label">Margem de Lucro (%)</label>
                                    <input type="text" class="form-control" id="margemLucroServico" placeholder="0,00" data-mask="percentage" onblur="calcularValorVendaServico()">
                                </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="valorVendaServicoDisplay" class="fw-bold fs-5 text-primary">R$ 0,00</span>
                                <input type="hidden" name="dados[valor_custo]" id="valorCustoServico" value="0,00">
                                <input type="hidden" name="dados[valor_venda]" id="valorVendaServico" value="0,00">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botões de Ação -->
        <div class="card shadow border-0 mb-4">
            <div class="card-body">
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="button" class="btn btn-sm btn-outline-secondary me-md-2" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}`)">
                        <i class="bi bi-x-circle me-2"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="salvar(`{{ route('servicos.store') }}`, 'formNovoServico')">
                        <i class="bi bi-check-circle me-2"></i>Salvar
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="{{ asset('js/rd-budget-servico-materiais.js') }}"></script>