@extends('layouts.master')
@section('content')
    <style>
        .total-val span, .segmentType-value, .topreg-row .reg-totalsale span{
            font-family: 'Rationale', sans-serif!important;
        }
        .total-val {
            color: #606060;
            text-align: center;
            padding: 20px 8px;
        }
        .total-val span {
            color: #0038ba;
            margin-bottom: 5px;
            font-size: 30px;
            display: block;
            line-height: 1;
        }
        .dashboard-date {
            width: 200px;
            float: right;
            margin-top: 4px;
            margin-right: 15px;
            position: relative;
        }
        .dashboard-date .fa {
            position: absolute;
            top: 10px;
            right: 0;
            font-size: 16px;
            color: #888888
        }
        .dashboard-date .form-control {
            border: 0;
            box-shadow: none;
            font-size: 20px;
            text-align: right;
            z-index: 3;
            background-color: transparent!important;
            padding-right: 20px; font-family: 'Rationale', sans-serif!important;
        }

        .dashboard-date .form-control, .font-no, .avg-booking-day h2 span, .total-VO span, .label-percent{font-family: 'Rationale', sans-serif!important;}
        .dashboard-date {
            width: 260px;
            float: right;
            margin-top: 4px;
            margin-right: 15px;
            position: relative;
        }
        .dashboard-date .fa {
            position: absolute;
            top: 10px;
            right: 0;
            font-size: 16px;
            color: #888888
        }
        .dashboard-date .form-control {
            border: 0;
            box-shadow: none;
            font-size: 20px;
            text-align: right;
            z-index: 3;
            background-color: transparent!important;
            padding-right: 20px;
        }
        .segmentType-value{font-size: 20px; line-height:1;   position: absolute;
            top: 43px;
            left: 20px;}
        .segmentType-value span{font-size: 32px; color: #0038ba;display: block}


        .card-heading {
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
        }
        .card-heading span {
            font-family: 'proximanova-light', sans-serif !important;
            font-weight: normal;
        }
        .card-heading:before {
            background: #0038ba;
            position: absolute;
            width: 2px;
            height: 18px;
            left: -20px;
            top: 2px;
            content: '';
        }
        .avg-booking-day{margin-top: 0px; margin-bottom: 5px;}
        .avg-booking-day h2{font-size: 18px; color: #606060; line-height:1; margin: 0}
        .avg-booking-day h2 span{font-size: 30px; display: block; color: #0038ba; padding-top: 2px;}
        .card {
            box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
            -webkit-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
            -moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
            -ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
            padding: 20px;
        }


        .pro-info{font-size:14px}
        .pro-info p{margin:0; line-height: 18px; color: #606060}
        .pro-info p strong{min-width:105px; display: inline-block}
        .pro-img {
            width: 94px;
            height: 94px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
        }
        .pro-img img {width: 94px; height: 94px;}
        .pro-info h4 {font-size: 16px; margin-bottom:10px;}
        .topreg-row{font-size: 14px; border-bottom: solid 1px #ececec; margin-top: 15px; padding-bottom: 15px;}
        .topreg-row h2{font-size: 17px; margin:0;line-height: 1}
        .topreg-row .reg-totalsale{ text-align: right; line-height: 1}
        .topreg-row .reg-totalsale span{font-size: 24px; display: block; color: #0038ba}
        .topreg-row .reg-totalsale span small{color: #282828}
        .topreg-row .topreg-no{font-family:'Poppins', sans-serif; font-weight: 800; font-size: 38px;text-align: right; line-height: 1; color: #f2f5fb}
    </style>


          <div id="blureEffct" class="container">

                <div class="row mt-2 mb-3">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <h2 class="_head01">Product <span> Monthly Sales</span></h2>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <div class="dashboard-date" style="margin-top:-6px">
                            <input type="text" id="datepicker" class="form-control" placeholder="">
                            <i class="fa fa-angle-down"></i>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 mb-20">
                        <div class="card mh-100">

                            <div class="row pro-info"><img style="position:absolute; width:auto; height:30px; right:15px; top:15px;" class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt="">
                                <div class="col-auto">
                                    <div class="pro-img">
                                        <img class="pic" id="thumbnail" alt="">
                                    </div>
                                </div>
                                <div class="col pl-0"><h4><span id="item_name"></span></h4>
                                    {{--<p><strong>Trade Price: </strong><span id=""></span></p>--}}
                                    <p><strong>Brand: </strong><span id="brand"></span></p>
                                    <p><strong>Sub Category: </strong><span id="category"></span></p>
                                </div>

                                <div class="col-12 PT-30">
                                    <div class="row m-0">
                                        <div class="col-6 total-val border-bottom"><span id="units_booked"></span> Units Booked</div>
                                        <div class="col-6 total-val border-left border-bottom"> <span id="revenue"></span> Revenue</div>
                                        <div class="col-6 total-val"><span id="avg_drop_size"></span> AVG. Drop Size</div>
                                        <div class="col-6 total-val border-left"><span id="contribution"></span> Contribution</div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <script>
                        //Overview Section
                        var apiData;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{URL::to("/live-report-product-detail-overview-api/".request()->route()->parameters['id'])}}', // This is what I have updated
                        }).done(function (msg) {
                            apiData = JSON.parse(msg);
                            var overview = apiData.overview;

                            document.getElementById('thumbnail').src= overview.thumbnail;
                            document.getElementById('item_name').innerHTML= overview.item_name ;
                            document.getElementById('brand').innerHTML= overview.brand ;
                            document.getElementById('category').innerHTML= overview.category ;
                            document.getElementById('units_booked').innerHTML= overview.units_booked+ '<small> CTNs</small>';
                            document.getElementById('revenue').innerHTML= '<small> Rs.</small>'+overview.revenue ;
                            document.getElementById('contribution').innerHTML= overview.contribution+'<small>%</small>' ;
                            document.getElementById('avg_drop_size').innerHTML= overview.avg_drop_size ;
                            // document.getElementById('unit_short_name').innerHTML= overview.unit_short_name ;

                        });
                    </script>


                    <div class="col-6 mb-20">
                        <div class="card mh-100 position-relative">
                            <h2 class="card-heading">Sales <span>by Segments</span></h2>
                            <div class="segmentType-value"><span id="total_sales"></span></div>
                            <canvas class="mt-15" id="segmentType" height="270"></canvas>

                        </div>
                    </div>
                    <script>
                        // graph Section
                        var apiData_segments;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{URL::to("/live-report-product-detail-segments-api/".request()->route()->parameters['id'])}}', // This is what I have updated
                        }).done(function (msg) {
                            apiData_segments = JSON.parse(msg);
                            var segments = apiData_segments.segments;

                            document.getElementById('total_sales').innerHTML = 'Rs.'+segments.total_sales;
                            var graph_data = [] ;
                            var graph_color = [];
                            var graph_labels = [] ;

                            for(var i=0; i<segments.segments.length; i++){
                                graph_labels.push(segments.segments[i].name);
                                graph_data.push(segments.segments[i].qty);
                                graph_color.push('#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0'));

                            }

                            var data = {
                                datasets: [{
                                    data: graph_data,
                                    backgroundColor: graph_color,
                                    label: '' // for legend
                                }],
                                labels: graph_labels

                            };

                            var ctx = $("#segmentType");
                            new Chart(ctx, {
                                data: data,
                                type: 'doughnut',

                                options: {
                                    tooltips: {
                                        enabled: false
                                    },

                                    legend: {
                                        position: 'bottom',
                                        labels: {
                                            fontColor: "#282828",
                                            boxWidth: 20,
                                            usePointStyle:true,
                                            padding: 25,
                                            fontSize:13
                                        }
                                    },


                                    plugins: {
                                        labels: {
                                            // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                                            render: 'percentage',

                                            // precision for percentage, default is 0
                                            precision: 0,

                                            // identifies whether or not labels of value 0 are displayed, default is false
                                            showZero: true,

                                            // font size, default is defaultFontSize
                                            fontSize: 18,

                                            // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
                                            fontColor: '#fff',

                                            // font style, default is defaultFontStyle
                                            fontStyle: 'normal',

                                            // font family, default is defaultFontFamily
                                            fontFamily: "'Rationale'",

                                            // draw text shadows under labels, default is false
                                            textShadow: true,

                                            // text shadow intensity, default is 6
                                            shadowBlur: 5,

                                            // text shadow X offset, default is 3
                                            shadowOffsetX: -2,

                                            // text shadow Y offset, default is 3
                                            shadowOffsetY: 2,

                                            // text shadow color, default is 'rgba(0,0,0,0.3)'
                                            shadowColor: 'rgba(0,0,0,0.40)',

                                            // draw label in arc, default is false
                                            // bar chart ignores this
                                            // arc: true,

                                            // position to draw label, available value is 'default', 'border' and 'outside'
                                            // bar chart ignores this
                                            // default is 'default'
                                            position: 'default',

                                            // draw label even it's overlap, default is true
                                            // bar chart ignores this
                                            overlap: true,

                                            // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
                                            showActualPercentages: true,

                                            // set images when `render` is 'image'
                                            images: [
                                                {
                                                    src: '',
                                                    width: 16,
                                                    height: 16
                                                }
                                            ],

                                            // add padding when position is `outside`
                                            // default is 2
                                            outsidePadding: 4,

                                            // add margin of text when position is `outside` or `border`
                                            // default is 2
                                            textMargin: 4
                                        }
                                    }
                                }

                            });
                        });
                    </script>
                    <div class="col-6 mb-20">
                        <div class="card mh-100 position-relative">
                            <h2 class="card-heading">Sales <span> By Channels</span></h2>
                            <canvas class="mt-15" id="topChannelsproducts" height="314"></canvas>
                        </div>
                    </div>
                    <script>
                        //pie Chart Section
                        var apiData_channel;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{URL::to("/live-report-product-detail-channel-api/".request()->route()->parameters['id'])}}', // This is what I have updated
                        }).done(function (msg) {
                            apiData_channel = JSON.parse(msg);
                            var cahnnel = apiData_channel.channels

                             var chart_data = [] ;
                             var chart_color = [];
                             var chart_labels = [] ;

                             for(var i=0; i < cahnnel.channels.length; i++){
                                 chart_labels.push(cahnnel.channels[i].retailer_type_name);
                                 chart_data.push(cahnnel.channels[i].qty);
                                 chart_color.push('#0038ba');

                             }


                            var data1 = {
                                datasets: [{
                                    data: chart_data,
                                    backgroundColor: chart_color,
                                    label: '' // for legend
                                }],
                                labels: chart_labels

                            };



                            var ctx1 = $("#topChannelsproducts");
                            new Chart(ctx1, {
                                data: data1,
                                type: 'bar',

                                options: {
                                    tooltips: {
                                        bodyFontFamily: 'Rationale',
                                        backgroundColor: '#282828',
                                        titleFontColor: '#fff',
                                        caretSize: 5,
                                        cornerRadius: 2,
                                        bodyFontSize:20,

                                        //remove label colorbox from tooltips
                                        custom: function(tooltip) {
                                            if (!tooltip) return;
                                            tooltip.displayColors = false;
                                        },

                                    },

                                    legend: {
                                        display: false,
                                    },






                                    plugins: {
                                        labels: {
                                            // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                                            render: 'image',

                                            // precision for percentage, default is 0
                                            precision: 0,

                                            // identifies whether or not labels of value 0 are displayed, default is false
                                            showZero: false,




                                            // font style, default is defaultFontStyle
                                            fontStyle: 'normal',

                                            // font family, default is defaultFontFamily
                                            fontFamily: "'Rationale'",

                                            // draw text shadows under labels, default is false
                                            textShadow: true,

                                            // text shadow intensity, default is 6
                                            shadowBlur: 5,

                                            // text shadow X offset, default is 3
                                            shadowOffsetX: -2,

                                            // text shadow Y offset, default is 3
                                            shadowOffsetY: 2,

                                            // text shadow color, default is 'rgba(0,0,0,0.3)'
                                            shadowColor: 'rgba(0,0,0,0.40)',

                                            // draw label in arc, default is false
                                            // bar chart ignores this
                                            // arc: true,

                                            // position to draw label, available value is 'default', 'border' and 'outside'
                                            // bar chart ignores this
                                            // default is 'default'


                                            // draw label even it's overlap, default is true
                                            // bar chart ignores this
                                            overlap: true,

                                            // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
                                            showActualPercentages: true,

                                            // set images when `render` is 'image'
                                            images: [
                                                {
                                                    src: '',
                                                    width: 16,
                                                    height: 16
                                                }
                                            ],

                                            // add padding when position is `outside`
                                            // default is 2
                                            outsidePadding: 4,

                                            // add margin of text when position is `outside` or `border`
                                            // default is 2
                                            textMargin: 4
                                        }
                                    }
                                }

                            });






                        });
                    </script>
                    <div class="col-6 mb-20">
                        <div class="card mh-100 position-relative">
                            <h2 class="card-heading">Top <span> Regions</span></h2>

                            <span id="top_regions"></span>


                        </div>
                    </div>
                    <script>
                        //Top Regions
                        var apiData_topregion;
                        var count;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{URL::to("/live-report-product-detail-top-regions-api/".request()->route()->parameters['id'])}}', // This is what I have updated
                        }).done(function (msg) {
                            apiData_topregion = JSON.parse(msg);

                            for(var i = 0; i < apiData_topregion.regions.length; i++) {
                                count = i+1;
                                var obj = apiData_topregion.regions[i];

                                document.getElementById('top_regions').innerHTML +='' +
                                    '<div class="row topreg-row">'+
                                    '<div class="col-6"><h2>'+obj.region_name+'</h2>RSM: '+obj.rsm+'</div>'+
                                '<div class="col-2 topreg-no"><img style="position:absolute; width:auto; height:30px; left:0px; top:5px;" class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt="">'+count+'</div>'+
                                '<div class="col-4 reg-totalsale">TOTAL Booking <span><small>Rs.</small> '+obj.booking+'</span></div>'+
                            '</div>';


                            }

                        });
                    </script>





                </div>


            </div>



@endsection