@php
    /**
     * YENİ PERSONEL — drawer içinde açılan oluşturma kartı.
     *
     * Personelin ayrı bir /create sayfası yoktur; kayıt burada AÇILIR, geri kalan
     * onlarca özlük alanı ise kayıt sonrası aynı drawer'da açılan künye kartında
     * (quick-view) doldurulur. Bu yüzden buradaki form BİLEREK kısadır: yalnızca
     * kaydı var edebilmek için gereken alanlar sorulur.
     *
     * İki mod tek kartta:
     *   Yeni personel  — sistemde kullanıcısı olmayan kişi (isteğe bağlı giriş hesabı)
     *   Davet          — sistemde ZATEN kullanıcısı olan birini acenteye ekler
     *
     * Beklenen: $roles
     */
    $store = route('agency.staff-management.staff.store');
@endphp

<x-quick-view.layout class="qv-theme-staff stfc-wrap">
    <x-quick-view.header :slim="true">
        <x-slot:title>Yeni Personel</x-slot:title>
        <x-slot:subtitle>
            <span class="text-muted small fw-600">
                Kaydı açtıktan sonra künye kartı açılır; kalan alanları orada doldurabilirsiniz.
            </span>
        </x-slot:subtitle>
    </x-quick-view.header>

    <x-quick-view.content>
        <div class="p-4">
            {{-- Mod seçimi: iki farklı iş, tek kart. Çipler künye kartının
                 başlık çipleriyle (pfx-chip) aynı dilde. --}}
            <div class="stfc-modes mb-3">
                <button type="button" class="stfc-mode on" data-stfc-mode="create">
                    <i class="fas fa-user-plus"></i> Yeni Personel
                </button>
                <button type="button" class="stfc-mode" data-stfc-mode="invite">
                    <i class="fas fa-envelope-open-text"></i> Mevcut Kullanıcıyı Davet Et
                </button>
            </div>

            <form id="stfc-form" data-url="{{ $store }}" autocomplete="off">
                @csrf
                <input type="hidden" name="action_type" id="stfc-action" value="create_staff">

                {{-- ── MOD: YENİ PERSONEL ── --}}
                <div data-stfc-pane="create">
                    <div class="pfx mb-3">
                        <div class="pfx-top">
                            <span class="pfx-top-t"><i class="fas fa-id-badge"></i> Kimlik ve İletişim</span>
                        </div>
                        <div class="pfx-body">
                            <div class="stfc-grid">
                                <label class="stfc-f">
                                    <span>Ad <b class="stfc-req">*</b></span>
                                    <input type="text" name="first_name" required maxlength="255" placeholder="Ahmet">
                                </label>
                                <label class="stfc-f">
                                    <span>Soyad <b class="stfc-req">*</b></span>
                                    <input type="text" name="last_name" required maxlength="255" placeholder="Yılmaz">
                                </label>
                                <label class="stfc-f">
                                    <span>E-posta</span>
                                    <input type="email" name="email" maxlength="255" placeholder="ornek@acente.com">
                                </label>
                                <label class="stfc-f">
                                    <span>Telefon</span>
                                    <input type="text" name="phone" maxlength="20" placeholder="05XX XXX XX XX">
                                </label>
                                <label class="stfc-f">
                                    <span>Pozisyon</span>
                                    <input type="text" name="position" maxlength="255" placeholder="Örn. Satış Uzmanı">
                                </label>
                                <label class="stfc-f">
                                    <span>İşe Giriş</span>
                                    <input type="date" name="hired_at">
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Giriş hesabı isteğe bağlıdır: sisteme girmeyecek personel
                         (ör. şoför, rehber) de kaydedilebilmeli. --}}
                    <div class="pfx mb-3">
                        <div class="pfx-top">
                            <span class="pfx-top-t"><i class="fas fa-shield-halved"></i> Sistem Girişi</span>
                            <label class="stfc-sw">
                                <input type="checkbox" name="create_login_user" value="1" id="stfc-login">
                                <span class="stfc-sw-t"></span>
                                <span class="stfc-sw-l">Giriş hesabı oluştur</span>
                            </label>
                        </div>
                        <div class="pfx-body" id="stfc-login-fields" hidden>
                            <div class="stfc-grid">
                                <label class="stfc-f stfc-f-wide">
                                    <span>Rol <b class="stfc-req">*</b></span>
                                    <select name="role_id">
                                        <option value="">— Rol seçin —</option>
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->ui_name ?: $role->name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <label class="stfc-f">
                                    <span>Parola <b class="stfc-req">*</b></span>
                                    <input type="password" name="password" minlength="6" autocomplete="new-password" placeholder="En az 6 karakter">
                                </label>
                                <label class="stfc-f">
                                    <span>Parola (tekrar) <b class="stfc-req">*</b></span>
                                    <input type="password" name="password_confirmation" minlength="6" autocomplete="new-password" placeholder="Parolayı yineleyin">
                                </label>
                            </div>
                            <p class="pfx-notes-hint">
                                Giriş hesabı açıldığında personel yukarıdaki e-posta ve parolayla panele girebilir.
                                E-posta alanı bu durumda zorunludur ve sistemde benzersiz olmalıdır.
                            </p>
                        </div>
                    </div>
                </div>

                {{-- ── MOD: DAVET ── --}}
                <div data-stfc-pane="invite" hidden>
                    <div class="pfx mb-3">
                        <div class="pfx-top">
                            <span class="pfx-top-t"><i class="fas fa-envelope-open-text"></i> Kullanıcı Daveti</span>
                        </div>
                        <div class="pfx-body">
                            <div class="stfc-grid">
                                <label class="stfc-f stfc-f-wide">
                                    <span>Kullanıcının E-postası <b class="stfc-req">*</b></span>
                                    <input type="email" name="invite_email" maxlength="255" placeholder="Sistemde kayıtlı e-posta adresi">
                                </label>
                                <label class="stfc-f">
                                    <span>Rol <b class="stfc-req">*</b></span>
                                    <select name="invite_role_id">
                                        <option value="">— Rol seçin —</option>
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->ui_name ?: $role->name }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <label class="stfc-f">
                                    <span>Pozisyon</span>
                                    <input type="text" name="invite_position" maxlength="255" placeholder="Örn. Operasyon Sorumlusu">
                                </label>
                            </div>
                            <p class="pfx-notes-hint">
                                Davet yalnızca <b>sistemde zaten hesabı olan</b> kullanıcılar içindir.
                                Hesabı olmayan biri için "Yeni Personel" sekmesini kullanın.
                            </p>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </x-quick-view.content>

    <x-quick-view.footer>
        <div class="text-muted small" id="stfc-hint">
            <i class="fas fa-circle-info me-1"></i> Zorunlu alanlar <b class="stfc-req">*</b> ile işaretlidir.
        </div>
        <div class="d-flex gap-3">
            <button type="button" class="btn btn-secondary-glass" onclick="closeQuickView()">Vazgeç</button>
            <button type="button" class="btn btn-primary" id="stfc-save" style="border-radius:12px;font-weight:800;">
                <i class="fas fa-check me-2"></i> <span>Kaydet ve Kartı Aç</span>
            </button>
        </div>
    </x-quick-view.footer>
