<?php
session_start();
if (!@$_SESSION['admin']) {
	$url = "index.php";
	echo "<script language='javascript'
	type='text/javascript'>";
	echo "window.location.href='$url'";
	echo "</script>";
}
$_SESSION["page_name"] = "products";

if (!isset($_GET['page']) && isset($_GET['productreset'])) {
	$_SESSION["sideclick"] = 1;
}
//This variables were create for Order By statment in the sql query.
$orderBy = 'id';
$sortOrder = 'asc';

if (isset($_GET['sort'])) {
	$orderBy = $_GET['sort'];

	//$filter is a variable prepare for the javascript function "changePage",which remove the last character of the string for other purpose.
	//For that,do not remove the comma at the end of the string,the js function itself locate at includes/page.php
	$filter = "sort:{$orderBy},";
}
if (isset($_GET['order'])) {
	$sortOrder = $_GET['order'];
	$filter .= "order:{$sortOrder},";
}
//$reverseOrder is in contrast to $sortOrder which is prepare for reverse order's action
$reverseOrder = $sortOrder === 'asc' ? 'desc' : 'asc';
?>
<!DOCTYPE html>
<!--
BeyondAdmin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.2.0
Version: 1.0.0
Purchase: http://wrapbootstrap.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
    <!-- Head -->
    <head>
        <meta charset="utf-8" />
        <title>Amigo Spa & Beauty</title>

        <meta name="description" content="Dashboard" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="../en/hkier-ico.jpg" type="image/x-icon"/>
        <link rel="shortcut icon" href="../en/hkier-ico.jpg" type="image/x-icon"/>


        <!--Basic Styles-->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link id="bootstrap-rtl-link" href="" rel="stylesheet" />
        <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
        <link href="assets/css/weather-icons.min.css" rel="stylesheet" />

        <!--Fonts-->
        <link href="../en/fonts.googleapis.com/css@family=Open+Sans_3A300italic,400italic,600italic,700italic,400,600,700,300" rel="stylesheet" type="text/css"/>

        <!--Beyond styles-->
        <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/demo.min.css" rel="stylesheet" />
        <link href="assets/css/typicons.min.css" rel="stylesheet" />
        <link href="assets/css/animate.min.css" rel="stylesheet" />
        <link href="css/style.css" rel="stylesheet" />
        <link id="skin-link" href="" rel="stylesheet" type="text/css" />

        <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
        <script src="assets/js/skins.min.js"></script>
    </head>

    <style>
        .page-sidebar .sidebar-menu li.active-b:not(.open):before{
            display:block;
        }

        .page-sidebar .sidebar-menu  li:before  {
            background-color: #80E1FF;
        }

        .page-sidebar .sidebar-menu li.active-b>a{
            background-color: #f5f5f5;
        }

        .titlesWrapper a {
            text-decoration: none;
            color: inherit;
        }

    </style>

    <!-- Body -->
    <body>
        <!-- Loading Container -->

        <!--  /Loading Container -->
        <!-- Navbar -->
        <?php include 'includes/Settings.html';?>
        <!-- /Navbar -->
        <!-- Main Container -->
        <div class="main-container container-fluid">
            <!-- Page Container -->
            <div class="page-container">
                <!-- Page Sidebar -->
                <div class="page-sidebar" id="sidebar">
                    <!-- Sidebar Menu -->
                    <?php include 'includes/Sidebar_Menu.php';?>
                    <!-- /Sidebar Menu -->
                </div>
                <!-- /Page Sidebar -->
                <div class="page-content">
                    <!-- Page Header -->
                    <div class="page-header position-relative">
                        <div class="header-title">
                            <h1>
                                產品管理
                            </h1>
                        </div>
                        <!--Header Buttons-->
                        <div class="header-buttons">
                            <a class="fullscreen" id="fullscreen-toggler" href="#">
                                <i class="glyphicon glyphicon-fullscreen"></i>
                            </a>
                        </div>
                        <!--Header Buttons End-->
                    </div>
                    <!-- /Page Header -->
                    <!-- Page Body -->
                    <div class="page-body">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" onsubmit="return check_delete()"></form>
                                        <input type="hidden" name="action" value="save" />
                                        <input type="hidden" id="delete" name="delete" value="no" />
                                        <!--Add news btn-->
                                        <div align="left" class="add_btn">
                                            <form action="includes/edit_record.php?insert=1" method="post">
                                                <input class="hidden" name="page" value="products"/>
                                                <input type="button" onclick="submit()" value="新增產品"/>
                                            </form>
                                        </div>
                                        <!--End of add news btn-->
                                        <table class='' width="100%">
                                            <tr style="background-color:rgba(115,213,255,1.00); border-radius:10px; color:#424C40;">
                                                <td><a href="?sort=id&order=<?php echo $reverseOrder; ?>"><span>id</span><span>&#8645;</span></a></td>
                                                <td><a href="?sort=name&order=<?php echo $reverseOrder; ?>"><span>產品名稱</span><span>&#8645;</span></a></td>
                                                <td class='hidden-xs hidden-sm'><a href="?sort=outline&order=<?php echo $reverseOrder; ?>"><span>簡述</span><span>&#8645;</span></a></td>
                                                <td class='hidden-xs hidden-sm'><a href="?sort=price&order=<?php echo $reverseOrder; ?>"><span>實價</span><span>&#8645;</span></a></td>
                                                <td><a href="?sort=belong&order=<?php echo $reverseOrder; ?>"><span>分類</span><span>&#8645;</span></a></td>
                                                <td class='hidden-xs hidden-sm'><a href="?sort=created&order=<?php echo $reverseOrder; ?>"><span>創建時間</span><span>&#8645;</span></a></td>
                                                <td class='hidden-xs hidden-sm'><span>產品圖像</span></td>
                                                <td><span>詳情</span></td>
                                            </tr>
                                            <?php
