{{-- Görüşmeci Ekle Modal (Partial) --}}
<div id="gorusmeci-modal"
     style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:99999; align-items:center; justify-content:center; background:rgba(0,0,0,0.45);">

    {{-- Modal --}}
    <div style="position:relative; background:white; border-radius:1rem; box-shadow:0 20px 60px rgba(0,0,0,0.2); width:100%; max-width:30rem; margin:0 1rem; z-index:1; max-height:90vh; overflow-y:auto;">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 sticky top-0 bg-white z-10">
            <h2 class="text-base font-semibold text-gray-800">Görüşmeci Ekle</h2>
            <button id="btnCloseGorusmeci" class="text-gray-400 hover:text-gray-600 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        {{-- Mod Seçici --}}
        <div class="px-6 pt-5">
            <div class="flex rounded-lg border border-gray-200 overflow-hidden mb-5">
                <button type="button" id="tab-existing"
                        data-gorusmeci-tab="existing"
                        class="flex-1 py-2 text-sm font-medium transition-colors bg-primary text-white">
                    Mevcut Kullanıcı
                </button>
                <button type="button" id="tab-new"
                        data-gorusmeci-tab="new"
                        class="flex-1 py-2 text-sm font-medium transition-colors bg-white text-gray-600 border-l border-gray-200">
                    Yeni Kullanıcı Oluştur
                </button>
            </div>
        </div>

        {{-- Mevcut Kullanıcı Formu --}}
        <div id="form-existing">
            @php
                $existingInterviewers = $allUsers->filter(fn($u) => $u->hasPermissionTo('manage interviews'));
                $nonInterviewers      = $allUsers->reject(fn($u) => $u->hasPermissionTo('manage interviews'));
            @endphp

            <div class="px-6 pb-6 space-y-4">

                {{-- Yetki Verilecek Kullanıcı --}}
                <form method="POST" action="{{ route('admin.gorusmeci.store') }}" class="space-y-3">
                    @csrf
                    <input type="hidden" name="mode" value="existing">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Görüşmeci Yetkisi Ver <span class="text-red-500">*</span></label>
                        @if($nonInterviewers->isEmpty())
                            <p class="text-xs text-gray-400 italic py-2">Tüm kullanıcılar zaten görüşmeci yetkisine sahip.</p>
                        @else
                            <select name="existing_user_id" required
                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                                <option value="">— Kullanıcı seçin —</option>
                                @foreach($nonInterviewers as $u)
                                <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->email }})</option>
                                @endforeach
                            </select>
                            <p class="text-xs text-gray-400 mt-1">Seçilen kullanıcıya görüşmeci yetkisi verilecek.</p>
                            <div class="flex gap-2 pt-1">
                                <button type="button" data-close-gorusmeci
                                        class="flex-1 border border-gray-300 text-gray-600 px-4 py-2 rounded-lg text-sm hover:bg-gray-50 transition-colors">İptal</button>
                                <button type="submit"
                                        class="flex-1 bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors">Yetki Ver</button>
                            </div>
                        @endif
                    </div>
                </form>

                {{-- Mevcut Görüşmeciler Listesi --}}
                @if($existingInterviewers->isNotEmpty())
                <div class="pt-3 border-t border-gray-100">
                    <p class="text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wide">Mevcut Görüşmeciler</p>
                    <div class="space-y-2">
                        @foreach($existingInterviewers as $u)
                        <div class="flex items-center gap-3 bg-green-50 border border-green-100 rounded-lg px-3 py-2">
                            <div class="w-7 h-7 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                                {{ strtoupper(substr($u->name, 0, 1)) }}
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-800 truncate">{{ $u->name }}</p>
                                <p class="text-xs text-gray-400 truncate">{{ $u->email }}</p>
                            </div>
                            <span class="flex-shrink-0 inline-flex items-center gap-1 bg-green-100 text-green-700 text-xs font-medium px-2 py-0.5 rounded-full">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                                Görüşmeci
                            </span>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>
        </div>

        {{-- Yeni Kullanıcı Formu --}}
        <div id="form-new" class="hidden">
            <form id="newUserForm" method="POST" action="{{ route('admin.gorusmeci.store') }}" class="px-6 pb-6 space-y-4">
                @csrf
                <input type="hidden" name="mode" value="new">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Ad Soyad <span class="text-red-500">*</span></label>
                    <input type="text" name="name" required placeholder="Ahmet Yılmaz"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">E-posta <span class="text-red-500">*</span></label>
                    <input type="email" name="email" required placeholder="ahmet@sirket.com"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Şifre <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="password" name="password" id="modalPasswordField" required placeholder="En az 8 karakter"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <button type="button" data-toggle-pwd="modalPasswordField"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </button>
                    </div>
                    {{-- Güvenlik Göstergesi --}}
                    <div id="modalStrengthBar" class="hidden mt-2">
                        <div class="flex gap-1 mb-1">
                            <div id="modalBar1" class="h-1.5 flex-1 rounded-full bg-gray-200 transition-colors"></div>
                            <div id="modalBar2" class="h-1.5 flex-1 rounded-full bg-gray-200 transition-colors"></div>
                            <div id="modalBar3" class="h-1.5 flex-1 rounded-full bg-gray-200 transition-colors"></div>
                        </div>
                        <p id="modalStrengthLabel" class="text-xs text-gray-400"></p>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">Şifre Tekrar <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="password" name="password_confirmation" id="modalPasswordConfirmField" required placeholder="Şifreyi tekrar girin"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <button type="button" data-toggle-pwd="modalPasswordConfirmField"
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </button>
                    </div>
                </div>
                <p class="text-xs text-gray-400">Yeni kullanıcı oluşturulacak ve otomatik olarak görüşmeci yetkisi verilecek.</p>
                <div class="flex gap-2 pt-1">
                    <button type="button" data-close-gorusmeci
                            class="flex-1 border border-gray-300 text-gray-600 px-4 py-2 rounded-lg text-sm hover:bg-gray-50 transition-colors">İptal</button>
                    <button type="submit" id="modalSubmitBtn"
                            class="flex-1 bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-orange-600 transition-colors">Oluştur & Ekle</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script nonce="{{ app('csp-nonce') }}">
