<?php
include_once '../lib/includes/session.php';
if (!check_login()){
    header('Location: ../login.php');
}
?>

    <!DOCTYPE html>
    <html>
    <?php $title = "Products"; include_once '../lib/templates/requirements.php'; ?>
    <body>
    <?php $active = 'products'; include_once '../lib/templates/navbar.php'; ?>
    <main>
        <div class="container">
            <div class="row"></div>
            <div class="row">
                <div class="input-field col s10 offset-s1 m8 offset-m2 l6 offset-l3">
                    <select id="filter">
                        <option value="1">All Products</option>
                        <option value="2">Active Products</option>
                        <option value="3">Inactive Products</option>
                    </select>
                    <label for="filter">Show:</label>
                </div>
            </div>
        </div>
        <div id="return"></div>
        <div class="fixed-action-btn">
            <a class="btn-floating btn-large green pulse" href="create.php">
                <i class="large material-icons">add_circle_outline</i>
            </a>
        </div>
        <?php include_once '../lib/templates/requirements_js.php'; ?>
        <script type="text/javascript">
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>
        <script type="text/javascript">
            $(function () {

                function getUrlVars() {
                    var vars = {};
                    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                        vars[key] = value;
                    });
                    return vars;
                }

                var page = 1;
                var filter = $("#filter").find("option:selected").val();

                results(page, filter);

                $('#filter').on('change', function() {
                    var filter = $("#filter").find("option:selected").val();
                    results(page, filter)
                });

                $('body').on('click', '#back', function(){
                    var page = parseInt($('.base li.active').text());
                    if ((page - 1) > 0) {
                        page -= 1;
                        var filter = $("#filter").find("option:selected").val();
                        results(page, filter);
                    }
                });
                $('body').on('click', '#next', function(){
                    var total_pages = $('.pagination').length;
                    var page = parseInt($('.base li.active').text());
                    var filter = $("#filter").find("option:selected").val();
                    if ((page + 1) <= total_pages) {
                        page += 1;
                        results(page, filter);
                    }
                });
                $('body').on('click', '.page-num', function(){
                    var total_pages = $('.pagination').length;
                    var page = parseInt($('.base li.active').text());
                    var temp_page = $(this).children('a').text();
                    var filter = $("#filter").find("option:selected").val();
                    if ((temp_page <= total_pages) && (temp_page > 0)) {
                        page = +temp_page;
                        results(page, filter);
                    }
                });

                function results(number, filter) {
                    $.post('index_ajax.php', {
                            'page': number,
                            'filter': filter
                        }, function (data) {
                            $('#return').html(data);
                        }, 'html'
                    )
                }
            })
        </script>
    </main>
    <?php include_once '../lib/templates/footer.php'; ?>
    </body>
    </html>
