@extends('layouts.guest')
@section('title', 'Criar conta - ERP-PLUS')

@push('styles')
<style>
    body { align-items: flex-start !important; padding: 36px 16px !important; background: #f1f5f9 !important; }

    .reg-wrap { width: 100%; max-width: 680px; margin: 0 auto; }

    .reg-header { text-align: center; margin-bottom: 28px; }
    .reg-brand-mark {
        width: 50px; height: 50px; border-radius: 12px;
        background: #2563eb; color: #fff; font-weight: 800; font-size: 18px;
        display: inline-grid; place-items: center; letter-spacing: -.5px;
        margin-bottom: 14px;
    }
    .reg-header h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; color: #0f172a; }
    .reg-header p  { font-size: 14px; color: #64748b; margin: 0; }

    .reg-card {
        background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0,0,0,.07);
        overflow: hidden;
    }
    .reg-section-title {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 24px; background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }
    .reg-section-icon {
        width: 32px; height: 32px; border-radius: 8px;
        background: #eff6ff; border: 1px solid #bfdbfe;
        display: grid; place-items: center; flex-shrink: 0;
    }
    .reg-section-title h2 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
    .reg-section-title span { font-size: 12px; color: #64748b; display: block; margin-top: 1px; }

    .reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 24px; }
    .f-full { grid-column: 1 / -1; }
    .f-group { display: grid; gap: 5px; }
    .f-label { font-size: 12.5px; font-weight: 600; color: #374151; }
    .f-input {
        width: 100%; min-height: 42px; border: 1px solid #e2e8f0;
        border-radius: 8px; padding: 9px 12px; font: inherit;
        font-size: 13.5px; color: #0f172a; background: #fff;
        transition: border-color .12s, box-shadow .12s;
    }
    .f-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
    .f-input.filled { border-color: #22c55e; background: #f0fdf4; }
    .f-error { color: #dc2626; font-size: 12px; }
    .f-hint  { font-size: 12px; color: #64748b; }

    .cnpj-row { display: flex; gap: 8px; }
    .cnpj-row .f-input { flex: 1; }
    .btn-lookup {
        min-height: 42px; padding: 0 16px; background: #2563eb; color: #fff;
        border: none; border-radius: 8px; font: inherit; font-size: 13px;
        font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;
        display: flex; align-items: center; gap: 6px;
        transition: background .12s;
    }
    .btn-lookup:hover { background: #1d4ed8; }
    .btn-lookup:disabled { background: #93c5fd; cursor: not-allowed; }
    .lookup-status {
        font-size: 12px; display: flex; align-items: center; gap: 5px;
        min-height: 16px; margin-top: 4px;
    }
    .lookup-status.ok   { color: #16a34a; }
    .lookup-status.err  { color: #dc2626; }
    .lookup-status.load { color: #64748b; }

    .reg-divider {
        border: none; border-top: 1px solid #e2e8f0; margin: 0;
    }
    .reg-actions {
        padding: 16px 24px;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        background: #f8fafc; flex-wrap: wrap;
    }
    .btn-submit {
        min-height: 44px; padding: 0 28px; background: #2563eb; color: #fff;
        border: none; border-radius: 8px; font: inherit; font-size: 14px;
        font-weight: 700; cursor: pointer;
        box-shadow: 0 2px 8px rgba(37,99,235,.3);
        transition: background .15s;
    }
    .btn-submit:hover { background: #1d4ed8; }
    .btn-back {
        min-height: 44px; padding: 0 20px; background: #fff; color: #374151;
        border: 1px solid #e2e8f0; border-radius: 8px; font: inherit;
        font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
        display: inline-flex; align-items: center;
        transition: background .12s;
    }
    .btn-back:hover { background: #f8fafc; }

    .alert-error {
        background: #fef2f2; border: 1px solid #fca5a5;
        color: #dc2626; border-radius: 8px;
        padding: 11px 14px; font-size: 13px; margin-bottom: 16px;
    }

    /* Spinner */
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner {
        width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4);
        border-top-color: #fff; border-radius: 50%;
        animation: spin .7s linear infinite; display: none; flex-shrink:0;
    }
    .lookup-status svg { flex-shrink:0; }

    @media (max-width: 600px) {
        .reg-grid { grid-template-columns: 1fr; }
        .f-full { grid-column: 1; }
    }
</style>
@endpush

@section('content')
<div class="reg-wrap">
    <div class="reg-header">
        <div class="reg-brand-mark">MF</div>
        <h1>Crie sua conta gratuitamente</h1>
        <p>Teste por 7 dias sem cartao de credito. Cancele quando quiser.</p>
    </div>

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

    <div class="reg-card">
        <form method="POST" action="{{ route('register.store') }}">
            @csrf

            {{-- Empresa --}}
            <div class="reg-section-title">
                <div class="reg-section-icon">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                </div>
                <div>
                    <h2>Dados da empresa</h2>
                    <span>Informe o CNPJ para preencher automaticamente</span>
                </div>
            </div>

            <div class="reg-grid">
                <div class="f-group f-full">
                    <label class="f-label" for="reg_cnpj">CNPJ <span style="color:#dc2626">*</span></label>
                    <div class="cnpj-row">
                        <input class="f-input" id="reg_cnpj" name="cnpj"
                               value="{{ old('cnpj') }}" maxlength="18"
                               inputmode="numeric" autocomplete="off"
                               placeholder="00.000.000/0000-00" required>
                        <button type="button" class="btn-lookup" id="btn-buscar" onclick="lookupCnpj()">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                            <span class="spinner" id="spinner"></span>
                            <span id="btn-label">Buscar CNPJ</span>
                        </button>
                    </div>
                    <div class="lookup-status" id="lookup-status"></div>
                    @error('cnpj') <div class="f-error">{{ $message }}</div> @enderror
                </div>

                <div class="f-group f-full">
                    <label class="f-label" for="company_name">Razao social <span style="color:#dc2626">*</span></label>
                    <input class="f-input" id="company_name" name="company_name"
                           value="{{ old('company_name') }}" maxlength="160" required>
                    @error('company_name') <div class="f-error">{{ $message }}</div> @enderror
                </div>

                <div class="f-group">
                    <label class="f-label" for="reg_uf">UF <span style="color:#dc2626">*</span></label>
                    <select class="f-input" id="reg_uf" name="uf" required>
                        @foreach (['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'] as $uf)
                            <option value="{{ $uf }}" @selected(old('uf') === $uf)>{{ $uf }}</option>
                        @endforeach
                    </select>
                    @error('uf') <div class="f-error">{{ $message }}</div> @enderror
                </div>

                <div class="f-group">
                    <label class="f-label" for="reg_ambiente">Ambiente SEFAZ</label>
                    <select class="f-input" id="reg_ambiente" name="sefaz_environment">
                        <option value="2" selected>Homologacao (testes)</option>
                        <option value="1">Producao</option>
                    </select>
                </div>
            </div>

            <hr class="reg-divider">

            {{-- Usuario --}}
            <div class="reg-section-title">
                <div class="reg-section-icon">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                </div>
                <div>
                    <h2>Dados de acesso</h2>
                    <span>Voce sera o administrador da conta</span>
                </div>
            </div>

            <div class="reg-grid">
                <div class="f-group">
                    <label class="f-label" for="name">Nome completo <span style="color:#dc2626">*</span></label>
                    <input class="f-input" id="name" name="name"
                           value="{{ old('name') }}" maxlength="255" required
                           placeholder="Seu nome">
                    @error('name') <div class="f-error">{{ $message }}</div> @enderror
                </div>

                <div class="f-group">
                    <label class="f-label" for="email">E-mail <span style="color:#dc2626">*</span></label>
                    <input class="f-input" id="email" name="email" type="email"
                           value="{{ old('email') }}" maxlength="255" required
                           placeholder="seu@email.com">
                    @error('email') <div class="f-error">{{ $message }}</div> @enderror
                </div>

                <div class="f-group">
                    <label class="f-label" for="password">Senha <span style="color:#dc2626">*</span></label>
                    <input class="f-input" id="password" name="password" type="password"
                           minlength="8" required placeholder="Minimo 8 caracteres">
                    @error('password') <div class="f-error">{{ $message }}</div> @enderror
                </div>

                <div class="f-group">
                    <label class="f-label" for="password_confirmation">Confirmar senha <span style="color:#dc2626">*</span></label>
                    <input class="f-input" id="password_confirmation" name="password_confirmation"
                           type="password" required placeholder="Repita a senha">
                </div>
            </div>

            <hr class="reg-divider">

            <div class="reg-actions">
                <a class="btn-back" href="{{ route('login') }}">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px"><polyline points="15 18 9 12 15 6"/></svg>
                    Ja tenho conta
                </a>
                <button class="btn-submit" type="submit">
                    Criar conta gratuita &rarr;
                </button>
            </div>
        </form>
    </div>

    <div style="text-align:center;margin-top:18px;font-size:12px;color:#94a3b8">
        Ao criar sua conta voce concorda com nossos Termos de Uso e Politica de Privacidade.
    </div>
</div>

@push('scripts')
<script>
(function () {
    var cnpjInput   = document.getElementById('reg_cnpj');
    var nameInput   = document.getElementById('company_name');
    var ufSelect    = document.getElementById('reg_uf');
    var btnBuscar   = document.getElementById('btn-buscar');
    var btnLabel    = document.getElementById('btn-label');
    var spinner     = document.getElementById('spinner');
    var statusEl    = document.getElementById('lookup-status');
    var lastFetched = '';
    var autoTimer   = null;

    function onlyDigits(v) { return v.replace(/\D/g, ''); }

    function formatCnpj(digits) {
        if (digits.length <= 2)  return digits;
        if (digits.length <= 5)  return digits.slice(0,2)+'.'+digits.slice(2);
        if (digits.length <= 8)  return digits.slice(0,2)+'.'+digits.slice(2,5)+'.'+digits.slice(5);
        if (digits.length <= 12) return digits.slice(0,2)+'.'+digits.slice(2,5)+'.'+digits.slice(5,8)+'/'+digits.slice(8);
        return digits.slice(0,2)+'.'+digits.slice(2,5)+'.'+digits.slice(5,8)+'/'+digits.slice(8,12)+'-'+digits.slice(12,14);
    }

    function setStatus(msg, type) {
        statusEl.innerHTML = msg;
        statusEl.className = 'lookup-status ' + (type || '');
    }

    function setLoading(on) {
        btnBuscar.disabled = on;
        spinner.style.display = on ? 'block' : 'none';
        btnLabel.textContent  = on ? 'Consultando...' : 'Buscar CNPJ';
    }

    function fillField(el, val) {
        if (!el || !val) return;
        el.value = val;
        el.classList.add('filled');
    }

    async function doLookup(digits) {
        if (digits.length !== 14) {
            setStatus('Digite um CNPJ completo (14 dígitos).', 'err');
            return;
        }
        if (digits === lastFetched) {
            setStatus('✓ Dados já carregados.', 'ok');
            return;
        }

        lastFetched = digits;
        setLoading(true);
        setStatus('<span style="display:inline-flex;align-items:center;gap:5px"><svg style="animation:spin .7s linear infinite" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" stroke-opacity=".3"/><path d="M21 12a9 9 0 0 0-9-9"/></svg>Consultando Receita Federal...</span>', 'load');

        try {
            var res = await fetch('/cnpj/' + digits);

            var json = await res.json();

            if (!res.ok) {
                setStatus('✗ ' + (json.error || 'CNPJ não encontrado.'), 'err');
                lastFetched = '';
                setLoading(false);
                return;
            }

            fillField(nameInput, json.razao_social);
            if (ufSelect && json.uf) ufSelect.value = json.uf;

            setStatus('✓ Dados preenchidos automaticamente pela Receita Federal.', 'ok');
        } catch (e) {
            setStatus('✗ Erro de conexão. Preencha os dados manualmente.', 'err');
            lastFetched = '';
        }

        setLoading(false);
    }

    // Formata ao digitar e dispara busca automática quando completa 14 dígitos
    cnpjInput.addEventListener('input', function () {
        var digits = onlyDigits(this.value);
        this.value = formatCnpj(digits.slice(0, 14));

        if (digits.length < 14) {
            statusEl.textContent = '';
            lastFetched = '';
            clearTimeout(autoTimer);
            return;
        }

        // Busca automática com pequeno delay para não disparar na cola
        clearTimeout(autoTimer);
        autoTimer = setTimeout(function () {
            doLookup(digits.slice(0, 14));
        }, 400);
    });

    // Busca ao apertar Enter dentro do campo
    cnpjInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            clearTimeout(autoTimer);
            doLookup(onlyDigits(this.value).slice(0, 14));
        }
    });

    // Botão manual
    window.lookupCnpj = function () {
        clearTimeout(autoTimer);
        doLookup(onlyDigits(cnpjInput.value).slice(0, 14));
    };
})();
</script>
@endpush
@endsection