<?php
$title = 'Product';
require_once('header-links.php');
// require_once('../lib/basic-function.php');
// require_once('../lib/user-functions.php');
// require_once('../lib/investment-plan-functions.php');
// require_once('../lib/package-functions.php');
// require_once('../lib/currency-functions.php');
$package = $basicFunctn->selectAllDlt($basicFunctn->package_tb);
$investment = $basicFunctn->selectAllDlt($basicFunctn->investment_plan_tb);

$subcategory = $basicFunctn->selectAllDlt($basicFunctn->subcategory_tb);
$category = $basicFunctn->selectAllDlt($basicFunctn->category_tb);
?>

<body>
    <div class="app">
        <div class="layout">
            <?php require_once('sidebar.php'); ?>

            <!-- Page Container START -->
            <div class="page-container">
                <?php require_once('header.php'); ?>

                <!-- Content Wrapper START -->
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="page-title">
                            <h4><?php print $title; ?></h4>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-md-8  ml-auto mr-auto">
                                                <form class="form-horizontal mrg-top-40 new_package_form">


                                                    <div class="form-group row">
                                                        <label for="form-1-1" class="col-md-2 control-label">
                                                            Category
                                                        </label>
                                                        <div class="col-md-4">
                                                            <select class="form-control" id="create_category_id" name="create_category_id">
                                                                <option value="">--Select--</option>
                                                                <?php foreach ($category as $e) { ?>
                                                                    <option value="<?php print $e['unique_id']; ?>"><?php print $e['name']; ?></option>
                                                                <?php } ?>
                                                            </select>
                                                        </div>
                                                        <label for="form-1-1" class="col-md-2 control-label">
                                                            Sub Category
                                                        </label>
                                                        <div class="col-md-4">
                                                            <select class="form-control" id="create_subcategory_id" name="create_subcategory_id">
                                                                <option value="">--Select--</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        <label for="form-1-1" class="col-md-2 control-label">
                                                            Status
                                                        </label>
                                                        <div class="col-md-4">
                                                            <select class="form-control" name="create_product_status">
                                                                <option value="">--Select--</option>
                                                                <option value="Available">Available</option>
                                                                <option value="Sold Out">Sold Out</option>
                                                            </select>
                                                        </div>
                                                        <label for="form-1-1" class="col-md-2 control-label">
                                                            Type
                                                        </label>
                                                        <div class="col-md-4">
                                                            <!-- <select class="form-control" name="type">
                                                                <option value="">--Select--</option>
                                                                <option value="Savings Account">Savings Account</option>
                                                                <option value="Checkings Account">Checkings Account</option>
                                                            </select> -->
                                                            <input type="text" value="" class="form-control" name="type" placeholder="">
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        <label for="form-1-1" class="col-md-2 control-label">
                                                            Balance
                                                        </label>
                                                        <div class="col-md-4">
                                                            <input type="number" value="" class="form-control" name="balance" placeholder="">
                                                        </div>
                                                        <label for="form-1-1" class="col-md-2 control-label">
                                                            Price
                                                        </label>
                                                        <div class="col-md-4">
                                                            <input type="number" value="" class="form-control" name="price" placeholder="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="form-1-1" class="col-md-2 control-label">
                                                            Includes
                                                        </label>
                                                        <div class="col-md-10">
                                                            <textarea class="form-control" name="includes"></textarea>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        <div class="col-md-11 col-xs-11">
                                                            <div class="text-right">
                                                                <button type="submit" id="referrer_percent" class="btn btn-primary new_package_btn">Save Product</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-block">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-hover table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>S/N</th>
                                                        <th>Sub Category</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php
                                                    $i = 1;
                                                    foreach ($subcategory as $e) { ?>
                                                        <tr>
                                                            <td><?php print $i; ?></td>
                                                            <td><?php print $e['name']; ?></td>
                                                            <td>
                                                                <a href="view-product?subcategory=<?php print $e['unique_id']; ?>" class="btn btn-primary text-white ">
                                                                    view Products
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    <?php $i++;
                                                    } ?>
                                                </tbody>
                                            </table>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade zoomInUp" id="delete_package_modal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4>Delete Category?</h4>
                            </div>
                            <form class="delete_package_form">
                                <div class="modal-body">
                                    <p class="text-danger">By clicking continue, this category will be deleted permanently. <br> Users won't be able to purchase products under this category.</p>
                                </div>
                            </form>
                            <div class="modal-footer no-border">
                                <div class="text-right">
                                    <button class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
                                    <button class="btn btn-primary btn-sm delete_package_btn" data-dismiss="modal">Continue</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content Wrapper END -->
                <?php require_once('footer.php'); ?>
                <!-- Footer END -->

            </div>
            <!-- Page Container END -->

        </div>
    </div>

    <?php require_once('footer-links.php'); ?>
    <script>
        $('.delete_package_modal').click(function(e) {
            e.preventDefault();
            append_id('delete_category_id', '.delete_package_form', '#delete_package_modal', this)
            $('#delete_package_modal').modal('toggle');
        });

        $('.new_package_btn').click(async function(e) {
            e.preventDefault();
            let new_package_form = $('.new_package_form').serializeArray();
            let form_data = set_form_data(new_package_form);
            // console.log(new_package_form);return;
            let returned = await ajaxRequest('ajax.php', form_data);
            throwSweetalert(returned, 'product', 1);
        });
        $('.delete_package_btn').click(async function(e) {
            e.preventDefault();
            let delete_package_form = $('.delete_package_form').serializeArray();
            let form_data = set_form_data(delete_package_form);
            // console.log(delete_package_form);return;
            let returned = await ajaxRequest('ajax.php', form_data);
            // console.log(returned);return;
            throwSweetalert(returned, 'category', 1);
        });

        $('#create_category_id').change(async function(e) {
            create_subcategory_select(e)

        })


        async function create_subcategory_select(e) {
            let data = [{
                name: 'get_category_id',
                value: e.target.value
            }]

            let form_data = set_form_data(data);
            let subcategories = await ajaxRequest('ajax.php', form_data);

            let tokenSelectElement = document.getElementById('create_subcategory_id')
            var first = tokenSelectElement.firstElementChild;
            while (first) {
                first.remove();
                first = tokenSelectElement.firstElementChild;
            }

            let option = document.createElement('option');
            option.setAttribute('value', "selected");
            let title = document.createTextNode("--Select--");
            option.appendChild(title);
            tokenSelectElement.append(option)

            subcategories?.map((e, index) => {
                let option = document.createElement('option');
                option.setAttribute('value', e.unique_id);
                let title = document.createTextNode(e.name);
                option.appendChild(title);
                tokenSelectElement.append(option)
            })
        }
    </script>