<?php include 'header.php'; ?>  
 <link rel="stylesheet" type="text/css" href="source/app-assets/css/pages/app-chat.css">
<style type="text/css">
    .chat-application .chat-content .chat-body {
        overflow: hidden;
        margin: 0.67rem -1rem 0rem -1rem !important; 
    }
    /* Yüksek jetonlular varsayılan gizli - JS yüklenmeden önce bile gizli kalır */
    .HIGH_JETON { display: none; }
    .HIGH_JETON.show-jeton { display: block; }
    /* Filtreleme için gizleme class'ı - en yüksek öncelik */
    .filter-hidden { display: none !important; }
    
    /* Yüksek jetonlu kullanıcıların profil resimlerine altın ring */
    .HIGH_JETON.show-jeton .avatar img {
        border: 3px solid transparent !important;
        border-radius: 50% !important;
        background: linear-gradient(white, white) padding-box,
                    linear-gradient(45deg, #FFD700, #FFA500, #FFD700, #FFED4E) border-box !important;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 
                    0 0 25px rgba(255, 215, 0, 0.4) !important;
        animation: goldPulse 2s ease-in-out infinite !important;
    }
    
    @keyframes goldPulse {
        0%, 100% {
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 
                        0 0 25px rgba(255, 215, 0, 0.4);
        }
        50% {
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 
                        0 0 35px rgba(255, 215, 0, 0.6);
        }
    }
    
    /* ============ PROFIL PANEL HOVER EFEKTLERİ ============ */
    #jetonGuncelleBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }
    
    #jetonGuncelleBtn:active {
        transform: translateY(0);
    }
    
    /* ============ MOBİL GÖRÜNÜM ============ */
    @media only screen and (max-width: 991px) {
        /* 1. Header'ları gizle */
        nav.header-navbar,
        .header-navbar,
        .navbar-horizontal {
            display: none !important;
        }
        
        /* 2. Body'nin header için ayrılan üst boşluğunu kaldır */
        body.horizontal-layout.horizontal-menu.horizontal-menu-padding {
            padding-top: 0 !important;
        }
        
        /* 3. mt-2 class'ı olan container'ın margin'ini kaldır */
        .app-content.container.center-layout.mt-2 {
            margin-top: 0 !important;
        }
        
        /* 4. Content wrapper'ı overlay kadar uzat */
        .content-wrapper {
            min-height: 100vh !important;
            min-height: 100dvh !important;
        }
        
        /* 5. Chat overlay ile aynı boyutta ol */
        .chat-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
        }
    }
</style>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- TODO: Add SDKs fasdfsor Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">

  var firebaseConfig = {
   apiKey: "AIzaSyAX6glbRFOQ7IS-k9VPx6eeum-fvBtXdrk",
    authDomain: "hupvo-app-b2674.firebaseapp.com",
    projectId: "hupvo-app-b2674",
    storageBucket: "hupvo-app-b2674.appspot.com",
    messagingSenderId: "968466563284",
    appId: "1:968466563284:web:67387d40a67294f736bb41"
  };
  // Initialize Firebase (sadece daha önce initialize edilmemişse)
  if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
  }


// firebase'e insert ediyoruz
function aramaGonder(gonderici_id, user_id) {

    const database = firebase.database();
    const ref = database.ref('aramalar');

    var sezerref = ref.child("arama_" + user_id);
    var x = sezerref.set({
        gonderici: gonderici_id,
        alici: user_id,
        msj: "arama"
    });

    var useridx = parseInt(user_id);
    var gondericiidx = parseInt(gonderici_id);

    
    setTimeout(function() {
        sezerref.remove();
    }, 500);

}

function msgSend(gonderici_id,user_id,resimlinkj){

if(resimlinkj!=null){
var icerik = "https://app.heysen.net"+resimlinkj;
}else{
var icerik = $('#mIcerik').val();
}

// $("#mIcerik").prop('disabled', true);

$('#mIcerik').val('');  




if(icerik.trim().length > 0){

        var url = "api.php";
        var bilgi = {
        gonderen_id: gonderici_id,
        userid: user_id,
        msj: icerik,
        type: 'msgsend'
        }

        $.post(url,bilgi,function(response) {
            var json = JSON.parse(response);
//$("#mIcerik").focus();
$("#yukleniyor").remove();


// bildirim gonder basla

var url = "functions.php";
        var bilgi = {
        from: gonderici_id,
        to: user_id,
        type: 'bildirim_gonder',
        type2: 'mesaj'
        }

        $.post(url,bilgi,function(response) {
            if(response.indexOf("bot") !== -1) {
                console.log("bot - bildirim gönderilmedi");
            } else if(response.indexOf("spam") !== -1) {
                console.log("spam engel - 20sn bekle");
            } else {
                console.log("bildirim gitti");
            }
        });

// bildirim gonder bit


          
        });


insertAutoKey(user_id,gonderici_id,icerik);

// firebase'e insert ediyoruz
function insertAutoKey(user_id,gonderici_id,icerik){

const database = firebase.database();
const ref = database.ref('mesajlar');

if(parseInt(user_id)>parseInt(gonderici_id)){
    var msj_id = gonderici_id+"-"+user_id;


}else if(parseInt(gonderici_id)>parseInt(user_id)){
    var msj_id = user_id+"-"+gonderici_id;


}

var time = new Date();
var saat =
    ("0" + time.getHours()).slice(-2)   + ":" + 
    ("0" + time.getMinutes()).slice(-2);


var resimlinki = $('#botpp').attr('src');
resimlinki = resimlinki.replace("../","");

            var sezerref = ref.child("mesaj_"+msj_id);
            var x = sezerref.set({
                gonderici : gonderici_id,
                alici : user_id,
            msj: icerik,
            resim: resimlinki,
            time: saat });

            sezerref.remove();



}
}


}


