@extends('layouts.app')
@section('title', 'Emitir NFS-e')
@section('page_title', 'Emitir NFS-e')
@section('page_subtitle', 'Preencha os dados para emissao de nota fiscal de servico.')
@section('page_actions')
    <a class="button" href="{{ route('nfse.invoices.index') }}">Cancelar</a>
@endsection

@section('content')

@if ($errors->any())
<div class="notice error">{{ $errors->first() }}</div>
@endif

<div class="panel">
    <div class="panel-header">
        <div><h2>Nova NFS-e</h2><span>Emissao manual de nota fiscal de servico</span></div>
    </div>

    <form method="POST" action="{{ route('nfse.invoices.store') }}" id="nfse-form">
        @csrf

        {{-- Tomador --}}
        <div style="padding:0 18px;border-bottom:1px solid var(--border)">
            <div style="padding:14px 0 8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px">Tomador do Servico</div>
        </div>

        <div class="form-grid">
            <div class="form-field full">
                <label for="customer_id">Cliente cadastrado</label>
                <select id="customer_id" name="customer_id" onchange="fillCustomer(this)">
                    <option value="">— Selecionar cliente —</option>
                    @foreach ($customers as $c)
                        <option value="{{ $c->id }}" @selected(old('customer_id') == $c->id)>
                            {{ $c->nome }} ({{ $c->cpf_cnpj_formatted }})
                        </option>
                    @endforeach
                </select>
                <div style="font-size:12px;color:var(--muted);margin-top:4px">
                    Nao encontrou? <a href="{{ route('nfse.customers.create') }}" target="_blank" style="color:var(--primary);font-weight:600">Cadastrar novo cliente</a>
                </div>
                @error('customer_id') <div class="error">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- Servico --}}
        <div style="padding:0 18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
            <div style="padding:14px 0 8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px">Dados do Servico</div>
        </div>

        <div class="form-grid">
            <div class="form-field full">
                <label for="descricao_servico">Descricao do servico <span style="color:var(--danger)">*</span></label>
                <textarea id="descricao_servico" name="descricao_servico" rows="3"
                          style="min-height:80px;resize:vertical" maxlength="2000" required>{{ old('descricao_servico') }}</textarea>
                @error('descricao_servico') <div class="error">{{ $message }}</div> @enderror
            </div>

            <div class="form-field">
                <label for="codigo_servico">Codigo do servico <span style="color:var(--danger)">*</span></label>
                <input id="codigo_servico" name="codigo_servico"
                       value="{{ old('codigo_servico', $config?->codigo_servico) }}" required>
                @error('codigo_servico') <div class="error">{{ $message }}</div> @enderror
            </div>

            <div class="form-field">
                <label for="item_lista_servico">Item lista servico <span style="color:var(--danger)">*</span></label>
                <input id="item_lista_servico" name="item_lista_servico"
                       value="{{ old('item_lista_servico', $config?->item_lista_servico) }}" required>
                @error('item_lista_servico') <div class="error">{{ $message }}</div> @enderror
            </div>

            <div class="form-field">
                <label for="cnae">CNAE (opcional)</label>
                <input id="cnae" name="cnae" value="{{ old('cnae', $config?->cnae) }}">
            </div>

            <div class="form-field full">
                <label for="observacoes">Observacoes</label>
                <textarea id="observacoes" name="observacoes" rows="2"
                          style="min-height:60px;resize:vertical" maxlength="2000">{{ old('observacoes') }}</textarea>
            </div>
        </div>

        {{-- Valores --}}
        <div style="padding:0 18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
            <div style="padding:14px 0 8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px">Valores e Impostos</div>
        </div>

        <div class="form-grid">
            <div class="form-field">
                <label for="valor_servico">Valor do servico (R$) <span style="color:var(--danger)">*</span></label>
                <input id="valor_servico" name="valor_servico" type="number" step="0.01" min="0.01"
                       value="{{ old('valor_servico') }}" required oninput="calcular()">
                @error('valor_servico') <div class="error">{{ $message }}</div> @enderror
            </div>

            <div class="form-field">
                <label for="aliquota">Aliquota ISS (%) <span style="color:var(--danger)">*</span></label>
                <input id="aliquota" name="aliquota" type="number" step="0.01" min="0" max="100"
                       value="{{ old('aliquota', $config?->aliquota ?? 2.00) }}" required oninput="calcular()">
                @error('aliquota') <div class="error">{{ $message }}</div> @enderror
            </div>

            <div class="form-field">
                <label>
                    <input type="checkbox" name="iss_retido" value="1" id="iss_retido"
                           @checked(old('iss_retido')) onchange="calcular()"
                           style="width:auto;min-height:0;margin-right:6px">
                    ISS Retido pelo tomador
                </label>
            </div>

            <div class="form-field" style="grid-column:1">
                <label>Valor ISS calculado</label>
                <div id="preview-iss" style="font-size:20px;font-weight:700;color:var(--primary);padding:8px 0">R$ 0,00</div>
            </div>

            <div class="form-field">
                <label>Valor liquido da nota</label>
                <div id="preview-liquido" style="font-size:20px;font-weight:700;color:var(--ok);padding:8px 0">R$ 0,00</div>
            </div>
        </div>

        <div class="form-actions">
            <a class="button" href="{{ route('nfse.invoices.index') }}">Cancelar</a>
            <button class="button primary" type="submit" id="btn-submit">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                Emitir NFS-e
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script>
function fmt(v) {
    return 'R$ ' + parseFloat(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function calcular() {
    var val  = parseFloat(document.getElementById('valor_servico').value) || 0;
    var ali  = parseFloat(document.getElementById('aliquota').value) || 0;
    var ret  = document.getElementById('iss_retido').checked;
    var iss  = Math.round(val * (ali / 100) * 100) / 100;
    var liq  = ret ? val - iss : val;
    document.getElementById('preview-iss').textContent    = fmt(iss);
    document.getElementById('preview-liquido').textContent = fmt(liq);
}

document.getElementById('nfse-form').addEventListener('submit', function() {
    var btn = document.getElementById('btn-submit');
    btn.disabled = true;
    btn.textContent = 'Emitindo...';
});

calcular();
</script>
@endpush
@endsection