<?php include 'inc/header.php';?>
<?php include 'inc/sidebar.php';?>
<?php include 'inc/navbar.php';?>
<link href="assets/switch.css" rel="stylesheet"/>
            <!-- Page Content-->
            <div class="page-content">
                <div class="container-fluid">
                    <!-- Page-Title -->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-title-box">
                                <div class="row">
                                    <div class="col">
                                        <h4 class="page-title">Sosyal Medya Listesi</h4>
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="anasayfa">Anasayfa</a></li> 
                                            <li class="breadcrumb-item active">Sosyal Medya Listesi</li>
                                        </ol>
                                    </div><!--end col--> 
                                </div><!--end row-->                                                              
                            </div><!--end page-title-box-->
                        </div><!--end col-->
                    </div><!--end row-->
                    <!-- end page title end breadcrumb -->
                                <style type="text/css">
                                    i {  
                                        font-size: 16px;
                                    }
                                </style>
                    <div class="row"> 
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Sosyal Medya Listesi</h4>
                                    <p class="text-muted mb-0">Değerli kullanıcı, bu alan sayesinde sosyal medya hesaplarınızı bağlayabilirsiniz. Satır içi düzenleme sayesinde hesap linki kısmında yer alan alana tıklayarak linklerinizi tanımlayabilirsiniz.
                                    </p>
                                </div><!--end card-header-->
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered mb-0 table-centered">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Foto</th>
                                                <th>Sosyal Medya Adı</th>
                                                <th>Hesap Link</th>
                                                <th>Durum</th>  
                                                <th>Tarih</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                <?php
                                            $ebultensorgu = $dbh->prepare("SELECT * FROM social_media ");
                                            $ebultensorgu->execute();

                                            while ($ebultensonuc = $ebultensorgu->fetch()) {

                                            $id = $ebultensonuc['id'];
                                            $name = $ebultensonuc['name']; 
                                            $link = $ebultensonuc['link']; 
                                            $foto = $ebultensonuc['foto'];
                                            $status = $ebultensonuc['status']; 
                                            $date = $ebultensonuc['date'];
                                            $phpdate = strtotime( $date );
                                            $mysqldate = date( 'd-m-Y ', $phpdate );
                                            $baslikseo=seo( $ebultensonuc['services_name']);
                                            ?>
                                            <tr>
                                                <td style="width: 10px; height: 10px;">#<?=$ebultensonuc['id'];?></td>
                                                <td><img src="../img/<?=$ebultensonuc['foto'];?>" height="35px;"></td>
                                                <td><?=$ebultensonuc['name'];?></td>
                                                <td contenteditable="true" onBlur="veriKaydet(this,'link','<?php echo $id ?>')"
                        onClick="duzenle(this);"><?=$ebultensonuc['link'];?></td>
                                                <td>
                                                  <label class="switch"> 
                        <input type="checkbox" id='<?php echo $ebultensonuc['id'] ?>' class="sosyalaktif" <?php echo $ebultensonuc['status']==1?'checked':'' ?>  />
                        <span class="slider round"></span>
                    </label>
                </td>
                                                <td><?=$mysqldate?></td>
                                             
                                            </tr>
 
                                             <?php } ?>
                                            
                                             
                                            </tbody>
                                        </table><!--end /table-->
                                         <h5 id="ebultensonuc"></h5>
                                    </div><!--end /tableresponsive-->
                                </div><!--end card-body-->
                            </div><!--end card-->
                        </div> <!-- end col -->
                    </div> <!-- end row -->
    
       

                </div><!-- container -->


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    function duzenle(deger) {
        $(deger).css("background", "#ffff00");
        //seçilen hücrenin rengini değiştiriyoruz
    }

    function veriKaydet(deger, alan, id) {
        $(deger).css("background", "#FFF url(yukleniyor.gif) no-repeat right");
        //

        $.ajax({
            url: "sosyalKaydet.php", //verileri göndereceğimiz url
            type: "POST", //post ile gönderilecek
            data: 'alan=' + alan + '&deger=' + deger.innerHTML.split('+').join('{0}')+ '&id=' + id, 
            // verileri alan deger ve id olarak yolluyoruz
            //+ (artı) post edilirken boşluk ile değişiyor 
            //bunu engellemek için + değeri {0} ile değiştirdim 
            //kayıt yaparkende index.php de geri değişimini yapıyoruz 
            success: function (data) {
                if (data == true) {
                    $(deger).css("background", "#fff");
                    // eğer veriler veri tabanına yazılmış ise hücrenin
                    //arka plan rengini beyaza geri döndürüyoruz
                }

                else {
                    $(deger).css("background", "#f00");
                    $("#sonuc").text("Hata veri düzenlenmedi");

                    //Eğer hata varsa hücre rengini kırmızı ve
                    // tablo altında hata mesajı yazdırıyoruz
                }
            }
        });
    }
</script>

                <script src="assets/jquery.min.js"></script>
<script src="assets/custom.js"></script>
<?php include 'inc/footer.php';?>