@php
$title = __('services.new_title');
$moedaSelecionada = request('moeda', 'BRL');
@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">{{ __('services.breadcrumb_home') }}</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}?moeda={{ urlencode($moedaSelecionada) }}`)" class="text-decoration-none text-secondary">{{ __('services.breadcrumb_services') }}</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">{{ __('services.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>{{ __('services.new_title') }}
            </h1>
            <span class="text-muted small">{{ __('services.list_title') }}</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}?moeda={{ urlencode($moedaSelecionada) }}`)">
                <i class="bi bi-arrow-left me-2"></i>{{ __('services.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">{{ __('services.label_service_data') }}</span>
        </div>
        <div class="card-body">
            <form id="formNovoServico" class="needs-validation" novalidate>
                @csrf
                <div class="border rounded p-3 mb-3" style="border-color: #dee2e6 !important;">
                    <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">{{ __('services.label_service_category') }}</legend>
                                <p class="text-muted small mb-3">{{ __('services.label_select_category_hint') }}</p>
                                <div class="d-flex flex-wrap gap-3">
                                    @foreach($categoriasServico as $index => $categoria)
                                    @php
                                        $labelCategoria = $categoria->nome;
                                        $categoriaTraduzida = __('services.service_categories_by_id.' . $categoria->id);
                                        if ($categoriaTraduzida !== 'services.service_categories_by_id.' . $categoria->id) {
                                            $labelCategoria = $categoriaTraduzida;
                                        }
                                    @endphp
                                    <div class="form-check form-check-inline mb-0">
                                        <input class="form-check-input" type="radio" name="categoria_servico_ui" id="categoriaServico{{ $categoria->id }}" value="{{ $categoria->id }}" {{ $index === 0 ? 'checked' : '' }}>
                                        <label class="form-check-label" for="categoriaServico{{ $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">{{ __('services.label_currency') }}</legend>
                                <p class="text-muted small mb-3">{{ __('services.label_select_main_currency_hint') }}</p>
                                <div class="d-flex flex-wrap gap-3">
                                    @foreach($moedas as $codigoMoeda => $labelMoeda)
                                    @php
                                        $moedaDesabilitada = in_array($codigoMoeda, ['USD', 'EUR'], true);
                                    @endphp
                                    <div class="form-check form-check-inline mb-0">
                                        <input class="form-check-input" type="radio" name="moeda_ui" id="moedaServico{{ $codigoMoeda }}" value="{{ $codigoMoeda }}" {{ $moedaSelecionada === $codigoMoeda ? 'checked' : '' }} {{ $moedaDesabilitada ? 'disabled' : '' }}>
                                        <label class="form-check-label" for="moedaServico{{ $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-2">
                            <label for="codigo" class="form-label">{{ __('services.label_code') }}</label>
                            <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ $codigo }}" disabled>
                        </div>
                        <div class="col-md-7">
                            <label for="nome" class="form-label required-field">{{ __('services.label_name') }}</label>
                            <input type="text" class="form-control" id="nome" name="dados[nome]" required>
                            <div class="invalid-feedback">
                                {{ __('services.label_service_name_required') }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="tipoServico" class="form-label required-field">{{ __('services.label_service_type') }}</label>
                            <select class="form-select" id="tipoServico" name="dados[tipo_servico_id]" required>
                                <option value="">{{ __('services.label_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">
                                {{ __('services.label_service_type_required') }}
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="unidade" class="form-label required-field">{{ __('services.label_unit') }}</label>
                            <select class="form-select" id="unidade" name="dados[unidade]" required>
                                <option value="">{{ __('services.label_select') }}</option>
                                @foreach($unidades ?? [] as $servico)
                                <option value="{{ $servico->tipo }}">{{ $servico->unidade }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                {{ __('services.label_unit_required') }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="valorVenda" class="form-label required-field">{{ __('services.label_sale_value') }}</label>
                            <div class="input-group">
                                <span class="input-group-text js-moeda-simbolo">R$</span>
                                <input type="text" class="form-control" id="valorVenda" name="dados[valor_venda]" data-mask="money" required>
                                <div class="invalid-feedback">
                                    {{ __('services.label_sale_value_required') }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="valorCusto" class="form-label required-field">{{ __('services.label_cost_value') }}</label>
                            <div class="input-group">
                                <span class="input-group-text js-moeda-simbolo">R$</span>
                                <input type="text" class="form-control" id="valorCusto" name="dados[valor_custo]" data-mask="money" disabled aria-describedby="valorCustoRegra">
                                <div class="invalid-feedback">
                                    {{ __('services.label_cost_value_required') }}
                                </div>
                            </div>
                            <div id="valorCustoRegra" class="form-text">20% do valor de venda</div>
                        </div>
                    </div>

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

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="status" class="form-label required-field">{{ __('services.label_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">
                                {{ __('services.label_status_required') }}
                            </div>
                        </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('cadastro.servicos') }}?moeda={{ urlencode($moedaSelecionada) }}`)">
                            <i class="bi bi-x-circle me-2"></i>{{ __('services.button_cancel') }}
                        </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>{{ __('services.button_save') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
(() => {
    const valorVenda = document.getElementById('valorVenda');
    const valorCusto = document.getElementById('valorCusto');
    if (!valorVenda || !valorCusto) return;
    let calculoPendente;

    const atualizarCusto = () => {
        const valor = window.OperacaoUtils?.parseMoney
            ? window.OperacaoUtils.parseMoney(valorVenda.value)
            : Number(valorVenda.value.replace(/\./g, '').replace(',', '.')) || 0;
        const custo = valor * (20 / 100);
        valorCusto.value = custo.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    };

    const agendarAtualizacao = () => {
        window.clearTimeout(calculoPendente);
        calculoPendente = window.setTimeout(atualizarCusto, 0);
    };

    valorVenda.addEventListener('input', agendarAtualizacao);
    valorVenda.addEventListener('change', agendarAtualizacao);
    valorVenda.addEventListener('blur', agendarAtualizacao);
    agendarAtualizacao();
})();
</script>