
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?php
include "../login/landing_api.php";

is_active_session();

$last_win_date = $_SESSION['last_win_date'];
$cst_id = $_SESSION['cst_id'];
$cur_date = date('Y-m-d');
$unredeem_gift = get_unredeem_prize_details($cst_id);

//print_r($unredeem_gift);


?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Funland | Everyone is winner</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<style>
body{
 background-image: url("../login/images/bg.jpg");
 background-color: #cccccc; 
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.pill-button{
border: 3px solid #FADC06;
    border-radius: 45px;
    background-image: linear-gradient(to right,#FADC06, #FADC06);
    box-shadow: 0px 0px 4px 4px #2dbdbb;
    height: 50px;
    width: 80%;
    text-align: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 800;
    color: #951b80;
}

.input-kd{
    border: 3px solid #fff;
    border-radius: 50%;
    background-image: linear-gradient(to right,#E6E6E6, #fff);
    box-shadow: 0px 0px 4px 4px #2dbdbb;
    height: 50px;
    width: 50px;
    text-align: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 800;
    color: red;
}
.timer-circle{
     padding-left:10px;
    padding-right:10px;
}
.timer-text{
    text-align: center;
    margin-top: 15px;
    font-size: 19px;
    color: white;
    font-weight: 700;    
}

.label-kd{
color: #fcda00;
}
.fl-right{
    float: right;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

.win-img{
    height:285px;
}

.gift-box-kd{
    margin-top: -163px;
}

.term1{
height: 29px;float:right;    
}
.term2{
height: 29px;float:left;    
}
    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {


.win-img{
    height:285px;
}
   
.gift-box-kd{
    margin-top: -163px;
} 

.term1{
height: 29px;float:right;    
}
.term2{
height: 29px;float:left;    
}
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

.win-img{
    height: 430px;
}

.gift-box-kd{
    margin-top: -252px;
}

.term1{
height: 57px;float:right;    
}
.term2{
height: 57px;float:left;    
}
    
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

.win-img{
    height: 430px;
}

.gift-box-kd{
    margin-top: -252px;
}

.term1{
height: 57px;float:right;    
}
.term2{
height: 57px;float:left;    
}
    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

.win-img{
    height: 430px;
}

.gift-box-kd{
    margin-top: -252px;
}

.term1{
height: 57px;float:right;    
}
.term2{
height: 57px;float:left;    
}
    
}




    
</style>  
  
</head>
<body>
<div class="container">

<div style="height:96px;"></div>

<div style="
    top: 15px;
    left: 201px;
    position: absolute;
">
<img src="../login/images/funland-logo.png" style="height: 57px;" >    
</div>

<div style="
    top: 15px;
    right: 201px;
    position: absolute;
">
<img src="../login/images/hashtag.png" style="height: 57px;" >    
</div>


<div style="height:64px;"></div> 

<h3 style="text-align:center;color:white" >يمكنك المحاولة مرة أخرى بعد</h1>

<div style="height:64px;"></div> 

<div class="row" style="align-items: center;
    justify-content: center;">


<div class="timer-circle">
    <div class="input-kd" id="dd">0</div>
    <div class="timer-text">يوم</div>

</div>

<div class="timer-circle">
    <div class="input-kd" id="hh">0</div>
    <div class="timer-text">ساعات</div>

</div>

<div class="timer-circle">
    <div class="input-kd" id="mm">0</div>
    <div class="timer-text">دقيقة</div>

</div>

<div class="timer-circle">
    <div class="input-kd" id="ss">0</div>
    <div class="timer-text">ثانية</div>

</div>


</div>

    
</div> 

<?php if(isset($unredeem_gift)){?>

<div style="height:64px;"></div>

<h4 style="color:white;text-align:center;">
لديك جائزه لم تقم بإستردادها بعد
</h4>

<div style="height:16px;"></div>

<div style="text-align:center;">

<a class="pill-button btn" href="https://funlandksa.com/luckywheel/prize/?prizeCode=<?php echo $unredeem_gift['prize_code']; ?>">
أضغط هنا لإستردادها    
</a>

<?php } else{ }?>

</div>

<div style="height:64px;"></div> 
<div style="height:64px;"></div> 
<div style="height:64px;"></div> 
<div style="height:64px;"></div> 
<div style="height:64px;"></div> 
<div style="height:64px;"></div> 
<div style="height:64px;"></div> 
<div style="height:64px;"></div> 
<div style="height:64px;"></div> 

<?php 
//$date=date_create($last_win_date);

$date = strtotime("+14 day", strtotime($last_win_date));
$counter_date = date("M d, Y", $date);

//$counter_date = date_format($date,"M d, Y");

?>
    
</body>


</html>

<script>
    
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $counter_date; ?> 23:59:59").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  //document.getElementById("counter").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    document.getElementById("dd").innerHTML = days;
document.getElementById("hh").innerHTML = hours;
document.getElementById("mm").innerHTML = minutes;
document.getElementById("ss").innerHTML = seconds;
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    //document.getElementById("counter").innerHTML = "EXPIRED";

document.getElementById("dd").innerHTML = 0;
document.getElementById("hh").innerHTML = 0;
document.getElementById("mm").innerHTML = 0;
document.getElementById("ss").innerHTML = 0;
  }
}, 1000);
</script>    
