@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;
    }

    .dtime {
    text-align: center;
    }

    .dtime i {
        color: #ff0000;
        font-weight: bold;
    }
    
</style>
@endsection
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="flaticon-users text-primary"></i>
            </span>
            <h3 class="card-label">Jobs</h3>
        </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)}}" />
                    </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">
            <li class="nav-item">
                <a class="nav-link pending_tab active" id="active-tab" data-toggle="tab" href="#pending">
                    <span class="nav-text pending_tab">Jobs</span>
                </a>
            </li>
        </ul>
        <div class="tab-content mt-5" id="myTabContent">
            <div class="tab-pane fade show active" id="pending" role="tabpanel" aria-labelledby="active-tab">
                <!--begin: Datatable-->
                <table class="table table-bordered table-hover table-checkable" id="datatable__pending">
                    <thead>
                        <tr>
                            <th>Job Id</th>                          
                            <th>Date</th>
                            <th>Team</th>                             
                            <th>Total Job Revenue</th>
                            <th></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">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Jobs</h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </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 team_id='{{ $team_id }}'

        var start = moment();
        var end = moment();
        
        var ajax_datatable_pending_list = null;
        var tableNamePending = $('#datatable__pending');

        $(document).ready(function(){
           initializeDatatablePending();
           getTotalRevenue();
           $('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{
                    initializeDatatablePending();
                }
            });

            @if(Session::has('success'))
                toastr.success("{{Session::get('success')}}");
            @endif 
            @if(Session::has('error'))
                toastr.error("{{Session::get('error')}}");
            @endif

            $(document).on('click', 'a.details-control', 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(row.data())).show();
                    tr.addClass('shown');
                }
            });          
            
            $('#filter_date').datetimepicker({
                format: moment_date_format
            });
            $('#filter_date').on('change.datetimepicker', function(e){ 
                initializeDatatable();
            })           
           
        })

        function initializeDatatable(){
            initializeDatatablePending();            
            getTotalRevenue();
        }
        function initDateTimepickerOnTimeSheet(){                
            initDateTimepicker(document.getElementById('in_time'))
            initDateTimepicker(document.getElementById('out_time'))
        }
        function initDateRangePickerModal(){                
            initDateRangepicker(document.getElementById('eng-rate'))
        }
     
        function initializeDatatablePending() {
            if (ajax_datatable_pending_list) {
                ajax_datatable_pending_list.destroy();
            }
            var date=current_date;
            if($("#filter_date").val()!=""){
                date=moment($('#filter_date').val()).format('YYYY-MM-DD')
            }
            ajax_datatable_pending_list = tableNamePending.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.jobbyidlist')}}",
                    "data":{team_id:team_id,selectedDate: date},
                    "dataSrc": "lists"
                },
                "columns": [
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            let html = `<div class="row">`
                                html += `<div class="col-md-12">`
                           
                            // if(full.jobs_count > 0){
                            //     html += `<a class="details-control" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a><p class="text-dark-50 my-1">${full.profile_team.team_name}</p>`
                            // }else{
                            //     html += `<a class="details-control-timecard" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a><p class="text-dark-50 my-1">${full.profile_team.team_name}</p>`
                            // }  
                            html += `<a class="details-control" href="javascript:;">${full.title}</a>`                          
                            html +=`</div></div>`;
                            return html;
                        }
                    },                     
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return moment(full.job_date).format(moment_date_format);
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile_team.team_name;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_job_revenue;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            let html = '';
                            if(full.total_team_members_revenue == full.total_job_revenue){
                                html += `<p class="text-dark-50 my-1"></i></p>`
                            }else{
                                html += `<p class="text-dark-50 my-1"><i class="fas fa-flag" style="color:red;"></i></p>`
                            }  

                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_pending_list;
        }

        function format (d) {
            var html="";

            $.each(d.profiles, function(index, elem){
                html+=`
                <tr>
                    <td>${elem.profile_first_name} ${elem.profile_last_name} </td>                 
                    <td>${ moment(d.job_date).format(moment_date_format) }</td>
                    <td>${d.my_credit_card_tip}</td>
                    <td>${d.my_job_revenue}</td>`;


                    if(elem.jobs[0].is_approved == 1){
                        html+=`<td><a href="javascript:" class="btn btn-icon btn-light-success appove-profile" data-toggle="tooltip" title="Approved" ><i class="fas fa-check-circle"></i></a></td>`;
                    } else {
                        html+=`<td><a href="javascript:" class="btn btn-icon btn-light-danger appove-profile" data-toggle="tooltip" title="Not Approved"><i class="fas fa-check-circle"></i></a></td>`;
                    }                  
                   
                html+=`</td></tr>`;
            });
           
            return `<table cellpadding="5" cellspacing="0" border="0" style="width:100%;">
                <tr>
                    <th>Team Member</th>
                    <th>Date</th>
                    <th>Tips</th>
                    <th>Revenue</th>
                    <th>Job Status</th>
                </tr>
                ${html}
            </table>`;
        }              

        function getTotalRevenue(){
            var date=current_date;
            if($("#filter_date").val()!=""){
                date=moment($('#filter_date').val()).format('YYYY-MM-DD')
            }
            url = "{{route('job.ajax.revenue')}}";
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                data: {date: date},                    
                success: function (response) {
                   // $('#total__revenue_display').html('$ '+response.totalRevenue);  
                    let html='';
                    html+=`<ul>`;
                    html+=`<li>
                            <p class="font-weight-bold text-dark-75 text-hover-primary font-size-sm mb-2">Southwind Revenue
                                <span class="label label-xs label-light label-inline my-lg-0 my-2 ml-2 text-dark-50 font-weight-bolder">$ ${response.totalRevenue}</span>
                            </p>
                    </li>`;
                    $.each(response.teams, function(index, elem){
                        html+=`<li>
                                <p class="font-weight-bold text-dark-75 text-hover-primary font-size-sm mb-2">${elem.team_name} Revenue
                                    <span class="label label-xs label-light label-inline my-lg-0 my-2 ml-2 text-dark-50 font-weight-bolder">$ ${elem.totalRevenue}</span>
                                </p>
                        </li>`;
                    });
                    html+=`</ul>`;
                    $('#team__revenue_display').html(html);                  
                },
                error: function (response) {
                    toastr.error("An error occurred");                                
                }
            });
        }
        
        
    </script>
@endsection