@php
use App\Enum\StatusOrcamento;
$title = __('orcamento.new_title');
$moedaSelecionada = request('moeda', 'BRL');
$isInternational = in_array(strtoupper((string) $moedaSelecionada), ['USD', 'EUR'], true);
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;" data-base-url="{{ route('operacoes.orcamento.novo') }}">
    <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">{{ __('orcamento.breadcrumb_home') }}</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('operacoes.orcamento') }}?moeda={{ urlencode($moedaSelecionada) }}`)" class="text-decoration-none text-secondary">{{ __('orcamento.menu') }}</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">{{ __('orcamento.new_title') }}</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>{{ __('orcamento.new_title') }}
            </h1>
            <span class="text-muted small">{{ __('orcamento.subtitle_new') }}</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('operacoes.orcamento') }}`)">
                <i class="bi bi-arrow-left me-2"></i>{{ __('orcamento.button_back') }}
            </button>
        </div>
    </div>

    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">{{ __('orcamento.label_details') }}</span>
        </div>
        <div class="card-body">
            <form id="formNovoOrcamento" class="needs-validation" novalidate
                data-automatic-cash-payment="{{ __('orcamento.automatic_cash_payment', ['total' => ':total']) }}"
                data-automatic-installment-payment="{{ __('orcamento.automatic_installment_payment', ['entry' => ':entry', 'installments' => ':installments', 'installment' => ':installment']) }}"
                data-automatic-final-installment-adjustment="{{ __('orcamento.automatic_final_installment_adjustment', ['sign' => ':sign', 'amount' => ':amount']) }}"
                data-automatic-delivery-deadline="{{ __('orcamento.automatic_delivery_deadline', ['deadline' => ':deadline']) }}"
                data-automatic-delivery-deadline-missing="{{ __('orcamento.automatic_delivery_deadline_missing') }}"
                data-automatic-outsourcing-observations="{{ __('orcamento.automatic_outsourcing_observations', ['deadline' => ':deadline']) }}">
                @csrf
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <fieldset class="h-100 border rounded-3 px-3 px-md-4 pb-3 pt-2 bg-light-subtle" style="border-color: #d7e3f4 !important;">
                            <legend class="float-none w-auto px-2 mb-2 fs-6 fw-semibold text-primary">{{ __('orcamento.label_service_category') }}</legend>
                            <p class="text-muted small mb-3">{{ $isInternational ? __('orcamento.help_category_local') : __('orcamento.help_category_local') }}</p>
                            <div class="d-flex flex-wrap gap-3">
                                @foreach($categoriasServico as $index => $categoria)
                                @php
                                    $labelCategoria = $categoria->nome;
                                    if ($isInternational) {
                                        $chaveCategoria = 'orcamento.service_categories_by_id.' . $categoria->id;
                                        $traducaoCategoria = __($chaveCategoria);
                                        if (is_string($traducaoCategoria) && $traducaoCategoria !== $chaveCategoria) {
                                            $labelCategoria = $traducaoCategoria;
                                        }
                                    }
                                @endphp
                                <div class="form-check form-check-inline mb-0">
                                    <input class="form-check-input" type="radio" name="categoria_servico_ui" id="categoriaOrcamento{{ $categoria->id }}" value="{{ $categoria->id }}" {{ $index === 0 ? 'checked' : '' }}>
                                    <label class="form-check-label" for="categoriaOrcamento{{ $categoria->id }}">{{ $labelCategoria }}</label>
                                </div>
                                @endforeach
                            </div>
                        </fieldset>
                    </div>
                    <div class="col-md-6">
                        <fieldset class="h-100 border rounded-3 px-3 px-md-4 pb-3 pt-2 bg-light-subtle" style="border-color: #d7e3f4 !important;">
                            <legend class="float-none w-auto px-2 mb-2 fs-6 fw-semibold text-primary">{{ __('orcamento.label_currency') }}</legend>
                            <p class="text-muted small mb-3">{{ $isInternational ? __('orcamento.help_currency_local') : __('orcamento.help_currency_local') }}</p>
                            <div class="d-flex flex-wrap gap-3">
                                @foreach($moedas as $codigoMoeda => $labelMoeda)
                                <div class="form-check form-check-inline mb-0">
                                    <input class="form-check-input" type="radio" name="moeda_ui" id="moedaOrcamento{{ $codigoMoeda }}" value="{{ $codigoMoeda }}" {{ $moedaSelecionada === $codigoMoeda ? 'checked' : '' }}>
                                    <label class="form-check-label" for="moedaOrcamento{{ $codigoMoeda }}">{{ $codigoMoeda }}</label>
                                </div>
                                @endforeach
                            </div>
                            <input type="hidden" id="moeda" name="dados[moeda]" value="{{ $moedaSelecionada }}">
                        </fieldset>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="codigo" class="form-label">{{ __('orcamento.label_number') }}</label>
                        <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ $codigo }}" disabled>
                    </div>
                    <div class="col-md-3">
                        <label for="dataOrcamento" class="form-label required-field">{{ __('orcamento.label_date') }}</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="dataOrcamento"
                                style="z-index: 1 !important;"
                                name="dados[data_emissao]"
                                data-mask="date"
                                readonly>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                        <div class="invalid-feedback">{{ $isInternational ? __('orcamento.validation_date') : __('orcamento.validation_date') }}</div>
                    </div>
                    <div class="col-md-3">
                        <label for="validadeOrcamento" class="form-label required-field">{{ __('orcamento.label_validity') }}</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="validadeOrcamento"
                                style="z-index: 1 !important;"
                                name="dados[data_validade]"
                                data-mask="date"
                                readonly>
                            <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        </div>
                        <div class="invalid-feedback">{{ $isInternational ? __('orcamento.validation_validity') : __('orcamento.validation_validity') }}</div>
                    </div>
                    <div class="col-md-3">
                        <label for="statusOrcamento" class="form-label">{{ __('orcamento.label_status') }}</label>
                        <input type="text" class="form-control" id="statusOrcamento" name="dados[status]" value="{{ StatusOrcamento::AGUARDANDO_CLIENTE->value }}" readonly>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="clienteOrcamento" class="form-label required-field">{{ __('orcamento.label_client') }}</label>
                        <select class="form-select" id="clienteOrcamento" name="dados[cliente_id]" required>
                            <option value="">{{ $isInternational ? 'Select the client...' : 'Selecione o cliente...' }}</option>
                            @foreach($clientes as $cliente)
                            <option value="{{ $cliente->id }}">{{ $cliente->nome_fantasia ?? $cliente->razao_social }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">{{ __('orcamento.validation_client') }}</div>
                    </div>
                    <div class="col-md-3">
                        <label for="tipoServico" class="form-label required-field">{{ __('orcamento.label_service_type') }}</label>
                        <select class="form-select" id="tipoServico" name="dados[tipo_servico_id]" required>
                            <option value="">{{ __('orcamento.placeholder_select') }}</option>
                            @foreach($tiposServico as $tipo)
                            <option value="{{ $tipo->id }}" data-categoria-id="{{ $tipo->categoria_servico_id }}">{{ $tipo->nome_exibicao ?? $tipo->nome }}</option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">
                            {{ __('orcamento.validation_service_type') }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label for="prazoEntrega" class="form-label">{{ __('orcamento.label_delivery_deadline') }}</label>
                        <input type="text" class="form-control" id="prazoEntrega" name="dados[prazo_entrega]" placeholder="{{ $isInternational ? 'Ex: 30 business days' : 'Ex: 30 dias úteis' }}" required>
                        <div class="invalid-feedback">
                            {{ __('orcamento.validation_delivery_deadline') }}
                        </div>
                    </div> 
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="descricaoOrcamento" class="form-label required-field">{{ __('orcamento.label_project_description') }}</label>
                        <textarea class="form-control" id="descricaoOrcamento" name="dados[descricao_projeto]" rows="3" required></textarea>
                        <div class="invalid-feedback">
                            {{ __('orcamento.validation_project_description') }}
                        </div>
                    </div>
                </div>

                <h5 class="mt-4 mb-3">{{ __('orcamento.label_items') }}</h5>

                <div class="table-responsive mb-3">
                    <table class="table table-bordered" id="tabelaItensOrcamento" data-moeda="{{ $moedaSelecionada }}">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 5%">#</th>
                                <th style="width: 17%">{{ __('orcamento.label_service_item') }}</th>
                                <th style="width: 19%">{{ __('orcamento.label_description') }}</th>
                                <th style="width: 9%">{{ __('orcamento.label_people_count') }}</th>
                                <th style="width: 10%">{{ __('orcamento.label_quantity_short') }}</th>
                                <th style="width: 10%">{{ __('orcamento.label_unit_short') }}</th>
                                <th style="width: 10%">{{ __('orcamento.label_unit_price_short') }}</th>
                                <th style="width: 10%">{{ __('orcamento.label_total_short') }}</th>
                                <th style="width: 5%">{{ __('orcamento.label_actions') }}</th>
                            </tr>
                        </thead>
                        <tbody id="itensOrcamento">
                            <tr>
                                <td>1</td>
                                <td>
                                    <select class="form-select form-select-sm" name="itens[0][servico_id]" onchange="buscarValorUnitario(this)" required>
                                        <option value="0">{{ $isInternational ? 'Select the service...' : 'Selecione o serviço...' }}</option>
                                        @foreach($servicos ?? [] as $servico)
                                        <option value="{{ $servico->id }}">{{ $servico->nome_exibicao ?? $servico->nome }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" name="itens[0][descricao]">
                                </td>
                                <td>
                                    <input type="number" class="form-control form-control-sm" name="itens[0][pessoas]" min="1" value="1" required>
                                </td>
                                <td>
                                    <input type="number" class="form-control form-control-sm" name="itens[0][quantidade]" min="1" value="0" required>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm" id="unidade0" name="itens[0][unidade]" required>
                                        @foreach($unidades ?? [] as $unidade)
                                        <option value="{{ $unidade->tipo }}">{{ $unidade->unidade }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" id="valorUnitario" name="itens[0][valor_unitario]" value="{{ \App\Helpers\MoneyHelper::formatarPorMoeda(0, $moedaSelecionada) }}" required>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-control-sm" name="itens[0][valor_total]" value="{{ \App\Helpers\MoneyHelper::formatarPorMoeda(0, $moedaSelecionada) }}" readonly>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-danger btn-remover-item" onclick="removerItemOrcamentoLocal(this)" disabled>
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="9">
                                    <button type="button" class="btn btn-sm btn-success" id="btnadicionarItemOrcamento" onclick="adicionarItemOrcamento()">
                                        <i class="bi bi-plus-circle me-1"></i>{{ $isInternational ? 'Add Item' : 'Adicionar Item' }}
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Seção de Condições de Pagamento -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="row">
                            <!-- Coluna esquerda: Campos de condições de pagamento -->
                            <div class="col-md-6">
                                <div class="border border-secondary-subtle rounded p-3 h-100 bg-light-subtle">
                                    <div class="d-flex align-items-center mb-3 pb-2 border-bottom border-secondary-subtle">
                                        <i class="bi bi-credit-card text-primary me-2"></i>
                                        <h6 class="mb-0 text-primary">{{ __('orcamento.label_payment_conditions_title') }}</h6>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="formaPagamento" class="form-label">{{ __('orcamento.label_payment_method_title') }}</label>
                                            <select class="form-select" id="formaPagamento" name="dados[forma_pagamento]">
                                                <option value="">Selecione...</option>
                                                @foreach($formasPagamento ?? [] as $forma)
                                                <option value="{{ $forma->codigo }}">{{ $forma->nome }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="tipoPagamento" class="form-label">{{ __('orcamento.label_payment_type_title') }}</label>
                                            <select class="form-select" id="tipoPagamento" name="dados[tipo_pagamento]">
                                                <option value="">Selecione...</option>
                                                <option value="À Vista">À Vista</option>
                                                @for($numeroParcelas = 2; $numeroParcelas <= 12; $numeroParcelas++)
                                                <option value="{{ $numeroParcelas }}">{{ $numeroParcelas }}x Sem Juros</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="dataVencimento" class="form-label">{{ __('orcamento.label_due_date') }}</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control datepicker" id="dataVencimento"
                                                    style="z-index: 1 !important;"
                                                    name="dados[data_vencimento_preferida]"
                                                    data-mask="date"
                                                    readonly>
                                                <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="valorEntrada" class="form-label">{{ __('orcamento.label_entry_value') }}</label>
                                            <div class="input-group">
                                                <span class="input-group-text js-moeda-simbolo">{{ \App\Helpers\MoneyHelper::simboloMoeda($moedaSelecionada) }}</span>
                                                <input type="text" class="form-control money" id="valorEntrada" name="dados[valor_entrada]" value="0">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Coluna direita: Resumo financeiro -->
                            <div class="col-md-6">
                                <div class="border border-secondary-subtle rounded p-3 h-100 bg-light-subtle">
                                    <div class="d-flex align-items-center mb-3 pb-2 border-bottom border-secondary-subtle">
                                        <i class="bi bi-calculator text-primary me-2"></i>
                                        <h6 class="mb-0 text-primary">{{ __('orcamento.label_financial_summary') }}</h6>
                                    </div>
                                    <div id="resumoOrcamento">
                                        <div class="d-flex justify-content-between mb-3">
                                            <span>{{ __('orcamento.label_subtotal') }}:</span>
                                            <span id="subtotalOrcamento" class="text-nowrap ms-4" data-mask="money">{{ \App\Helpers\MoneyHelper::formatarPorMoeda(0, $moedaSelecionada) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text">{{ __('orcamento.label_discount') }}</span>
                                                <input type="text" class="form-control form-control-sm" id="descontoOrcamento" name="dados[desconto]" value="" data-mask="percent" placeholder="0.0">
                                                <span class="input-group-text">%</span>
                                            </div>
                                            <span id="valorDescontoOrcamento" class="text-nowrap ms-4">{{ \App\Helpers\MoneyHelper::formatarPorMoeda(0, $moedaSelecionada) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between fw-bold border-top border-secondary-subtle pt-2">
                                            <span>{{ __('orcamento.label_total') }}:</span>
                                            <span id="totalOrcamento" class="text-nowrap ms-4 text-success fs-5" data-mask="money">{{ \App\Helpers\MoneyHelper::formatarPorMoeda(0, $moedaSelecionada) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Campo de observações em linha separada -->
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <label for="observacoesPagamento" class="form-label">{{ __('orcamento.label_observations_payment') }}</label>
                                <textarea class="form-control" id="observacoesPagamento" name="dados[observacoes_pagamento]" rows="2"></textarea>
                            </div>
                        </div>
                        
                        <!-- Preview das Parcelas -->
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <div id="preview-parcelas" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="observacoesOrcamento" class="form-label">{{ __('orcamento.label_observations') }}</label>
                        <textarea class="form-control" id="observacoesOrcamento" name="dados[observacoes]" rows="3"></textarea>
                    </div>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                    <button type="button" class="btn btn-sm btn-outline-secondary me-md-2" onclick="carregarConteudo(`{{ route('operacoes.orcamento') }}?moeda={{ urlencode($moedaSelecionada) }}`)">
                        <i class="bi bi-x-circle me-2"></i>{{ __('orcamento.button_cancel') }}
                    </button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="salvar(`{{ route('operacoes.orcamento.store') }}?moeda={{ urlencode($moedaSelecionada) }}`, 'formNovoOrcamento')">
                        <i class="bi bi-check-circle me-2"></i>{{ __('orcamento.button_save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>