@extends('layouts.master')
@extends('sidebar.dashboard')

@section('page-style')

<style>
    .table> :not(:first-child) {
        border-top: none;
    }

    .table {
        border-color: #000;
    }

    .chart--container {
        min-height: 530px;
        width: 100%;
        height: 100%;
    }


    #myChart-top #myChart-license-text {
        display: none !important;
    }


    .highcharts-figure,
    .highcharts-data-table table {
        min-width: 310px;
        max-width: 800px;
        margin: 1em auto;
    }

    #container {
        height: 400px;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #ebebeb;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }

    .highcharts-data-table thead tr,
    .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }

    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }

    .highcharts-credits {
        display: none;
    }
</style>

@endsection

@section('content')

<!-- BEGIN: Content-->

<!-- Dashboard Ecommerce Starts -->
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <!-- Medal Card -->
        <!-- <div class="col-xl-4 col-md-6 col-12">
            <div class="card card-congratulation-medal">
                <div class="card-body">
                    <h5>WELCOME RMZ!</h5>
                    <p class="card-text font-small-3">Customized Dashboard</p>

                    <img src="{{URL::to('app-assets/images/illustration/rmz.png')}}" style="left: 227px;top: -28px;width: 210px;" class="congratulation-medal" alt="Medal Pic" />
                </div>
            </div>
        </div> -->
        <!--/ Medal Card -->


    </div>

    <div class="row match-height">
        <!-- Medal Card -->
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card card-congratulation-medal">
                <div class="card-body">
                    <h5>WELCOME RMZ!</h5>
                    <p class="card-text font-small-3">Building the future of space.</p>
                    <h3 class="mb-75 mt-2 pt-50">
                        <a href="#"></a>
                    </h3>
                    <!-- <button type="button" class="btn btn-primary">View Sales</button> -->
                    <img src="{{URL::to('app-assets/images/illustration/rmz.png')}}" style="left: 197px;top: -23px;width: 300px;" class="congratulation-medal" alt="Medal Pic" />
                </div>
            </div>
        </div>
        <!--/ Medal Card -->

        <!-- Statistics Card -->
        <div class="col-xl-8 col-md-6 col-12">
            <div class="card card-statistics">
                <div class="card-header">
                    <h4 class="card-title">Portfolio</h4>
                    <div class="d-flex align-items-center">
                        <!-- <p class="card-text font-small-2 me-25 mb-0">Updated 1 month ago</p> -->
                    </div>
                </div>
                <div class="card-body statistics-body">
                    <div class="row">
                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                            <div class="d-flex flex-row">
                                <div class="avatar bg-light-primary me-2">
                                    <div class="avatar-content">
                                        <i data-feather="map-pin" class="avatar-icon"></i>
                                    </div>
                                </div>
                                <div class="my-auto">
                                    <h4 class="fw-bolder mb-0">3</h4>
                                    <p class="card-text font-small-3 mb-0">Locations Live</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-xl-0">
                            <div class="d-flex flex-row">
                                <div class="avatar bg-light-info me-2">
                                    <div class="avatar-content">
                                        <i data-feather="layout" class="avatar-icon"></i>
                                    </div>
                                </div>
                                <div class="my-auto">
                                    <h4 class="fw-bolder mb-0">{{$assetsCount}}</h4>
                                    <p class="card-text font-small-3 mb-0">Assets Live</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 col-12 mb-2 mb-sm-0">
                            <div class="d-flex flex-row">
                                <div class="avatar bg-light-danger me-2">
                                    <div class="avatar-content">
                                        <i data-feather="box" class="avatar-icon"></i>
                                    </div>
                                </div>
                                <div class="my-auto">
                                    <h4 class="fw-bolder mb-0">{{$outletsCount}}</h4>
                                    <p class="card-text font-small-3 mb-0">Outlets Live</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 col-12">
                            <div class="d-flex flex-row">
                                <div class="avatar bg-light-success me-2">
                                    <div class="avatar-content">
                                        <i data-feather="dollar-sign" class="avatar-icon"></i>
                                    </div>
                                </div>
                                <div class="my-auto">
                                    <h4 class="fw-bolder mb-0">---</h4>
                                    <p class="card-text font-small-3 mb-0">---</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Statistics Card -->
    </div>


    <div class="row">

        <!-- Scatter Chart Starts  -->
        <div class="col-lg-8 col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-baseline align-items-sm-center flex-sm-row flex-column">
                    <h4 class="card-title">Quarterly Sales</h4>
                    <div class="btn-group mt-md-0 mt-1" role="group" aria-label="Basic radio toggle button group">

                        <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2" style="margin-top: 8px;margin-right: 14px;">Year</label>
                        <select id="" class="form-control sm:w-56 box pl-10 yearsales">
                            <!-- <option value="2022">2022</option> -->
                            <option value="2026">2026</option><option value="2025">2025</option><option value="2024">2024</option><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option>                        </select>

                    </div>
                </div>
                <div class="card-body" style="height:535px">
                    <figure class="highcharts-figure">
                        <div id="container"></div>

                    </figure>
                </div>
            </div>
        </div>
        <!-- Scatter Chart Ends  -->
        <!-- Donut Chart Starts -->
        <div class="col-lg-4 col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Overview</h4>
                </div>
                <div class="card-body">
                    <div id="myChart" class="chart--container">

                    </div>
                </div>
            </div>
        </div>
        <!-- Donut Chart Starts -->


    </div>



    <div class="row" id="table-bordered">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Sales Summary</h4>
                </div>
                <!-- <div class="card-body">
                    <p class="card-text">
                        Add <code>.table-bordered</code> for borders on all sides of the table and cells. For Inverse Dark Table, add
                        <code>.table-dark</code> along with <code>.table-bordered</code>.
                    </p>
                </div> -->
                <div class="table-responsive" style="padding: 40px;">
                    <table class="table table-bordered" style="text-align: center;color:#000">
                        <thead>
                            <tr>
                                <th rowspan="2" style="vertical-align: middle;">Year</th>
                                                            </tr>
                            <tr>
                                                            </tr>
                        </thead>
                        <tbody>
                                                            <tr>
                                    <td>2026</td>
                                    

                                </tr>
                                                            <tr>
                                    <td>2025</td>
                                    

                                </tr>
                                                            <tr>
                                    <td>2024</td>
                                    

                                </tr>
                                                            <tr>
                                    <td>2023</td>
                                    

                                </tr>
                                                            <tr>
                                    <td>2022</td>
                                    

                                </tr>
                                                            <tr>
                                    <td>2021</td>
                                    

                                </tr>
                                                            <tr>
                                    <td>2020</td>
                                    

                                </tr>
                                                     
                        </tbody>
                        <thead>
                            <tr>
                                <th>Grand Total</th>
                                                               
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>