$sql = "select * from `productstable`";

if (isset($_GET['page'])) {
	$page = $_GET['page'];
} else {
	$page = 1;
}
$totalpage = 10;

include "../conf/conn.php";
//$sql1 = "desc orders";
//$result = mysqli_query($conn,$sql1);
//while($row = $result->fetch_assoc()) {echo $row["Field"];}
//$sql = $sql . @$_SESSION["where"];
// $sql = $sql . " where `status` != 'delete' "; //bear 20190829
//added reset searching
if (isset($_SESSION['sideclick'])) {
	if ($_SESSION['sideclick'] == 1) {
		unset($_SESSION["where"]);
		$_SESSION['sideclick'] = 2;
	}

} //end reset searching
if (!empty(@$_SESSION["where"])) {
	$sql = $sql . @$_SESSION["where"];
} else {
	$sql = $sql . " where `status` != 'delete' "; //bear 20190829
}
//end added at 2019-11-15 where !='delete' by jack

$result = mysqli_query($conn, $sql);
$num = mysqli_affected_rows($conn);
$page_num = 15;
$show_num = 0;
if ($num > 0) {
	$Ttotalpage = floor($num / $page_num);
	if ($num % $page_num > 0) {
		$Ttotalpage++;
	}
	$totalpage = $Ttotalpage;
	$show_num = ($page - 1) * $page_num;
}

$sql = $sql . " ORDER BY {$orderBy} {$sortOrder} limit " . $show_num . "," . $page_num;
// unset($_SESSION["where"]);
$result = mysqli_query($conn, $sql);