function genelMesajlar(alici_id,gonderici_id){ // firebase çekme işlemi de burda



const database = firebase.database();
ref = database.ref('mesajlar');
ref.on("value",function(snap) {
// gelenMesajList();

            if(snap.val()) {

if(parseInt(alici_id)>parseInt(gonderici_id)){

    var msj_id = "mesaj_"+gonderici_id+"-"+alici_id;


}else if(parseInt(gonderici_id)>parseInt(alici_id)){
    var msj_id = "mesaj_"+alici_id+"-"+gonderici_id;

}

// Mesaj silinmişse (DELETE sonrası) çık
if(!snap.val()[msj_id]) return;

var yollayan = snap.val()[msj_id].gonderici;
var alan = snap.val()[msj_id].alici;

if(yollayan==gonderici_id){

var mesajx = snap.val()[msj_id].msj;

var mesajx2 = mesajx.replace(/(https?:\/\/\S+(\.png|\.jpg|\.jpeg|\.gif))/g, '<img style="max-width: 50px; height: auto; border-radius: 1%;" src="$1" />');
$(".chat-container").animate({ scrollTop: $(".chat-container")[0].scrollHeight });

// var icerik = '<div class="message-item user">';
// icerik += '<div class="content">';
// icerik += '<div class="bubble">'+mesajx2+'</div>';
// icerik += '<div class="footer">'+snap.val()[msj_id].time+'</div>';
// icerik += '</div></div>';


var icerik = '<div class="chat"><div class="chat-body"><div class="chat-message"><p>'+mesajx2+'</p><span class="chat-time">'+snap.val()[msj_id].time+'</span></div></div></div>';







$(".cekilenMesajlar").append(icerik);
$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

}else if(alan==gonderici_id){

var mesajx = snap.val()[msj_id].msj;

var mesajx2 = mesajx.replace(/(https?:\/\/\S+(\.png|\.jpg|\.jpeg|\.gif))/g, '<img style="max-width: 50px; height: auto; border-radius: 1%;" src="$1" />');
 $(".chat-container").animate({ scrollTop: $(".chat-container")[0].scrollHeight }); 

// var icerik = '<div class="message-item">';
// icerik += '<img src="'+snap.val()[msj_id].resim+'" alt="avatar" class="avatar chat-pp"><div class="content">';
// icerik += '<div class="bubble">'+mesajx2+'</div>';
// icerik += '<div class="footer">'+snap.val()[msj_id].time+'</div>';
// icerik += '</div></div>';


var icerik = '<div class="chat chat-left"><div class="chat-body"><div class="chat-message"><p>'+mesajx2+'</p><span class="chat-time">'+snap.val()[msj_id].time+'</span></div></div></div>';



$(".cekilenMesajlar").append(icerik);
$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });
}


// burda mesaj gelince gelenmesajlist'i tetikletip ajax ile sol menüyü güncelletiyodum senin daha iyi bi fikrin var mı db'dekileri getirmek dışında? 
// herhangi bi konusmaya girmezsen socket baslamıyor
}}) 

}



