{{--
    Localized first-name editor.

    Renders the editable first_name_ar / first_name_en pair for an
    investor or startup. The columns are normally filled automatically by
    Claude-API transliteration (queued); this panel lets an admin review
    and correct them. A manual save sticks — auto-fill only ever writes
    EMPTY columns, so it never overwrites what's typed here.

    Required variables:
      $subject   — the Investor or Startup model
      $updateUrl — PATCH endpoint (…/first-names) that accepts
                   first_name_ar + first_name_en

    Self-contained: ships its own scoped CSS + JS. Include once per page.
--}}
@php
    $fnAr = (string) ($subject->first_name_ar ?? '');
    $fnEn = (string) ($subject->first_name_en ?? '');
@endphp

<div class="fn-editor" data-fn-editor data-url="{{ $updateUrl }}">
    <h4 class="rd-section__title">
        <svg><use href="#icon-user"/></svg>
        {{ __('admin.first_names.label') }}
    </h4>
    <p class="fn-editor__hint">{{ __('admin.first_names.hint') }}</p>

    <div class="fn-editor__grid">
        <label class="fn-editor__field">
            <span>{{ __('admin.first_names.ar') }}</span>
            <input type="text" data-fn-ar value="{{ $fnAr }}" dir="rtl"
                   maxlength="255" placeholder="{{ __('admin.first_names.ar_placeholder') }}">
        </label>
        <label class="fn-editor__field">
            <span>{{ __('admin.first_names.en') }}</span>
            <input type="text" data-fn-en value="{{ $fnEn }}" dir="ltr"
                   maxlength="255" placeholder="{{ __('admin.first_names.en_placeholder') }}">
        </label>
    </div>

    <div class="fn-editor__actions">
        <button type="button" class="fn-editor__save" data-fn-save>
            {{ __('admin.first_names.save') }}
        </button>
        <span class="fn-editor__status" data-fn-status role="status" aria-live="polite"></span>
    </div>
</div>

<style>
    .fn-editor { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rd-divider); }
    .fn-editor__hint {
        margin: 4px 0 12px;
        font-size: 12px;
        color: var(--rd-faint);
        line-height: 1.5;
    }
    .fn-editor__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    @media (max-width: 540px) { .fn-editor__grid { grid-template-columns: 1fr; } }
    .fn-editor__field { display: flex; flex-direction: column; gap: 5px; }
    .fn-editor__field > span {
        font-size: 11px;
        font-weight: 600;
        color: var(--rd-faint);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .fn-editor__field input {
        padding: 8px 11px;
        border: 1px solid var(--rd-divider);
        border-radius: 9px;
        font-size: 14px;
        color: var(--rd-text);
        background: #fff;
        transition: border-color .15s;
    }
    .fn-editor__field input:focus {
        outline: none;
        border-color: var(--rd-accent, #6366f1);
    }
    .fn-editor__actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
    }
    .fn-editor__save {
        padding: 7px 18px;
        border: 0;
        border-radius: 9px;
        background: var(--rd-accent, #6366f1);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity .15s;
    }
    .fn-editor__save:hover { opacity: .9; }
    .fn-editor__save:disabled { opacity: .55; cursor: default; }
    .fn-editor__status { font-size: 12px; font-weight: 600; }
    .fn-editor__status[data-state="ok"]    { color: var(--rd-ok, #16a34a); }
    .fn-editor__status[data-state="error"] { color: var(--rd-bad, #dc2626); }
</style>

<script>
(() => {
    const el = document.querySelector('[data-fn-editor]');
    if (!el) return;

    const url    = el.dataset.url;
    const csrf   = @json(csrf_token());
    const arIn   = el.querySelector('[data-fn-ar]');
    const enIn   = el.querySelector('[data-fn-en]');
    const saveBt = el.querySelector('[data-fn-save]');
    const status = el.querySelector('[data-fn-status]');

    const setStatus = (msg, state) => {
        status.textContent = msg || '';
        if (state) { status.dataset.state = state; } else { delete status.dataset.state; }
    };

    saveBt.addEventListener('click', async () => {
        saveBt.disabled = true;
        setStatus(@json(__('admin.first_names.saving')), null);
        try {
            const res = await fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type':     'application/json',
                    'Accept':           'application/json',
                    'X-CSRF-TOKEN':     csrf,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    first_name_ar: arIn.value.trim(),
                    first_name_en: enIn.value.trim(),
                }),
            });
            const data = await res.json().catch(() => ({}));
            if (!res.ok || !data.ok) {
                throw new Error(data.message || 'HTTP ' + res.status);
            }
            // Reflect the server-normalised values back into the inputs.
            arIn.value = data.first_name_ar || '';
            enIn.value = data.first_name_en || '';
            setStatus(@json(__('admin.first_names.saved')), 'ok');
        } catch (e) {
            setStatus(@json(__('admin.first_names.save_failed')), 'error');
        } finally {
            saveBt.disabled = false;
        }
    });
})();
</script>