@extends('layout.header')
@section('title')
    ALIAN | Retail
@endsection
@section('main')
    <div class="m-grid__item m-grid__item--fluid m-wrapper">
        <!-- BEGIN: Subheader -->
        <div class="m-subheader ">
            <div class="d-sm-flex align-items-center subheader_border_bottom">
                <div class="mr-auto">
                    <h3 class="m-subheader__title ">
                        Retail  Dashboard
                    </h3>
                </div>
                <div>
                    <select name="dropdown" id="select1" value="" onchange="change();">

                        <option name="all" value="All">All</option>

                        @foreach($order_date as $dates)
                            <option name="{{$dates->date}}"  value="{{$dates->date}}">{{$dates->date}}</option>

                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <!-- END: Sub header -->
        <!-- START :: main Content-->
        <div class="m-content">
            <!-- START :: Top box-->
            <div class="m-portlet top_box">
                <div class="m-portlet__body  m-portlet__body--no-padding">
                    <div class="row m-0">
                        <div class="box_main_content">
                            <!--begin::Total Profit-->
                            <div class="box_content">
                                <h6>Total Sellings (&#x20b9;)</h6>

                                <span class="blue_color" > &#x20b9;
                                <span class="sky_color" id="total_selling"></span>
                                </span>
                            </div>
                            <!--end::Total Profit-->
                        </div>
                        <div class="box_main_content">
                            <!--begin::Total Pending Orders-->
                            <div class="box_content">
                                <h6>Total Orders</h6>
                                <span class="sky_color" id="total_order">
{{--                                    {{$total_orders}}--}}
                                </span>
                            </div>
                            <!--end::Total Pending Orderst-->
                        </div>
                        <div class="box_main_content">
                            <!--begin::Total Pending Orders-->
                            <div class="box_content">
                                <h6>Total Pending Orders</h6>
                                <span class="sky_color" id="total_pending">
{{--                                    {{$total_pending_orders}}--}}
                                </span>
                            </div>
                            <!--end::Total Pending Orderst-->
                        </div>
                        <div class="box_main_content">
                            <!--begin::Total Pending Orders-->
                            <div class="box_content">
                                <h6>Recieved Amount</h6>
                                <span class="blue_color" > &#x20b9;
                                <span class="sky_color" id="recieved_amt">
{{--                                    {{$total_pending_orders}}--}}
                                </span>
                                </span>
                            </div>
                            <!--end::Total Pending Orderst-->
                        </div>


                    </div>
                </div>
            </div>
            <div class="m-portlet top_box">
                <div class="m-portlet__body  m-portlet__body--no-padding">
                    <div class="row m-0">
                        <div class="box_main_content">
                            <!--begin::Total Profit-->
                            <div class="box_content">
                                <h6>Cash (&#x20b9;)</h6>

                                <span class="blue_color" > &#x20b9;
                                <span class="sky_color" id="cash"></span>
                                </span>
                            </div>
                            <!--end::Total Profit-->
                        </div>
                        <div class="box_main_content">
                            <!--begin::Total Pending Orders-->
                            <div class="box_content">
                                <h6>Paytm</h6>
                                <span class="blue_color" > &#x20b9;
                                <span class="sky_color" id="paytm">
{{--                                    {{$total_orders}}--}}
                                </span>
                                    </span>
                            </div>
                            <!--end::Total Pending Orderst-->
                        </div>
                        <div class="box_main_content">
                            <!--begin::Total Pending Orders-->
                            <div class="box_content">
                                <h6>Total</h6>
                                <span class="blue_color" > &#x20b9;
                                <span class="sky_color" id="total_payment">
{{--                                    {{$total_orders}}--}}
                                </span>
                                    </span>
                            </div>
                            <!--end::Total Pending Orderst-->
                        </div>
                        <div class="box_main_content">
                            <!--begin::Total Pending Orders-->
                            <div class="box_content">
                                <h6>Cgst</h6>
                                <span class="blue_color" > &#x20b9;
                                <span class="sky_color" id="cgst">
{{--                                    {{$total_orders}}--}}
                                </span>
                                    </span>
                            </div>
                            <!--end::Total Pending Orderst-->
                        </div>
                        <div class="box_main_content">
                            <!--begin::Total Pending Orders-->
                            <div class="box_content">
                                <h6>Sgst</h6>
                                <span class="blue_color" > &#x20b9;
                                <span class="sky_color" id="sgst">
{{--                                    {{$total_orders}}--}}
                                </span>
                                    </span>
                            </div>
                            <!--end::Total Pending Orderst-->
                        </div>

                    </div>
                </div>
            </div>
            <!-- END :: Top box-->

            <!--Begin Total Sell Products & Highest Selling Persons Section-->
            <div class="row">
                <div class="col-xl-8 col-8_padding_right">
                    <!--begin:: Total Sell Products -->
                    <div class="m-portlet m-portlet--full-height dash_total_sell_product">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        Total Current Stock
                                    </h3>
                                </div>
                            </div>

                        </div>
                        <div class="m-portlet__body main_bg_color">
                            <!--begin:: Total Sell Products body-->
                            <div class="m-widget16 table_style_16">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="m-widget16__head">
                                            <div class="m-widget16__item">
                                                            <span class="m-widget16__sceduled">
                                                                Products
                                                            </span>
                                                <span class="m-widget16__amount m--align-right">
                                                                Stock
                                                            </span>
                                            </div>
                                        </div>
                                        <div class="m-widget16__body">
                                            <!--begin::widget item-->
                                            @foreach($current_stock as $stock)
                                                <div class="m-widget16__item">
                                                            <span class="m-widget16__date">
                                                                {{--Alian Type-c Cable 3amp (Gold)--}}
                                                                {{$stock->product_name}}
                                                            </span>
                                                    <span class="m-widget16__price m--align-right">
                                                                <span class="amount_style background_pink">{{$stock->beta_product_stock}}</span>
                                                            </span>
                                                </div>
                                        @endforeach
                                        <!--end::widget item-->

                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="m-widget16__stats">
                                            <div class="m-widget16__visual dashboard_total_sell_products_graph">
                                                <div id="m_chart_dashboard_total_sell_products" style="height: 261px"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end:: Total Sell Products body-->
                        </div>
                    </div>
                    <!--end:: Total Sell Products -->
                </div>
                <div class="col-xl-4 col-4_padding_left">
                    <!--begin:: Highest Selling Persons -->
                    <div class="m-portlet m-portlet--full-height dash_highest_selling_person_main">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        Highest Selling Persons
                                    </h3>
                                </div>
                            </div>

                        </div>
                        <div class="m-portlet__body m-widget16 table_style_16 main_bg_color">
                            <!--begin:: Highest Selling Persons body-->
                            <!--begin::Widget 14-->
                            <div class="m-widget16__head">
                                <div class="m-widget16__item">
                                                <span class="m-widget16__sceduled">
                                                    Name
                                                </span>
                                    <span class="m-widget16__amount m--align-right">
                                                    Amount(&#x20b9;)
                                                </span>
                                </div>
                            </div>
                            <div class="m-widget4 dash_highest_selling_person dash_table_style_4">
                                <!--begin::Widget 14 Item-->
                                <span id="highest_salesperson">

                                </span>

                                <!--end::Widget 14 Item-->
                            </div>
                            <!--end::Widget 14-->
                            <!--end:: Highest Selling Persons body-->
                        </div>
                    </div>
                    <!--end:: Highest Selling Persons -->
                </div>
            </div>
            <!--End:: Total Sell Products & Highest Selling Persons Section-->
            <!--Begin:: Most Valuable Customers & Highest Selling Products Section-->
            <div class="row">

                <div class="col-xl-8 col-8_padding_left">
                    <!--begin:: Highest Selling Products -->
                    <div class="m-portlet m-portlet--full-height dash_highest_selling_products">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        Highest Selling Products
                                    </h3>
                                </div>
                            </div>

                        </div>
                        <div class="m-portlet__body m-widget16 table_style_16 main_bg_color">
                            <!--begin:: Highest Selling Products body-->
                            <!--begin::Widget 14-->
                            <div class="m-widget16__head">
                                <div class="m-widget16__item">
                                                <span class="m-widget16__sceduled">
                                                    Product
                                                </span>
                                    <span class="m-widget16__pro_qty">
                                                    Product Qty
                                                </span>
                                    <span class="m-widget16__amount m--align-right">
                                                    Amount(&#x20b9;)
                                                </span>
                                </div>
                            </div>
                            <div class="m-widget4 dash_table_style_4">
                                <!--begin::Widget 14 Item-->
                                <span id="highest_product">

                                </span>
                            {{--<div class="m-widget4__item">--}}
                            {{--<div class="m-widget4__info product">--}}
                            {{--<a class="m-widget4__title" href="#" name="product_name">--}}
                            {{----}}
                            {{--</a>--}}
                            {{--<br>--}}
                            {{--<span class="m-widget4__sub product_qty" id="product_category">--}}
                            {{----}}
                            {{--</span>--}}
                            {{--</div>--}}
                            {{--<div class="m-widget4__info product_amount">--}}
                            {{--<span id="product_qty"></span>--}}
                            {{--</div>--}}
                            {{--<div class="m-widget4__ext">--}}
                            {{--<span>&#x20b9;</span>--}}
                            {{--<span id="product_amt"></span>--}}
                            {{--</div>--}}
                            {{--</div>--}}
                            <!--end::Widget 14 Item-->

                            </div>
                            <!--end::Widget 14-->
                            <!--end:: Highest Selling Products body-->
                        </div>
                    </div>
                    <!--end:: Highest Selling Products -->
                </div>
            </div>
            <!--End:: Most Valuable Customers & Highest Selling Products Section-->

        </div>
        <!-- END :: main Content-->
    </div>
    <script>
        $(document).ready(function(){
            console.log("Inside document.ready")
            var date='All';
            $.ajax({
                type: 'GET',
                url: './send_date_all',
                data: {date: date},
                contentType: "application/json;charset=utf-8",
                success: function (data) {


                    console.log("users", (data.users));
                    console.log("size", data.size_users);

                    document.getElementById('total_order').innerHTML = data.total_order;
                    document.getElementById('total_pending').innerHTML = data.total_pending;
                    document.getElementById('total_selling').innerHTML = Math.round(data.total_selling[0].selling);
                    document.getElementById('cash').innerHTML = Math.round(data.cash);
                    document.getElementById('paytm').innerHTML = Math.round(data.paytm);
                    document.getElementById('cash').innerHTML = Math.round(data.cash);
                    document.getElementById('cgst').innerHTML = Math.round(data.cgst);
                    document.getElementById('sgst').innerHTML = Math.round(data.sgst);
                    document.getElementById('total_payment').innerHTML = Math.round(data.total_payment);
                    document.getElementById('recieved_amt').innerHTML = Math.round(data.recieved_amt);

                    // $("#hig").append("");
                    var i = 0;

                    console.log("Before for");

                    for (i = 0; i < data.size_users; i++) {
                        console.log("after for");

                        // console.log('name',data.users[i].name);
                        // console.log(document.getElementById('user_name'+i));
                        // document.getElementById('user_name0').innerText=data.users[0].name;


                        $("#highest_salesperson").append(" <div class=\"m-widget4__item\">\n" +
                            "                                    <div class=\"m-widget4__img m-widget4__img--pic\">\n" +
                            "\n" +
                            "                                        <img src=\"sales_images/"+data.users[i].profile_image+"\" onerror=\"this.src='sales_images/IMG1550210555_images.png'\">\n" +
                            "                                    </div>\n" +
                            "                                    <div class=\"m-widget4__info\">\n" +
                            "                                                    <span class=\"m-widget4__title\" id=\"user_name" + i + "\">\n" +
                            "                                                        \n" +
                            "                                                    </span>\n" +
                            "                                        <br>\n" +
                            "                                        <span class=\"m-widget4__sub\" id=\"user_city" + i + "\">\n" +
                            "                                                        \n" +
                            "                                                    </span>\n" +
                            "                                    </div>\n" +
                            "                                    <div class=\"m-widget4__ext\" >\n" +
                            "                                        <span>&#x20b9;</span>\n" +
                            "                                        <span id=\"user_total" + i + "\"></span>\n" +
                            "                                    </div>\n" +
                            "                                    </div>\n" +
                            "                                </div>");

                        document.getElementById("user_name" + i).innerHTML = data.users[i].name;
                        document.getElementById("user_city" + i).innerHTML = data.users[i].user_city;
                        document.getElementById("user_total" + i).innerHTML =  Math.round(data.users[i].total);
                        // document.getElementById("image" + i).src = "sales_images/" + data.users[i].profile_image;
                        // console.log("innerHTML",document.getElementById("user_name"+i).innerHTML);
                    }
                    for (i = 0; i < data.size_products; i++) {


                        // console.log('name',data.users[i].name);
                        // console.log(document.getElementById('user_name'+i));
                        // document.getElementById('user_name0').innerText=data.users[0].name;


                        $("#highest_product").append("<div class=\"m-widget4__item\">\n" +
                            "                                    <div class=\"m-widget4__info product\">\n" +
                            "                                        <a class=\"m-widget4__title\" href=\"#\" name=\"product_name" + i + "\">\n" +
                            "                                            \n" +
                            "                                        <span id=\"product_name" + i + "\"></span>\n" +
                            "                                        </a>\n" +
                            "                                        <br>\n" +
                            "                                        <span class=\"m-widget4__sub product_qty\" id=\"product_category" + i + "\">\n" +
                            "                                                        \n" +
                            "                                                    </span>\n" +
                            "                                    </div>\n" +
                            "                                    <div class=\"m-widget4__info product_amount\">\n" +
                            "                                        <span id=\"product_qty" + i + "\"></span>\n" +
                            "                                    </div>\n" +
                            "                                    <div class=\"m-widget4__ext\">\n" +
                            "                                        <span>&#x20b9;</span>\n" +
                            "                                            <span id=\"product_amt" + i + "\"></span>\n" +
                            "                                    </div>\n" +
                            "                                </div>");


                        document.getElementById("product_name" + i).innerHTML = data.products[i].product_name;
                        document.getElementById("product_category" + i).innerHTML = data.products[i].category;
                        document.getElementById("product_qty" + i).innerHTML = data.products[i].qty;
                        document.getElementById("product_amt" + i).innerHTML =  Math.round(data.products[i].amount);
                    }
                },

                error: function (error) {
                    console.log("error", error);
                    alert('error');
                }
            })
        });

        function change() {
            $('#highest_salesperson').empty();
            $('#highest_product').empty();
            // console.log("selected..",document.getElementById("select1").value);
            var date = document.getElementById("select1").value;
            console.log("selected date",date);

            if(date==="All")
            {
                console.log("Inside if all")
                $.ajax({
                    type: 'GET',
                    url: './send_date_all',
                    data: {date: date},
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {


                        console.log("users", (data.users));
                        console.log("size", data.size_users);

                        document.getElementById('total_order').innerHTML = data.total_order;
                        document.getElementById('total_pending').innerHTML = data.total_pending;
                        document.getElementById('total_selling').innerHTML =  Math.round(data.total_selling[0].selling);
                        document.getElementById('cash').innerHTML = Math.round(data.cash);
                        document.getElementById('paytm').innerHTML = Math.round(data.paytm);
                        document.getElementById('cash').innerHTML = Math.round(data.cash);
                        document.getElementById('cgst').innerHTML = Math.round(data.cgst);
                        document.getElementById('sgst').innerHTML = Math.round(data.sgst);
                        document.getElementById('total_payment').innerHTML = Math.round(data.total_payment);
                        document.getElementById('recieved_amt').innerHTML = Math.round(data.recieved_amt);
                        // $("#hig").append("");
                        var i = 0;

                        console.log("Before for");

                        for (i = 0; i < data.size_users; i++) {
                            console.log("after for");

                            // console.log('name',data.users[i].name);
                            // console.log(document.getElementById('user_name'+i));
                            // document.getElementById('user_name0').innerText=data.users[0].name;


                            $("#highest_salesperson").append(" <div class=\"m-widget4__item\">\n" +
                                "                                    <div class=\"m-widget4__img m-widget4__img--pic\">\n" +
                                "\n" +
                                "                                        <img src=\"sales_images/"+data.users[i].profile_image+"\" onerror=\"this.src='sales_images/IMG1550210555_images.png'\">\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__info\">\n" +
                                "                                                    <span class=\"m-widget4__title\" id=\"user_name" + i + "\">\n" +
                                "                                                        \n" +
                                "                                                    </span>\n" +
                                "                                        <br>\n" +
                                "                                        <span class=\"m-widget4__sub\" id=\"user_city" + i + "\">\n" +
                                "                                                        \n" +
                                "                                                    </span>\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__ext\" >\n" +
                                "                                        <span>&#x20b9;</span>\n" +
                                "                                        <span id=\"user_total" + i + "\"></span>\n" +
                                "                                    </div>\n" +
                                "                                    </div>\n" +
                                "                                </div>");

                            document.getElementById("user_name" + i).innerHTML = data.users[i].name;
                            document.getElementById("user_city" + i).innerHTML = data.users[i].user_city;
                            document.getElementById("user_total" + i).innerHTML =  Math.round(data.users[i].total);
                            // document.getElementById("image" + i).src = "sales_images/" + data.users[i].profile_image;
                            // console.log("innerHTML",document.getElementById("user_name"+i).innerHTML);
                        }
                        for (i = 0; i < data.size_products; i++) {


                            // console.log('name',data.users[i].name);
                            // console.log(document.getElementById('user_name'+i));
                            // document.getElementById('user_name0').innerText=data.users[0].name;


                            $("#highest_product").append("<div class=\"m-widget4__item\">\n" +
                                "                                    <div class=\"m-widget4__info product\">\n" +
                                "                                        <a class=\"m-widget4__title\" href=\"#\" name=\"product_name" + i + "\">\n" +
                                "                                            \n" +
                                "                                        <span id=\"product_name" + i + "\"></span>\n" +
                                "                                        </a>\n" +
                                "                                        <br>\n" +
                                "                                        <span class=\"m-widget4__sub product_qty\" id=\"product_category" + i + "\">\n" +
                                "                                                        \n" +
                                "                                                    </span>\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__info product_amount\">\n" +
                                "                                        <span id=\"product_qty" + i + "\"></span>\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__ext\">\n" +
                                "                                        <span>&#x20b9;</span>\n" +
                                "                                            <span id=\"product_amt" + i + "\"></span>\n" +
                                "                                    </div>\n" +
                                "                                </div>");


                            document.getElementById("product_name" + i).innerHTML = data.products[i].product_name;
                            document.getElementById("product_category" + i).innerHTML = data.products[i].category;
                            document.getElementById("product_qty" + i).innerHTML = data.products[i].qty;
                            document.getElementById("product_amt" + i).innerHTML =  Math.round(data.products[i].amount);
                        }
                    },

                    error: function (error) {
                        console.log("error", error);
                        alert('error');
                    }
                })

            }

            else {
                $.ajax({
                    type: 'GET',
                    url: './send_date',
                    data: {date: date},
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {

                                console.log("response",data)
                        console.log("users", (data.users));
                        console.log("size", data.size_users);

                        document.getElementById('total_order').innerHTML = data.total_order;
                        document.getElementById('total_pending').innerHTML = data.total_pending;
                        document.getElementById('total_selling').innerHTML =  Math.round(data.total_selling[0].selling);
                        document.getElementById('cash').innerHTML = Math.round(data.cash);
                        document.getElementById('paytm').innerHTML = Math.round(data.paytm);
                        document.getElementById('cash').innerHTML = Math.round(data.cash);
                        document.getElementById('cgst').innerHTML = Math.round(data.cgst);
                        document.getElementById('sgst').innerHTML = Math.round(data.sgst);
                        document.getElementById('total_payment').innerHTML = Math.round(data.total_payment);
                        document.getElementById('recieved_amt').innerHTML = Math.round(data.recieved_amt);
                        // $("#hig").append("");
                        var i = 0;

                        console.log("Before for");

                        for (i = 0; i < data.size_users; i++) {
                            console.log("after for");

                            // console.log('name',data.users[i].name);
                            // console.log(document.getElementById('user_name'+i));
                            // document.getElementById('user_name0').innerText=data.users[0].name;


                            $("#highest_salesperson").append(" <div class=\"m-widget4__item\">\n" +
                                "                                    <div class=\"m-widget4__img m-widget4__img--pic\">\n" +
                                "\n" +
                                "                                        <img src=\"sales_images/"+data.users[i].profile_image+"\" onerror=\"this.src='sales_images/IMG1550210555_images.png'\">\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__info\">\n" +
                                "                                                    <span class=\"m-widget4__title\" id=\"user_name" + i + "\">\n" +
                                "                                                        \n" +
                                "                                                    </span>\n" +
                                "                                        <br>\n" +
                                "                                        <span class=\"m-widget4__sub\" id=\"user_city" + i + "\">\n" +
                                "                                                        \n" +
                                "                                                    </span>\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__ext\" >\n" +
                                "                                        <span>&#x20b9;</span>\n" +
                                "                                        <span id=\"user_total" + i + "\"></span>\n" +
                                "                                    </div>\n" +
                                "                                    </div>\n" +
                                "                                </div>");

                            document.getElementById("user_name" + i).innerHTML = data.users[i].name;
                            document.getElementById("user_city" + i).innerHTML = data.users[i].user_city;
                            document.getElementById("user_total" + i).innerHTML =  Math.round(data.users[i].total);
                            // document.getElementById("image" + i).src = "sales_images/" + data.users[i].profile_image;
                            // console.log("innerHTML",document.getElementById("user_name"+i).innerHTML);
                        }
                        for (i = 0; i < data.size_products; i++) {


                            // console.log('name',data.users[i].name);
                            // console.log(document.getElementById('user_name'+i));
                            // document.getElementById('user_name0').innerText=data.users[0].name;


                            $("#highest_product").append("<div class=\"m-widget4__item\">\n" +
                                "                                    <div class=\"m-widget4__info product\">\n" +
                                "                                        <a class=\"m-widget4__title\" href=\"#\" name=\"product_name" + i + "\">\n" +
                                "                                            \n" +
                                "                                        <span id=\"product_name" + i + "\"></span>\n" +
                                "                                        </a>\n" +
                                "                                        <br>\n" +
                                "                                        <span class=\"m-widget4__sub product_qty\" id=\"product_category" + i + "\">\n" +
                                "                                                        \n" +
                                "                                                    </span>\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__info product_amount\">\n" +
                                "                                        <span id=\"product_qty" + i + "\"></span>\n" +
                                "                                    </div>\n" +
                                "                                    <div class=\"m-widget4__ext\">\n" +
                                "                                        <span>&#x20b9;</span>\n" +
                                "                                            <span id=\"product_amt" + i + "\"></span>\n" +
                                "                                    </div>\n" +
                                "                                </div>");


                            document.getElementById("product_name" + i).innerHTML = data.products[i].product_name;
                            document.getElementById("product_category" + i).innerHTML = data.products[i].category;
                            document.getElementById("product_qty" + i).innerHTML = data.products[i].qty;
                            document.getElementById("product_amt" + i).innerHTML = Math.round(data.products[i].amount);
                        }

                    },

                    error: function (error) {
                        console.log("error", error);
                        alert('error');
                    }
                })
            }


        }

    </script>
@endsection