var msg_bilgi = "";


    $(document).ready(function() {

// Mobilde header'ları gizle
if(window.innerWidth <= 991) {
    $('nav.header-navbar').hide();
    $('.header-navbar').hide();
    $('.navbar-horizontal').hide();
    $('body').css({'padding-top': '0', 'margin-top': '0'});
}

// setInterval(function(){ 

// gelenMesajList();

//  }, 10000);

gelenMesajList();

$(".card-footer").hide();
$(".botBilgi").hide();

// Sohbet arama filtreleme
$('#sohbetArama').on('keyup', function() {
    sohbetFiltrele();
});

// Yüksek jetonlular CSS ile varsayılan gizli, highJetonVisible false başlıyor
highJetonVisible = false;

// Tek mesaj gizleme checkbox'ı
$('#tekMesajGizle').on('change', function() {
    tekMesajGizli = $(this).is(':checked');
    sohbetFiltrele();
});

// Yüksek jetonlu gösterme checkbox'ı
$('#highJetonGoster').on('change', function() {
    highJetonVisible = $(this).is(':checked');
    // show-jeton class'ı sadece altın ring efekti için
    if(highJetonVisible) {
        $('.HIGH_JETON').addClass('show-jeton');
    } else {
        $('.HIGH_JETON').removeClass('show-jeton');
    }
    // Filtrelemeyi uygula
    sohbetFiltrele();
});

// Otomatik yenileme - her 30 saniyede bir
setInterval(function(){ 
    gelenMesajList();
}, 30000);

});

    var highJetonVisible = false; // Global değişken: yüksek jetonlular görünür mü?
    var tekMesajGizli = false; // Global değişken: 1 mesaj atanlar gizli mi?

    // Merkezi filtreleme fonksiyonu (global scope)
    function sohbetFiltrele() {
        var aramaMetni = $('#sohbetArama').val().toLowerCase().trim();
        var aramaAktif = aramaMetni !== ''; // Arama yapılıyor mu?
        
        $('#gelenMesajlar li').each(function() {
            var isim = $(this).text().toLowerCase();
            var isHighJeton = $(this).hasClass('HIGH_JETON');
            var msgCount = parseInt($(this).attr('data-msg-count')) || 0;
            
            // Arama eşleşiyor mu?
            var matchesSearch = (aramaMetni === '' || isim.includes(aramaMetni));
            
            // Tek mesaj filtresi - checkbox işaretliyse ve kullanıcı 1 mesaj attıysa gizle
            var passesMessageFilter = !tekMesajGizli || msgCount > 1;
            
            var shouldShow = false;
            
            // ARAMA AKTİFSE: Tüm kullanıcılarda ara (yüksek jeton checkbox'ını görmezden gel)
            if(aramaAktif) {
                shouldShow = matchesSearch && passesMessageFilter;
            } else {
                // ARAMA KAPALI: Normal filtreleme mantığı
                if(isHighJeton) {
                    // Yüksek jetonlu kullanıcılar: sadece checkbox işaretliyse göster
                    shouldShow = highJetonVisible && passesMessageFilter;
                } else {
                    // Normal kullanıcılar: mesaj filtresine göre göster
                    shouldShow = passesMessageFilter;
                }
            }
            
            // Class bazlı göster/gizle (CSS !important sorununu çözer)
            if(shouldShow) {
                $(this).removeClass('filter-hidden');
            } else {
                $(this).addClass('filter-hidden');
            }
        });
    }

    function gelenMesajList(){

        var url = "api.php";
        var bilgi = {
            type: 'sohbetList'
        }

        $.post(url,bilgi,function(response) {
          if(response.trim() === '') {
              $('#gelenMesajlar').html('<li class="text-center p-3"><i class="ft-inbox"></i><br><span class="text-muted">Cevap bekleyen kullanıcı yok</span></li>');
          } else {
              $('#gelenMesajlar').html(response);  
          }
          
          $(msg_bilgi).addClass("active");
          
          // Göster modundaysa yeni eklenen elementlere class ekle
          if(highJetonVisible) {
              $('.HIGH_JETON').addClass('show-jeton');
          }
          
          // Filtreleri uygula (arama ve tek mesaj gizleme)
          sohbetFiltrele();
        });



}


