@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">Manage Jobs</h3>
        </div>
        <div class="card-toolbar">

              
        @if ($loggedUserDetails['guard'] == 'user' || $loggedUserDetails['is_hr'] == 1 || $loggedUserDetails['is_admin'] == 1)
            <!-- Modal for Export beigin -->
            <a href="javascript:;" class="btn btn-primary font-weight-bolder" onclick="openModalAndShow('{{ route('job.export.modal') }}', initDateRangePickerModal)">
                <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> HR Export
            </a>
            <!-- Modal for Export end  -->
        @endif


            &nbsp;
        
            <!--begin::Button-->
            <a href="{{ route('job.create') }}" class="btn btn-primary font-weight-bolder">
                <span class="svg-icon svg-icon-md">
                    <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
                    <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">
                            <polygon points="0 0 24 0 24 24 0 24"/>
                            <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                            <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                        </g>
                    </svg>
                    <!--end::Svg Icon-->
                </span>Create Job
            </a>
            <!--end::Button-->
        </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 needing Approval</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link approved_tab" id="archive-tab" data-toggle="tab" href="#approved" >
                    <span class="nav-text approved_tab">Approved 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>Team Member</th>                          
                            <th>Shift Recap</th>
                            <th>Hours Worked</th>                            
                            <th>Total Pay</th>  
                            <th>Total My Revenue</th>                          
                            <th>Profit Share</th>
                            <th>Total Tips</th>
                            <th>RPH</th>
                            <th>Additional Pay Revshare </th>
                            <th>Approve ? </th>
                        </tr>
                    </thead>
                </table>
                <!--end: Datatable-->
            </div>
            <div class="tab-pane fade" id="approved" role="tabpanel" aria-labelledby="archive-tab">
                <!--begin: Datatable-->
                <table class="table table-bordered table-hover table-checkable" id="datatable__approved">
                    <thead>
                        <tr>
                            <th>Team Member</th>                          
                            <th>Shift Recap</th>
                            <th>Hours Worked</th>
                            <th>Total Pay</th>  
                            <th>Total My Revenue</th>                          
                            <th>Profit Share</th>                           
                            <th>Total Tips</th> 
                            <th>RPH</th>
                            <th>Additional Pay Revshare </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">Manage 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 start = moment();
        var end = moment();
        
        var ajax_datatable_pending_list = null;
        var ajax_datatable_approved_list = null;
        var tableNamePending = $('#datatable__pending');
        var tableNameApproved = $('#datatable__approved');

        $(document).ready(function(){
           initializeDatatablePending();
           getTotalRevenue();
           //initializeDatatableApproved();
           $('body').tooltip({selector: '[data-toggle="tooltip"]'});
           $('body').on('click','.appove-profile', approveHandler);
           $('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');
                }
            });

            $(document).on('click', 'a.details-control-approved', 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(row.data())).show();
                    tr.addClass('shown');
                }
            });

            //Time Card
            $(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');
                }
            });

            $('body').on('click', '.delete-btn', function(){
                let job_id = $(this).attr('data-id');
                let total_member = $(this).attr('data-total');
                Swal.fire({
                    title: "Are you sure?",
                    text: "This jobs will be delete, you can not retrive this one!",
                    icon: "success",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Delete it!",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,                   
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: "{{route('job.delete')}}",
                            type: 'delete',
                            dataType: 'json',
                            data: {job_id:job_id},                    
                            success: function (response) {
                                if(response.status){
                                    Swal.fire(
                                        "Deleted!",
                                        response.message,
                                        "success"
                                    )
                                }else{
                                   toastr.error(response.message); 
                                }
                            },
                            error: function (response) {
                                toastr.error("An error occurred");                                
                            },
                            complete:function(){
                                initializeDatatablePending();
                                initializeDatatableApproved();
                            }
                        }); 
                    }
                });
            });

            // Time delete start

            $('body').on('click', '.delete-time-btn', function(){
                let time_card_id = $(this).attr('data-id');
                Swal.fire({
                    title: "Are you sure?",
                    text: "This  clock in time will be deleted ?",
                    icon: "success",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Delete it!",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,                   
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: "{{route('job.clock-in-delete')}}",
                            type: 'delete',
                            dataType: 'json',
                            data: {time_card_id:time_card_id},                    
                            success: function (response) {
                                if(response.status){
                                    Swal.fire(
                                        "Deleted!",
                                        response.message,
                                        "success"
                                    )
                                }else{
                                   toastr.error(response.message); 
                                }
                            },
                            error: function (response) {
                                toastr.error("An error occurred");                                
                            },
                            complete:function(){
                                initializeDatatablePending();
                                initializeDatatableApproved();
                            }
                        }); 
                    }
                });
            });

            // Time delete start

            
            $('#filter_date').datetimepicker({
                format: moment_date_format
            });
            $('#filter_date').on('change.datetimepicker', function(e){ 
                initializeDatatable();
            })            

            /** TIMECARD */
            var buttonElement = '';
            $(document).on('click', 'a.edit-time', function(){
                var timeId = $(this).attr('data-id');
                buttonElement =$(this);
                openModalAndShow(getWebUrl('schedule/time-sheet-edit/'+timeId) , initDateTimepickerOnTimeSheet);
            });            
            $(document).on('submit', '#time-edit-form', function(e){
                e.preventDefault();
                var _that=$(this);
                var button=$(this).find('[type="submit"]');
                var loadingHtml=`<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Processing`;
                var buttonHtml=$(button).html();
                $(button).prop('disabled', true).html(loadingHtml)

                $(".invalid-feedback").html('');
                $(".is-invalid").removeClass('is-invalid');
                
                $.ajax({
                  url : $(this).attr('action'),
                  type : 'post',
                  dataType : "json",
                  data : $(this).serialize(),
                  success: function(response) {
                    $(button).html(buttonHtml);
                    if(response.status){
                      if (response.message) {
                        toastr.success(response.message);
                        initializeDatatable()
                        //buttonElement.closest('td').children().children('div.time-div__time').html(response.html_job);                        //buttonElement.closest('td').children('div>div#time-div__time').html(response.html_job)
                      }
                                           
                    } else {
                      $(button).prop('disabled', false)
                      if (response.message) {
                        toastr.error(response.message);
                      }
                      if(response.errors){
                        Object.keys(response.errors).forEach(element_name => {
                                    var errors = response.errors[element_name];
                                    var inp=$(_that).find('[name="'+element_name+'"]')
                                    $(inp).addClass('is-invalid')
                                    $(inp).closest('.form-group').find('.invalid-feedback').html(errors[0])
                        });
                      }
                    }
              
                  },
                  error: function(response) {
                    $(button).prop('disabled', false).html(buttonHtml);
                    if (response.message) {
                      toastr.error(response.message);
                    }
                  },
                  complete: function(response) {
                      $('#southwind_modal').modal('hide');
                  }
                });
            });

            $(document).on('click', 'a.edit-time__clockin', function(){
                var timeId = $(this).attr('data-id');
                buttonElement =$(this);
                openModalAndShow(getWebUrl('schedule/manually-logged-in/edit-time/'+timeId) , initDateTimepickerOnTimeSheet);
            }); 
            $(document).on('click', 'a.edit-time__clockout', function(){
                var timeId = $(this).attr('data-id');
                var profileId = $(this).attr('data-pid');
                buttonElement =$(this);
                openModalAndShow(getWebUrl('schedule/manually-logged-out/sign-out/'+profileId+'/'+timeId) , initDateTimepickerOnTimeSheet);
            });  

            /**Export modal */
        })

        function initializeDatatable(){
            initializeDatatablePending();
            initializeDatatableApproved();
            getTotalRevenue();
        }
        function initDateTimepickerOnTimeSheet(){                
            initDateTimepicker(document.getElementById('in_time'))
            initDateTimepicker(document.getElementById('out_time'))
        }
        function initDateRangePickerModal(){                
            initDateRangepicker(document.getElementById('eng-rate'))
        }

        function approveHandler() {
            var profileId = $(this).attr('data-id');
            var date=current_date;
            var job_count=$(this).attr('data-job_count');
            let url = '';
            if($("#filter_date").val()!=""){
                date=$("#filter_date").val()
            }
            date = moment(date).format("YYYY-MM-DD")

            if(job_count > 0){
                url = "{{route('job.approve')}}";
            }else{
                url = getWebUrl('schedule/time-sheet-approve/'+profileId);
            }
           
            Swal.fire({
                title: "Are you sure?",
                text: "This jobs will be approved after your action!",
                icon: "success",
                showCancelButton: true,
                confirmButtonText: "Yes, Approve it!",
                closeOnConfirm: false,
                showLoaderOnConfirm: true,
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: url,
                        type: 'get',
                        dataType: 'json',
                        data: {profileId:profileId, date: date},                    
                        success: function (response) {
                            if(response.status){
                                Swal.fire(
                                    "Approved!",
                                    response.message,
                                    "success"
                                )
                            }else{
                                toastr.error(response.message); 
                            }
                        },
                        error: function (response) {
                            toastr.error("An error occurred");                                
                        },
                        complete:function(){
                            initializeDatatable()
                        }
                    }); 
                }
            });
        }

        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.list')}}",
                    "data":{status:1,selectedDate: date},
                    "dataSrc": "lists"
                },
                "columns": [
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            let html = `<div class="row">`
                            // if(full.currently_in === 1){
                            //     html += `<div class="col-md-5">`
                            // }else{
                                html += `<div class="col-md-12">`
                            //}

                            if(full.currently_in==1){
                                loggedin_flag = '<i class="fas fa-flag" style="color:green;"></i>';
                            } else{
                                loggedin_flag = '';
                            }

                            if(full.jobs_count > 0){
                                html += `<a class="details-control" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a> ${loggedin_flag} <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> ${loggedin_flag} <p class="text-dark-50 my-1">${full.profile_team.team_name}</p>`
                            }
                            // html +=`</div><div class="col-md-7">`;
                            // if(full.currently_in === 1){
                            //     html+=`<div class="row">
                            //             <div class="col-md-12">
                            //                 <p class="font-size-sm my-1">Clock In: ${moment(full.get_time_card.time_in).format(moment_datetime_format)}</p>
                            //             </div>
                            //             <div class="col-md-12">
                            //                 <a href="javascript:;" class="btn btn-sm btn-text-warning btn-hover-light-warning font-weight-bold mr-2 edit-time__clockin" data-id="${full.get_time_card.id}">Edit Time</a>
                            //                 <a href="javascript:;" class="btn btn-sm btn-text-danger btn-hover-light-danger font-weight-bold mr-2 edit-time__clockout" data-id="${full.get_time_card.id}" data-pid="${full.id}">Clock Out</a>
                            //             </div>
                            //         </div>`
                            // }
                            html +=`</div></div>`;
                            return html;
                        }
                    },                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            let html='<div class="time-div">';
                            if(full.currently_in === 1){
                                html+=`<div class="row"><div class="col-md-12">
                                            <p class="font-size-sm my-1">Clock In: ${moment(full.get_time_card.time_in).format(moment_datetime_format)}</p>
                                        </div>
                                        <div class="col-md-12">
                                            <a href="javascript:;" class="btn btn-sm btn-text-warning btn-hover-light-warning font-weight-bold mr-2 edit-time__clockin" data-id="${full.get_time_card.id}">Edit Time</a>
                                            <a href="javascript:;" class="btn btn-sm btn-text-danger btn-hover-light-danger font-weight-bold mr-2 edit-time__clockout" data-id="${full.get_time_card.id}" data-pid="${full.id}">Clock Out</a>
                                        </div></div>`
                            }else{
                                // $.each(full.time_card_profile, function(index, elem){
                                //     html += `<div class="col-md-8">`
                                //     html+='<p class="font-size-lg">Time In: '+moment(elem.time_in).format(moment_date_time_format)+'</p>'
                                //     html+='<p class="font-size-lg">Time out: '+moment(elem.time_out).format(moment_date_time_format)+'</p>'
                                //     html +=`</div><div class="col-md-4">`
                                //     html+='<a href="javascript:" data-id="'+elem.id+'" class="btn btn-sm btn-text-warning btn-hover-light-warning font-weight-bold mr-2 edit-time" data-toggle="tooltip" title="" data-original-title="Edit Time">Edit Time</a>'
                                //     html +=`</div>`
                                // })
                                $.each(full.time_card_profile, function(index, elem){
                                    html += `<div class="time-div__time">`
                                    html+='<p class="font-size-lg">Time In: '+moment(elem.time_in).format(moment_date_time_format)+'</p>'
                                    html+='<p class="font-size-lg">Time out: '+moment(elem.time_out).format(moment_date_time_format)+'</p>'
                                    html +=`</div><div class="time-div__btn ml-3">`
                                    html+='<a href="javascript:" data-id="'+elem.id+'" class="btn btn-sm btn-text-warning btn-hover-light-warning font-weight-bold mr-2 edit-time" data-toggle="tooltip" title="" data-original-title="Edit Time">Edit Time</a>'
                                    html+='<a href="javascript:" data-id="'+elem.id+'" class="dtime d-block delete-time-btn" data-toggle="tooltip" title="" data-original-title="Delete Time"><i class="flaticon-delete"></i></a>'
                                    html +=`</div>`
                                })
                            }                            
                            html +=`</div>`;
                            return html;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_min_format;
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.hourly_pay;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_my_job_revenue!=null ? full.total_my_job_revenue : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = `<p class='font-size-sm'><span class='font-weight-normal'>RPH: </span> $${full.revenue_per_hour}</p>`
                                    + `<p class='font-size-sm'><span class='font-weight-normal'>Base Rev Share: </span> ${full.base_revenue_share}%</p>`
                                    + `<p class='font-size-sm'><span class='font-weight-normal'>Bonus: </span> ${full.bonus_base_revenue_share}%</p>`
                                    +`<p class='font-size-sm'><span class='font-weight-normal'>Multiplier: </span> ${full.multiplier}</p>`
                                    +`<p class='font-size-sm'><span class='font-weight-normal'>TRSP : </span> ${full.total_share_percentage}%</p>`
                            return `<a href="javascript:" data-toggle="tooltip" data-placement="right" data-html="true" title ="${html}">${full.my_rev_share}</a>`;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_tip!=null ? full.total_tip : '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.additional_hours_into_2!=null ? full.additional_hours_into_2 : '0.0';
                        }
                    },                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            if(full.jobs_count > 0){
                                html += `
                                <a href="javascript:" class="btn btn-icon btn-light-success appove-profile" data-toggle="tooltip" data-placement="left" title="Approve Jobs" data-id="${full.id}" data-job_count ="${full.jobs_count}"><i class="fas fa-check-circle"></i></a>
                                `;
                            }else{
                                html += `
                                <a href="javascript:" class="btn btn-icon btn-light-success appove-profile" data-toggle="tooltip" data-placement="left" title="Approve Jobs" data-id="${full.time_card_id}" data-job_count ="${full.jobs_count}"><i class="fas fa-check-circle"></i></a>
                                `;
                            }
                            
                            
                            return html;
                        }
                    },
                ]
            });
            return ajax_datatable_pending_list;
        }

        function initializeDatatableApproved() {
            if (ajax_datatable_approved_list) {
                ajax_datatable_approved_list.destroy();
            }
            var date=current_date;
            if($("#filter_date").val()!=""){
                date=moment($('#filter_date').val()).format('YYYY-MM-DD')
            }
            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.list')}}",
                    "data":{status:1,selectedDate: date},
                    "dataSrc": "lists"
                },
                "columns": [
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {

                            if(full.currently_in==1){
                                loggedin_flag = '<i class="fas fa-flag" style="color:green;"></i>';
                            } else{
                               loggedin_flag = '';
                            }

                            if(full.jobs_count > 0){
                                return `<a class="details-control-approved" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a> ${loggedin_flag}<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> ${loggedin_flag} <p class="text-dark-50">${full.profile_team.team_name}</p>`
                            }
                           
                        }
                    },                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            let html='<div class="time-div">';
                                $.each(full.time_card_profile, function(index, elem){
                                    html += `<div class="time-div__time">`
                                    html+='<p class="font-size-lg">Time In: '+moment(elem.time_in).format(moment_date_time_format)+'</p>'
                                    html+='<p class="font-size-lg">Time out: '+moment(elem.time_out).format(moment_date_time_format)+'</p>'
                                    html +=`</div><div class="time-div__btn ml-3">`
                                    html+='<a href="javascript:" data-id="'+elem.id+'" class="btn btn-sm btn-text-warning btn-hover-light-warning font-weight-bold mr-2 edit-time" data-toggle="tooltip" title="" data-original-title="Edit Time">Edit Time</a>'
                                    html +=`</div>`
                                })
                            html +=`</div>`;
                            
                            return html;
                        }
                    },                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_min_format;
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.hourly_pay;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_my_job_revenue!=null ? full.total_my_job_revenue : '0.0';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = `<p class='font-size-sm'><span class='font-weight-normal'>RPH: </span> $${full.revenue_per_hour}</p>`
                                    + `<p class='font-size-sm'><span class='font-weight-normal'>Base Rev Share: </span> ${full.base_revenue_share}%</p>`
                                    + `<p class='font-size-sm'><span class='font-weight-normal'>Bonus: </span> ${full.bonus_base_revenue_share}%</p>`
                                    +`<p class='font-size-sm'><span class='font-weight-normal'>Multiplier: </span> ${full.multiplier}</p>`
                                    +`<p class='font-size-sm'><span class='font-weight-normal'>TRSP : </span> ${full.total_share_percentage}%</p>`
                            return `<a href="javascript:" data-toggle="tooltip" data-placement="right" data-html="true" title ="${html}">${full.my_rev_share}</a>`;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_tip!=null ? full.total_tip : '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.additional_hours_into_2!=null ? full.additional_hours_into_2 : '0.0';
                        }
                    }, 
                ]
            });
            return ajax_datatable_approved_list;
        }

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

            $.each(d.jobs, function(index, elem){
                html+=`
                <tr>
                    <td>${elem.title}</td>
                    <td>${ moment(elem.job_date).format(moment_date_format) }</td>
                    <td>${elem.total_job_revenue}</td>
                    <td>${elem.number_of_team_member}</td>
                    <td>${elem.my_credit_card_tip}</td>
                    <td>${elem.my_job_revenue}</td>
                    
                    <td>
                        <a href="${getWebUrl('job/update/'+elem.id)}" class="btn btn-md btn-light-warning btn-icon btn-circle" data-toggle="tooltip" title="" data-original-title="Edit Job"><i class="flaticon-edit-1"></i></a>
                        <a href="${getWebUrl('job/update/'+elem.id+'/?add_user=1')}" class="btn btn-md btn-light-info btn-icon btn-circle" data-toggle="tooltip" title="" data-original-title="Add Member"><i class="la la-user-tag"></i></a>
                    `;
                    if(elem.is_approved == 0){
                        html+=`<a href="javascript:" class="btn btn-md btn-light-danger btn-icon btn-circle delete-btn" data-toggle="tooltip" title="Delete Job" data-original-title="Delete Job" data-id="${elem.id}" data-total="${elem.number_of_team_member}"><i class="flaticon-delete"></i></a>`;
                    }
                html+=`
                    </td>
                </tr>`;
            });
            // html+=`
            //     <tr>
            //         <th>Total Job: ${d.jobs_count}</th>
            //         <th></th>
            //         <th>$${d.total_job_revenue}</th>
            //         <th></th>
            //         <th>$${d.total_tip}</th>
            //         <th>$${d.total_my_job_revenue}</th>
            //         <th></th>
            //     </tr>`;


            return `<table cellpadding="5" cellspacing="0" border="0" style="width:100%;">
                <tr>
                    <th>Job id</th>
                    <th>Date</th>
                    <th>Total Job revenue</th>
                    <th>Team Members</th>
                    <th>Tip Amount</th>
                    <th>My Job Revenue</th>
                    <th>Action</th>
                </tr>
                ${html}
            </table>`;
        }

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

            $.each(d.time_card_profile, function(index, elem){
                html+=`
                <tr>                    
                    <td>${ moment(elem.day).format(moment_date_format) }</td>
                    <td>${ moment(elem.time_in).format(moment_date_time_format)}</td>
                    <td>${ moment(elem.time_out).format(moment_date_time_format)}</td>
                    <td>${elem.total_hours}</td>
                    
                    <td>                                                
                    `;
                    if(elem.approved == 0){
                        html+=`<a href="javascript:" data-id="${elem.id}" class="btn btn-md btn-light-warning btn-icon btn-circle edit-time" data-toggle="tooltip" title="" data-original-title="Edit Time"><i class="flaticon-edit-1"></i></a>`
                        html+=`<a href="javascript:" class="btn btn-md btn-light-danger btn-icon btn-circle delete-time-btn" data-toggle="tooltip" title="Delete Time" data-original-title="Delete Time" data-id="${elem.id}"><i class="flaticon-delete"></i></a>`;
                       
                    }
                html+=`
                    </td>
                </tr>`;
            });
            

            return `<table cellpadding="5" cellspacing="0" border="0" style="width:100%;">
                <tr>                    
                    <td>Date</td>
                    <td>Time In</td>
                    <td>Time Out</td>
                    <td>Total Hours</td>
                    <td>Action</td>
                </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");                                
                }
            });
        }
       
        function exportCheck(){
            var url = getWebUrl('job/export-check');
            var form_data = new FormData($('#export_status_check')[0]);
            var formSub = $(this);
            $.ajax({
                url : url,
                type : 'post',
                dataType : "json",
                data : form_data,
                processData: false,
                contentType: false,
                success: function(response) {
                    if(response.status){
                        document.getElementById("export_status_check").submit(); 
                        console.log(formSub);                        
                    } else {
                        if (response.message) {
                            toastr.error(response.message);
                        }
                    }            
                },
                error: function(response) {
                    $(button).prop('disabled', false).html(buttonHtml);
                    if (response.message) {
                    toastr.error(response.message);
                    }
                }
            });            
        }
        
    </script>
@endsection