@php
    $countFields = [
        ['name' => 'doctors',       'label' => 'Doctors',       'default' => 3, 'min' => 1],
        ['name' => 'nurses',        'label' => 'Nurses',        'default' => 2, 'min' => 0],
        ['name' => 'receptionists', 'label' => 'Receptionists', 'default' => 1, 'min' => 0],
        ['name' => 'accounting',    'label' => 'Accounting',    'default' => 1, 'min' => 0],
        ['name' => 'hr',            'label' => 'HR',            'default' => 0, 'min' => 0],
    ];
@endphp
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Start your VetOne demo</title>
    <style>
        :root { --brand:#0d9488; --brand-d:#0f766e; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f1f5f9; }
        * { box-sizing:border-box; }
        body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
        .wrap { max-width:920px; margin:0 auto; padding:32px 20px 64px; }
        .head { text-align:center; margin-bottom:24px; }
        .head h1 { margin:8px 0 4px; font-size:28px; }
        .head p { margin:0; color:var(--muted); }
        .badge { display:inline-block; background:#ccfbf1; color:var(--brand-d); font-weight:600; font-size:12px; padding:4px 10px; border-radius:999px; }
        form { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
        .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
        .full { grid-column:1 / -1; }
        fieldset { border:none; padding:0; margin:0 0 8px; }
        legend { font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:20px 0 8px; }
        label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
        .req::after { content:" *"; color:#e11d48; }
        input[type=text], input[type=email], input[type=password], input[type=number], input[type=url] {
            width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:#fff;
        }
        input:focus { outline:2px solid var(--brand); border-color:var(--brand); }
        .hint { font-size:12px; color:var(--muted); margin-top:4px; }
        .slug-preview { font-family:ui-monospace,Menlo,monospace; }
        .slug-ok { color:#059669; } .slug-bad { color:#e11d48; }
        .counts { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
        .counts .cell { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; }
        .counts input { text-align:center; }
        .logo-row { display:flex; align-items:center; gap:16px; }
        .logo-prev { width:64px; height:64px; border-radius:12px; border:1px dashed var(--line); object-fit:contain; background:#fff; }
        .btn { display:inline-block; width:100%; background:var(--brand); color:#fff; border:none; padding:14px; border-radius:12px; font-size:16px; font-weight:700; cursor:pointer; margin-top:24px; }
        .btn:hover { background:var(--brand-d); }
        .alert { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px; }
        .err { color:#e11d48; font-size:12px; margin-top:4px; }
        .foot { text-align:center; color:var(--muted); font-size:13px; margin-top:20px; }
        @media (max-width:640px){ .grid,.grid-3{ grid-template-columns:1fr; } .counts{ grid-template-columns:repeat(2,1fr); } }
    </style>
</head>
<body>
<div class="wrap">
    <div class="head">
        <span class="badge">48-hour free demo</span>
        <h1>Start your VetOne clinic demo</h1>
        <p>Fill this in and we'll spin up a fully-branded veterinary clinic in seconds.</p>
    </div>

    @if (session('error'))
        <div class="alert">{{ session('error') }}</div>
    @endif
    @if ($errors->any())
        <div class="alert">Please fix the highlighted fields below.</div>
    @endif

    <form method="POST" action="{{ route('vetone.register.store') }}" enctype="multipart/form-data">
        @csrf

        <fieldset>
            <legend>Clinic</legend>
            <div class="grid">
                <div class="full">
                    <label class="req" for="name">Business name</label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}" required autocomplete="organization">
                    <div class="hint">Your portal address: <span class="slug-preview" id="slugPreview">vetone.app/t/…</span></div>
                    @error('name')<div class="err">{{ $message }}</div>@enderror
                </div>

                <div>
                    <label for="business_logo">Logo</label>
                    <div class="logo-row">
                        <img id="logoPrev" class="logo-prev" alt="logo preview">
                        <input type="file" id="business_logo" name="business_logo" accept="image/*">
                    </div>
                    @error('business_logo')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label for="accent_hex">Brand colour</label>
                    <input type="color" id="accent_hex" name="accent_hex" value="{{ old('accent_hex', '#0d9488') }}" style="width:64px;height:44px;padding:4px;border-radius:10px;border:1px solid var(--line);">
                    <div class="hint">Used across your pet-owner &amp; staff apps.</div>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend>Owner &amp; contact</legend>
            <div class="grid">
                <div>
                    <label class="req" for="owner_first">Owner first name</label>
                    <input type="text" id="owner_first" name="owner_first" value="{{ old('owner_first') }}" required>
                    @error('owner_first')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label for="owner_last">Owner last name</label>
                    <input type="text" id="owner_last" name="owner_last" value="{{ old('owner_last') }}">
                </div>
                <div>
                    <label class="req" for="email">Email (your login)</label>
                    <input type="email" id="email" name="email" value="{{ old('email') }}" required autocomplete="email">
                    @error('email')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="req" for="phone">Phone</label>
                    <input type="text" id="phone" name="phone" value="{{ old('phone') }}" required>
                    @error('phone')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label for="whatsapp">WhatsApp number</label>
                    <input type="text" id="whatsapp" name="whatsapp" value="{{ old('whatsapp') }}">
                    <div class="hint">Used later to connect WhatsApp (optional).</div>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend>Address</legend>
            <div class="grid-3">
                <div>
                    <label class="req" for="country">Country</label>
                    <input type="text" id="country" name="country" value="{{ old('country', 'Egypt') }}" required>
                    @error('country')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label for="state">State / Governorate</label>
                    <input type="text" id="state" name="state" value="{{ old('state') }}">
                </div>
                <div>
                    <label class="req" for="city">City</label>
                    <input type="text" id="city" name="city" value="{{ old('city') }}" required>
                    @error('city')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label for="zip_code">ZIP / Postal</label>
                    <input type="text" id="zip_code" name="zip_code" value="{{ old('zip_code') }}">
                </div>
                <div>
                    <label for="landmark">Landmark / Street</label>
                    <input type="text" id="landmark" name="landmark" value="{{ old('landmark') }}">
                </div>
                <div>
                    <label for="website">Website</label>
                    <input type="url" id="website" name="website" value="{{ old('website') }}" placeholder="https://">
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend>Team size</legend>
            <div class="counts">
                @foreach ($countFields as $cf)
                    <div class="cell">
                        <label for="{{ $cf['name'] }}">{{ $cf['label'] }}</label>
                        <input type="number" id="{{ $cf['name'] }}" name="{{ $cf['name'] }}"
                               min="{{ $cf['min'] }}" max="50"
                               value="{{ old($cf['name'], $cf['default']) }}">
                    </div>
                @endforeach
            </div>
            <div class="hint">We'll create demo logins for each — including {{ old('doctors', 3) }} doctors, each with their own schedule.</div>
        </fieldset>

        <fieldset>
            <legend>Security</legend>
            <div class="grid">
                <div>
                    <label class="req" for="password">Password</label>
                    <input type="password" id="password" name="password" required minlength="6" autocomplete="new-password">
                    @error('password')<div class="err">{{ $message }}</div>@enderror
                </div>
                <div>
                    <label class="req" for="password_confirmation">Confirm password</label>
                    <input type="password" id="password_confirmation" name="password_confirmation" required minlength="6" autocomplete="new-password">
                </div>
            </div>
        </fieldset>

        <button type="submit" class="btn">Create my 48-hour demo →</button>
    </form>

    <div class="foot">
        Powered by TPS · Need help? <a href="mailto:{{ $tps['email'] ?? '' }}">{{ $tps['email'] ?? '' }}</a>
    </div>
</div>

<script>
    // Live logo preview
    document.getElementById('business_logo')?.addEventListener('change', function (e) {
        const f = e.target.files[0];
        if (f) document.getElementById('logoPrev').src = URL.createObjectURL(f);
    });

    // Live slug preview (debounced async check)
    const nameEl = document.getElementById('name');
    const slugEl = document.getElementById('slugPreview');
    const token  = document.querySelector('meta[name=csrf-token]').content;
    let t;
    nameEl?.addEventListener('input', function () {
        clearTimeout(t);
        t = setTimeout(async () => {
            const name = nameEl.value.trim();
            if (!name) { slugEl.textContent = 'vetone.app/t/…'; slugEl.className = 'slug-preview'; return; }
            try {
                const r = await fetch('{{ route('vetone.register.check_slug') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token, 'Accept': 'application/json' },
                    body: JSON.stringify({ name })
                });
                const d = await r.json();
                slugEl.textContent = 'vetone.app/t/' + d.suggested;
                slugEl.className = 'slug-preview ' + (d.available ? 'slug-ok' : 'slug-bad');
            } catch (_) { /* ignore */ }
        }, 350);
    });
</script>
</body>
</html>