</section>
<!-- Dashboard Ecommerce ends -->


<!-- END: Content-->

@endsection


@section('page-script')



<script>
    let chartConfig = {
        shapes: [

            {
                type: 'zingchart.maps',
                options: {
                    name: 'ind',
                    panning: false, // turn of zooming. Doesn't work with bounding box
                    zooming: false,
                    scrolling: false,
                    style: {
                        tooltip: {
                            borderColor: '#7367f0',
                            borderWidth: '1px',
                            fontSize: '18px'
                        },
                        borderColor: '#7367f0',
                        borderWidth: '1px',
                        controls: {
                            visible: false, // turn of zooming. Doesn't work with bounding box

                        },
                        hoverState: {
                            alpha: .28
                        },
                        items: {
                            KA: {
                                tooltip: {
                                    borderColor: '#ff9f43',
                                    text: 'Karnataka <br/> Millenia : 4 Outlets <br/> Infinity : 5 Outlets',
                                    backgroundColor: '#ff9f43',
                                    fontSize: '12px'

                                },
                                backgroundColor: '#ff9f43',
                                label: {
                                    visible: true
                                }
                            },

                            TL: {
                                tooltip: {
                                    borderColor: '#00cfe8',
                                    text: 'Telangana  <br/> Skyview 10 : 8 Outlets <br/> Skyview 20 : 1 Outlet',
                                    backgroundColor: '#00cfe8',
                                    fontSize: '12px'
                                },
                                backgroundColor: '#00cfe8',
                                label: {
                                    visible: true
                                }
                            },

                            TN: {
                                tooltip: {
                                    borderColor: '#00cfe8',
                                    text: 'Tamilnadu  <br/> Op1 : 3 Outlets',
                                    backgroundColor: '#28c76f',
                                    fontSize: '12px'
                                },
                                backgroundColor: '#28c76f',
                                label: {
                                    visible: true
                                }
                            },

                        },
                        label: { // text displaying. Like valueBox
                            fontSize: '15px',
                            visible: false
                        }
                    }
                }
            }
        ]
    };

    zingchart.loadModules('maps,maps-ind');
    zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: '100%',
        width: '100%',
        hideprogresslogo: true,
    });