if ($result->num_rows > 0) {
	while ($row = $result->fetch_assoc()) {
		echo "<tr>
                    <td>" . $row["id"] . '</td>
                    <td><a href="../en/includes/product_select.php?id=' . $row["id"] . '">' . $row["name"] . '</a></td>
                    <td class="hidden-xs hidden-sm">' . $row["outline"] . "</td>
                    <td class='hidden-xs hidden-sm'>HK$" . $row["price"] . "</td>
                    <td>" . $row["belong"] . "</td>
                    <td class='hidden-xs hidden-sm'>" . $row["created"] . "</td>
                    <td class='hidden-xs hidden-sm'><img height='150px' width='150px' src='" . $row["image"] . "'></td>
					<td>
					<a href='products_detail.php?id=" . $row["id"] . "'>詳情</a>
					</td>
                  </tr>";
	}
}
?>
                                        </table>
                                        <!--Spacer-->
                                        <div style="height:10px;"></div>
                                        <?php include 'includes/page.php';?>
                                        <!--End of Spacer-->

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Page Body -->
                    </div>
                    <!-- /Page Content -->
                </div>
                <!-- /Page Container -->
                <!-- Main Container -->

            </div>

            <!--Basic Scripts-->
            <script src="assets/js/jquery-2.0.3.min.js"></script>
            <script src="assets/js/bootstrap.min.js"></script>
            <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>

            <!--Beyond Scripts-->
            <script src="assets/js/beyond.js"></script>


            <!--Page Related Scripts-->
            <!--Sparkline Charts Needed Scripts-->
            <script src="assets/js/charts/sparkline/jquery.sparkline.js"></script>
            <script src="assets/js/charts/sparkline/sparkline-init.js"></script>

            <!--Easy Pie Charts Needed Scripts-->
            <script src="assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
            <script src="assets/js/charts/easypiechart/easypiechart-init.js"></script>

            <!--Flot Charts Needed Scripts-->
            <script src="assets/js/charts/flot/jquery.flot.js"></script>
            <script src="assets/js/charts/flot/jquery.flot.resize.js"></script>
            <script src="assets/js/charts/flot/jquery.flot.pie.js"></script>
            <script src="assets/js/charts/flot/jquery.flot.tooltip.js"></script>
            <script src="assets/js/charts/flot/jquery.flot.orderBars.js"></script>
            <script src="../en/js/myFunction.js"></script>

            <script>
                                                    // If you want to draw your charts with Theme colors you must run initiating charts after that current skin is loaded
                                                    $(window).bind("load", function () {

                                                        /*Sets Themed Colors Based on Themes*/
                                                        themeprimary = getThemeColorFromCss('themeprimary');
                                                        themesecondary = getThemeColorFromCss('themesecondary');
                                                        themethirdcolor = getThemeColorFromCss('themethirdcolor');
                                                        themefourthcolor = getThemeColorFromCss('themefourthcolor');
                                                        themefifthcolor = getThemeColorFromCss('themefifthcolor');

                                                        //Sets The Hidden Chart Width
                                                        $('#dashboard-bandwidth-chart')
                                                                .data('width', $('.box-tabbs')
                                                                        .width() - 20);

                                                        //-------------------------Visitor Sources Pie Chart----------------------------------------//
                                                        var data = [
                                                            {
                                                                data: [[1, 21]],
                                                                color: '#fb6e52'
                                                            },
                                                            {
                                                                data: [[1, 12]],
                                                                color: '#e75b8d'
                                                            },
                                                            {
                                                                data: [[1, 11]],
                                                                color: '#a0d468'
                                                            },
                                                            {
                                                                data: [[1, 10]],
                                                                color: '#ffce55'
                                                            },
                                                            {
                                                                data: [[1, 46]],
                                                                color: '#5db2ff'
                                                            }
                                                        ];
                                                        var placeholder = $("#dashboard-pie-chart-sources");
                                                        placeholder.unbind();

                                                        $.plot(placeholder, data, {
                                                            series: {
                                                                pie: {
                                                                    innerRadius: 0.45,
                                                                    show: true,
                                                                    stroke: {
                                                                        width: 4
                                                                    }
                                                                }
                                                            }
                                                        });

                                                        //------------------------------Visit Chart------------------------------------------------//
                                                        var data2 = [{
                                                                color: themesecondary,
                                                                label: "Direct Visits",
                                                                data: [[3, 2], [4, 5], [5, 4], [6, 11], [7, 12], [8, 11], [9, 8], [10, 14], [11, 12], [12, 16], [13, 9],
                                                                    [14, 10], [15, 14], [16, 15], [17, 9]],

                                                                lines: {
                                                                    show: true,
                                                                    fill: true,
                                                                    lineWidth: .1,
                                                                    fillColor: {
                                                                        colors: [{
                                                                                opacity: 0
                                                                            }, {
                                                                                opacity: 0.4
                                                                            }]
                                                                    }
                                                                },
                                                                points: {
                                                                    show: false
                                                                },
                                                                shadowSize: 0
                                                            },
                                                            {
                                                                color: themeprimary,
                                                                label: "Referral Visits",
                                                                data: [[3, 10], [4, 13], [5, 12], [6, 16], [7, 19], [8, 19], [9, 24], [10, 19], [11, 18], [12, 21], [13, 17],
                                                                    [14, 14], [15, 12], [16, 14], [17, 15]],
                                                                bars: {
                                                                    order: 1,
                                                                    show: true,
                                                                    borderWidth: 0,
                                                                    barWidth: 0.4,
                                                                    lineWidth: .5,
                                                                    fillColor: {
                                                                        colors: [{
                                                                                opacity: 0.4
                                                                            }, {
                                                                                opacity: 1
                                                                            }]
                                                                    }
                                                                }
                                                            },
                                                            {
                                                                color: themethirdcolor,
                                                                label: "Search Engines",
                                                                data: [[3, 14], [4, 11], [5, 10], [6, 9], [7, 5], [8, 8], [9, 5], [10, 6], [11, 4], [12, 7], [13, 4],
                                                                    [14, 3], [15, 4], [16, 6], [17, 4]],
                                                                lines: {
                                                                    show: true,
                                                                    fill: false,
                                                                    fillColor: {
                                                                        colors: [{
                                                                                opacity: 0.3
                                                                            }, {
                                                                                opacity: 0
                                                                            }]
                                                                    }
                                                                },
                                                                points: {
                                                                    show: true
                                                                }
                                                            }
                                                        ];
                                                        var options = {
                                                            legend: {
                                                                show: false
                                                            },
                                                            xaxis: {
                                                                tickDecimals: 0,
                                                                color: '#f3f3f3'
                                                            },
                                                            yaxis: {
                                                                min: 0,
                                                                color: '#f3f3f3',
                                                                tickFormatter: function (val, axis) {
                                                                    return "";
                                                                },
                                                            },
                                                            grid: {
                                                                hoverable: true,
                                                                clickable: false,
                                                                borderWidth: 0,
                                                                aboveData: false,
                                                                color: '#fbfbfb'

                                                            },
                                                            tooltip: true,
                                                            tooltipOpts: {
                                                                defaultTheme: false,
                                                                content: " <b>%x May</b> , <b>%s</b> : <span>%y</span>",
                                                            }
                                                        };
                                                        var placeholder = $("#dashboard-chart-visits");
                                                        var plot = $.plot(placeholder, data2, options);

                                                        //------------------------------Real-Time Chart-------------------------------------------//
                                                        var data = [],
                                                                totalPoints = 300;

                                                        function getRandomData() {

                                                            if (data.length > 0)
                                                                data = data.slice(1);

                                                            // Do a random walk

                                                            while (data.length < totalPoints) {

                                                                var prev = data.length > 0 ? data[data.length - 1] : 50,
                                                                        y = prev + Math.random() * 10 - 5;

                                                                if (y < 0) {
                                                                    y = 0;
                                                                } else if (y > 100) {
                                                                    y = 100;
                                                                }

                                                                data.push(y);
                                                            }

                                                            // Zip the generated y values with the x values

                                                            var res = [];
                                                            for (var i = 0; i < data.length; ++i) {
                                                                res.push([i, data[i]]);
                                                            }

                                                            return res;
                                                        }
                                                        // Set up the control widget
                                                        var updateInterval = 100;
                                                        var plot = $.plot("#dashboard-chart-realtime", [getRandomData()], {
                                                            yaxis: {
                                                                color: '#f3f3f3',
                                                                min: 0,
                                                                max: 100,
                                                                tickFormatter: function (val, axis) {
                                                                    return "";
                                                                }
                                                            },
                                                            xaxis: {
                                                                color: '#f3f3f3',
                                                                min: 0,
                                                                max: 100,
                                                                tickFormatter: function (val, axis) {
                                                                    return "";
                                                                }
                                                            },
                                                            colors: [themeprimary],
                                                            series: {
                                                                lines: {
                                                                    lineWidth: 0,
                                                                    fill: true,
                                                                    fillColor: {
                                                                        colors: [{
                                                                                opacity: 0.5
                                                                            }, {
                                                                                opacity: 0
                                                                            }]
                                                                    },
                                                                    steps: false
                                                                },
                                                                shadowSize: 0
                                                            },
                                                            grid: {
                                                                hoverable: true,
                                                                clickable: false,
                                                                borderWidth: 0,
                                                                aboveData: false
                                                            }
                                                        });

                                                        function update() {

                                                            plot.setData([getRandomData()]);

                                                            plot.draw();
                                                            setTimeout(update, updateInterval);
                                                        }
                                                        update();


                                                        //-------------------------Initiates Easy Pie Chart instances in page--------------------//
                                                        InitiateEasyPieChart.init();

                                                        //-------------------------Initiates Sparkline Chart instances in page------------------//
                                                        InitiateSparklineCharts.init();
                                                    });

            </script>
            <!--Google Analytics::Demo Only-->
            <script>
                (function (i, s, o, g, r, a, m) {
                    i['GoogleAnalyticsObject'] = r;
                    i[r] = i[r] || function () {
                        (i[r].q = i[r].q || []).push(arguments)
                    }, i[r].l = 1 * new Date();
                    a = s.createElement(o),
                            m = s.getElementsByTagName(o)[0];
                    a.async = 1;
                    a.src = g;
                    m.parentNode.insertBefore(a, m)
                })(window, document, 'script', '../www.google-analytics.com/analytics.js', 'ga');

                ga('create', 'UA-52103994-1', 'auto');
                ga('send', 'pageview');

            </script>

            <script type="text/javascript">
                function check_all(obj, cName) {
                    var checkboxs = document.getElementsByName(cName);
                    for (var i = 0; i < checkboxs.length; i++)
                        checkboxs[i].checked = obj.checked;
                }
                function check_delete() {
                    if ($('input[name="delarr[]"]:checked').length > 0) {
                        if (confirm('確定刪除嗎?')) {
                            document.getElementById("delete").value = "yes";
                            return true;
                        }
                        document.getElementById("delete").value = "no";
                        return false;
                    }
                    document.getElementById("delete").value = "no";
                }
                function sort(action, id) {
                    var result = $.ajax({
                        type: 'POST',
                        data: 'action=' + action + '&id=' + id,
                        url: "../class/newsSort.php",
                        'async': false,
                        'global': false,
                        success: function (data) {
                            return data;
                        },
                        error: function () {
                            return "error";
                        }
                    }).responseText;
                    if (result == "true")
                        location.reload();
                }
            </script>

    </body>
    <!--  /Body -->
</html>
