<!DOCTYPE html>
<html>

<head>
  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> -->
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link href="css/ionicons.css" media="all" rel="stylesheet"
          type="text/css">
  <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript" src="js/jquery.js"></script>

  <script type="text/javascript" src="js/functions.js"></script>
  <title>Notifications</title>
  <script type="text/javascript">
    $(document).ready(function () {

      if (checkLogin()) {
let details = JSON.parse(localStorage['userDetails'].toString());
        var data = '';
        var data1 = '';

        $.ajax({
          url: 'https://dtuat.com/apps/mpgarments/appcode/fetch_all_notifications.php',
          type: 'post',
          data:{username:details.username},
          dataType: 'json',

          success: function (response) {
            console.log(response);
            //console.log('data above');
               $.each(response, function (index, item) {

              data1 +='<div class="row col s12" style="border: 1px solid; padding: 10px;box-shadow: 5px 10px #888888;border-radius: 15px 0px 15px 0px;">';
                //data1 +='<div class="col s12">';
                if(item.photo_link){
                  data1 +='<div class="col s4" ><img src="'+img+item.photo_link+'" height="60px" width="60px" style="border-radius: 50%;border: 2px solid #888;padding: 5px;margin: 5px 0px 0px 0px;"></div>';
                }else{
                  data1 +='<div class="col s4" ><img src="img/0.png" height="60px" width="60px" style="border-radius: 50%;border: 2px solid #888;padding: 5px;margin: 5px 0px 0px 0px;"></div>';
                }
                
                data1 +='<div class="row col s6 center"><span style="font-size:20px">'+item.title+'</span></div>';
                 data1 +='<div class="col s6 center">'+item.content+'</div>';
                 data1 +='<div class="col s6 center">'+item.notification_date+'</div>';

                // data1 +='</div>';

              data1 +='</div>';


            // $.each(response, function (index, item) {
            // // console.log(item);
            // data1 +='<div style="border: 1px solid; padding: 10px;box-shadow: 5px 10px #888888;border-radius: 15px 0px 15px 0px;">';
            // data1 +='<div class="col s12 center"><span style="font-size:20px">'+item.title+'</span></div>';

            // if(item.photo_link==''){
            // data1 +='<div class="col s12">'+item.content+'</div>';
            // }
            // else
            // {
            // data1 +='<div >';
            // //data1 +=' <div col s8>';
            // data1 +='<div class="col s4" ><img src="https://dtuat.com/apps/mpgarments/images/'+item.photo_link+'" height="60px" width="60px" style="border-radius: 50%;border: 2px solid #888;padding: 5px;"></div>';
            // data1 +=' <div style="text-align: justify;font-family: -webkit-body;">'+item.content+'</div>';



            // data1+='</div>';
            // }

            // data1 +='<div col s12>'+item.notification_date+'</div>';
            // data1 +='</div><br>';


             });
            $('.news').empty().append(data1);
          },
          error: function (response) {
            console.log(response);
          },
          complete: function () {
            $('.tabs').tabs();
          }
        });

      }
      else {
        alert("Please login");
        window.location.href = 'login.html';
      }
    });
  </script>
</head>

<body>
 
 
<!-- 
  <div class="main-container" id="main-container" style="margin-top: 67px;"> -->
              
       <header class="header white-text pink-bg z-depth-1">
    <div class="navbar">
      <button class="pink-bg navigation button-collapse" onclick="goBack();">
        <i class="ion-android-arrow-back"></i>
      </button>
      <h5>Notifications</h5>
      <button class="pink-bg navigation" onclick="window.location.href='';">
      
      </button>
    </div>
  
  </header>
  <div class="main-container" id="main-container" style="margin-top: 65px">
    <div class="row" style="display: block;">
       <div class="col s12">
      <div class="news"></div>
       </div>
          <br><br>
           <!--  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
           
            <script> document.write(new Date().toLocaleDateString()); </script>
              <hr>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
           
            <script> document.write(new Date().toLocaleDateString()); </script> -->
        </div>



    </div>      

   </div> 
      <div class="footer-show">
      <div class="footer-icon no-gap center-align" onclick="window.location.href='index.html'" style="color:white">
        <i class="ion-home footer-icon" style="color:white"></i>
        <p class="footer-label no-gap">
          Home
        </p>
      </div>
     
      <div class="footer-icon no-gap center-align" onclick="window.location.href='cart.html'" style="color:white">
        <i class="ion-bag footer-icon" style="color:white"></i>
        <div class="badge">
            <span class="cart-badge badge-count">1</span>
        </div>
        <p class="footer-label no-gap">
          Bag
        </p>
      </div>
      <div class="footer-icon no-gap center-align" onclick="window.location.href='account.html'" style="color:white">
        <i class="ion-ios-person-outline footer-icon" style="color:white"></i>
        <p class="footer-label no-gap">
          Account
        </p>
      </div>
    </div>
      
      
  
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script type="text/javascript" src="js/myfunctions.js"></script>
  <script type="text/javascript" src="js/jR3DCarousel.min.js"></script>
  
  

  <!-- <script type="text/javascript">
    $(document).ready(function () {
      var slideImages = [{src: 'img/3.jpg'},
        {src: 'img/5.jpg'},
        {src: 'img/6.jpeg'},
        {src: 'img/8.jpg'}]
      //var jR3DCarousel;

      jR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
        width: 410, /* largest allowed width */
        height: 200, /* largest allowed height */
        slides: slideImages /* array of images source */
      });

    })
  </script> -->
  <script type="text/javascript">
    //    $(document).ready(function () {
    //      var slideImages = [{src: 'https://dtuat.com/DT/images/1.jpg'},
    //        {src: 'https://dtuat.com/DT/images/2.jpg'},
    //        {src: 'https://dtuat.com/DT/images/3.jpg'}];
    //      //var jR3DCarousel;
    //
    //      jR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
    //        width: 410, /* largest allowed width */
    //        height: 200, /* largest allowed height */
    //        slides: slideImages /* array of images source */
    //      });
    //    })
  </script>
  <script>
		function goBack() {
		    window.history.back();
		}
	</script>
</body>
</html>