@extends('layouts.main')
@section('page_css')
<style>
    .dataTables_scrollHead {
        box-shadow: 0px 2px 7px #ccc;
    }
    #team__revenue_display ul {
        list-style: none;
        padding-left: 0;
    }
    #team__revenue_display ul li {
        float: left;
        width: 50%;
        padding-right: 5px;
        box-sizing: border-box;
    }    
    .time-div__time, .time-div__btn {
        display: inline-block;
    }
    .time-div__btn {
        vertical-align: top;
    }
</style>
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
        </div>

        <div class="card-toolbar">
            <form action="{{ route('job.livemetrics.export') }}">
                <input type="submit" value="Export"  class="btn btn-primary font-weight-bolder">
                <input type="hidden" name="selectedDate" id="selectedDate">
            </form>          
        </div>
        
    </div>
    <div class="card-body"> 
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="form-group row">
                    <label class="col-form-label text-right col-lg-4 col-sm-12">Choose Date</label>
                    <div class="col-lg-8 col-md-9 col-sm-12">
                        {{-- <input type="text" class="form-control datetimepicker-input" name="filter_date" id="filter_date" placeholder="Select job date"  data-toggle="datetimepicker" value="{{$common->show_formatted_date($current_date)}}" /> --}}
                        <input type="text"  class="form-control flatpickr-input active" placeholder="Select date range" id="date_range" name="date_range" required="" >
                    </div>
                </div>
            </div>            
            <div class="col-lg-8 col-md-6" >
                
                <div id="team__revenue_display">
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">          
        </ul>
        <div class="tab-content mt-5" id="myTabContent">           
            <div class="tab-pane fade show active" id="approved" role="tabpanel" aria-labelledby="active-tab">
                <!--begin: Datatable-->
                <table class="table table-bordered table-hover table-checkable" id="datatable__approved">
                    <thead>
                        <tr>
                            <th>Team Member</th>                          
                            <th>Res Jobs</th>
                            <th>Overall Jobs</th>
                            <th>Res Revenue</th>  
                            <th>Overall Revenue</th>  
                            <th>Revenue Per Hour</th>                         
                            <th>Res AJS</th>  
                            <th>Overall AJS</th>     
                            <th>1/6 Or Less Count</th>  
                            <th>1/6 Or Less (%)</th>
                            <th>Truck Plus Count</th>  
                            <th>Truck Plus (%)</th>                     
                            <th>Junk Patrol Revenue</th>  
                            <th>Junk Patrol Count</th>
                        </tr>
                    </thead>
                </table>
                <!--end: Datatable-->
            </div>
        </div>
        
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader pt-2 pt-lg-3 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
               
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endsection



@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
{{-- <script src="{{ $common->getTheamUrl('js/flatpickr.js') }}"></script> --}}
@endsection

@section('page_js')
    <script>

        var current_date='{{ $current_date }}'
        var start = moment();
        var end = moment();        
        var ajax_datatable_approved_list = null;
        var tableNameApproved = $('#datatable__approved');

        $(document).ready(function(){
           initializeDatatableApproved();
           $('body').tooltip({selector: '[data-toggle="tooltip"]'});
           $('a[data-toggle="tab"]').on('click', function (e) {
                e.target // activated tab
                e.relatedTarget // previous tab
                if(jQuery.inArray("approved_tab", e.target.classList)!== -1){
                    initializeDatatableApproved();
                }else{
                }
            });
           
            $(document).on('click', 'a.details-control-timecard', function(){
                var tr = $(this).closest('tr');
                var row = ajax_datatable_pending_list.row( tr );

                if(row.child.isShown()){
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    row.child(format_timecard(row.data())).show();
                    tr.addClass('shown');
                }
            });

            $(document).on('click', 'a.details-control-approved-timecard', function(){
                var tr = $(this).closest('tr');
                var row = ajax_datatable_approved_list.row( tr );

                if(row.child.isShown()){
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    row.child(format_timecard(row.data())).show();
                    tr.addClass('shown');
                }
            });                   

            // $('#date_range').on('change.daterangepicker', function(e){ 
            //     alert('hi');
            // })             

        })

        function initializeDatatable(){
            initializeDatatableApproved();
        }      
          
        function initializeDatatableApproved() {
            if (ajax_datatable_approved_list) {
                ajax_datatable_approved_list.destroy();
            }
            // var date=current_date;
            // if($("#filter_date").val()!=""){
            //     date= moment($('#date_range').val()).format('YYYY-MM-DD')
            // }

            date = $('#date_range').val();
            $('#selectedDate').val(date);

            ajax_datatable_approved_list = tableNameApproved.DataTable({
                'scrollX': false,
                'scrollY': '600px',
                'scrollCollapse': true,
                'paging': true,
                'lengthChange': true,
                "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
                'searching': true,
                'ordering': true,
                "processing": true,
                "serverSide": true,
                "pageLength" : datatablePageLength,
                "ajax": {
                    "url": "{{route('job.ajax.approved.livemetrics.list')}}",
                    "data":{status:1,selectedDate: date},
                    "dataSrc": "lists"
                },
                "columns": [
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            if(full.jobs_count > 0){
                                return `<a class="details-control-approved" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a><p class="text-dark-50">${full.profile_team.team_name}</p>`
                            }else{
                                return `<a class="details-control-approved-timecard" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a><p class="text-dark-50">${full.profile_team.team_name}</p>`
                            }
                           
                        }
                    },                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.resi_job_count!=null ? full.resi_job_count : '0.0';
                        }
                    },                  
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.overall_job_count;
                        }
                    },                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.resi_job_revenue;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.overall_job_revenue!=null ? full.overall_job_revenue : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.revenue_per_hour!=null ? full.revenue_per_hour : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.resi_ajs!=null ? full.resi_ajs : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            //return full.ajs!=null ? full.ajs : '0.0';
                            return `<p style="color:${full.ajs_color_code}; font-weight: bold;">${full.ajs!=null ? full.ajs : '0.0'}</p>`
                        }
                    },

                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.onebysix_job_count!=null ? full.onebysix_job_count : '0.0';                          
                        }
                    },

                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                           // return full.onebysix_percentage!=null ? full.onebysix_percentage : '0.0';  
                           return `<p style="color:${full.onebysix_percentage_color_code}; font-weight: bold;">${full.onebysix_percentage!=null ? full.onebysix_percentage : '0.0'}</p>`                         
                        }
                    },

                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.truck_job_count!=null ? full.truck_job_count : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.truck_percentage!=null ? full.truck_percentage : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.junk_job_revenue!=null ? full.junk_job_revenue : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.junk_job_count!=null ? full.junk_job_count : '0.0';
                        }
                    },
                ]
            });
            return ajax_datatable_approved_list;
        }     

        var today = new Date();
        var first_day = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();
        var  first = '01';

        today = mm + '/' + dd + '/' + yyyy;
        first_day = mm + '/' + first + '/' + yyyy;

        flatpickr(date_range,{  
            mode: "range",
            dateFormat: "m/d/Y",
            defaultDate: [first_day, today],
            onChange: function(dates) {
                if (dates.length == 2) {
                    initializeDatatable();
                }
            }
        });                                 
                               
    </script>
@endsection