<div class="d-flex justify-content-between align-items-center tw-mb-8 flex-wrap tw-gap-4">
    <div>
        <h3 class="tw-font-black tw-text-2xl tw-text-gray-900 tw-mb-1 tw-tracking-tight">Danışman Yönetimi</h3>
        <p class="tw-text-gray-500 tw-text-sm tw-font-medium tw-mb-0">Gayrimenkul portföyünüzü yöneten yetkili ekibinizi buradan kontrol edin.</p>
    </div>
    <button type="button" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-rounded-xl tw-font-bold tw-shadow-lg tw-shadow-blue-500/30 tw-transition-all hover:tw--translate-y-0.5 tw-px-6 tw-py-2.5 d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#addUserModal">
        <i class="fa-solid fa-user-plus tw-mr-2"></i> Yeni Danışman Ekle
    </button>
</div>

<div class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-[2rem] tw-shadow-sm tw-overflow-hidden">
    
    <div class="tw-p-6 tw-px-8 tw-border-b tw-border-gray-50 d-flex flex-wrap justify-content-between align-items-center tw-gap-4">
        <div class="d-flex align-items-center">
            <div class="tw-w-10 tw-h-10 tw-bg-blue-50 tw-text-blue-600 tw-rounded-xl d-flex align-items-center justify-content-center tw-mr-4">
                <i class="fa-solid fa-user-tie"></i>
            </div>
            <div>
                <h6 class="tw-font-black tw-text-lg tw-text-gray-800 mb-0">Personel Listesi</h6>
                <p class="tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-0">Toplam <?php echo count($users ?? []); ?> Kayıt</p>
            </div>
        </div>
        
        <div class="tw-relative tw-w-full md:tw-w-72">
            <span class="tw-absolute tw-inset-y-0 tw-left-0 tw-flex tw-items-center tw-pl-4 tw-text-gray-400">
                <i class="fa-solid fa-magnifying-glass tw-text-sm"></i>
            </span>
            <input type="text" id="userSearchInput" class="form-control tw-bg-gray-50 tw-border-0 tw-pl-11 tw-py-2.5 tw-rounded-xl tw-text-sm tw-font-medium focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 tw-transition-all shadow-none" placeholder="İsim veya e-posta ile ara...">
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 tw-border-transparent">
            <thead>
                <tr>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-pl-8 tw-border-b-2 tw-border-gray-50">Danışman Bilgisi</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-border-b-2 tw-border-gray-50">İletişim Kanalları</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-border-b-2 tw-border-gray-50">Sistem Bilgisi</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-border-b-2 tw-border-gray-50">Durum</th>
                    <th class="tw-bg-transparent tw-text-gray-400 tw-text-[10px] tw-font-black tw-uppercase tw-tracking-[0.2em] tw-py-5 tw-pr-8 tw-border-b-2 tw-border-gray-50 text-end">İşlemler</th>
                </tr>
            </thead>
            <tbody class="tw-divide-y tw-divide-gray-50">
                <?php if(!empty($users)): ?>
                    <?php foreach($users as $user): ?>
                    <tr class="hover:tw-bg-gray-50/50 tw-transition-colors">
                        <td class="tw-pl-8 tw-py-4">
                            <div class="d-flex align-items-center">
                                <div class="tw-w-12 tw-h-12 tw-rounded-2xl tw-bg-gradient-to-br tw-from-blue-600 tw-to-indigo-700 tw-text-white d-flex align-items-center justify-content-center tw-mr-4 tw-font-black tw-text-xl tw-shadow-lg tw-shadow-blue-500/20 tw-flex-shrink-0">
                                    <?php echo strtoupper(mb_substr($user->name, 0, 1, 'UTF-8')); ?>
                                </div>
                                <div class="tw-overflow-hidden">
                                    <h6 class="tw-font-black tw-text-gray-900 tw-text-base tw-mb-0.5 tw-truncate"><?php echo htmlspecialchars($user->name); ?></h6>
                                    <div class="tw-text-[10px] tw-font-bold tw-text-blue-500 tw-uppercase tw-tracking-widest">Gayrimenkul Danışmanı</div>
                                </div>
                            </div>
                        </td>

                        <td>
                            <div class="tw-flex tw-flex-col tw-gap-1">
                                <a href="mailto:<?php echo $user->email; ?>" class="tw-text-xs tw-font-bold tw-text-gray-500 hover:tw-text-blue-600 text-decoration-none d-flex align-items-center tw-transition-colors">
                                    <i class="fa-regular fa-envelope tw-w-4 tw-mr-1.5 tw-text-blue-400"></i> <?php echo htmlspecialchars($user->email); ?>
                                </a>
                                <a href="tel:<?php echo $user->phone; ?>" class="tw-text-xs tw-font-bold tw-text-gray-500 hover:tw-text-emerald-500 text-decoration-none d-flex align-items-center tw-transition-colors">
                                    <i class="fa-solid fa-phone tw-w-4 tw-mr-1.5 tw-text-emerald-400"></i> <?php echo htmlspecialchars($user->phone); ?>
                                </a>
                            </div>
                        </td>

                        <td>
                            <div class="d-flex align-items-center tw-bg-gray-50 tw-rounded-lg tw-px-3 tw-py-1.5 tw-w-fit tw-border tw-border-gray-100">
                                <code class="tw-text-xs tw-font-bold tw-text-gray-600 tw-mr-3">••••••</code>
                                <button class="btn btn-link p-0 tw-text-blue-400 hover:tw-text-blue-600 tw-transition-colors" onclick="copyToClipboard('<?php echo $user->password; ?>')" title="Şifreyi Kopyala">
                                    <i class="fa-regular fa-copy"></i>
                                </button>
                            </div>
                        </td>

                        <td>
                            <div class="d-flex align-items-center">
                                <div class="tw-w-2.5 tw-h-2.5 tw-bg-emerald-500 tw-rounded-full tw-mr-2 tw-shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
                                <span class="tw-text-[10px] tw-font-black tw-text-gray-600 tw-uppercase tw-tracking-widest">Aktif Personel</span>
                            </div>
                            <div class="tw-text-[10px] tw-font-bold tw-text-gray-400 tw-mt-1 tw-pl-4">
                                <?php echo date('d.m.Y', strtotime($user->created_at)); ?>
                            </div>
                        </td>

                        <td class="text-end tw-pr-8">
                            <a href="<?php echo BASE_URL; ?>/admin/user_delete/<?php echo $user->id; ?>" 
                               class="tw-w-9 tw-h-9 tw-bg-rose-50 tw-text-rose-500 hover:tw-bg-rose-500 hover:tw-text-white tw-rounded-xl d-inline-flex align-items-center justify-content-center tw-transition-all tw-border-0"
                               onclick="return confirm('DİKKAT: Bu danışmanı silerseniz, sisteme eklediği tüm ilanlar da silinebilir. Devam etmek istiyor musunuz?');"
                               title="Danışmanı Sil">
                                <i class="fa-solid fa-trash-can tw-text-sm"></i>
                            </a>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="5" class="text-center tw-py-20">
                            <div class="tw-w-20 tw-h-20 tw-bg-gray-50 tw-rounded-full d-flex align-items-center justify-content-center tw-mx-auto tw-mb-4">
                                <i class="fa-solid fa-users-slash tw-text-3xl tw-text-gray-300"></i>
                            </div>
                            <h6 class="tw-font-black tw-text-gray-800 tw-text-lg">Henüz danışman eklenmemiş.</h6>
                            <p class="tw-text-gray-400 tw-font-medium tw-text-sm">Ekibinizi oluşturmak için ilk danışman kaydını ekleyin.</p>
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="addUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content tw-border-0 tw-shadow-2xl tw-rounded-[2.5rem] tw-overflow-hidden">
            
            <div class="tw-p-8 tw-bg-gradient-to-br tw-from-blue-600 tw-to-indigo-800 tw-text-white tw-relative">
                <div class="tw-absolute tw-inset-0 tw-opacity-10 tw-bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
                <div class="d-flex justify-content-between align-items-start tw-relative tw-z-10">
                    <div>
                        <h4 class="tw-font-black tw-text-2xl tw-mb-1 tw-tracking-tight">Yeni Kayıt</h4>
                        <p class="tw-text-blue-100 tw-text-xs tw-font-bold tw-uppercase tw-tracking-widest tw-mb-0">Danışman Bilgileri</p>
                    </div>
                    <button type="button" class="btn-close btn-close-white shadow-none" data-bs-dismiss="modal"></button>
                </div>
            </div>
            
            <form action="<?php echo BASE_URL; ?>/admin/user_add" method="POST">
                <div class="modal-body tw-p-8 md:tw-p-10">
                    
                    <div class="tw-mb-8">
                        <label class="tw-text-[11px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-4 tw-block tw-px-1">KİŞİSEL BİLGİLER</label>
                        <div class="tw-space-y-4">
                            
                            <div class="tw-group">
                                <div class="tw-relative tw-flex tw-items-center">
                                    <div class="tw-absolute tw-left-4 tw-flex tw-items-center tw-pointer-events-none tw-z-20">
                                        <i class="fa-regular fa-user tw-text-gray-400 group-focus-within:tw-text-blue-500 tw-transition-colors"></i>
                                    </div>
                                    <input type="text" name="name" 
                                        class="tw-block tw-w-full tw-pl-12 tw-pr-4 tw-py-4 tw-bg-gray-50 tw-border tw-border-gray-100 tw-rounded-2xl tw-text-sm tw-font-bold tw-text-gray-800 focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-relative tw-z-10" 
                                        placeholder="Adı Soyadı" required>
                                </div>
                            </div>

                            <div class="tw-group">
                                <div class="tw-relative tw-flex tw-items-center">
                                    <div class="tw-absolute tw-left-4 tw-flex tw-items-center tw-pointer-events-none tw-z-20">
                                        <i class="fa-solid fa-phone tw-text-gray-400 group-focus-within:tw-text-blue-500 tw-transition-colors"></i>
                                    </div>
                                    <input type="text" name="phone" 
                                        class="tw-block tw-w-full tw-pl-12 tw-pr-4 tw-py-4 tw-bg-gray-50 tw-border tw-border-gray-100 tw-rounded-2xl tw-text-sm tw-font-bold tw-text-gray-800 focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-relative tw-z-10" 
                                        placeholder="Telefon (05XX...)">
                                </div>
                            </div>
                            
                        </div>
                    </div>

                    <div class="tw-mb-2">
                        <label class="tw-text-[11px] tw-font-black tw-text-gray-400 tw-uppercase tw-tracking-widest tw-mb-4 tw-block tw-px-1">GİRİŞ YETKİLERİ</label>
                        <div class="tw-space-y-4">
                            
                            <div class="tw-group">
                                <div class="tw-relative tw-flex tw-items-center">
                                    <div class="tw-absolute tw-left-4 tw-flex tw-items-center tw-pointer-events-none tw-z-20">
                                        <i class="fa-regular fa-envelope tw-text-gray-400 group-focus-within:tw-text-blue-500 tw-transition-colors"></i>
                                    </div>
                                    <input type="email" name="email" 
                                        class="tw-block tw-w-full tw-pl-12 tw-pr-4 tw-py-4 tw-bg-gray-50 tw-border tw-border-gray-100 tw-rounded-2xl tw-text-sm tw-font-bold tw-text-gray-800 focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-relative tw-z-10" 
                                        placeholder="E-Posta Adresi" required>
                                </div>
                            </div>

                            <div class="tw-group">
                                <div class="tw-relative tw-flex tw-items-center">
                                    <div class="tw-absolute tw-left-4 tw-flex tw-items-center tw-pointer-events-none tw-z-20">
                                        <i class="fa-solid fa-key tw-text-gray-400 group-focus-within:tw-text-blue-500 tw-transition-colors"></i>
                                    </div>
                                    <input type="text" name="password" 
                                        class="tw-block tw-w-full tw-pl-12 tw-pr-4 tw-py-4 tw-bg-gray-50 tw-border tw-border-gray-100 tw-rounded-2xl tw-text-sm tw-font-bold tw-text-gray-800 focus:tw-outline-none focus:tw-bg-white focus:tw-ring-4 focus:tw-ring-blue-50 focus:tw-border-blue-300 tw-transition-all tw-relative tw-z-10" 
                                        value="123456" required>
                                </div>
                            </div>

                        </div>
                        
                        <div class="tw-bg-blue-50/50 tw-p-4 tw-rounded-2xl tw-mt-6 d-flex align-items-center tw-border tw-border-blue-100">
                            <i class="fa-solid fa-circle-info tw-text-blue-500 tw-mr-3 tw-text-lg"></i>
                            <span class="tw-text-[10px] tw-font-black tw-text-blue-700 tw-uppercase tw-tracking-wider">Yeni personel için varsayılan şifre atanmıştır.</span>
                        </div>
                    </div>

                </div>
                
                <div class="tw-p-8 tw-pt-0 d-flex tw-gap-4">
                    <button type="button" class="btn tw-bg-gray-100 hover:tw-bg-gray-200 tw-text-gray-600 tw-font-black tw-text-xs tw-uppercase tw-tracking-widest tw-py-4 tw-px-6 tw-rounded-2xl tw-flex-1 tw-transition-all" data-bs-dismiss="modal">Vazgeç</button>
                    <button type="submit" class="btn tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-font-black tw-text-xs tw-uppercase tw-tracking-widest tw-py-4 tw-px-6 tw-rounded-2xl tw-flex-1 tw-shadow-xl tw-shadow-blue-500/30 tw-transition-all hover:tw--translate-y-1">Sisteme Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        const btn = event.currentTarget;
        const originalIcon = btn.innerHTML;
        btn.innerHTML = '<i class="fa-solid fa-check tw-text-emerald-500"></i>';
        setTimeout(() => {
            btn.innerHTML = originalIcon;
        }, 2000);
    }, function(err) {
        console.error('Kopyalama hatası: ', err);
    });
}

document.getElementById('userSearchInput').addEventListener('keyup', function(e) {
    let value = e.target.value.toLowerCase();
    let rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        let text = row.innerText.toLowerCase();
        row.style.display = text.includes(value) ? "" : "none";
    });
});
</script>