@extends('operations.layout.mainlayout')
<link rel="stylesheet" href="/warehouse_components/css/dashboard.css">
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: #e35a80!important;">Warehouse Dashboard </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 col-xl-12 stretch-card">
                        <div class="row flex-grow-1">
                            <div class="col-md-4 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-baseline form-group">
                                            <h6 class="card-title mb-0">Purchase Orders </h6>
                                            <div class="col-md-8 d-flex justify-content-md-end">
                                                <div class="btn-group mb-3 mb-md-0" id="parent_po_dates"
                                                     po_date_role="year" role="group" aria-label="Basic example">
                                                    <button type="button" class="btn btn-outline-info po_dates"
                                                            value="day">Today
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-outline-info d-none d-md-block po_dates"
                                                            value="week">Week
                                                    </button>
                                                    <button type="button" class="btn btn-outline-info po_dates"
                                                            value="month">
                                                        Month
                                                    </button>
                                                    <button type="button" class="btn btn-info po_dates"
                                                            value="year">Year
                                                    </button>
                                                </div>
                                            </div>
                                            <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="po_dropDown" role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <form class="px-3 py-1 form-dropdown-menu">
                                                        <div class="form-group">
                                                            <label for="purchase_orders_range">Date Range</label>
                                                            <div id="purchase_orders_range" class="form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                <i class="fa fa-calendar"></i>&nbsp;
                                                                <span></span> <i class="fa fa-caret-down"></i>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="po_vendors">Vendors</label>
                                                            <select class="form-control" multiple name="po_vendors" id="po_vendors">
                                                                @foreach($vendors as $vendor)
                                                                    <option value="{{ $vendor->ID }}">{{$vendor->NAME}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="form-group">
                                                            <input type="button" id="po_filter_range"
                                                                   class="btn btn-block btn-sm btn-info" value="Apply">
                                                        </div>
                                                    </form>
                                                </div>

                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 col-md-12 col-xl-5">
                                                <h3 class="mb-2" id="total_po_count" style="font-weight: bold;">0</h3>
                                                <div class="d-flex align-items-baseline">
                                                    <span class="text-success" id="total_po_sum">0</span>&nbsp;
                                                    <b>@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                            {!! $global_symbol['currency'] !!}
                                                        @else
                                                            {{ $global_symbol['currency'] ?? 'SAR' }}
                                                        @endif</b>

                                                </div>
                                            </div>
                                            <div class="col-6 col-md-12 col-xl-7">
                                                <div id="purchaseOrdersChart" class="mt-md-3 mt-xl-0"
                                                     style="min-height: 60px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-baseline form-group">
                                            <h6 class="card-title mb-0">Purchase Received Qty</h6>
                                            <div class="col-md-8 d-flex justify-content-md-end">
                                                <div class="btn-group mb-3 mb-md-0" id="parent_pq_dates"
                                                     pq_date_role="year" role="group" aria-label="Basic example">
                                                    <button type="button" class="btn btn-outline-info pq_dates"
                                                            value="day">Today
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-outline-info d-none d-md-block pq_dates"
                                                            value="week">Week
                                                    </button>
                                                    <button type="button" class="btn btn-outline-info pq_dates"
                                                            value="month">
                                                        Month
                                                    </button>
                                                    <button type="button" class="btn btn-info pq_dates"
                                                            value="year">Year
                                                    </button>
                                                </div>
                                            </div>
                                            <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="pq_dropDown" role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <form class="px-3 py-1 form-dropdown-menu">
                                                        <div class="form-group">
                                                            <label for="purchase_received_range">Date Range</label>
                                                            <div id="purchase_received_range" class="form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                <i class="fa fa-calendar"></i>&nbsp;
                                                                <span></span> <i class="fa fa-caret-down"></i>
                                                            </div>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="form-group">
                                                            <input type="button" id="pq_filter_range"
                                                                   class="btn btn-block btn-sm btn-info" value="Apply">
                                                        </div>
                                                    </form>
                                                </div>

                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 col-md-12 col-xl-5">
                                                <h3 class="mb-2" id="total_pq_count" style="font-weight: bold;">0</h3>
                                                <div class="d-flex align-items-baseline">
                                                </div>
                                            </div>
                                            <div class="col-6 col-md-12 col-xl-7">
                                                <div id="purchaseReceivedChart" class="mt-md-3 mt-xl-0"
                                                     style="min-height: 60px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-baseline form-group">
                                            <h6 class="card-title mb-0">Consumed Transactions Qty </h6>
                                            <div class="col-md-8 d-flex justify-content-md-end">
                                                <div class="btn-group mb-3 mb-md-0" id="parent_transaction_dates"
                                                     transaction_date_role="year" role="group"
                                                     aria-label="Basic example">
                                                    <button type="button" class="btn btn-outline-info transaction_dates"
                                                            value="day">Today
                                                    </button>
                                                    <button type="button"
                                                            class="btn btn-outline-info d-none d-md-block transaction_dates"
                                                            value="week">Week
                                                    </button>
                                                    <button type="button" class="btn btn-outline-info transaction_dates"
                                                            value="month">
                                                        Month
                                                    </button>
                                                    <button type="button" class="btn btn-info transaction_dates"
                                                            value="year">Year
                                                    </button>
                                                </div>
                                            </div>
                                            <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="transaction_dropDown"
                                                  role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <form class="px-3 py-1 form-dropdown-menu">
                                                        <div class="form-group">
                                                            <label for="transactions_range">Date Range</label>
                                                            <div id="transactions_range" class="form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                                <i class="fa fa-calendar"></i>&nbsp;
                                                                <span></span> <i class="fa fa-caret-down"></i>
                                                            </div>
                                                        </div>
                                                        {{--<div class="form-group">
                                                            <label for="transaction_from_date">Date From</label>
                                                            <input required type="date" class="form-control"
                                                                   id="transaction_from_date">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="transaction_to_date">Date To</label>
                                                            <input required type="date" class="form-control"
                                                                   id="transaction_to_date">
                                                        </div>--}}
                                                        <div class="form-group">
                                                            <label for="transaction_items">Items</label>
                                                            <select class="form-control" multiple name="transaction_items" id="transaction_items">
                                                                @foreach($items as $item)
                                                                    <option value="{{ $item->ID }}">{{$item->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <div class="form-group">
                                                            <input type="button" id="transaction_filter_range"
                                                                   class="btn btn-block btn-sm btn-info" value="Apply">
                                                        </div>
                                                    </form>
                                                </div>

                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-6 col-md-12 col-xl-5">
                                                <h3 class="mb-2" id="total_transaction_count"
                                                    style="font-weight: bold;">0</h3>
                                                <div class="d-flex align-items-baseline">
                                                    {{--<span class="text-success" id="total_transaction_sum">0</span>&nbsp;
                                                    <b>SAR</b>--}}
                                                </div>
                                            </div>
                                            <div class="col-6 col-md-12 col-xl-7">
                                                <div id="transactionsChart" class="mt-md-3 mt-xl-0"
                                                     style="min-height: 60px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-7 col-xl-8 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-baseline mb-2">
                                    <h6 class="card-title mb-0">Stock Balance</h6>

                                    <div class="d-flex justify-content-between align-items-baseline form-group">
                                        <h6 class="card-title mb-0" style="opacity: 0;">Stock Balance</h6>
                                        <div class="col-md-8 d-flex justify-content-md-end">
                                            <div class="btn-group mb-3 mb-md-0" id="parent_stock_dates"
                                                 stock_date_role="year" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-outline-info stock_dates"
                                                        value="day">Today
                                                </button>
                                                <button type="button"
                                                        class="btn btn-outline-info d-none d-md-block stock_dates"
                                                        value="week">Week
                                                </button>
                                                <button type="button" class="btn btn-outline-info stock_dates"
                                                        value="month">
                                                    Month
                                                </button>
                                                <button type="button" class="btn btn-info stock_dates"
                                                        value="year">Year
                                                </button>
                                            </div>
                                        </div>
                                        <button class="dropdown btn btn-sm">
                                            <span class=" dropdown-toggle" href="#" id="stock_dropDown" role="button"
                                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-filter"></i>
                                            </span>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <form class="px-3 py-1 form-dropdown-menu">
                                                    <div class="form-group">
                                                        <label for="stock_balance_range">Date Range</label>
                                                        <div id="stock_balance_range" class="form-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                            <i class="fa fa-calendar"></i>&nbsp;
                                                            <span></span> <i class="fa fa-caret-down"></i>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="stock_items">Items</label>
                                                        <select class="form-control" multiple name="stock_items" id="stock_items">
                                                            @foreach($items as $item)
                                                                <option value="{{ $item->ID }}">{{$item->NAME_EN}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="dropdown-divider"></div>
                                                    <div class="form-group">
                                                        <input type="button" id="stock_filter_range"
                                                               class="btn btn-block btn-sm btn-info" value="Apply">
                                                    </div>
                                                </form>
                                            </div>

                                        </button>
                                    </div>
                                </div>
                                <div class="col-6 col-md-12 col-xl-5">
                                    <h3 class="mb-2" id="total_stock_count"
                                        style="font-weight: bold;">0</h3>
                                    <div class="d-flex align-items-baseline">
                                        {{--<span class="text-success" id="total_transaction_sum">0</span>&nbsp;
                                        <b>SAR</b>--}}
                                    </div>
                                </div>
                                <div id="stockBalanceItemsChart" style="min-height: 318px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-xl-4 grid-margin stretch-card">
                        <div class="card">
                            <h6 class="card-title mb-0 p-4">Purchase Orders per vendor <small style="font-weight: bold">(Top
                                    5)</small></h6>
                            <div class="card-body">
                                <div class="chart-rounded-loader">
                                    <div class="loader"></div>
                                </div>
                                <div id="apexRadialBar" style="min-height: 301.7px;"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xl-8 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div class="wave-loader">
                                    <div class="wave top-wave">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                    <div class="wave bottom-wave">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                </div>
                                <div id="apexHeatMap" style="min-height: 300px;"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 d-flex grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                {{--<div class="wave-loader">
                                    <div class="wave top-wave">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                    <div class="wave bottom-wave">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                </div>--}}
                                <h6 class="card-title mb-0 p-1">Vendor Total Payments</h6>
                                <div class="table-responsive" style="height: 14.6vw;">
                                    <table class="table table-hover mb-0" id="dashboard-vendors-table"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

@endsection

<script src="/warehouse_components/js/apexcharts.min.js"></script>
<script type="text/javascript" src="/bower_components/admin-lte/plugins/moment/moment.min.js"></script>

<link rel="stylesheet" type="text/css" href="/warehouse_components/css/daterangepicker.css" />
@section('warehouse_scripts')

    <script>
        var colors = {
            primary: "#6571ff",
            secondary: "#7987a1",
            success: "#05a34a",
            info: "#66d1d1",
            warning: "#fbbc06",
            danger: "#ff3366",
            theme: "#e35a80",
            light: "#e9ecef",
            dark: "#060c17",
            muted: "#7987a1",
            gridBorder: "rgba(77, 138, 240, .15)",
            bodyColor: "#000",
            cardBg: "#fff"
        }

        var start = moment().subtract(29, 'days');
        var end = moment();

        initPurchaseOrderChart();
        initTransactionChart();
        initPurchaseReceivedChart();
        initStockBalanceChart();
        initVendorTotalsChart();
        initItemsExpiresChart();
        initVendorsTable();

        $('#po_vendors').select2({
            placeholder: 'Select Vendors',
            allowClear: true
        });

        $('#transaction_items').select2({
            placeholder: 'Select Items',
            allowClear: true
        });

        $('#stock_items').select2({
            placeholder: 'Select Items',
            allowClear: true
        });

        function initPurchaseOrderChart() {
            purchaseOrderChart($('#parent_po_dates').attr('po_date_role'));
            var options1 = {
                colors: ['#e35a80'],
                chart: {
                    type: "line",
                    height: 80,
                    sparkline: {
                        enabled: !0
                    }
                },
                series: [{
                    name: '',
                    //data: [3844, 3855, 3841, 3867, 3822, 3843, 3821, 3841, 3856, 3827, 3843]
                    data: []
                }],
                xaxis: {
                    type: 'datetime',
                    labels: {
                        datetimeUTC: false
                    },
                    //categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
                    categories: [],
                },
                stroke: {
                    width: 2,
                    curve: "smooth"
                },
                markers: {
                    size: 0
                },
            };
            var chart = new ApexCharts(document.querySelector("#purchaseOrdersChart"), options1);
            chart.render()

            function purchaseOrderChart(dateRole) {
                if ($('#purchaseOrdersChart').length) {
                    $.ajax({
                        url: '/operations/warehouse/dashboardPurchaseOrders',
                        data: {
                            'filter_date_role': dateRole,
                        },
                        success: function (data) {
                            chart.updateOptions({
                                series: [{
                                    data: data.totals
                                }],
                                xaxis: {
                                    categories: data.dates
                                }
                            })
                            $('#total_po_count').text(data.total_pos)
                            $('#total_po_sum').text(data.total_sum)
                        }
                    });
                }
            }

            $('.po_dates').on('click', function (e) {
                $('.po_dates').removeClass('btn-info').addClass('btn-outline-info');
                $(this).removeClass('btn-outline-info').addClass('btn-info');
                $('#po_dropDown').css('color', 'unset');
                purchaseOrderChart(this.value)
            })

            $(document).on('click', '#po_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#purchase_orders_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let vendors = $('#po_vendors').val();
                let parent = $('#po_filter_range').closest('.show');
                $('#po_dropDown').css('color', '#e35a80');
                parent.removeClass('show');
                $('.po_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                    'vendors': vendors,
                }
                purchaseOrderChart(rangeDates)
            })

            function cb(start, end) {
                $('#purchase_orders_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }
            $('#purchase_orders_range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                }}, cb);

            cb(start, end);
            $(".daterangepicker").click( function(e) {
                e.stopPropagation();
            });
        }

        function initTransactionChart() {
            transactionsChart($('#parent_transaction_dates').attr('transaction_date_role'));
            var options1 = {
                colors: ['#e35a80'],
                chart: {
                    type: "bar",
                    height: 65,
                    sparkline: {
                        enabled: !0
                    }
                },
                plotOptions: {
                    bar: {
                        borderRadius: 2,
                        columnWidth: "60%"
                    }
                },
                series: [{
                    name: '',
                    //data: [41, 45, 44, 46, 52, 54, 43, 74, 82, 82, 89]
                    data: []

                }],
                xaxis: {
                    type: 'date',
                    labels: {
                        formatter: function (value) {
                            return value;
                        }
                    },
                    //categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022"],
                    categories: [],

                },
            };
            var chart2 = new ApexCharts(document.querySelector("#transactionsChart"), options1);
            chart2.render()

            function transactionsChart(dateRole) {
                if ($('#transactionsChart').length) {
                    $.ajax({
                        url: '/operations/warehouse/dashboardTransactions',
                        data: {
                            'filter_date_role': dateRole,
                        },
                        success: function (data) {
                            chart2.updateOptions({
                                series: [{
                                    data: data.totals
                                }],
                                xaxis: {
                                    categories: data.dates
                                }
                            })
                            $('#total_transaction_count').text(data.total_transactions)
                        }
                    });
                }
            }

            $('.transaction_dates').on('click', function (e) {
                $('.transaction_dates').removeClass('btn-info').addClass('btn-outline-info');
                $(this).removeClass('btn-outline-info').addClass('btn-info');
                $('#transaction_dropDown').css('color', 'unset');
                transactionsChart(this.value)
            })

            $(document).on('click', '#transaction_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#transactions_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let items = $('#transaction_items').val();
                let parent = $('#transaction_filter_range').closest('.show');
                $('#transaction_dropDown').css('color', '#e35a80');
                parent.removeClass('show');
                $('.transaction_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                    'items': items,
                }
                transactionsChart(rangeDates)
            })

            function cb(start, end) {
                $('#transactions_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }
            $('#transactions_range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                }}, cb);

            cb(start, end);
            $(".daterangepicker").click( function(e) {
                e.stopPropagation();
            });

        }

        function initPurchaseReceivedChart() {
            purchaseReceived($('#parent_pq_dates').attr('pq_date_role'));
            var options1 = {
                colors: ['#e35a80'],
                chart: {
                    type: "line",
                    height: 65,
                    sparkline: {
                        enabled: !0
                    }
                },
                series: [{
                    name: '',
                    //data: [3844, 3855, 3841, 3867, 3822, 3843, 3821, 3841, 3856, 3827, 3843]
                    data: []
                }],
                xaxis: {
                    type: 'datetime',
                    labels: {
                        datetimeUTC: false
                    },
                    //categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
                    categories: [],
                },
                stroke: {
                    width: 2,
                    curve: "smooth"
                },
                markers: {
                    size: 0
                },
            };
            var chart2 = new ApexCharts(document.querySelector("#purchaseReceivedChart"), options1);
            chart2.render()

            function purchaseReceived(dateRole) {
                if ($('#purchaseReceivedChart').length) {
                    $.ajax({
                        url: '/operations/warehouse/dashboardReceivedOrders',
                        data: {
                            'filter_date_role': dateRole,
                        },
                        success: function (data) {
                            chart2.updateOptions({
                                series: [{
                                    data: data.totals
                                }],
                                xaxis: {
                                    categories: data.dates
                                }
                            })
                            $('#total_pq_count').text(data.total_pqs)
                        }
                    });
                }
            }

            $('.pq_dates').on('click', function (e) {
                $('.pq_dates').removeClass('btn-info').addClass('btn-outline-info');
                $(this).removeClass('btn-outline-info').addClass('btn-info');
                $('#pq_dropDown').css('color', 'unset');
                purchaseReceived(this.value)
            })

            $(document).on('click', '#pq_filter_range', function (e) {
                e.preventDefault();
                let rangePicker = $('#purchase_received_range');
                let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                let parent = $('#pq_filter_range').closest('.show');
                $('#pq_dropDown').css('color', '#e35a80');
                parent.removeClass('show');
                $('.pq_dates').removeClass('btn-info').addClass('btn-outline-info');
                var rangeDates = {
                    'from': fromDate,
                    'to': toDate,
                }
                purchaseReceived(rangeDates)
            })
            function cb(start, end) {
                $('#purchase_received_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }
            $('#purchase_received_range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                }}, cb);

            cb(start, end);
            $(".daterangepicker").click( function(e) {
                e.stopPropagation();
            });
        }

        function initStockBalanceChart() {
            if ($('#stockBalanceItemsChart').length) {
                var options = {
                    colors: ['#e35a80'],
                    chart: {
                        type: 'bar',
                        height: '318',
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: false
                        },
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    fill: {
                        opacity: .9
                    },
                    /*title: {
                        text: 'Stock Balance',
                        align: 'left',
                        style: {
                            fontWeight:  'bold',
                        },
                    },*/
                    grid: {
                        padding: {
                            bottom: -4
                        },
                        borderColor: colors.gridBorder,
                        xaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    series: [{
                        name: 'QTY',
                        data: []
                    }],
                    xaxis: {
                        type: 'text',
                        categories: [],
                        axisBorder: {
                            color: 'gray',
                        },
                        axisTicks: {
                            color: 'gray',
                        },
                    },
                    yaxis: {
                        title: {
                            text: 'Stock Balance Per Item',
                            style: {
                                size: 9,
                                color: 'gray'
                            }
                        },
                    },
                    legend: {
                        show: true,
                        position: "top",
                        horizontalAlign: 'center',
                        itemMargin: {
                            horizontal: 8,
                            vertical: 0
                        },
                    },
                    stroke: {
                        width: 0
                    },
                    dataLabels: {
                        enabled: true,
                        style: {
                            fontSize: '10px',
                        },
                        offsetY: -27
                    },
                    plotOptions: {
                        bar: {
                            columnWidth: "50%",
                            borderRadius: 4,
                            dataLabels: {
                                position: 'top',
                                orientation: 'vertical',
                            }
                        },
                    },
                }
                var apexBarChart = new ApexCharts(document.querySelector("#stockBalanceItemsChart"), options);
                apexBarChart.render();
                stockBalance($('#parent_stock_dates').attr('stock_date_role'));

                function stockBalance(dateRole) {
                    $.ajax({
                        url: '/operations/warehouse/dashboardStockBalance',
                        data: {
                            'filter_date_role': dateRole,
                        },
                        success: function (data) {
                            apexBarChart.updateOptions({
                                series: [{
                                    data: data.qty
                                }],
                                xaxis: {
                                    categories: data.items
                                }
                            })
                            $('#total_stock_count').text(data.total_stocks)
                        }
                    });
                }

                $('.stock_dates').on('click', function (e) {
                    $('.stock_dates').removeClass('btn-info').addClass('btn-outline-info');
                    $(this).removeClass('btn-outline-info').addClass('btn-info');
                    $('#stock_dropDown').css('color', 'unset');
                    stockBalance(this.value)
                })

                $(document).on('click', '#stock_filter_range', function (e) {
                    e.preventDefault();
                    let rangePicker = $('#stock_balance_range');
                    let fromDate = rangePicker.data('daterangepicker').startDate.format('YYYY-MM-DD');
                    let toDate = rangePicker.data('daterangepicker').endDate.format('YYYY-MM-DD');
                    let items = $('#stock_items').val();
                    let parent = $('#stock_filter_range').closest('.show');
                    $('#stock_dropDown').css('color', '#e35a80');
                    parent.removeClass('show');
                    $('.stock_dates').removeClass('btn-info').addClass('btn-outline-info');
                    var rangeDates = {
                        'from': fromDate,
                        'to': toDate,
                        'items': items,
                    }
                    stockBalance(rangeDates)
                })

                function cb(start, end) {
                    $('#stock_balance_range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                }
                $('#stock_balance_range').daterangepicker({
                    startDate: start,
                    endDate: end,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                        'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    }}, cb);

                cb(start, end);
                $(".daterangepicker").click( function(e) {
                    e.stopPropagation();
                });
            }
        }

        function initVendorTotalsChart() {
            if ($('#apexRadialBar').length) {
                var options = {
                    chart: {
                        height: 363,
                        type: "radialBar",
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: true,
                        },
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    colors: [colors.theme, colors.primary, colors.warning, colors.danger, colors.info],
                    fill: {},
                    /*title: {
                        text: 'Purchase Orders per vendor',
                        align: 'left',
                        style: {
                            fontWeight:  'bold',
                        },
                    },*/
                    grid: {
                        padding: {
                            top: 10
                        }
                    },
                    plotOptions: {
                        radialBar: {
                            dataLabels: {
                                total: {
                                    show: true,
                                    label: 'TOTAL',
                                    fontSize: '14px',
                                    formatter: function (w) {
                                        return (w.globals.seriesTotals.reduce((a, b) => {
                                            return a + b
                                        }, 0) / w.globals.series.length).toFixed(2) + '%'
                                    }
                                },
                            },
                            track: {
                                background: colors.gridBorder,
                                strokeWidth: '100%',
                                opacity: 1,
                                margin: 5,
                            },
                        }
                    },
                    series: [],
                    labels: [],
                    legend: {
                        show: true,
                        position: "top",
                        horizontalAlign: 'center',
                        itemMargin: {
                            horizontal: 8,
                            vertical: 0
                        },
                    },
                };

                var chart = new ApexCharts(document.querySelector("#apexRadialBar"), options);
                chart.render();
                //purchaseReceived($('#parent_pq_dates').attr('pq_date_role'));
                purchaseReceived()

                function purchaseReceived(dateRole = null) {
                    if ($('#apexRadialBar').length) {
                        $.ajax({
                            url: '/operations/warehouse/dashboardVendorsTotal',
                            data: {
                                //'filter_date_role': dateRole,
                            },
                            success: function (data) {
                                chart.updateOptions({
                                    series: data.percentages,
                                    labels: data.vendors
                                })
                                $('.chart-rounded-loader').remove()
                                //$('#total_pq_count').text(data.total_pqs)
                            }
                        });
                    }
                }

                /*$('.pq_dates').on('click', function (e) {
                    $('.pq_dates').removeClass('btn-info').addClass('btn-outline-info');
                    $(this).removeClass('btn-outline-info').addClass('btn-info');
                    $('#pq_dropDown').css('color', 'unset');
                    purchaseReceived(this.value)
                })

                $(document).on('click', '#pq_filter_range', function (e) {
                    e.preventDefault();
                    let fromDate = $('#pq_from_date').val();
                    let toDate = $('#pq_to_date').val();
                    let parent = $('#pq_filter_range').closest('.show');
                    $('#pq_dropDown').css('color', '#e35a80');
                    parent.removeClass('show');
                    $('.pq_dates').removeClass('btn-info').addClass('btn-outline-info');
                    var rangeDates = {
                        'from': fromDate,
                        'to': toDate,
                    }
                    purchaseReceived(rangeDates)
                })*/
                //var chartAreaBounds = chart.w.globals.dom.baseEl.querySelector('.apexcharts-inner').getBoundingClientRect();
            }
        }

        function initItemsExpiresChart() {
            if ($('#apexHeatMap').length) {
                function _generateData(count, yrange) {
                    var i = 0;
                    var series = [];

                    while (i < count) {
                        var x = 'w' + (i + 1).toString();
                        var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
                        series.push({
                            x: x,
                            y: y
                        });
                        i++;
                    }
                    return series;
                }
                function generateTestData(count, weeks, yrange) {
                    var series = [];

                    for (var i = 0; i < count; i++) {
                        var testName = 'Test ' + (i + 1);
                        var data = [];

                        for (var j = 0; j < weeks; j++) {
                            var x = 'w' + (j + 1).toString();
                            var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
                            data.push({
                                x: x,
                                y: y,
                                key: j + 1
                            });
                        }

                        series.push({
                            name: testName,
                            data: data
                        });
                    }

                    return series;
                }
                var options = {
                    chart: {
                        height: 1000,
                        type: 'heatmap',
                        parentHeightOffset: 0,
                        foreColor: colors.bodyColor,
                        background: colors.cardBg,
                        toolbar: {
                            show: false
                        },
                    },
                    theme: {
                        mode: 'light'
                    },
                    tooltip: {
                        theme: 'light'
                    },
                    grid: {
                        borderColor: colors.gridBorder,
                        padding: {
                            bottom: -4
                        },
                        xaxis: {
                            lines: {
                                show: true
                            }
                        }
                    },
                    dataLabels: {
                        //enabled: false // display text on each cell
                        enabled: true
                    },
                    colors: [colors.info],
                    stroke: {
                        colors: [colors.cardBg]
                    },
                    series:[ ],
                    /*generateTestData(100, 18, {
                        min: 0,
                        max: 100
                    }),*/
                    /*{
                                           name: 'Metric1',
                                           data: generateTestData(70, 18, {
                                               min: 0,
                                               max: 100
                                           })
                                       },
                                       */
                    xaxis: {
                        axisBorder: {
                            color: colors.gridBorder,
                        },
                        axisTicks: {
                            color: colors.gridBorder,
                        },

                    },
                    title: {
                        text: 'Item Expiry (HeatMap)',
                        align: 'left',
                        style: {
                            fontWeight: 'normal',
                        },
                    },
                    plotOptions: {
                        heatmap: {
                            radius: 0,
                            reverseNegativeShade: true,
                            colorScale: {
                                ranges: [{
                                    from: 0,
                                    to: 1,
                                    color: '#f1c0ce',
                                    name: 'Low',
                                }, {
                                    from: 1,
                                    to: 100,
                                    color: '#e03b68',
                                    name: 'Medium',
                                }, {
                                    from: 101,
                                    to: 500,
                                    color: '#f5245b',
                                    name: 'High',
                                },

                                ]
                            }
                        }
                    },
                }

                var chart = new ApexCharts(document.querySelector("#apexHeatMap"), options);
                chart.render();
                itemsExpires()

                function itemsExpires(dateRole = null) {
                    if ($('#apexHeatMap').length) {
                        $.ajax({
                            url: '/operations/warehouse/dashboardItemsExpires',
                            success: function (data) {
                                chart.updateOptions({
                                    series: data,
                                })
                                $('.wave-loader').remove()
                            }
                        });
                    }
                }
            }
        }

        function initVendorsTable() {
            $("#dashboard-vendors-table").DataTable({
                dom: 'lrt',
                "responsive": true,
                scrollY: '50vh',
                scrollCollapse: true,
                "autoWidth": false,
                paging: false,
                ajax: {
                    url: '/operations/warehouse/dashboardVendorsPaymentTable',
                },
                columns: [
                    {data: 'NAME', title: 'Name'},
                    {data: 'TOTAL_SUM', title: 'Total Amount'},
                    {data: 'PAID_AMOUNT', title: 'Paid Amount'},
                    {
                        title: 'Status', "mRender": function (data, type, row) {
                            if (row.STATUS === '1')
                                return '<span class="badge badge-success">Paid</span>'
                            else if (row.STATUS === '2' || row.PAID_AMOUNT === '0')
                                return '<span class="badge badge-info">Pending</span>'
                            else
                                return '<span class="badge badge-secondary">Partially Paid</span>'
                        }
                    },
                ]
            });
        }
    </script>
@endsection