(function () {
    var modal = document.getElementById('gorusmeci-modal');

    // ── Modal aç/kapat ────────────────────────────────────────────────────────
    function openGorusmeciModal() {
        var rm = document.getElementById('rescheduleModal');
        if (rm) rm.style.display = 'none';
        modal.style.display = 'flex';
    }
    function closeGorusmeciModal() {
        modal.style.display = 'none';
    }

    // Global erişim için (index.blade.php'deki btnGorusmeci listener'ı kullanır)
    window.openGorusmeciModal  = openGorusmeciModal;
    window.closeGorusmeciModal = closeGorusmeciModal;

    // Kapat butonu (X)
    var btnClose = document.getElementById('btnCloseGorusmeci');
    if (btnClose) btnClose.addEventListener('click', closeGorusmeciModal);

    // "İptal" butonları (data-close-gorusmeci attribute'u olanlar)
    document.querySelectorAll('[data-close-gorusmeci]').forEach(function (btn) {
        btn.addEventListener('click', closeGorusmeciModal);
    });

    // Modal dışına tıklayınca kapat
    modal.addEventListener('click', function (e) {
        if (e.target === modal) closeGorusmeciModal();
    });

    // ESC tuşu
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeGorusmeciModal();
    });

    // ── Sekme geçişi ──────────────────────────────────────────────────────────
    document.querySelectorAll('[data-gorusmeci-tab]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var tab = btn.getAttribute('data-gorusmeci-tab');
            var isExisting = tab === 'existing';
            document.getElementById('form-existing').classList.toggle('hidden', !isExisting);
            document.getElementById('form-new').classList.toggle('hidden', isExisting);
            document.getElementById('tab-existing').className = 'flex-1 py-2 text-sm font-medium transition-colors ' + (isExisting ? 'bg-primary text-white' : 'bg-white text-gray-600 border-l border-gray-200');
            document.getElementById('tab-new').className = 'flex-1 py-2 text-sm font-medium transition-colors ' + (!isExisting ? 'bg-primary text-white' : 'bg-white text-gray-600 border-l border-gray-200');
        });
    });

    // ── Şifre Göster/Gizle ────────────────────────────────────────────────────
    document.querySelectorAll('[data-toggle-pwd]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var fieldId = btn.getAttribute('data-toggle-pwd');
            var field = document.getElementById(fieldId);
            var isPassword = field.type === 'password';
            field.type = isPassword ? 'text' : 'password';
            btn.innerHTML = isPassword
                ? '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>'
                : '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>';
        });
    });

    // ── Şifre Güvenlik Göstergesi ─────────────────────────────────────────────
    function checkPasswordStrength(val) {
        if (!val) return { score: 0, label: '', color: '' };
        var score = 0;
        if (val.length >= 8) score++;
        if (/[A-Z]/.test(val) && /[a-z]/.test(val)) score++;
        if (/[0-9]/.test(val)) score++;
        if (/[^A-Za-z0-9]/.test(val)) score++;
        if (score <= 1) return { score: 1, label: 'Zayıf — daha güçlü bir şifre kullanın', color: 'red' };
        if (score === 2 || score === 3) return { score: 2, label: 'Orta — büyük/küçük harf, rakam ve özel karakter ekleyin', color: 'yellow' };
        return { score: 3, label: 'Güçlü', color: 'green' };
    }

    var modalPasswordField = document.getElementById('modalPasswordField');
    if (modalPasswordField) {
        modalPasswordField.addEventListener('input', function () {
            var val = this.value;
            var bar   = document.getElementById('modalStrengthBar');
            var label = document.getElementById('modalStrengthLabel');
            var b1    = document.getElementById('modalBar1');
            var b2    = document.getElementById('modalBar2');
            var b3    = document.getElementById('modalBar3');

            if (!val) { bar.classList.add('hidden'); return; }
            bar.classList.remove('hidden');

            var result = checkPasswordStrength(val);
            var colors = { red: 'bg-red-400', yellow: 'bg-yellow-400', green: 'bg-green-500' };
            var c = colors[result.color] || 'bg-gray-200';

            b1.className = 'h-1.5 flex-1 rounded-full transition-colors ' + c;
            b2.className = 'h-1.5 flex-1 rounded-full transition-colors ' + (result.score >= 2 ? c : 'bg-gray-200');
            b3.className = 'h-1.5 flex-1 rounded-full transition-colors ' + (result.score >= 3 ? c : 'bg-gray-200');

            var textColors = { red: 'text-red-500', yellow: 'text-yellow-600', green: 'text-green-600' };
            label.className = 'text-xs ' + (textColors[result.color] || 'text-gray-400');
            label.textContent = result.label;
        });
    }

    // ── Form submit doğrulama ─────────────────────────────────────────────────
    var newUserForm = document.getElementById('newUserForm');
    if (newUserForm) {
        newUserForm.addEventListener('submit', function (e) {
            var pwd = document.getElementById('modalPasswordField').value;
            var result = checkPasswordStrength(pwd);
            if (result.score < 3) {
                e.preventDefault();
                alert('Lütfen daha güçlü bir şifre belirleyin.\nŞifre en az 8 karakter, büyük/küçük harf, rakam ve özel karakter içermelidir.');
            }
        });
    }
})();
</script>
