<?php @session_start();

@$username = $_SESSION['username'];
@$id = $_SESSION['id'];
global $x;
$x = 1;
$subtotal = 0;
$query = "select * from cart where username='" . mysqlSecurity($conn, $_SESSION['username']) . "'";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
	while ($row = mysqli_fetch_assoc($result)) {

		echo "<div class='checkout-products'>";
		echo "<div class='checkout-prod-info prod-meta col-md-6' ng-class=" . '"' . "{ 'col-md-4': showPromotions, 'col-md-6': !showPromotions }" . '"' . ">";

		echo "<a href='' target='_blank' class='product-link'>";
		echo "<div class='checkout-img col-lg-2 col-md-2 col-sm-12 col-xs-12'>";
		echo "<img class='prod-thumbnail' src='" . $row["image"] . "'>";
		echo "</div>";
		echo "</a>";
		echo "<div class='checkout-img-info col-lg-10 col-md-10 col-sm-12 col-xs-12'>";
		echo $row['product_name'];
		echo "<div ng-repeat='field in item.variation.fields' class='ng-scope'>";
		echo "<div class='variation ng-binding'>" . $row["amount"] . "X" . $row["price"] . " </div>";
		echo "</div>";
		echo "</div>";
		echo "</div>";
		echo "<div style=' padding-top:10px; font-size:20px;' class='checkout-prod-info col-md-2 text-center-md  hidden-sm hidden-xs'>HK$" . $row["price"] . "</div>";
		echo "<!-- button -->";
		echo "<div class='checkout-prod-info col-md-2 text-center' style='padding-top:5px'>";
		echo "<div class='info-input-group'>";

		echo "<form method='POST' action='includes/add_cart.php?check=amount' class='input-group-btn'>";

		echo  "<input value='" . $row["id"] . "' name='id' class='hidden'/>";
		echo "<input value='0' name='ctrl' class='hidden'/>";
		echo "<input type='submit' name='submit' value='-' class='btn btn-default btn-checkout' />";
		echo "</form>";

		echo "<input readonly style='' class='form-inline form-control-quantity ' type='text' value='" . $row["amount"] . "'>";

		echo "<form method='POST' action='includes/add_cart.php?check=amount' class='input-group-btn'>";
		echo  "<input value='" . $row["id"] . "' name='id' class='hidden'/>";
		echo "<input value='1' name='ctrl' class='hidden'/>";
		echo "<input type='submit' name='submit' value='+' class='btn btn-default btn-checkout' />";
		echo "</form>";

		echo "</div>";
		echo "</div>";
		echo "<!--End  button -->";

		$price = $row["price"] * $row["amount"];
		echo "<div class='checkout-prod-info-r col-md-2 text-right'>HK$" . $price . " <br>
							<a style='font-size:15px' href='includes/add_cart.php?check=delete&name=" . $row["product_name"] . "&from=checkout'>remove&nbsp;&nbsp;</a>
				 		</div>";
		echo "</div>";
		@$subtotal = $subtotal + $price;
		$_SESSION["subtotal"] = $subtotal;
		@$item_amount = $item_amount + $row["amount"];
		$_SESSION["item_amount"] = $item_amount;

		$product_name = str_replace('<div class="Dark">', 'D.', $row["product_name"]);
		$product_name = str_replace('<div class="White">', 'W.', $product_name);
		$product_name = str_replace('<div class="Pink">', 'P.', $product_name);
		$product_name = str_replace('<div class="Brown">', 'B.', $item_name);
		$product_name = str_replace('</div>', '_', $product_name);

		$_SESSION["item_name_$x"] = $product_name;
		$_SESSION["amount_$x"] = $row["price"];
		$_SESSION["quantity_$x"] = $row["amount"];
		$_SESSION["paypal_count"] = $x;
		$x++;
	}
	if ($_SESSION["subtotal"] <= 800) {
		$_SESSION["item_name_$x"] = "Delivery Fee";
		$_SESSION["amount_$x"] = 48;
		$_SESSION["quantity_$x"] = 1;
		$_SESSION["paypal_count"] = $x;
		$_SESSION["Delivery"] = 1;
		$_SESSION["Tsubtotal"] = $_SESSION["subtotal"];
		$subtotal = $subtotal + 48;
		$_SESSION["subtotal"] = $subtotal;
	} else {
		$_SESSION["Delivery"] = 0;
		$_SESSION["Tsubtotal"] = $_SESSION["subtotal"];
	}
} else {
	echo "none";
}
?>

<!-- overlay stylesheet -->
<style>
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        content: "";
        background: white;
        opacity: .1;
    }
</style>

<script>
// cart-product ad-hoc fix
window.onload = function () {
    function shadowAmount(id, value, price, original_price, $inputGroupSelector, delayedSeconds = 1000) {
        $inputGroupSelector.prepend('<div class="overlay"></div>');
        $.when(
            amount(id, value, price, original_price)
        ).then(function(){
            setTimeout(function(){
                $inputGroupSelector.find('.overlay').remove();
            }, delayedSeconds);
        });
    }

    const $cartProducts = $('.cart-products').find('div').eq(0);
    const $minus = $cartProducts.find('input[type="submit"][value="-"]');
    const $add = $cartProducts.find('input[type="submit"][value="+"]');

    // onclick="amount("264","-",48,48)"
    $minus.each(function(){
        const numbers = $(this).prop('outerHTML').match(/\d+/g);
        const $inputGroup = $(this).closest('.info-input-group');
        $inputGroup
            .attr('data-id', numbers[0])
            .attr('data-price', numbers[1])
            .attr('data-original_price', numbers[2]);
    });


    $cartProducts.find('input[type="submit"][value="-"]').removeAttr('onclick').on('click', function(){
        const $a = $(this).closest('.info-input-group');
        let value = $a.find('input[type="number"]').val();
        shadowAmount($a.data('id'), --value, $a.data('price'), $a.data('original_price'), $a);
    });

    $cartProducts.find('input[type="submit"][value="+"]').removeAttr('onclick').click(function(){
        const $a = $(this).closest('.info-input-group');
        let value = $a.find('input[type="number"]').val();
        shadowAmount($a.data('id'), ++value, $a.data('price'), $a.data('original_price'), $a);
    });

    $cartProducts.find('input[type="number"]').removeAttr('onchange').change(function(){
        const $a = $(this).closest('.info-input-group');
        let value = $a.find('input[type="number"]').val();
        shadowAmount($a.data('id'), value, $a.data('price'), $a.data('original_price'), $a);    
    });
}
</script>