</script>



<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script>
    $('.yearsales').change(function() {
        var year = $(this).val();
        // alert(year);
        getChartData(year);
    });


    function getChartData(year) {


        var useridvaluenew = $("#useridval").val();



        var base = "{{route('quarterlySalesReport')}}";
        var baseurl = base + '?year=' + year;

        $.ajax({
            url: baseurl,
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataType: 'json',
            success: function(responce) {


                Highcharts.chart('container', {

                    chart: {
                        type: 'column'
                    },

                    title: {
                        text: 'Quarterly Sales Report Year Wise'
                    },

                    xAxis: {
                        categories: ['Q1', 'Q2', 'Q3', 'Q4']
                    },

                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        title: {
                            text: 'Sales'
                        },
                        // stackLabels: {
                        //     enabled: true,
                        // }
                    },

                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + this.y.toLocaleString('en-IN') + '<br/>' +
                                'Total: ' + this.point.stackTotal.toLocaleString('en-IN');
                        },


                    },


                    // tooltip: {
                    //     headerFormat: '<b>{point.x}</b><br/>',
                    //     pointFormat: '{series.name}: {'+point.y.toLocaleString("en-IN")+'}<br/>',
                    //     footerFormat: '<b>Total: {point.total.toLocaleString("en-IN")}</b>',
                    //     shared: true,
                    //     useHTML: true
                    // },




                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            // colorByPoint: true
                            // dataLabels: {
                            //   enabled: true,
                            //   formatter: function() {
                            //     return Highcharts.numberFormat(this.y, 2);
                            //   }
                            // },
                            lang: {
                                decimalPoint: '.',
                                thousandsSep: ','
                            }
                        }
                    },



                    // series: [{
                    //   name: 'SKYVIEW 10',
                    //   data: [1480, 133, 124, 169],
                    //   stack: '1',
                    //   color: '#00cfe8'
                    // }, {
                    //   name: 'MILLENIA',
                    //   data: [102, 98, 65, 32],
                    //   stack: '1',
                    //   color: '#00ebcf'
                    // }, {
                    //   name: 'INFINITY',
                    //   data: [113, 122, 95, 147],
                    //   stack: '1',
                    //   color: '#feb3b3'
                    // }]

                    series: responce
                });



            }

        });


    }


    Highcharts.chart('container', {

        chart: {
            type: 'column'
        },

        title: {
            text: 'Quarterly Sales Report Year Wise'
        },

        xAxis: {
            categories: ['Q1', 'Q2', 'Q3', 'Q4']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Sales'
            },
            // stackLabels: {
            //     enabled: true,
            // }
        },

        tooltip: {
            formatter: function() {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y.toLocaleString('en-IN') + '<br/>' +
                    'Total: ' + this.point.stackTotal.toLocaleString('en-IN');
            },


        },


        // tooltip: {
        //     headerFormat: '<b>{point.x}</b><br/>',
        //     pointFormat: '{series.name}: {'+point.y.toLocaleString("en-IN")+'}<br/>',
        //     footerFormat: '<b>Total: {point.total.toLocaleString("en-IN")}</b>',
        //     shared: true,
        //     useHTML: true
        // },




        plotOptions: {
            column: {
                stacking: 'normal',
                // colorByPoint: true
                // dataLabels: {
                //   enabled: true,
                //   formatter: function() {
                //     return Highcharts.numberFormat(this.y, 2);
                //   }
                // },
                lang: {
                    decimalPoint: '.',
                    thousandsSep: ','
                }
            }
        },



        // series: [{
        //   name: 'SKYVIEW 10',
        //   data: [1480, 133, 124, 169],
        //   stack: '1',
        //   color: '#00cfe8'
        // }, {
        //   name: 'MILLENIA',
        //   data: [102, 98, 65, 32],
        //   stack: '1',
        //   color: '#00ebcf'
        // }, {
        //   name: 'INFINITY',
        //   data: [113, 122, 95, 147],
        //   stack: '1',
        //   color: '#feb3b3'
        // }]

        series:     });



    //////////////////////////
</script>

@endsection