@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">

              
            {{-- <!-- Modal for Export beigin -->
            <a href="{{ route('job.export') }}" class="btn btn-primary font-weight-bolder">
                <span class="svg-icon svg-icon-md">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect x="0" y="0" width="24" height="24"/>
                            <path d="M17,8 C16.4477153,8 16,7.55228475 16,7 C16,6.44771525 16.4477153,6 17,6 L18,6 C20.209139,6 22,7.790861 22,10 L22,18 C22,20.209139 20.209139,22 18,22 L6,22 C3.790861,22 2,20.209139 2,18 L2,9.99305689 C2,7.7839179 3.790861,5.99305689 6,5.99305689 L7.00000482,5.99305689 C7.55228957,5.99305689 8.00000482,6.44077214 8.00000482,6.99305689 C8.00000482,7.54534164 7.55228957,7.99305689 7.00000482,7.99305689 L6,7.99305689 C4.8954305,7.99305689 4,8.88848739 4,9.99305689 L4,18 C4,19.1045695 4.8954305,20 6,20 L18,20 C19.1045695,20 20,19.1045695 20,18 L20,10 C20,8.8954305 19.1045695,8 18,8 L17,8 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                            <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 8.000000) scale(1, -1) rotate(-180.000000) translate(-12.000000, -8.000000) " x="11" y="2" width="2" height="12" rx="1"/>
                            <path d="M12,2.58578644 L14.2928932,0.292893219 C14.6834175,-0.0976310729 15.3165825,-0.0976310729 15.7071068,0.292893219 C16.0976311,0.683417511 16.0976311,1.31658249 15.7071068,1.70710678 L12.7071068,4.70710678 C12.3165825,5.09763107 11.6834175,5.09763107 11.2928932,4.70710678 L8.29289322,1.70710678 C7.90236893,1.31658249 7.90236893,0.683417511 8.29289322,0.292893219 C8.68341751,-0.0976310729 9.31658249,-0.0976310729 9.70710678,0.292893219 L12,2.58578644 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 2.500000) scale(1, -1) translate(-12.000000, -2.500000) "/>
                        </g>
                    </svg>
                </span> Export
            </a>
            <!-- Modal for Export end  --> --}}

            <form action="{{ route('job.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">
                <a href="{{ route('job.create') }}" class="btn btn-primary font-weight-bolder">                        
                    </span>Export in excel
                </a>
            </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.ttmetrics.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