function acMesaj(gonderen_id, alan_id, isim, resim) {
    firebase.database().ref('mesajlar').off();
    $(".card-footer").show();
    $(".botBilgi").show();
    $("#botpp").show();
    $('.chat-content').html("Yükleniyor");
    $(".chat-sidebar-list-wrapper>ul>li.active").removeClass("active");
    msg_bilgi = "#mesaj_" + gonderen_id + "_" + alan_id;
    $("#mesaj_" + gonderen_id + "_" + alan_id).addClass("active");

    $('.user_pp').attr('src', "../" + resim);
    $('.user_name').html(isim);

    $('#sButton').attr('onclick', 'msgSend(' + gonderen_id + ',' + alan_id + ')');

    $(".chat-container").animate({
        scrollTop: 0
    });

    if ($(".chat-sidebar-list-wrapper ul li").hasClass("active")) {
        chatStart.addClass("d-none");
        chatArea.removeClass("d-none");
    } else {
        chatStart.removeClass("d-none");
        chatArea.addClass("d-none");
    }

    var url = "api.php";
    var bilgi = {
        myuserid: gonderen_id,
        userid: alan_id,
        type: 'mesajList'
    };

    $.post(url, bilgi, function(response) {
        $('.chat-content').html(response);

        setTimeout(function() {
            $(".chat-container").animate({
                scrollTop: $(".chat-container")[0].scrollHeight
            });
        }, 500);

        var userpici = $("input[name=userpic]").val();
        var useridi = $("input[name=userid]").val();
        var useridxi = $("input[name=useridx]").val();
        var darlamai = $("input[name=darlama]").val();
        var satisizini = $("input[name=satisizin]").val();
        var userfullnamei = $("input[name=userfullname]").val();
        var kullanicifullname = $("input[name=kullanicifullname]").val();
        var botyas = $("input[name=useryas]").val();
        var kullaniciyas = $("input[name=kullaniciyas]").val();
        var kullanicijeton = $("input[name=kullanicijeton]").val();
        var botsehir = $("input[name=usersehir]").val();
        var sonaktivite = $("input[name=sonaktivite]").val();
        var aramapaket = $("input[name=aramapaket]").val();
        var onaypaket = $("input[name=onaypaket]").val();
        var carksayisi = $("input[name=carksayisi]").val();

        $('#botpp').attr('src', "../" + userpici);
        $('#botnick').html(userfullnamei + ', ' + botyas);
        $('.botsehir').html(botsehir);
        $('#botyas').html(botyas);
        $('.kullaniciyas').html(kullaniciyas);
        $('.kullanicijeton').html(kullanicijeton);
        $('.sonaktivite').html(sonaktivite);
        $('.username1').append(', ' + kullaniciyas + ' <br /> ' + botsehir + ' | Jeton: <span id="header_jeton">' + kullanicijeton + '</span>');
        
        // Arama paketi checkbox ayarla
        let aramaPaketSwitch = $('#aramaPaketSwitch');
        let aramaPaketText = $('#aramaPaketText');
        aramaPaketSwitch.off('change');
        aramaPaketSwitch.prop('checked', aramapaket.toLowerCase() === 'evet');
        aramaPaketText.text(aramapaket);
        aramaPaketText.css('color', aramapaket.toLowerCase() === 'evet' ? '#28d094' : '#ff8a80');
        
        aramaPaketSwitch.change(function() {
            let yeniAramaDurumu = aramaPaketSwitch.is(':checked') ? 'Evet' : 'Hayır';
            aramaPaketText.text(yeniAramaDurumu);
            aramaPaketText.css('color', yeniAramaDurumu === 'Evet' ? '#28d094' : '#ff8a80');
            
            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: {
                    type: 'arama_paket_status',
                    status: yeniAramaDurumu,
                    user_id: useridxi
                },
                success: function(response) {
                    console.log('Arama paketi güncellendi:', response);
                },
                error: function(xhr, status, error) {
                    console.error('Arama paketi hatası:', error);
                }
            });
        });
        
        // Onay paketi checkbox ayarla
        let onayPaketSwitch = $('#onayPaketSwitch');
        let onayPaketText = $('#onayPaketText');
        onayPaketSwitch.off('change');
        onayPaketSwitch.prop('checked', onaypaket.toLowerCase() === 'evet');
        onayPaketText.text(onaypaket);
        onayPaketText.css('color', onaypaket.toLowerCase() === 'evet' ? '#28d094' : '#ff8a80');
        
        onayPaketSwitch.change(function() {
            let yeniOnayDurumu = onayPaketSwitch.is(':checked') ? 'Evet' : 'Hayır';
            onayPaketText.text(yeniOnayDurumu);
            onayPaketText.css('color', yeniOnayDurumu === 'Evet' ? '#28d094' : '#ff8a80');
            
            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: {
                    type: 'onay_paket_status',
                    status: yeniOnayDurumu,
                    user_id: useridxi
                },
                success: function(response) {
                    console.log('Onay paketi güncellendi:', response);
                },
                error: function(xhr, status, error) {
                    console.error('Onay paketi hatası:', error);
                }
            });
        });
        
        // Sol sidebar profil bilgileri
        $('#profile_bot_pp').attr('src', "../" + userpici);
        $('#profile_bot_nick').html(userfullnamei);
        $('#profile_bot_sehir').html(botsehir);
        $('#profile_bot_sehir2').html(botsehir);
        $('#profile_bot_yas').html(botyas);
        
        // Gerçek kullanıcı bilgileri
        $('#profile_kullanici_fullname').html(kullanicifullname || '-');
        $('#profile_kullanici_id').html(useridxi); // Gerçek kullanıcı ID
        $('#profile_kullanici_yas').html(kullaniciyas);
        $('#profile_kullanici_jeton').html(kullanicijeton);
        $('#profile_son_aktivite').html(sonaktivite);
        $('#profile_cark_sayisi').html(carksayisi + ' kez');
        $('#profile_arama_paket').html("Arama: " + aramapaket);
        $('#profile_onay_paket').html("Onay: " + onaypaket);

        document.getElementById('aramaidi').setAttribute("onClick", "aramaGonder(" + gonderen_id + "," + alan_id + ");");

        // Darlama checkbox ayarla
        let darlamaSwitch = $('#darlamaSwitch');
        let darlamaText = $('#darlamaText');
        darlamaSwitch.off('change');
        darlamaSwitch.prop('checked', darlamai == 1);
        darlamaText.text(darlamai == 1 ? 'Açık' : 'Kapalı');
        darlamaText.css('color', darlamai == 1 ? '#28d094' : '#ff8a80');

        darlamaSwitch.change(function() {
            let yeniDarlamaDurumu = darlamaSwitch.is(':checked') ? 1 : 0;
            darlamaText.text(yeniDarlamaDurumu == 1 ? 'Açık' : 'Kapalı');
            darlamaText.css('color', yeniDarlamaDurumu == 1 ? '#28d094' : '#ff8a80');

            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: {
                    type: 'darlama_status',
                    status: yeniDarlamaDurumu,
                    user_id: useridxi
                },
                success: function(response) {
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });

        // Satış İzni checkbox ayarla
        let satisSwitch = $('#satisSwitch');
        let satisText = $('#satisText');
        satisSwitch.off('change');
        satisSwitch.prop('checked', satisizini == 1);
        satisText.text(satisizini == 1 ? 'Açık' : 'Kapalı');
        satisText.css('color', satisizini == 1 ? '#28d094' : '#ff8a80');

        satisSwitch.change(function() {
            let yeniSatisDurumu = satisSwitch.is(':checked') ? 1 : 0;
            satisText.text(yeniSatisDurumu == 1 ? 'Açık' : 'Kapalı');
            satisText.css('color', yeniSatisDurumu == 1 ? '#28d094' : '#ff8a80');

            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: {
                    type: 'satis_status',
                    status: yeniSatisDurumu,
                    user_id: useridxi
                },
                success: function(response) {
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
        
        // Jeton güncelleme butonu
        $('#jetonGuncelleBtn').off('click');
        $('#jetonInput').val(kullanicijeton); // Mevcut jeton değerini input'a yaz
        
        $('#jetonGuncelleBtn').click(function() {
            let yeniJeton = $('#jetonInput').val();
            
            if(yeniJeton === '' || yeniJeton < 0) {
                return;
            }
            
            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: {
                    type: 'jeton_guncelle',
                    jeton: yeniJeton,
                    user_id: useridxi
                },
                success: function(response) {
                    let result = JSON.parse(response);
                    if(result.sonuc == 1) {
                        $('.kullanicijeton').html(yeniJeton);
                        $('#profile_kullanici_jeton').html(yeniJeton);
                        $('#header_jeton').html(yeniJeton);
                        console.log('Jeton güncellendi:', yeniJeton);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Jeton güncelleme hatası:', error);
                }
            });
        });
    });

    genelMesajlar(alan_id, gonderen_id);
}



