@extends('layouts.master')
@section('content')
       <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">Live <span>Report</span></h2>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <ol class="breadcrumb">
                            <li><a href="#"><span>Live Report</span></a></li>
                            <li><span>Sales Reps</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="{!! asset('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="employee-data">


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


                                    for(var i = 0; i < apiData.employees.length; i++) {

                                        var count =i+1;
                                        var dz = 0;
                                        var hdz = 0;
                                        var ctn = 0;
                                        for(var j = 0; j < apiData.employees[i].primary_units.length; j++) {
                                            var shortname = apiData.employees[i].primary_units[j].unit_short_name;
                                            var sold = apiData.employees[i].primary_units[j].sold;
                                            if (shortname == "Dz")
                                                dz = sold;
                                            else if (shortname == 'HDoz')
                                                hdz = sold;
                                            else if (shortname == 'CTN')
                                                ctn = sold;
                                        }

                                        document.getElementById('employee-data').innerHTML+=
                                        '<div class="col-3">\n' +
                    '                                <a href="live-report-sales-reps-detail/'+apiData.employees[i].employee_id+'" class="employeecard"><span class="emp-sno">'+count+'</span>\n' +
                    '                                    <div class="row">\n' +
                    '                                        <div class="col-auto pl-25">\n' +
                    '                                            <div class="emp-pic">\n' +
                    '                                                <img class="badge-icon" src="{!! asset('images/badge-icon.svg') !!}" alt="">\n' +
                    '                                                <img class="pic" onerror="this.src=\'{!! asset('images/employee.jpg') !!}\'" src="'+apiData.employees[i].employee_picture+'" alt="">\n' +
                    '                                            </div>\n' +
                    '                                        </div>\n' +
                    '\n' +
                    '                                        <div class="col pl-0"><h4>'+apiData.employees[i].employee+'<span>Order Booker</span></h4></div>\n' +
                    '\n' +
                    '                                        <div class="col-12" style="padding:5px 30px 0 30px;font-size:13px;"><strong>TSM:</strong> '+apiData.employees[i].asm_tsm+'</div>\n' +
                    '                                        <div class="col-12" style="padding:0px 30px 3px 30px; font-size:13px"><strong>Region:</strong> '+apiData.employees[i].region_name+'</div>\n' +
                    '\n' +
                    '                                        <div class="col-12"><div class="empsale">Rs. <span>'+apiData.employees[i].revenue+'</span></div></div>\n' +
                    '                                        <div class="col-12">\n' +
                    '                                            <div class="row m-0">\n' +
                    '                                                <div class="col-4 sale-pu">Cartons <span>'+ctn+'</span></div>\n' +
                    '                                                <div class="col-4 sale-pu border-left border-right">Dozen <span>'+dz+'</span></div>\n' +
                    '                                                <div class="col-4 sale-pu">Half Dozen <span>'+hdz+'</span></div>\n' +
                    '                                            </div>\n' +
                    '                                        </div>\n' +
                    '                                        <div class="col-12">\n' +
                    '                                            <div class="row m-0 empvisits">\n' +
                    '                                                <div class="col-6">Retail Visits: <span>'+apiData.employees[i].retail_visits+'</span></div>\n' +
                    '                                                <div class="col-6">Total Orders: <span>'+apiData.employees[i].orders+'</span></div>\n' +
                    '                                            </div>\n' +
                    '                                        </div>\n' +
                    '                                    </div>\n' +
                    '                                </a>\n' +
                    '                            </div>\n';

                                    }
                                    //document.getElementById('employee-data').innerHTML = alldata;

                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
@endsection