@extends('layouts.master')
@section('title','Dashboard')
@push('css')
    <style>
        .widgets {
            width: 100%;
            min-height: 100px;
            padding: 8px;
            box-shadow: 0px 1px 2px #454545;
            border-radius: 3px;
            text-align: center;
        }
        .widgets .widget-icon {
            width: 40px;
            height: 40px;
            padding-top: 8px;
            border-radius: 50%;
            color: white;
            margin-left: 53px;
            margin-bottom: 10px;
        }
        .widgets .widget-content {
            flex-grow: 2;
            font-weight: bold;
        }
    </style>
@endpush

@section('content')
    <div id="graph">
        <div class="row">
            <div class="col-md-12">
{{--                <marquee direction="left" height="30" bgcolor="black" style="color: white; padding-top: 5px; margin-bottom: 15px;">Invoice: 220100344, Customer: C02909 - Sahidul Islam , Amount: 850.00, Paid: 850.00, Due: 0.00 | Invoice: 220100343, Customer: C01995 - The Simco Refrigeration, Amount: 12.00, Paid: 0.00, Due: 12.00 | Invoice: 220100342, Customer: C01995 - The Simco Refrigeration, Amount: 760.00, Paid: 0.00, Due: 760.00 | Invoice: 220100341, Customer: C02908 - Adv. Mahmood, Amount: 3100.00, Paid: 3100.00, Due: 0.00 | Invoice: 220100340, Customer: C02907 - mr.amin, Amount: 50.00, Paid: 50.00, Due: 0.00 | Invoice: 220100339, Customer: C02906 - apl, Amount: 225.00, Paid: 225.00, Due: 0.00 | Invoice: 220100338, Customer: C02148 - Mr S.M Faisal , Amount: 120.00, Paid: 120.00, Due: 0.00 | Invoice: 220100337, Customer: C02905 - apl, Amount: 350.00, Paid: 350.00, Due: 0.00 | Invoice: 220100336, Customer: C02904 - mr.musa, Amount: 800.00, Paid: 800.00, Due: 0.00 | Invoice: 220100335, Customer: C02148 - Mr S.M Faisal , Amount: 350.00, Paid: 350.00, Due: 0.00 | Invoice: 220100334, Customer: C02903 - MR SAYFUL ISLAM, Amount: 470.00, Paid: 470.00, Due: 0.00 | Invoice: 220100333, Customer: C02836 - Simco-01, Amount: 238.00, Paid: 238.00, Due: 0.00 | Invoice: 220100332, Customer: C02902 - Wohalec, Amount: 900.00, Paid: 900.00, Due: 0.00 | Invoice: 220100331, Customer: C02303 - PMC, Amount: 320.00, Paid: 0.00, Due: 320.00 | Invoice: 220100330, Customer: C02901 - MD. Monir, Amount: 1900.00, Paid: 1900.00, Due: 0.00 | Invoice: 220100329, Customer: C02900 - shanea moy, Amount: 450.00, Paid: 450.00, Due: 0.00 | Invoice: 220100328, Customer: C02303 - PMC, Amount: 3420.00, Paid: 0.00, Due: 3420.00 | Invoice: 220100327, Customer: C02893 - Mr Yunus, Amount: 8000.00, Paid: 8000.00, Due: 0.00 | Invoice: 220100326, Customer: C02899 - MD LOKMAN, Amount: 450.00, Paid: 450.00, Due: 0.00 | Invoice: 220100325, Customer: C02898 - MR SHOHEL, Amount: 6550.00, Paid: 6550.00, Due: 0.00</marquee>--}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <div class="widgets" style="border-top: 5px solid rgb(28, 141, 255);">
                    <div class="widget-icon" style="background-color: rgb(28, 141, 255); text-align: center;"><i class="fa fa-shopping-cart fa-2x"></i></div>
                    <div class="widget-content">
                        <div class="widget-text">Today's Sale</div>
                        <div class="widget-value">BDT {{ number_format($todaysSale, 2) }}</div>
                    </div>
                </div>
            </div>
{{--            <div class="col-md-2">--}}
{{--                <div class="widgets" style="border-top: 5px solid rgb(102, 102, 51);">--}}
{{--                    <div class="widget-icon" style="background-color: rgb(102, 102, 51); text-align: center;"><i class="fa fa-money fa-2x"></i></div>--}}
{{--                    <div class="widget-content">--}}
{{--                        <div class="widget-text">Collection</div>--}}
{{--                        <div class="widget-value">BDT 0.00</div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div class="col-md-2">
                <div class="widgets" style="border-top: 5px solid rgb(0, 130, 65);">
                    <div class="widget-icon" style="background-color: rgb(0, 130, 65); text-align: center;"><i class="fa fa-shopping-cart fa-2x"></i></div>
                    <div class="widget-content">
                        <div class="widget-text">Monthly Sale</div>
                        <div class="widget-value">BDT {{ number_format($monthlySale, 2) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="widgets" style="border-top: 5px solid rgb(255, 128, 0);">
                    <div class="widget-icon" style="background-color: rgb(255, 128, 0); text-align: center;"><i class="fa fa-reply fa-2x"></i></div>
                    <div class="widget-content">
                        <div class="widget-text">Customer Due</div>
                        <div class="widget-value">BDT {{ number_format($totalCustomerDueAmount, 2) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="widgets" style="border-top: 5px solid rgb(255, 128, 0);">
                    <div class="widget-icon" style="background-color: rgb(255, 128, 0); text-align: center;"><i class="fa fa-reply fa-2x"></i></div>
                    <div class="widget-content">
                        <div class="widget-text">Supplier Due</div>
                        <div class="widget-value">BDT {{ number_format($totalSupplierDueAmount, 2) }}</div>
                    </div>
                </div>
            </div>

            <div class="col-md-2" >
                <div class="widgets" style="border-top: 5px solid rgb(174, 0, 0);">
                    <div class="widget-icon" style="background-color: rgb(174, 0, 0); text-align: center;"><i class="fa fa-dollar fa-2x"></i></div>
                    <div class="widget-content">
                        <div class="widget-text">Cash Balance</div>
                        <div class="widget-value">BDT {{ number_format($totalCashTransaction, 2) }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-2" >
                <div class="widgets" style="border-top: 5px solid rgb(102, 51, 0);">
                    <div class="widget-icon" style="background-color: rgb(102, 51, 0); text-align: center;"><i class="fa fa-dollar fa-2x"></i></div>
                    <div class="widget-content">
                        <div class="widget-text">Bank Balance</div>
                        <div class="widget-value">BDT {{ number_format($totalBankTransaction, 2) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 20px; margin-bottom: 25px;">
            <div class="col-md-12">
                <h3 class="text-center">This Month's Sale</h3>
                <div>
                    <div id="google-visualization-errors-all-1" style="display: none; padding-top: 2px;"></div>
                    <div>
                        <div class="panel-body">
                            <div id="demo-flot-bar" style="height: 250px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 text-center">
                <div role="group" aria-label="..." class="btn-group"><button type="button" class="btn btn-primary">Monthly</button> <button type="button" class="btn btn-warning">Yearly</button></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <h3 class="text-center">Top Sold Products</h3>
                <div>
                    <div class="panel-body">
                        <div id="demo-flot-pie" style="height: 250px"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h3 class="text-center">Top Customers</h3>
                <div id="demo-flot-pie-customer" style="height: 250px"></div>
            </div>
        </div>
    </div>
{{--    {{$perDaySale}}--}}
{{--    {{$product_sale}}--}}
@endsection


@push('js')
    <script>
        var data=[];
        $( document ).ready(function() {

            $.ajax({
                url: '/home/module/graph/donut',
                type: 'GET',
                success:(function(response) {
                    // console.log(response);
                    data = response;
                    console.log(data);
                    $.plot('#demo-flot-pie', data, {
                        series: {
                            pie: {
                                show: true,
                                radius: 1,
                                label: {
                                    show: true,
                                    radius: 3 / 4,
                                    formatter: function (label, series) {
                                        return '<div style=\"text-align:center;padding:5px;color:white;font-size:10px\">' + label + ' : ' + Math.round(series.percent) + '%</div>';
                                    },
                                    background: {
                                        opacity: 0.8,
                                        color: '#323232'
                                    }
                                }
                            }
                        },
                        legend: {
                            show: false
                        },
                        tooltip: {
                            show: true,
                            content: '%p.0%, %s, n=%n', // show percentages, rounding to 2 decimal places
                            shifts: {
                                x: 20,
                                y: 0
                            },
                            defaultTheme: false
                        }
                    });
                    // $('#reportshow').html(response);
                })
            });
            console.log(data);
        });
    </script>

    <script>
        var data=[];
        $( document ).ready(function() {

            $.ajax({
                url: '/home/module/graph/donutCustomer',
                type: 'GET',
                success:(function(response) {
                    // console.log(response);
                    data = response;
                    console.log(data);
                    $.plot('#demo-flot-pie-customer', data, {
                        series: {
                            pie: {
                                show: true,
                                radius: 1,
                                label: {
                                    show: true,
                                    radius: 3 / 4,
                                    formatter: function (label, series) {
                                        return '<div style=\"text-align:center;padding:5px;color:white;font-size:10px\">' + label + ' : ' + Math.round(series.percent) + '%</div>';
                                    },
                                    background: {
                                        opacity: 0.8,
                                        color: '#323232'
                                    }
                                }
                            }
                        },
                        legend: {
                            show: false
                        },
                        tooltip: {
                            show: true,
                            content: '%p.0%, %s, n=%n', // show percentages, rounding to 2 decimal places
                            shifts: {
                                x: 20,
                                y: 0
                            },
                            defaultTheme: false
                        }
                    });
                    // $('#reportshow').html(response);
                })
            });
            console.log(data);
        });
    </script>


    <script>
        var dataaa = [[1, 10], [2, 8], [3, 4], [4, 13], [5, 17], [6, 9], [7, 12], [8, 15], [9, 9], [10, 15]];
        var data=[];
        $( document ).ready(function() {

            $.ajax({
                url: '/home/module/graph/bar',
                type: 'GET',
                success:(function(response) {
                    // console.log(response);
                    data = response;
                    console.log(dataaa);
                    console.log(data);
                    $.plot('#demo-flot-bar', [data], {
                        series: {
                            bars: {
                                show: true,
                                barWidth: 0.6,
                                fill: true,
                                fillColor: {
                                    colors: [{
                                        opacity: 0.9
                                    }, {
                                        opacity: 0.9
                                    }]
                                }
                            }
                        },
                        colors: ['#9B59B6'],
                        yaxis: {
                            ticks: 5,
                            tickColor: 'rgba(0,0,0,.1)'
                        },
                        xaxis: {
                            ticks: 15,
                            tickColor: 'transparent'
                        },
                        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: '#eeeeee',
                            borderWidth: 0
                        },
                        legend: {
                            show: true,
                            position: 'nw'
                        },
                        tooltip: {
                            show: true,
                            content: 'x: %x, y: %y'
                        }
                    });
                    // $('#reportshow').html(response);
                })
            });
            console.log(data);
        });







    </script>



@endpush