@extends('_partials.master_product')
@section('page_title', 'Product List')
@section('page_heading', 'Products')
@section('page_styles')

<style type="text/css">
    #gridContainer {
        height: 440px;
    }

    .options {
        padding: 20px;
        margin-top: 20px;
        background-color: rgba(191, 191, 191, 0.15);
    }

    .WrappedColumnClass {
      white-space: normal;
      word-wrap: break-word;
    }

    .caption {
        font-size: 18px;
        font-weight: 500;
    }

    .option {
        margin-top: 10px;
    }

    .option > span {
        margin-right: 10px;
    }

    .option > .dx-selectbox {
        display: inline-block;
        vertical-align: middle;
    }
    .WrappedColumnClass {
      white-space: normal;
      word-wrap: break-word;
    }
</style>

@endsection

@section('content')

<script type="text/javascript">

    var jq = $.noConflict();
    // data
    var dataphp = {!! json_encode($products) !!};

    jq(function() {

        var dataGrid = jq("#gridContainer").dxDataGrid({
            dataSource: dataphp,
            keyExpr: "id",
            columnsAutoWidth: true,
            showBorders: true,
            grouping: {
                autoExpandAll: true,
            },
            groupPanel: {
                visible: true,
                allowColumnReordering: true,
                rowAlternationEnabled: true,
                showBorders: true
            },
            filterRow: {
                visible: true,
                applyFilter: "auto"
            },
            searchPanel: {
                visible: true,
                width: 240,
                placeholder: "Search...",
                highlightCaseSensitive: true
            },
            headerFilter: {
                visible: true
            },
            scrolling: {
                columnRenderingMode: "virtual"
            },
            paging: {
                pageSize: 50
            },
            pager: {
                showPageSizeSelector: true,
                allowedPageSizes: [10, 20, 50],
                showInfo: true
            },
            allowColumnReordering: true,
            columns: [
                {
                    dataField: "id",
                    caption: "Product ID",
                    width: 100,
                    alignment: "right",
                    headerFilter: {
                        groupInterval: 300
                    },
                    cellTemplate: function(container, options) {
                        return jq("<a>", {
                            "href": "../product/edit/" + options.value,
                            "target": "_self"
                        }).text(options.value);
                    }
                },
                {
                    dataField: "name",
                    caption: "Product Name",
                    width: 200,
                    alignment: "left",
                    cssClass: 'WrappedColumnClass',
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "sku_prefix",
                    caption: "Sku Prefix",
                    width: 200,
                    alignment: "left",
                    cssClass: 'WrappedColumnClass',
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "sku",
                    caption: "Sku",
                    width: 150,
                    alignment: "left",
                    cssClass: 'WrappedColumnClass',
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "product_type",
                    caption: "Product Type",
                    width: 120,
                    alignment: "left",
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {

                    dataField: "group_name",
                    caption: "Group Name",
                    width: 120,
                    alignment: "left",
                    cssClass: 'WrappedColumnClass',
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "vendor",
                    caption: "Vendor",
                    width: 100,
                    alignment: "left",
                    cssClass: 'WrappedColumnClass',
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {

                    dataField: "is_visible",
                    caption: "Is Visible",
                    width: 100,
                    alignment: "left",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "stock",
                    caption: "Stock",
                    width: 90,
                    alignment: "right",
                    editorOptions: {
                        showClearButton: true
                    },
                    headerFilter: {
                        groupInterval: 300
                    }
                },
                {
                    dataField: "product_creation",
                    caption: "Product Creation",
                    width: 150,
                    alignment: "right",
                    dataType: "date",
                    format: "M/d/yyyy, HH:mm"
                },
                {
                    caption: "Variant Created",
                    dataField: "variant_created",
                    width: 150,
                    alignment: "right",
                    dataType: "date",
                    format: "M/d/yyyy, HH:mm"
                },
                {
                    dataField: "net_price_amount",
                    caption: "Net Price Amount",
                    width: 160,
                    alignment: "right",
                    format: "currency",
                    editorOptions: {
                        format: "currency",
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than $3000",
                            value: ["net_price_amount", "<", 3000]
                        }, {

                            text: "$3000 - $5000",
                            value: [
                                ["net_price_amount", ">=", 3000],
                                ["net_price_amount", "<", 5000]
                            ]
                        }, {

                            text: "$5000 - $10000",
                            value: [
                                ["net_price_amount", ">=", 5000],
                                ["net_price_amount", "<", 10000]
                            ]
                        }, {

                            text: "$10000 - $20000",
                            value: [
                                ["net_price_amount", ">=", 10000],
                                ["net_price_amount", "<", 20000]
                            ]
                        }, {
                            text: "Greater than $20000",
                            value: ["net_price_amount", ">=", 20000]
                        }]
                    }
                },
                {
                    dataField: "production_cost_amount",
                    caption: "Production Cost Amount",
                    width: 200,
                    alignment: "right",
                    format: "currency",
                    editorOptions: {
                        format: "currency",
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than $3000",
                            value: ["production_cost_amount", "<", 3000]
                        }, {

                            text: "$3000 - $5000",
                            value: [
                                ["production_cost_amount", ">=", 3000],
                                ["production_cost_amount", "<", 5000]
                            ]
                        }, {

                            text: "$5000 - $10000",
                            value: [
                                ["production_cost_amount", ">=", 5000],
                                ["production_cost_amount", "<", 10000]
                            ]
                        }, {

                            text: "$10000 - $20000",
                            value: [
                                ["production_cost_amount", ">=", 10000],
                                ["production_cost_amount", "<", 20000]
                            ]
                        }, {
                            text: "Greater than $20000",
                            value: ["production_cost_amount", ">=", 20000]
                        }]
                    }
                },
                {
                    dataField: "net_price_currency_code",
                    caption: "Net Price Currency Code",
                    width: 200,
                    alignment: "left",
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "discount_percent",
                    caption: "Discount %",
                    width: 120,
                    alignment: "right",
                    dataType: "number",
                    format: "percent",
                    editorOptions: {
                        format: "percent",
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than 10",
                            value: ["discount_percent", "<", 10]
                        }, {

                            text: "10 - 20",
                            value: [
                                ["discount_percent", ">=", 10],
                                ["discount_percent", "<", 20]
                            ]
                        }, {

                            text: "20 - 30",
                            value: [
                                ["discount_percent", ">=", 20],
                                ["production_cost_amount", "<", 30]
                            ]
                        }, {

                            text: "30 - 40",
                            value: [
                                ["discount_percent", ">=", 30],
                                ["discount_percent", "<", 40]
                            ]
                        }, {
                            text: "Greater than 40",
                            value: ["discount_percent", ">=", 40]
                        }]
                    }
                },
                {
                    dataField: "original_net_price_amount",
                    caption: "Original Net Price Amount",
                    width: 210,
                    alignment: "right",
                    format: "currency",
                    editorOptions: {
                        format: "currency",
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than $3000",
                            value: ["original_net_price_amount", "<", 3000]
                        }, {

                            text: "$3000 - $5000",
                            value: [
                                ["original_net_price_amount", ">=", 3000],
                                ["original_net_price_amount", "<", 5000]
                            ]
                        }, {

                            text: "$5000 - $10000",
                            value: [
                                ["original_net_price_amount", ">=", 5000],
                                ["original_net_price_amount", "<", 10000]
                            ]
                        }, {

                            text: "$10000 - $20000",
                            value: [
                                ["original_net_price_amount", ">=", 10000],
                                ["original_net_price_amount", "<", 20000]
                            ]
                        }, {
                            text: "Greater than $20000",
                            value: ["original_net_price_amount", ">=", 20000]
                        }]
                    }
                },
                {
                    dataField: "original_net_price_currency_code",
                    caption: "Original Net Price Currency Code",
                    width: 240,
                    alignment: "left",
                    dataType: "string",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "last_net_price_amount",
                    caption: "Last Net Price Amount",
                    width: 180,
                    alignment: "right",
                    format: "currency",
                    editorOptions: {
                        format: "currency",
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than $3000",
                            value: ["last_net_price_amount", "<", 3000]
                        }, {

                            text: "$3000 - $5000",
                            value: [
                                ["last_net_price_amount", ">=", 3000],
                                ["last_net_price_amount", "<", 5000]
                            ]
                        }, {

                            text: "$5000 - $10000",
                            value: [
                                ["last_net_price_amount", ">=", 5000],
                                ["last_net_price_amount", "<", 10000]
                            ]
                        }, {

                            text: "$10000 - $20000",
                            value: [
                                ["last_net_price_amount", ">=", 10000],
                                ["last_net_price_amount", "<", 20000]
                            ]
                        }, {
                            text: "Greater than $20000",
                            value: ["last_net_price_amount", ">=", 20000]
                        }]
                    }
                },
                {
                    dataField: "last_net_price_currency_code",
                    caption: "Last Net Price Currency Code",
                    width: 220,
                    alignment: "left",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "stock_is_unlimited",
                    caption: " Is Sock Unlimited",
                    width: 150,
                    alignment: "left",
                    headerFilter: {
                        allowSearch: true
                    }
                },
                {
                    dataField: "weight",
                    caption: " Weight",
                    width: 80,
                    alignment: "right",
                    editorOptions: {
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than 10",
                            value: ["weight", "<", 10]
                        }, {

                            text: "10 - 20",
                            value: [
                                ["weight", ">=", 10],
                                ["weight", "<", 20]
                            ]
                        }, {

                            text: "20 - 30",
                            value: [
                                ["weight", ">=", 20],
                                ["weight", "<", 30]
                            ]
                        }, {

                            text: "30 - 40",
                            value: [
                                ["weight", ">=", 30],
                                ["weight", "<", 40]
                            ]
                        }, {
                            text: "Greater than 40",
                            value: ["weight", ">=", 40]
                        }]
                    }
                },

                {
                    dataField: "length",
                    caption: " Length",
                    width: 80,
                    alignment: "right",
                    editorOptions: {
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than 10",
                            value: ["length", "<", 10]
                        }, {

                            text: "10 - 20",
                            value: [
                                ["length", ">=", 10],
                                ["length", "<", 20]
                            ]
                        }, {

                            text: "20 - 30",
                            value: [
                                ["length", ">=", 20],
                                ["length", "<", 30]
                            ]
                        }, {

                            text: "30 - 40",
                            value: [
                                ["length", ">=", 30],
                                ["length", "<", 40]
                            ]
                        }, {
                            text: "Greater than 40",
                            value: ["length", ">=", 40]
                        }]
                    }
                },

                {
                    dataField: "height",
                    caption: " Height",
                    width: 80,
                    alignment: "right",
                    editorOptions: {
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than 10",
                            value: ["height", "<", 10]
                        }, {

                            text: "10 - 20",
                            value: [
                                ["height", ">=", 10],
                                ["height", "<", 20]
                            ]
                        }, {

                            text: "20 - 30",
                            value: [
                                ["height", ">=", 20],
                                ["height", "<", 30]
                            ]
                        }, {

                            text: "30 - 40",
                            value: [
                                ["height", ">=", 30],
                                ["height", "<", 40]
                            ]
                        }, {
                            text: "Greater than 40",
                            value: ["height", ">=", 40]
                        }]
                    }
                },
                {
                    dataField: "depth",
                    caption: " Depth",
                    width: 80,
                    alignment: "right",
                    editorOptions: {
                        showClearButton: true
                    },
                    headerFilter: {
                        dataSource: [{
                            text: "Less than 10",
                            value: ["depth", "<", 10]
                        }, {

                            text: "10 - 20",
                            value: [
                                ["depth", ">=", 10],
                                ["depth", "<", 20]
                            ]
                        }, {

                            text: "20 - 30",
                            value: [
                                ["depth", ">=", 20],
                                ["depth", "<", 30]
                            ]
                        }, {

                            text: "30 - 40",
                            value: [
                                ["depth", ">=", 30],
                                ["depth", "<", 40]
                            ]
                        }, {
                            text: "Greater than 40",
                            value: ["depth", ">=", 40]
                        }]
                    }
                },
            ],

        }).dxDataGrid('instance');

        var applyFilterTypes = [{
            key: "auto",
            name: "Immediately"
        }, {
            key: "onClick",
            name: "On Button Click"
        }];

        var applyFilterModeEditor = jq("#useFilterApplyButton").dxSelectBox({
            items: applyFilterTypes,
            value: applyFilterTypes[0].key,
            valueExpr: "key",
            displayExpr: "name",
            onValueChanged: function(data) {
                dataGrid.option("filterRow.applyFilter", data.value);
            }
        }).dxSelectBox("instance");

        jq("#filterRow").dxCheckBox({
            text: "Filter Row",
            value: true,
            onValueChanged: function(data) {
                dataGrid.clearFilter();
                dataGrid.option("filterRow.visible", data.value);
                applyFilterModeEditor.option("disabled", !data.value);
            }
        });

        jq("#headerFilter").dxCheckBox({
            text: "Header Filter",
            value: true,
            onValueChanged: function(data) {
                dataGrid.clearFilter();
                dataGrid.option("headerFilter.visible", data.value);
            }
        });

        function getOrderDay(rowData) {
            return (new Date(rowData.OrderDate)).getDay();
        }
    });

</script>

<section>
    <div class="card-header">
        <h4 class="card-title">List all Products</h4>
        <div class="heading-elements">
            <a href="{{ route('product.create') }}" class="btn btn-info btn-sm" style="color: #fff;">
                <i class="la la-plus"></i> Create New
            </a>
        </div>
    </div>
    <div class="demo-container">
        <div id="gridContainer"></div>
        <div class="options">
            <div class="caption">Options</div>
            <div class="option">
                <span>Apply Filter</span>
                <div id="useFilterApplyButton"></div>
            </div>
            <div class="option">
                <div id="filterRow"></div>
            </div>
            <div class="option">
                <div id="headerFilter"></div>
            </div>
        </div>
    </div>
</section>

@endsection