{% extends 'base.html.twig' %}
{% set titleName = "Products Analytics" %}
{% block title %} POWER DATA | {{titleName}} {% endblock %}
{% block page %}{{titleName}}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}
 {% block css %}
     <!-- Select2 -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css' ) }} ">
 {% endblock %}
{% block content %}
    <style>

        .blockEdit{
            pointer-events: none;
            background: rgb(213, 217, 221);
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 31px;
            right: 6px;
        }
        .select2-container--default .select2-selection--single {
            border: 1px solid #ced4da;
            padding: 0.46875rem 0.75rem;
            height: calc(2.25rem + 2px);
        }
        .select2-container--default .select2-dropdown.select2-dropdown--below {
            border-top: 0;
        }


    </style>
    <section class="content">
        <div class="container-fluid">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row" style="display: flex; justify-content: space-around">
                <div class="col-12 col-md-4 mb-1" >
                    <input type="text" class="form-control form-control-sm" id="serachProductForAnalytics" placeholder="Jumia SKU" style="    border-color: var(--info);">
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-8 ">
                        <div class="row">
                        {% for interval in arrayOfIntervals %}
                        <div class="col-12 col-md-6 ">
                            <div class="card">
                                <div class="card-header" style="  background: cornflowerblue;  color: white;">
                                    <h3 class="card-title">List of warehouse Products " {{ interval }} " [ {{ startDate }} - {{ endDate }} ]</h3>
                                </div>
                                <!-- /.card-header -->
                                <div class="card-body table-responsive p-0" style="height: 300px;">
                                    <table class="table table-head-fixed text-nowrap">
                                        <thead>
                                        <tr>
                                            <th>Jumia SKU</th>
                                            <th>Stock</th>
                                            <th>Total</th>
                                            <th>Details</th>
                                            <th>Comment</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% if arrayTransactions[interval] is defined %}
                                        {% for transaction in arrayTransactions[interval] %}
                                         {% if transaction["stockWarehouse"] > 0 %}
                                            <tr>
                                                <td  title="{{ transaction["jumiaSKU"] }}">{{ transaction["jumiaSKU"] }}</td>
                                                <td>{{ transaction["stockWarehouse"] }}</td>
                                                <td>{{ transaction["total"] }}</td>
                                                <td class="truncate6" title="{{ transaction["details"] }}">{{ transaction["details"] }}</td>
                                                <td class="truncate6" title="{{ transaction["cmnt"] }}">{{ transaction["cmnt"] }}</td>
                                            </tr>
                                         {% endif %}
                                        {% endfor %}
                                        {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                        {% endfor %}

                            <div class="col-md-6">
                                <!-- Line chart -->
                                <div class="card card-primary card-outline">
                                    <div class="card-header">
                                        <h3 class="card-title">
                                            <i class="far fa-chart-bar"></i>
                                            Tendance of 15 last days
                                        </h3>
                                    </div>
                                    <div class="card-body">
                                        <div id="line-chart" style="height: 300px;"></div>
                                    </div>
                                    <!-- /.card-body-->
                                </div>
                                <!-- /.card -->
                            </div>
                    </div>
                </div>
                <div class="col-12 col-md-4  ">
                    <div class="row">
                            <div class="col-12  ">
                                <div class="card" >
                                    <div class="card-header" style="  background: burlywood;  color: white;">
                                        <h3 class="card-title">List of stock warehouse - {{ arrayStockJumiaProducts|length - 1 }} products  </h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body table-responsive p-0" style="height: 300px;">
                                        <table class="table table-head-fixed text-nowrap">
                                            <thead>
                                            <tr>
                                                <th>ShopSku</th>
                                                <th>SellerSku</th>
                                                <th>Name</th>
                                                <th>Stock W</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                {% for  product in arrayStockJumiaProducts %}
                                                    <tr>
                                                        <td  title="{{ product["shopSku"] }}">{{ product["shopSku"] }}</td>
                                                        <td>{{ product["sellerSku"] }}</td>
                                                        <td class="truncate" title="{{ product["name"] }}">{{ product["name"] }}</td>
                                                        <td >{{ product["stockWarehouse"] }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                            </div>
                            <div class="col-12  ">
                                <div class="card" >
                                    <div class="card-header" style="  background: burlywood;  color: white;">
                                        <h3 class="card-title">List of proposition - <span id="productCounterProposition"></span> products - {{ allSales }} sales   </h3>
                                    </div>
                                    <!-- /.card-header -->
                                    <div class="card-body table-responsive p-0" style="height: 300px;">
                                        <table class="table table-head-fixed text-nowrap">
                                            <thead>
                                            <tr>
                                                <th>RefDbr</th>
                                                <th>Name</th>
                                                <th>Stock Dbr</th>
                                                <th>Number Of Sales</th>
                                                <th>Number Of Days</th>
                                                <th>Stars</th>
                                                <th>Moyenne</th>
                                                <th>Moyenne Global</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                               {% set  productCounter = 0  %}
                                                {% for  product in arrayOfProposition %}
                                                    {% if  product["numberOfSales"] >= 3 and product["stockDbr"] >= 3 and product["stockWarehouse"] <= 2  %}
                                                        {% set  productCounter = productCounter + 1  %}
                                                    <tr>
                                                        <td  title="{{ product["refDbr"] }}">{{ product["refDbr"] }}</td>
                                                        <td class="truncate" title="{{ product["name"] }}">{{ product["name"] }}</td>
                                                        <td >{{ product["stockDbr"] }}</td>
                                                        <td>{{ product["numberOfSales"] }}</td>
                                                        <td>{{ product["salesDays"]|length }}</td>
                                                        <td >{{ product["stars"] }}</td>
                                                        <td >{{ product["averageC"] }}</td>
                                                        <td >{{ product["averageX"] }}</td>
                                                    </tr>
                                                    {% endif %}
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                            </div>

                        <div class="col-md-12">

                            <!-- Bar chart -->
                            <div class="card card-primary card-outline">
                                <div class="card-header">
                                    <h3 class="card-title">
                                        <i class="far fa-chart-bar"></i>
                                        Bar Chart of last 4 months
                                    </h3>
                                </div>
                                <div class="card-body">
                                    <div id="bar-chart" style="height: 300px;"></div>
                                </div>
                                <!-- /.card-body-->
                            </div>
                            <!-- /.card -->

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="modal fade " id="modal-search-resultantForAnalytics" >
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title text-center" id="modalTitleSearchResultForAnalytics"></h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body" id="searchBodyResultatForAnalytics" style="padding: 0.5rem;">
                        
                    </div>





                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </section>
    <script>
        $(document).ready(function(){
            $("#productCounterProposition").html({{ productCounter }});
        });
    </script>


{% endblock %}
{% block script %}
    <script src="{{ asset('assets/plugins/flot/jquery.flot.js') }}"></script>
    <script src="{{ asset('assets/plugins/flot/plugins/jquery.flot.resize.js') }}"></script>
    <script src="{{ asset('assets/plugins/flot/plugins/jquery.flot.pie.js') }}"></script>
    <script>
        $(document).ready(function(){

            $('.truncate').each(function(){
                var max_length = 20; // maximum characters to show
                if($(this).text().length > max_length){
                    var truncated_text = $(this).text().substr(0, max_length) + '...';
                    $(this).text(truncated_text);
                }
            });

            // Show full text on hover
            $('.truncate').hover(function(){
                var title = $(this).attr('title');
                $(this).text(title);
            }, function(){
                var max_length = 20; // maximum characters to show
                var text = $(this).attr('title');
                if(text.length > max_length){
                    text = text.substr(0, max_length) + '...';
                }
                $(this).text(text);
            });
        });
    </script>
    <!-- Page specific script -->
    <script>
        $(function () {


            /*
             * LINE CHART
             * ----------
             */
            //LINE randomly generated data


            var allLineData = {{ lineChartData | raw }} ;
            var line_data1 = {
                data : allLineData.value,
                color: '#3c8dbc'
            }
            var line_data2 = {
                data : allLineData.predicted,
                color: 'rgba(234,74,92,0.88)'
            }
            $.plot('#line-chart', [line_data1, line_data2], { //, line_data2
                grid  : {
                    hoverable  : true,
                    borderColor: '#f3f3f3',
                    borderWidth: 1,
                    tickColor  : '#f3f3f3'
                },
                series: {
                    shadowSize: 0,
                    lines     : {
                        show: true
                    },
                    points    : {
                        show: true
                    }
                },
                lines : {
                    fill : false,
                    color: ['#3c8dbc', '#f56954']
                },
                yaxis : {
                    show: true
                },
                xaxis : {
                    ticks: allLineData.days
                }
            })
            //Initialize tooltip on hover
            $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
                position: 'absolute',
                display : 'none',
                opacity : 0.8
            }).appendTo('body')
            $('#line-chart').bind('plothover', function (event, pos, item) {

                if (item) {
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2)

                    $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)
                        .css({
                            top : item.pageY + 5,
                            left: item.pageX + 5
                        })
                        .fadeIn(200)
                } else {
                    $('#line-chart-tooltip').hide()
                }

            })
            /* END LINE CHART */



            /*
             * BAR CHART
             * ---------
             */
            var allData = {{ barChartData | raw }} ;
            var bar_data = {
                //data : [[1,10], [2,8], [3,4], [4,13], [5,17], [6,9]], ["value"]
                data : allData.value ,
                bars: { show: true }
            }
            $.plot('#bar-chart', [bar_data], {
                grid  : {
                    hoverable  : true,
                    borderWidth: 1,
                    borderColor: '#f3f3f3',
                    tickColor  : '#f3f3f3'
                },
                series: {
                    bars: {
                        show: true, barWidth: 0.5, align: 'center',
                    },
                },
                colors: ['#3c8dbc'],
                xaxis : {
                    //ticks: [[1,'January'], [2,'February'], [3,'March'], [4,'April'], [5,'May'], [6,'June']] ["months"]
                    ticks: allData.months,
                    min: 1
                }
            })
            /* END BAR CHART */

        })

        /*
         * Custom Label formatter
         * ----------------------
         */
        function labelFormatter(label, series) {
            return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
                + label
                + '<br>'
                + Math.round(series.percent) + '%</div>'
        }
    </script>
    

    <script> 
        $(document).on('keypress', '#serachProductForAnalytics', function(event){
            console.log('Code Enter Search'+event.keyCode);
            var jumiaSku =  $('#serachProductForAnalytics').val().replace(' ','').trim();
            $('#serachProductForAnalytics').val(jumiaSku);

            if(event.keyCode === 13 ){
                $('#serachProductForAnalytics').val('');
                $('#searchBodyResultatForAnalytics').html('<h2 class="text-center"> Data is loading  <i class="fas fa-spinner fa-spin mr-2 " ></i> </h2>');
                $('#modalTitleSearchResultForAnalytics').html('Search for  : '+jumiaSku);
                $('#modal-search-resultantForAnalytics').modal('show');
                //$('#modalTitleSearchResultForAnalytics').html('Barcode : '+jumiaSku);

                $.ajax({
                    url: '/admin/power/analytics/get/product/by/jumiasku/json',
                    type: "POST",
                    data: {'jumiaSku' : jumiaSku},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        // console.log(data);
                        if (data.success) {
                            console.log(data.success.result);
                            $('#searchBodyResultatForAnalytics').html(data.template);
                        } else {

                            $('#searchBodyResultatForAnalytics').html('<h2 class="text-center"> ' + data.message + ' </h2>');
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


                    },
                    error: function (data) {

                        // toastr.error('An error has occurred when getting This Product');
                    }
                });



            }

        });
    </script>

{% endblock %}