function jetonluGoster(value){
    if(value=="kapa"){
        // Göster moduna geç
        highJetonVisible = true;
        $('.HIGH_JETON').addClass('show-jeton');
        $('#ackapa').attr('onclick', 'jetonluGoster("ac")');
        $('#ackapa').html("<c style='font-family: \"Quicksand\", Georgia, \"Times New Roman\", Times, serif !important;'>GİZLE</c>");
        sohbetFiltrele();
    }else if(value=="ac"){
        // Gizle moduna geç
        highJetonVisible = false;
        $('.HIGH_JETON').removeClass('show-jeton');
        $('#ackapa').attr('onclick', 'jetonluGoster("kapa")');
        $('#ackapa').html("<c style='font-family: \"Quicksand\", Georgia, \"Times New Roman\", Times, serif !important;'>GÖSTER</c>");
        sohbetFiltrele();
    }
}

function jQ_append(id_of_input, text){
    var input_id = '#'+id_of_input;
    $(input_id).val($(input_id).val() + text);
}

function addEmo(value){

    if(value=="telefon1"){
        $('#mIcerik').val("0*** *** ** ** (###KULLANICININ KİŞİSEL NUMARASINI GÖREBİLMEK İÇİN EN AZ 100 JETONUNUZUN OLMASI GEREKMEKTEDİR!###)");
    }else if(value=="telefon2"){
        $('#mIcerik').val("Sıfır ****** **** ** ***** ** ***** ****** (###KULLANICININ KİŞİSEL NUMARASINI GÖREBİLMEK İÇİN EN AZ 100 JETONUNUZUN OLMASI GEREKMEKTEDİR!###)");
    }else if(value=="telefon3"){
        $('#mIcerik').val("{onayla} 0*** *** ** **");
    }else if(value=="telefon4"){
        $('#mIcerik').val("{onayla} Sıfır ****** **** ** ***** ** ***** ******");
    }else if(value=="instagram"){
        $('#mIcerik').val("********** (###KULLANICININ INSTAGRAM HESABINI GÖREBİLMEK İÇİN EN AZ 100 JETONUNUZUN OLMASI GEREKMEKTEDİR!###)");
    }else if(value=="gizlenmis"){
        $('#mIcerik').val("https://hupto.cntapi.com/assets/gizlenmis.png");
    }else{

    var emoj = $("#s"+value).html();
//alert(emoj);

jQ_append('mIcerik', emoj);

}

}








</script>
    <!-- BEGIN: Content-->
    <div class="app-content container center-layout mt-2">
        <div class="sidebar-left">
            <div class="sidebar">
                <!-- app chat user profile left sidebar start -->
                <div class="chat-user-profile">
                    <header class="chat-user-profile-header text-center border-bottom">
                        <span class="chat-profile-close">
                            <i class="ft-x"></i>
                        </span>
                        <div class="my-2">
                            <img id="profile_bot_pp" src="../assets/img/no-avatar.png" class="round mb-1" alt="user_avatar" height="100" width="100">
                            <h5 class="mb-0" id="profile_bot_nick">Bot Bilgileri</h5>
                            <span id="profile_bot_sehir">-</span>
                        </div>
                    </header>
                    <div class="chat-user-profile-content">
                        <div class="chat-user-profile-scroll">
                            <h6 class="text-uppercase mb-1">BOT BİLGİLERİ</h6>
                            <ul class="list-unstyled mb-2">
                                <li class="mb-25"><strong>Yaş:</strong> <span id="profile_bot_yas">-</span></li>
                                <li class="mb-25"><strong>Şehir:</strong> <span id="profile_bot_sehir2">-</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- app chat user profile left sidebar ends -->
                <!-- app chat sidebar start -->
                <div class="chat-sidebar card">
                    <span class="chat-sidebar-close">
                        <i class="ft-x"></i>
                    </span>
                    <div class="chat-sidebar-search">
                        <div class="d-flex align-items-center">
                            <div class="chat-sidebar-profile-toggle">
                                <div class="avatar">
                                    <img id="botpp" src="../assets/img/no-avatar.png" style="display: none;" class="cursor-pointer" alt="user_avatar" height="72" width="72">
                                </div>
                            </div>