</x-quick-view.layout>

{{-- Künye satır stilini ve pfx kabuğunu buradan da kullanıyoruz --}}
@include('components.quick-view.ledger-ui')

<style>
    /* Mod çipleri — künye başlık çipiyle (pfx-chip) aynı dil */
    .stfc-modes { display: flex; gap: .4rem; flex-wrap: wrap; }
    .stfc-mode {
        display: inline-flex; align-items: center; gap: 6px;
        border: 1px solid #e2e8f0; background: #fff; color: #64748b;
        border-radius: 9px; padding: 6px 12px; cursor: pointer;
        font: inherit; font-size: .74rem; font-weight: 700;
        transition: border-color .14s, color .14s, background .14s;
    }
    .stfc-mode:hover { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
    .stfc-mode i { font-size: .7rem; color: #c3cddc; }
    .stfc-mode.on { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
    .stfc-mode.on i { color: #2563eb; }

    /* Alanlar defter diliyle: okuma hâlinde çerçevesiz, odakta mavi halka */
    .stfc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .55rem .7rem; }
    .stfc-f { display: flex; flex-direction: column; gap: 2px; margin: 0; }
    .stfc-f-wide { grid-column: span 2; }
    @media (max-width: 640px) { .stfc-f-wide { grid-column: span 1; } }
    .stfc-f > span { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9aa7bb; }
    .stfc-req { color: #dc2626; font-weight: 800; }
    .stfc-f input, .stfc-f select {
        width: 100%; border: 1.5px solid transparent; background: transparent;
        border-radius: 7px; padding: .28rem .42rem;
        font: inherit; font-size: .815rem; font-weight: 650; color: #0f172a; line-height: 1.35;
        transition: border-color .13s, box-shadow .13s, background .13s;
    }
    .stfc-f input::placeholder { color: #c3cddc; font-weight: 500; font-style: italic; }
    .stfc-f input:hover, .stfc-f select:hover { background: #fff; border-color: #dbe6f7; }
    .stfc-f input:focus, .stfc-f select:focus { outline: none; background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
    /* Sunucudan dönen alan hatası: satır kırmızıya döner */
    .stfc-f.err input, .stfc-f.err select { border-color: #f87171; background: #fef2f2; }
    .stfc-f-msg { font-size: .68rem; font-weight: 650; color: #dc2626; }

    /* Giriş hesabı anahtarı */
    .stfc-sw { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin: 0; }
    .stfc-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
    .stfc-sw-t { width: 30px; height: 17px; border-radius: 20px; background: #e2e8f0; position: relative; transition: background .16s; flex: none; }
    .stfc-sw-t::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .16s; }
    .stfc-sw input:checked + .stfc-sw-t { background: #2563eb; }
    .stfc-sw input:checked + .stfc-sw-t::after { transform: translateX(13px); }
    .stfc-sw input:focus-visible + .stfc-sw-t { box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
    .stfc-sw-l { font-size: .68rem; font-weight: 700; color: #94a3b8; }
    .stfc-sw input:checked ~ .stfc-sw-l { color: #1d4ed8; }
</style>

<script>
(function initStaffQuickCreate() {
    // Kart drawer'a AJAX ile enjekte edildiği için document.currentScript
    // güvenilir değil; kökü formun kendisinden buluyoruz.
    const form = document.getElementById('stfc-form');
    if (!form || form.dataset.ready) return;
    form.dataset.ready = '1';

    const root = form.closest('.qv-card-wrapper') || form.closest('.qv-wrapper') || document;
    const save = root.querySelector('#stfc-save');
    const action = root.querySelector('#stfc-action');
    const loginChk = root.querySelector('#stfc-login');
    const loginFields = root.querySelector('#stfc-login-fields');
    if (!save || !action || !loginChk || !loginFields) return;
    const CSRF = () => (document.querySelector('meta[name="csrf-token"]') || {}).content;

    /** Sunucudan dönen alan hatalarını temizler. */
    function clearErrors() {
        form.querySelectorAll('.stfc-f.err').forEach(f => f.classList.remove('err'));
        form.querySelectorAll('.stfc-f-msg').forEach(m => m.remove());
    }

    /** Laravel'in {alan: [mesaj]} yapısını ilgili alanın altına yazar. */
    function showErrors(errors) {
        Object.entries(errors || {}).forEach(([name, msgs]) => {
            const el = form.querySelector('[name="' + name + '"]');
            const wrap = el && el.closest('.stfc-f');
            if (!wrap) return;
            wrap.classList.add('err');
            const p = document.createElement('span');
            p.className = 'stfc-f-msg';
            p.textContent = Array.isArray(msgs) ? msgs[0] : String(msgs);
            wrap.appendChild(p);
        });
        const first = form.querySelector('.stfc-f.err input, .stfc-f.err select');
        if (first) first.focus();
    }

    // Mod değişimi: gizlenen panelin alanları gönderilmesin diye disabled edilir,
    // aksi halde "Yeni Personel" modunda boş invite_email de sunucuya giderdi.
    root.querySelectorAll('[data-stfc-mode]').forEach(btn => {
        btn.addEventListener('click', () => {
            const mode = btn.dataset.stfcMode;
            root.querySelectorAll('[data-stfc-mode]').forEach(b => b.classList.toggle('on', b === btn));
            root.querySelectorAll('[data-stfc-pane]').forEach(pane => {
                const on = pane.dataset.stfcPane === mode;
                pane.hidden = !on;
                pane.querySelectorAll('input, select').forEach(el => { el.disabled = !on; });
            });
            action.value = mode === 'invite' ? 'invite' : 'create_staff';
            clearErrors();
        });
    });

    // Giriş hesabı alanları yalnızca anahtar açıkken gönderilir
    const syncLogin = () => {
        const on = loginChk.checked;
        loginFields.hidden = !on;
        loginFields.querySelectorAll('input, select').forEach(el => { el.disabled = !on; });
    };
    loginChk.addEventListener('change', syncLogin);
    syncLogin();

    save.addEventListener('click', () => {
        clearErrors();
        // Tarayıcının kendi zorunluluk denetimi (required) önce çalışsın
        if (!form.reportValidity()) return;

        const label = save.querySelector('span');
        const old = label.textContent;
        save.disabled = true;
        label.textContent = 'Kaydediliyor…';

        fetch(form.dataset.url, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF(), 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            body: new FormData(form),
        })
        .then(r => r.json().then(d => ({ ok: r.ok, status: r.status, d: d || {} })))
        .then(res => {
            save.disabled = false;
            label.textContent = old;

            if (res.status === 422 && res.d.errors) { showErrors(res.d.errors); return; }
            if (!res.ok || res.d.success === false) throw new Error(res.d.message || 'Kaydedilemedi');

            if (typeof Swal !== 'undefined') {
                Swal.fire({ icon: 'success', title: 'Kaydedildi', text: res.d.message, toast: true,
                            position: 'top-end', showConfirmButton: false, timer: 2000 });
            }

            // Kayıt açıldıysa künye kartına geçilir; davet gönderildiyse
            // açılacak bir kart yok, liste tazelenir.
            if (res.d.quick_view_url && typeof openQuickView === 'function') {
                openQuickView(res.d.quick_view_url);
            } else {
                if (typeof closeQuickView === 'function') closeQuickView();
                window.location.reload();
            }
        })
        .catch(err => {
            save.disabled = false;
            label.textContent = old;
            if (typeof Swal !== 'undefined') Swal.fire('Hata', err.message || 'Kaydedilemedi', 'error');
        });
    });
})();
</script>