@php
$title = __('services.edit_title');
$moedaSelecionada = $servico->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="voltarParaListagemFiltrada('servicos', `{{ 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.edit_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-pencil-square me-2 text-primary"></i>{{ __('services.edit_title') }}
            </h1>
            <span class="text-muted small">{{ __('services.list_title') }}</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="voltarParaListagemFiltrada('servicos', `{{ 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="formEditarServico" class="needs-validation" novalidate>
                @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">{{ __('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 $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 }}" {{ optional($servico->tipoServico)->categoria_servico_id == $categoria->id ? '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="{{ $servico->codigo ?? '' }}" readonly>
                    </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]" value="{{ $servico->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 }}" {{ (isset($servico) && $servico->tipo_servico_id == $tipo->id) ? 'selected' : '' }}>{{ $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 $unidade)
                                <option value="{{ $unidade->tipo }}" {{ (isset($servico) && $servico->unidade == $unidade->tipo) ? 'selected' : '' }}>{{ $unidade->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">{{ \App\Helpers\MoneyHelper::simboloMoeda($moedaSelecionada) }}</span>
                            <input type="text" class="form-control" id="valorVenda" name="dados[valor_venda]" data-mask="money" value="{{ isset($servico) ? number_format($servico->valor_venda, 2, ',', '.') : '' }}" required autocomplete="off">
                        </div>
                        <div class="invalid-feedback">
                            {{ __('services.label_sale_value_required') }}
                        </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">{{ \App\Helpers\MoneyHelper::simboloMoeda($moedaSelecionada) }}</span>
                            <input type="text" class="form-control" id="valorCusto" name="dados[valor_custo]" data-mask="money" value="{{ isset($servico) ? number_format($servico->valor_custo, 2, ',', '.') : '' }}" disabled aria-describedby="valorCustoRegra" autocomplete="off">
                        </div>
                        <div class="invalid-feedback">
                            {{ __('services.label_cost_value_required') }}
                        </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>{{ $servico->descricao ?? '' }}</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" {{ (isset($servico) && $servico->status == 'ativo') ? 'selected' : '' }}>{{ __('services.label_active') }}</option>
                            <option value="inativo" {{ (isset($servico) && $servico->status == 'inativo') ? 'selected' : '' }}>{{ __('services.label_inactive') }}</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="voltarParaListagemFiltrada('servicos', `{{ 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="atualizar(`{{ route('servicos.update', $servico->id) }}`, 'formEditarServico')">
                        <i class="bi bi-check-circle me-2"></i>{{ __('services.button_save') }}
                    </button>
                </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>