<?php require 'db.php';
if ($uye_bilgi_getir["cark"] == "0") {
 ?>
<head>
    <meta charset="UTF-8">
    <title> <?php echo $site_baslik; ?> || Hediye Çarkı </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        outline: none;
    }

    body {
        font-family: Arial, Helvetica, sans-serif;
        display: flex;
        align-items: center;
        height: 100vh;
        overflow: hidden;
        background: #e2f0f7;
    }
    h1 {
        margin-top: 40px;
        text-align: center;
        font-size: 25px;
    }

    h2 {
        margin-top: 40px;
        text-align: center;
        color: white;
    }

    h3 {
        margin-top: 20px;
        text-align: center;
    }

    p {
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 2%;
    }

    li {
        margin-top: 20px;
        color: white;
    }

    .box {
        height: 500px;
        width: 500px;
        position: relative;
        margin: auto;
    }

    .wheel {
        width: 100%;
        height: 100%;
        position: relative;
        border: 10px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        transition: all ease 5s;
        box-shadow: 0 3px 20px #000;
    }

    .wheel:after {
        position: absolute;
        content: '';
        width: 32px;
        height: 32px;
        background-size: 32px;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
    }

    span {
        width: 50%;
        height: 50%;
        display: inline-block;
        position: absolute;

    }

    .section1 { /* 10kredi */
        clip-path: polygon(100% 15%, 0 15%, 50% 100%);
        background-color: #dc143c;
        top: -60px;
        left: 90px;
        width: 63%;
        height: 63%;
        color: white;
    }
    .section4 { /* 30 kredi */
        clip-path: polygon(100% 15%, 0 15%, 50% 100%);
        background-color: #ff8c00;
        top: -60px;
        left: 90px;
        width: 63%;
        height: 63%;
        color: white;
    }

    .section2 { /* PAS */
        clip-path: polygon(100% 15%, 0 15%, 50% 100%);
        background-color: #2e2c33;
        top: -60px;
        left: 90px;
        width: 63%;
        height: 63%;
        transform-origin: center bottom;
        transform: rotate(-60deg);
        color: white;

    }
    .section5 { /* PAS 2 */
        clip-path: polygon(100% 15%, 0 15%, 50% 100%);
        background-color: #008000;
        top: -60px;
        left: 90px;
        width: 63%;
        height: 63%;
        transform-origin: center bottom;
        transform: rotate(-60deg);
        color: white;

    }

    .section3 { /* 50 kredi */
        clip-path: polygon(100% 15%, 0 15%, 50% 100%);
        background-color: #4b0082;
        top: -60px;
        left: 90px;
        width: 63%;
        height: 63%;
        transform-origin: center bottom;
        transform: rotate(60deg);
        color: white;
    }
    .section6 { /* 20 kredi */
        clip-path: polygon(100% 15%, 0 15%, 50% 100%);
        background-color: #ffd700;
        top: -60px;
        left: 90px;
        width: 63%;
        height: 63%;
        transform-origin: center bottom;
        transform: rotate(60deg);
        color: white;
    }
    .spin {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 75px;
        height: 75px;
        border-radius: 50%;
        border: 4px solid #fff;
        background-color: #3b29d9;
        color: #fff;
        box-shadow: 0 5px 20px #000;
        font-weight: bold;
        font-size: 22px;
        cursor: pointer;
    }

    .spin::after {
        content: '';
        position: absolute;
        left: 22px;
        top: -50px;
        border-width: 24px 12px;
        border-style: solid;
        border-color: transparent;
        border-bottom-color: #534c75;
    }
    .sections1 .section3 b {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .sections2 .section3 b {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .sections1 .section1 b,
    .sections2 .section1 b {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    .sections1 .section2 b,
    .sections2 .section2 b {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    span b {
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    .sections2 {
        width: 100%;
        height: 100%;
        transform: rotate(-180deg);
    }

    .spin:active {
        width: 70px;
        height: 70px;
        font-size: 18px;
    }

    .container {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: stretch;
        overflow: hidden;
    }

    @keyframes pink_fade {
        0% {
            color: rgb(250, 213, 255);
        }

        100% {
            color: rgb(255, 255, 255);
        }
    }

    @-webkit-keyframes pink_fade {
        0% {
            color: rgb(250, 213, 255);
        }

        100% {
            color: rgb(255, 255, 255);
        }
    }

    .pink_fade {
        background-image: none !important;
        animation: pink_fade .9s ease-in-out;
        -webkit-animation: pink_fade .9s ease-in-out;
    }
    </style>
    <script>
    const action = ["10", "PAS", "20", "30", "PAS", "50"];
    let deg = 0;
    let shiftNumber = 0;
    function rotatefunction() {
    	let radius = Math.round(Math.random() * 6) * 60;
    	let leastCircleRadius = 1800;
    	deg = deg + radius + leastCircleRadius;
    	document.getElementById("wheel").style.transform = "rotate(" + deg + "deg)";

    	shiftNumber = deg % 360 / 60;


    	setTimeout(function () {
    		let text = action[shiftNumber];
    		window.location.href = "cark.php?sonuc=" + action[shiftNumber];
    		let new_li = document.createElement('li');
    		new_li.innerHTML = '<span class="pink_fade">' + action[shiftNumber] + '</span>';
    		console.log(new_li.innerHTML);
    		let Wheel_stopped = document.getElementById('Wheel_stopped');
    		Wheel_stopped.prepend(new_li);
    	}, 5000);

    }


    </script>

</head>

<body>
      <div id="box" class="box">
          <div id="wheel" class="wheel">
              <div class="sections1">
                  <span class="section1"><b> 10 Kredi </b></span>
                  <span class="section2"><b> PAS </b></span>
                  <span class="section3"><b> 50 Kredi </b></span>
              </div>
              <div class="sections2">
                  <span class="section4"><b> 30 Kredi </b></span>
                  <span class="section5"><b> PAS </b></span>
                  <span class="section6"><b> 20 Kredi </b></span>
              </div>
          </div>

          <h1>Günlük Hediyeni Almak İçin Çarkı Çevir!</h1>
          <h3 id="category"></h3>
          <button class="spin" onclick="rotatefunction()">Çevir</button>
      </div>
</body>
<?php }else {
  echo '<script> alert("Hediye Çarkını Günde 1 Defa Çevirebilirsin."); window.location.href = "panel.php";</script>';
} ?>
<?php
if ($_GET["sonuc"]) {
  $sonuc = $_GET["sonuc"];

  if ($sonuc == "PAS") {
    $uyekredieklecark = mysqli_query($db, "UPDATE uyeler SET cark = '1'  WHERE id = '$uyeidsession'");
    if ($uyekredieklecark) {
      echo '<script>swal("Üzgünüz :( ", "Şansınıza PAS Geldi Yarın Tekrar Deneyebilirsin", "error"); setTimeout(function(){ window.location.assign("panel.php");}, 3000);</script>';
    }
  }else{
  $uyekredieklecark = mysqli_query($db, "UPDATE uyeler SET uye_kredi = uye_kredi + '$sonuc', cark = '1'  WHERE id = '$uyeidsession'");
  if ($uyekredieklecark) {
    echo '<script> swal("Tebrikler!", "'.$sonuc.' Kredi Kazandınız Krediniz Hesabınıza Aktarıldı!", "success"); setTimeout(function(){ window.location.assign("panel.php");}, 3000);</script>';
  }
}
}
 ?>
