<?php
require('admin/connection.inc.php');
error_reporting(0);
?>




<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial=scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
  <title>Product Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">

  <!-- <script src="admin/bootstrap46/js/jquery.min.js"></script> -->
  <link rel="stylesheet" href="admin/bootstrap46/css/bootstrap.min.css">
  <script src="admin/bootstrap46/js/poper.min.js"></script>
  <script src="admin/bootstrap46/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('.toggle-bar .toggle-icon').click(function() {
        $('.menu ul').slideToggle('')('.navigation-bar-show');
      });
    });
  </script>
  <script>
    /*
Experimenting with the jquery offset and position
*/
    $(document).ready(function() {
      // var cartCountValue = 0;
      // var cartCount = $('.cart .count');
      // $(cartCount).text(cartCountValue);

      $('.random-btn').on('click', function() {
        $('.cart').offset({
          top: getRndInteger(0, window.innerHeight - 100),
          left: getRndInteger(0, window.innerWidth - 100)
        });
      });

      $('.add-cart-btn').on('click', function() {
        var cartBtn = this;
        var cartCountPosition = $(cartCount).offset();
        var btnPosition = $(this).offset();
        var leftPos =
          cartCountPosition.left < btnPosition.left ?
          btnPosition.left - (btnPosition.left - cartCountPosition.left) :
          cartCountPosition.left;
        var topPos =
          cartCountPosition.top < btnPosition.top ?
          cartCountPosition.top :
          cartCountPosition.top;
        $(cartBtn)
          .append("<span class='count'>1</span>");

        // $(cartBtn).find(".count").each(function(i, count) {
        //   $(count).offset({
        //       left: leftPos,
        //       top: topPos
        //     })
        //     .animate({
        //         opacity: 0
        //       },
        //       800,
        //       function() {
        //         $(this).remove();
        //         cartCountValue++;
        //         $(cartCount).text(cartCountValue);
        //       }
        //     );
        // });
      });

      function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
    });
  </script>

</head>

<body>
  <div class="navigation">
    <div class="container">
      <div class="row">
        <div class="col-6">
          <div class="logo">
            <img src="default-logo.png">
          </div>
        </div>
        <div class="col-6">
          <div class="toggle-bar">
            <span class="toggle-icon fa fa-bars"></span>
          </div>
          <div class="menu">
            <ul>

              <li>
                <a target="_blank" href="admin/login.php">Login</a>
              </li>
              <li>
                <div class="cart" data-toggle="modal" data-target="#myModal" style="cursor: pointer;">
                  <i class="material-icons">
                    shopping_cart
                  </i>
                  <span id="cart_count" class="count">0</span>
                </div>
              </li>

            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>

  <h1 class="mt-4 mb-3">Product List</h1>

  <div class="container">
    <!--Product Grid-->
    <div id="div1">
      <section class="section-grid">



        <div class="grid-prod">
          <?php
          $sql = "SELECT * FROM product_post";
          $result = mysqli_query($con, $sql);
          $checkresult = mysqli_num_rows($result);

          if ($checkresult > 0) {
            while ($row = mysqli_fetch_assoc($result)) {
              $id = $row['id'];
              $serial++;
          ?>
              <div class="prod-grid">
                <?php
                echo "<div class='product-image'>";
                echo "<img src='admin/product_upload_image/" . $row['image'] . "'>";
                echo "</div>";
                ?>
                <h2><?php echo $row['title']; ?></h2>
                <p style="color: red; font-weight: bold; font-size: 20px;"><strong>Price: </strong><?php echo $row['price']; ?>$</p>
                <span><?php echo $row['description']; ?></span>


                <button class="btn btn-info"> Buy <i class="fa fa-shopping-cart" aria-hidden="true"></i></button>
                <button class="product_items btn btn-success add-cart-btn--" data-id="<?php echo $row['id'] ?>">Add To Cart</button>
              </div>
          <?php
            }
          }
          ?>
        </div>




      </section>
    </div>
  </div>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title">My Cart</h1>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
            <table id="cart-table" class="table table-bordered table-stripped">
              <thead>
                <tr>
                  <th>SL</th>
                  <th>Product Name</th>
                  <th>Image</th>
                  <th>Price</th>
                  <th class="text-right">Total Price</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>

              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(function() {
      $('#showdiv1').click(function() {
        $('div[id^=div]').hide();
        $('#div1').show();
      });
      $('#showdiv2').click(function() {
        $('div[id^=div]').hide();
        $('#div2').show();
      });

    })
  </script>

  <script type="text/javascript" src="js/ecom.js"></script>

</body>

</html>