@extends('layouts.master')
@section('content')

              <div class="row mt-2 mb-3">
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <h2 class="_head01">Product <span>Sales</span></h2>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <ol class="breadcrumb">
                            <li><a href="#"><span>Dashboard</span></a></li>
                            <li><span>Product Sales</span></li>
                        </ol>
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-12">
                        <div class="header-tabs mb-10" style="min-height:47px">
                            <div class="row">
                                <div class="col">
                                    <div class="CL-Product"><i class="fa fa-search"></i>
                                        <input type="text" class="form-control" id="" placeholder="Search">
                                    </div>
                                </div>


                                <!-- <div class="col-auto">
                                    <div class="dashboard-date">
                                     <input type="text" id="datepicker" class="form-control" placeholder="">
                                     <i class="fa fa-angle-down"></i>
                                     </div>
                                </div>-->
                                <div class="col-auto"><div class="dash-filter"><img src="images/report-filters.svg" alt=""></div>	</div>

                            </div>



                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 PT-10">
                        <div class="row" id="data">

                        </div>
                    </div>
                    <script>

                        var apiData;
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{URL::to("/dashboard-live-report-products-api")}}', // This is what I have updated
                        }).done(function (msg) {
                            apiData = JSON.parse(msg);

                            var data = apiData.products;
                            for(var i = 0; i< apiData.products.length; i++)
                            {
                                var j = i+1;
                                document.getElementById('data').innerHTML +=
                                    '<div class="col-3">' +
                                    '         <a href="live-report-product-detail/'+data[i].pref_id+'" class="productcard"><span class="emp-sno">'+j+'</span>' +
                                    '      <img style="width:30px;height:30px; position:absolute;top:-10px;right:-10px" src="{!!  asset('images/badge-icon.svg') !!}" alt="">' +
                                    '           <div class="row">' +
                                    '                <div class="col-auto pl-25">' +
                                    '                     <div class="pro-pic">' +
                                    '                          <img src="'+data[i].thumbnail+'" alt="">' +
                                    '                       </div>' +
                                    '                    </div>' +
                                    '                     <div class="col pl-0"><h4>'+data[i].item+'</h4>' +
                                    '                          <p><strong>Brand:</strong> '+data[i].brand+'</p>' +
                                    '                           <p><strong>Sub Category:</strong> Shahi Meva</p>' +
                                    '                        </div>' +
                                    '                     </div>' +
                                    '                      <div class="col-12 PT-10">' +
                                    '                           <div class="row">' +
                                    '                                <div class="col-8 pr-0">' +
                                    '                                     <div class="row productvalue">' +
                                    '                                          <div class="col-12 PB-5 pr-0">Sales: <span>'+data[i].sales+' <small>CTNs</small></span></div>' +
                                    '                                           <div class="col-12 PB-5 pr-0">Value: <span>Rs. '+data[i].value+'</span></div>' +
                                    '                                         </div>' +
                                    '                                      </div>' +
                                    '                                       <div class="col-4 p-0 text-center">' +
                                    '        <div class="total-progress">' +
                                    '             <div class="progress mx-auto" data-value="'+data[i].contribution+'"><span class="progress-left"> <span class="progress-bar progress-barColor"> </span> </span> <span class="progress-right"> <span class="progress-bar progress-barColor"></span> </span>' +
                                    '                  <div class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">' +
                                    '                       <div class="digitVal">'+data[i].contribution+'<small>%</small></div>' +
                                    '                    </div>' +
                                    '                 </div>' +
                                    '              </div>' +
                                    '               <strong style="font-size: 11px; display: block; line-height:1; margin-top: -2px">Contribution</strong>' +
                                    '            </div>' +
                                    '         </div>' +
                                    '      </div>' +
                                    '   </a>' +
                                    '</div>';
                            }
                        });
                    </script>

                </div>



@endsection