<h5 class="px-2 mb-0 ml-2" id="botnick">Sohbet Geçmişi</h5>
                        </div>
                    </div>
                    <div class="chat-sidebar-list-wrapper" style="padding-top: 0.5rem;">
                        <h6 class="px-2 mb-0 botBilgi" style="padding-top: 0.5rem; padding-bottom: 0.1rem;">Bot Bilgileri</h6>
                        <ul class="chat-sidebar-list botBilgi" style="padding-top: 0.1rem; padding-bottom: 0.25rem;">
                            <li style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                <h6 class="mb-0"># Şehir: <c class="botsehir">Adana</c></h6>
                            </li>
                            <li style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                <h6 class="mb-0"># Bot Yaş: <c id="botyas">20</c></h6>
                            </li>
                            <li style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
                                <h6 class="mb-0"># Kullanıcı Yaş: <c class="kullaniciyas">20</c></h6>
                            </li>
                        </ul>

                        <h6 class="px-2 mb-0" style="padding-top: 0.5rem; padding-bottom: 0.125rem;">SOHBETLER <font color="green"><i onclick="gelenMesajList();" class="ft-refresh-ccw float-right cursor-pointer"> <c style='font-family: "Quicksand", Georgia, "Times New Roman", Times, serif !important;'>YENİLE</c></i></font></h6>
                        
                        <!-- Filtre Checkbox'ları -->
                        <div class="px-2" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
                            <label class="custom-control custom-checkbox" style="margin-bottom: 0.25rem;">
                                <input type="checkbox" class="custom-control-input" id="tekMesajGizle">
                                <span class="custom-control-label">1 mesaj atanları gizle</span>
                            </label>
                            <label class="custom-control custom-checkbox mb-0">
                                <input type="checkbox" class="custom-control-input" id="highJetonGoster">
                                <span class="custom-control-label">Yüksek jetonluları göster</span>
                            </label>
                        </div>
                        
                        <!-- Arama Input -->
                        <div class="px-2" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
                            <input type="text" id="sohbetArama" class="form-control form-control-sm" placeholder="🔍 İsim ile ara..." autocomplete="off">
                        </div>
                        
                        <ul class="chat-sidebar-list" id="gelenMesajlar">
                            
                        </ul>
                      
                    </div>
                </div>
                <!-- app chat sidebar ends -->

            </div>
        </div>
        <div class="content-right">
            <div class="content-overlay"></div>
            <div class="content-wrapper">
                <div class="content-header row">
                </div>
                <div class="content-body">
                    <!-- app chat overlay -->
                    <div class="chat-overlay"></div>
                    <!-- app chat window start -->
                    <section class="chat-window-wrapper">
                        <div class="chat-start">
                            <span class="ft-message-square chat-sidebar-toggle chat-start-icon font-large-3 p-3 mb-1"></span>
                            <h4 class="d-none d-lg-block py-50 text-bold-500">Sohbet Başlatmak için Kullanıcı Seç!</h4>
                            <button class="btn btn-light-primary chat-start-text chat-sidebar-toggle d-block d-lg-none py-50 px-1">Sohbet Penceresini Aç!</button>
                        </div>
                        <div class="chat-area d-none">
                            <div class="chat-header">
                                <header class="d-flex justify-content-between align-items-center px-1 py-75">
                                    <div class="d-flex align-items-center">
                                        <div class="chat-sidebar-toggle d-block d-lg-none mr-1"><i class="ft-align-justify font-large-1 cursor-pointer"></i>
                                        </div>
                                        <div class="avatar chat-profile-toggle m-0 mr-1">
                                            <img src="source/app-assets/images/portrait/small/avatar-s-26.png" class="cursor-pointer user_pp" alt="avatar" height="36" width="36" />
                                            <span class="avatar-status-busy"></span>
                                        </div>
                                        <h6 class="mb-0 user_name username1">Demo User</h6>
                                    </div>
                                    <div class="chat-header-icons">

                                         <span class="chat-icon-favorite">
                                            <i id="aramaidi" class="ft-phone font-medium-5 cursor-pointer" onclick="demo();"></i>
                                        </span>

                                        <!-- <span class="chat-icon-favorite">
                                            <i class="ft-star font-medium-5 cursor-pointer"></i>
                                        </span> -->
                                        <span class="dropdown">
                                            <i class="ft-more-vertical font-medium-4 ml-25 cursor-pointer dropdown-toggle nav-hide-arrow cursor-pointer" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
                                            </i>
                                            <span class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item" href="JavaScript:void(0);"><i class="ft-tag mr-25"></i> Pin to top</a>
                                                <a class="dropdown-item" href="JavaScript:void(0);"><i class="ft-trash-2 mr-25"></i> Delete chat</a>
                                                <a class="dropdown-item" href="JavaScript:void(0);"><i class="ft-x-circle mr-25"></i> Block</a>
                                            </span>
                                        </span>
                                    </div>
                                </header>
                            </div>
                            <!-- chat card start -->
                            <div class="card chat-wrapper shadow-none mb-0">
                                <div class="card-content">
                                    <div class="card-body chat-container">
                                        <div class="chat-content cekilenMesajlar">
                                            YÜKLENİYOR
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer chat-footer px-2 py-1 pb-0">
                                    <form class="d-flex align-items-center" action="javascript:void(0);">
                                        <i class="ft-paperclip cursor-pointer"></i>
                                        <a class="ml-1 cursor-pointer" id="dropdownMenuButtonx" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" role="menu">🙂</a>
                                        <span class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButtonx">
                                            
    
                                                <a class="dropdown-item" id="sx" href="JavaScript:void(0);" onclick="addEmo('telefon1');">📞Tel Sayı</a>
                                                <a class="dropdown-item" id="sx" href="JavaScript:void(0);" onclick="addEmo('telefon2');">📞Tel Yazı</a>
                                                <a class="dropdown-item" id="sx" href="JavaScript:void(0);" onclick="addEmo('telefon3');">📞Onaylı Hesap Sayı</a>
                                                <a class="dropdown-item" id="sx" href="JavaScript:void(0);" onclick="addEmo('telefon4');">📞Onaylı Hesap Yazı</a>
                                                <a class="dropdown-item" id="sx" href="JavaScript:void(0);" onclick="addEmo('instagram');">📷Instagram</a>
                                                 <a class="dropdown-item" id="sx" href="JavaScript:void(0);" onclick="addEmo('gizlenmis');">📷Gizli Resim</a>
                                                <a class="dropdown-item" id="sx" href="JavaScript:void(0);">###########</a>
                                                <a class="dropdown-item" id="s0" href="JavaScript:void(0);" onclick="addEmo(0);">😊</a>
                                                <a class="dropdown-item" id="s1" href="JavaScript:void(0);" onclick="addEmo(1);">😁</a>
                                                <a class="dropdown-item" id="s2" href="JavaScript:void(0);" onclick="addEmo(2);">😂</a>
                                                <a class="dropdown-item" id="s3" href="JavaScript:void(0);" onclick="addEmo(3);">🙄</a>
                                                <a class="dropdown-item" id="s4" href="JavaScript:void(0);" onclick="addEmo(4);">😘</a>
                                                <a class="dropdown-item" id="s5" href="JavaScript:void(0);" onclick="addEmo(5);">😏</a>
                                                <a class="dropdown-item" id="s6" href="JavaScript:void(0);" onclick="addEmo(6);">😜</a>
                                                <a class="dropdown-item" id="s7" href="JavaScript:void(0);" onclick="addEmo(7);">😇</a>
                                                <a class="dropdown-item" id="s8" href="JavaScript:void(0);" onclick="addEmo(8);">😍</a>
                                                <a class="dropdown-item" id="s9" href="JavaScript:void(0);" onclick="addEmo(9);">😌</a>
                                                <a class="dropdown-item" id="s10" href="JavaScript:void(0);" onclick="addEmo(10);">😅</a>
                                            </span>
                                        <input id="mIcerik" type="text" class="form-control chat-message-send mx-1" placeholder="Gönderilecek mesajı girin...">
                                        <button type="submit" class="btn btn-primary glow send d-lg-flex" id="sButton"><i class="ft-play"></i>
                                            <span class="d-none d-lg-block mx-50">Gönder</span></button>
                                    </form>
                                </div>
                            </div>
                            <!-- chat card ends -->
                        </div>
                    </section>
                    <!-- app chat window ends -->
                    <!-- app chat profile right sidebar start -->
                    <section class="chat-profile">
                        <header class="chat-profile-header border-bottom" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px;">
                            <span class="chat-profile-close" style="color: white;">
                                <i class="ft-x"></i>
                            </span>
                            <div style="text-align: center;">
                                <div style="position: relative; display: inline-block; margin-bottom: 15px;">
                                    <img src="source/app-assets/images/portrait/small/avatar-s-26.png" class="user_pp" alt="chat avatar" 
                                         style="width: 100px; height: 100px; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
                                </div>
                                
                                <h5 class="user_name" style="color: white; font-weight: 600; margin-bottom: 5px; font-size: 18px;">Elizabeth Elliott</h5>
                                
                                <div style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;">
                                    <span style="background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 15px; color: white; font-size: 13px;">
                                        <i class="ft-map-pin" style="font-size: 11px;"></i> <span class="botsehir">Devloper</span>
                                    </span>
                                    <span style="background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 15px; color: white; font-size: 13px;">
                                        <i class="ft-calendar" style="font-size: 11px;"></i> <span class="kullaniciyas">X</span> yaş
                                    </span>
                                </div>
                                
                                <div style="display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;">
                                    <span style="background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 15px; color: white; font-size: 13px;">
                                        <i class="ft-user" style="font-size: 11px;"></i> ID: <span id="profile_kullanici_id">-</span>
                                    </span>
                                    <span style="background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 15px; color: white; font-size: 13px;">
                                        <i class="ft-rotate-cw" style="font-size: 11px;"></i> Çark: <span id="profile_cark_sayisi">-</span>
                                    </span>
                                </div>
                                
                                <div style="background: rgba(255,255,255,0.25); backdrop-filter: blur(10px); border-radius: 12px; padding: 12px; margin-top: 10px;">
                                    <div style="display: flex; justify-content: space-around; align-items: center; gap: 15px;">
                                        <div style="text-align: center;">
                                            <div style="color: white; font-size: 24px; font-weight: bold;" class="kullanicijeton">0</div>
                                            <div style="color: rgba(255,255,255,0.8); font-size: 11px; margin-top: 2px;">Jeton</div>
                                        </div>
                                        <div style="width: 1px; height: 40px; background: rgba(255,255,255,0.3);"></div>
                                        <div style="text-align: center;">
                                            <div style="color: white; font-size: 13px; font-weight: 500;" class="sonaktivite">-</div>
                                            <div style="color: rgba(255,255,255,0.8); font-size: 11px; margin-top: 2px;">Son Aktivite</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Jeton Güncelleme -->
                                <div style="margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 6px;">
                                    <input type="number" id="jetonInput" placeholder="Jeton" 
                                           style="width: 100px; padding: 8px; border: none; border-radius: 8px; text-align: center; background: white; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                                    <button id="jetonGuncelleBtn" 
                                            style="padding: 8px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.3s;">
                                        <i class="ft-check"></i> Güncelle
                                    </button>
                                </div>
                                
                                <!-- Divider -->
                                <div style="width: 80%; margin: 12px auto; border-top: 1px solid rgba(255,255,255,0.3);"></div>
                                
                                <!-- Paketler -->
                                <div style="display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: nowrap; max-width: 280px; margin-left: auto; margin-right: auto;">
                                    <label style="cursor: pointer; background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.3s; white-space: nowrap; flex: 1;">
                                        <input type="checkbox" id="aramaPaketSwitch" style="margin: 0; cursor: pointer; width: 18px; height: 18px; flex-shrink: 0;">
                                        <span style="color: white; font-size: 13px; white-space: nowrap;">Arama: <span id="aramaPaketText" style="font-weight: bold;">Hayır</span></span>
                                    </label>
                                    <label style="cursor: pointer; background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.3s; white-space: nowrap; flex: 1;">
                                        <input type="checkbox" id="onayPaketSwitch" style="margin: 0; cursor: pointer; width: 18px; height: 18px; flex-shrink: 0;">
                                        <span style="color: white; font-size: 13px; white-space: nowrap;">Onay: <span id="onayPaketText" style="font-weight: bold;">Hayır</span></span>
                                    </label>
                                </div>
                                
                                <!-- Darlama ve Satış İzni -->
                                <div style="display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; margin-bottom: 15px;">
                                    <label style="cursor: pointer; background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 8px; display: flex; align-items: center; gap: 6px; transition: all 0.3s; white-space: nowrap; width: 100%; max-width: 280px; justify-content: center;">
                                        <input type="checkbox" id="darlamaSwitch" style="margin: 0; cursor: pointer; width: 18px; height: 18px; flex-shrink: 0;">
                                        <span style="color: white; font-size: 13px; white-space: nowrap;">Darlama: <span id="darlamaText" style="font-weight: bold;">Kapalı</span></span>
                                    </label>
                                    <label style="cursor: pointer; background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 8px; display: flex; align-items: center; gap: 6px; transition: all 0.3s; white-space: nowrap; width: 100%; max-width: 280px; justify-content: center;">
                                        <input type="checkbox" id="satisSwitch" style="margin: 0; cursor: pointer; width: 18px; height: 18px; flex-shrink: 0;">
                                        <span style="color: white; font-size: 13px; white-space: nowrap;">Satış İzni: <span id="satisText" style="font-weight: bold;">Kapalı</span></span>
                                    </label>
                                </div>

                                <style>

        .toggle-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #4CAF50;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .slider:active:before {
            width: 28px;
        }

        .status-text {
            font-size: 18px;
            color: white;
            font-weight: 500;
        }
    </style>
</head>
<body>










                              </div>
                        </header>
                        <!-- <div class="chat-profile-content p-2">
                            <h6 class="mt-1">ABOUT</h6>
                            <p>It is a long established fact that a reader will be distracted by the readable content.</p>
                            <h6 class="mt-2">PERSONAL INFORMATION</h6>
                            <ul class="list-unstyled">
                                <li class="mb-25">email@gmail.com</li>
                                <li>+1(789) 950-7654</li>
                            </ul>
                        </div> -->
                    </section>
                    <!-- app chat profile right sidebar ends -->

                </div>
            </div>
        </div>
    </div>
    <!-- END: Content-->



<?php include 'footer.php'; ?>  
