@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">Daily Booking <span>Employee List</span></h2>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6">
                        <a href="#" id="productlist01"><img style="width:23px;height:23px;float:right;margin-top:-3px;cursor:pointer" src="{!! asset('images/report-filters.svg') !!}" alt=""></a>
                        <div class="dashboard-date" style="margin-top:-10px">
                            <input type="text" id="datepicker" value="{{date('D d M Y', strtotime(date(request()->route()->parameters['date'])))}}" class="form-control" placeholder="">
                            <i class="fa fa-angle-down"></i>
                        </div>
                    </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('theme/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">
                        </div>
                    </div>
                    <script>
                        var apiData;
                        var alldata = '';
                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: 'get',
                            url: '{{URL::to("/dashboard-daily-employee-list-api/".request()->route()->parameters['date'])}}', // 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;

                                document.getElementById('employee_data').innerHTML+=
                '                    <div class="col-3">'+
                '                    <a href="#" class="employeecard"><span class="emp-sno">01</span>'+
                '                <div class="row">'+
                '                    <div class="col-auto pl-25">'+
                '                        <div class="emp-pic">'+
                '                            <img class="badge-icon" src="{!! asset('theme/images/badge-icon.svg') !!}" alt="">'+
                '                                <img class="pic"  onerror="this.src=\'{!! asset('images/employee.jpg') !!}\'" src="'+apiData.employees[i].employee_picture+'" alt="">'+
                '                        </div>'+
                '                    </div>'+
                '                    <div class="col pl-0"><h4>'+apiData.employees[i].employee_name+' <span>Order Booker</span></h4></div>'+
                '                    <div class="col-12"><span><strong>Region: </strong>'+apiData.employees[i].region_name+' </span></div>'+
                '                    <div class="col-12"><span><strong>ASM/TSM: </strong>'+apiData.employees[i].asm_tsm+'</span></div>'+
                '                    <div class="col-12"><div class="empsale">Rs. <span>'+apiData.employees[i].revenue+'</span></div></div>'+
                '                    <div class="col-12">'+
                '                        <div class="row m-0 empvisits">'+
                '                            <div class="col-6">Units: <span>'+apiData.employees[i].units+'</span></div>'+
                '                            <div class="col-6">Visits: <span>'+apiData.employees[i].visits+'</span></div>'+
                '                            <div class="col-6">Orders: <span>'+apiData.employees[i].orders+'</span></div>'+
                '                        </div>'+
                '                    </div>'+
                '                </div>'+
                '            </a>'+
                '            </div>';


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

                        });
                    </script>
                </div>
            </div>
     <script>
         $(document).ready(function() {

             $('#datepicker').datepicker({
                 autoclose: true,
                 todayHighlight: true,
                 toggleActive: true,
                 format: 'DD dd MM yyyy',
                 "orientation": 'right',
             }).on('changeDate', function (ev) {
                 $(this).datepicker('hide');
                 var d = new Date(document.getElementById('datepicker').value);
                 var str = $.datepicker.formatDate('yy-mm-dd', d);
                 window.location.assign('/dashboard-daily-employee-list/'+str);
             });

         });
     </script>
@endsection