<?php include 'header.php'; ?>   
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

        <style type="text/css">
        	
.scale-image2 {
  object-fit: cover;
    width: 60%;
    height: 250px;
}

.w-100x {
	object-fit: cover;
  width: 100%;
  height: 50px;
}


.tinder {
  width: 100vw;
  height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.loaded.tinder {
  opacity: 1;
}

.tinder--status {
  position: absolute;
  top: 50%;
  margin-top: -30px;
  z-index: 2;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.tinder--status i {
  font-size: 100px;
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.2s ease-in-out;
  position: absolute;
  width: 100px;
  margin-left: -50px;
}

.tinder_love .fa-heart {
  position: fixed;
  margin-top: -150px;
  opacity: 0.7;
  transform: scale(1);
}

.tinder_nope .fa-remove {
  position: fixed;
  margin-top: -150px;
  opacity: 0.7;
  transform: scale(1);
}

.tinder--cards {
  flex-grow: 1;
  padding-top: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1;
}

.tinder--card {
  display: inline-block;
  width: 90vw;
  max-width: 400px;
  height: 245px;
  background: #FFFFFF;
  padding-bottom: 40px;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  will-change: transform;
  transition: all 0.3s ease-in-out;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.moving.tinder--card {
  transition: none;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.tinder--card img {
  max-width: 100%;
  pointer-events: none;
}

.tinder--card h3 {
  margin-top: 32px;
  font-size: 32px;
  padding: 0 16px;
  pointer-events: none;
}

.tinder--card p {
  margin-top: 24px;
  font-size: 20px;
  padding: 0 16px;
  pointer-events: none;
}

.tinder--buttons {
  flex-grow: 1;
  text-align: center;
    margin-top: 20vh;
}

.tinder--buttons button {
  border-radius: 50%;
  line-height: 60px;
  width: 60px;
  border: 0;
  background: #FFFFFF;
  display: inline-block;
  margin: 0 8px;
}

.tinder--buttons button:focus {
  outline: 0;
}

.tinder--buttons i {
  font-size: 32px;
  vertical-align: middle;
}

.fa-heart {
  color: #FFACE4;
}

.fa-remove {
  color: #CDD6DD;
}

.discard {
  position: absolute;
  bottom: 20px;
  padding: 10px 15px;
  color: #FFF;
  font-weight: bold;
  background-color: rgb(255 0 0 / 70%);
  border-radius: 0 5px 5px 0;
  pointer-events: none;
}

        </style>

<script type="text/javascript">
  
  $(document).ready(function() {
     findGetir2();

});

// ben ek olarak sadece buraya yazdım finder.php'de ve index.php'de ama index.php'dekini sildim direkt templateinkini istiyosan açim ac

  function findGetir(){


var url = "api.php";
  var bilgi = {
      soru_id: 'bos',
      begenilen_id: 'bos'
  }
  $.post(url,bilgi,function(response) {
  var json = JSON.parse(response);
  

for(var k in json) {
   json[k]['user_fullname'];
}


  })}



//ajax ile yukleniyor? evet
  function findGetir2(){

    $.ajax({
            url: 'api.php?type=finder&sehir=Adana&limit=10',
            method: 'post',
            data: { 'id': 'bos' },
            success: function (e) {
                var jVeri = JSON.parse(e);
                for(var k in jVeri) {

//var profil_isim = jVeri[k]['user_fullname'].split(" ");
var profil_isim = jVeri[k]['user_fullname'];

                  kisiVer = '<div class="tinder--card">';
                  kisiVer += '<div class="discard">'+profil_isim+', '+jVeri[k]['user_yas']+'</div>';
                  kisiVer += '<img src="'+jVeri[k]['user_picture']+'" class="scale-image2">';
                  kisiVer += '</div>';
                  kisiVer += '<div style="display:none;" class="bilgix">'+jVeri[k]['user_id']+'</div>';
                  $('.tinder--cards').append(kisiVer);                  
                }

                    kartlariCalistir();
    
            }
        });

  }





</script>

    <!-- Search Component -->
    <div id="search" class="appHeader">
        <form class="search-form">
            <div class="form-group searchbox">
                <input type="text" class="form-control" placeholder="Search...">
                <i class="input-icon">
                    <ion-icon name="search-outline"></ion-icon>
                </i>
                <a href="javascript:;" class="ml-1 close toggle-searchbox">
                    <ion-icon name="close-circle"></ion-icon>
                </a>
            </div>
        </form>
    </div>
    <!-- * Search Component -->

    <!-- App Capsule -->
    <div id="appCapsule">
        <div class="section mt-4 mb-4">
        	<div class="section-title">En Hoşuna Gidenleri Like'la!</div>
            <div class="row">

<?php

    $today = strtotime('today');
    $tomorrow = strtotime('+1 day', $today);
    $bugunBegeni = $db->query("SELECT COUNT(*) FROM begeniler where begenen_id = '{$user_id}' AND zaman >= $today AND zaman <= $tomorrow")->fetchColumn();

$jetonSayi = $myUser['user_jeton'];

if($jetonSayi>5){
    $begeni_limit = 50;
}else{
    $begeni_limit = 10;
}

    if($bugunBegeni>=$begeni_limit){
      $onclicki = "onclick=\"$('#bjetonAl').modal('show');\"";
      $tiklanmaz = 'style="pointer-events:none;"';
    }
      ?>

<div class="tinder" <?=$onclicki?>>
  <div class="tinder--status">
    <i class="fa fa-remove"></i>
    <i class="fa fa-heart"></i>
  </div>

  <div class="tinder--cards" <?=$tiklanmaz?>>


  </div>
<br /><br /><br /><br />
  <div class="tinder--buttons" <?=$tiklanmaz?>>
    <button id="nope"><i class="fa fa-remove"></i></button>
    <button id="love"><i class="fa fa-heart"></i></button>
  </div>
</div>





            </div>

        </div>
        </div>






        <script src="assets/js/hammer.min.js"></script>
        <script src="assets/js/finder.js"></script>


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