@extends('layouts.main')
@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">
        
            <!--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="form-group col-md-6">
                <select class="form-control" id="filter_date" >
                    <option value="">Select Date</option>
                    @foreach ($jobs as $job)
                    <option value="{{ $job->job_date }}" @if($job->job_date == $current_date) selected @endif >{{ $common->show_formatted_date($job->job_date) }}</option>
                    @endforeach
                </select>
            </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>Team</th>
                            <th>Total jobs</th>
                            <th>Total Job Revenue</th>
                            <th>AJS</th>
                            <th>Total Tips</th>
                            <th>Total MY Job Revenue</th>
                            <th>Shift Recap</th>
                            <th>Hours Worked</th>                           
                            <th>Total Pay</th>
                            <th>RPH</th>
                            <th>Base Rev Share</th>
                            <th>Bonus Base Rev Share</th>
                            <th>Multiplier</th>
                            <th>TRSP</th>
                            <th>My Rev Share</th>
                            <th>Actions</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>Team</th>
                            <th>Total jobs</th>
                            <th>Total Job Revenue</th>
                            <th>AJS</th>
                            <th>Total Tips</th>
                            <th>Total MY Job Revenue</th>
                            <th>Shift Recap</th>
                            <th>Hours Worked</th>
                            <th>Total Pay</th>
                            <th>RPH</th>
                            <th>Base Rev Share</th>
                            <th>Bonus Base Rev Share</th>
                            <th>Multiplier</th>
                            <th>TRSP</th>
                            <th>My Rev Share</th>
                            
                        </tr>
                    </thead>
                </table>
                <!--end: Datatable-->
            </div>
        </div>
        
    </div>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
<div class="subheader py-2 py-lg-6 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('page_css')
<style>
    .dataTables_scrollHead {
        box-shadow: 0px 2px 7px #ccc;
    }
</style>
@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>
@endsection

@section('page_js')
    <script>
        var current_date='{{ $current_date }}'
        
        var ajax_datatable_pending_list = null;
        var ajax_datatable_approved_list = null;
        var tableNamePending = $('#datatable__pending');
        var tableNameApproved = $('#datatable__approved');

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

            $('body').on('change','#filter_date',function(){
                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);
                        
                      }
                                           
                    } 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');
                      initializeDatatable();
                  }
                });
            });
        })

        function initializeDatatable(){
            initializeDatatablePending();
            initializeDatatableApproved();
        }
        function initDateTimepickerOnTimeSheet(){                
            initDateTimepicker(document.getElementById('in_time'))
            initDateTimepicker(document.getElementById('out_time'))
        }

        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()
            }

            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=$("#filter_date").val()
            }
            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) {
                            if(full.jobs_count > 0){
                                return `<a class="details-control" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a>`
                            }else{
                                return `<a class="details-control-timecard" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a>`
                            }
                           
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile_team.team_name;
                        }
                    },
                   
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.jobs_count!=null ? full.jobs_count : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_job_revenue!=null ? full.total_job_revenue : '0.00';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.ajs!=null ? full.ajs : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var total_rev=0;
                            for(var el of full.jobs){
                                total_rev+=parseFloat(el.my_credit_card_tip)
                            }
                            return parseFloat(total_rev).toFixed(2);
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_my_job_revenue;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            let html='';
                            $.each(full.time_card_profile, function(index, elem){
                                html+='<p class="font-size-sm">Time In: '+moment(elem.time_in).format(moment_date_time_format)+'</p>'
                                html+='<p class="font-size-sm">Time out: '+moment(elem.time_out).format(moment_date_time_format)+'</p>'
                                html+='<a href="javascript:" data-id="'+elem.id+'" class="btn btn-light-warning btn-icon btn-sm edit-time" data-toggle="tooltip" title="" data-original-title="Edit Time"><i class="flaticon-edit-1 icon-md"></i></a>'
                            })
                            
                            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.revenue_per_hour;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.base_revenue_share;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.bonus_base_revenue_share;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.multiplier;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_share_percentage;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.my_rev_share;
                        }
                    },
                    {
                        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=$("#filter_date").val()
            }
            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.jobs_count > 0){
                                return `<a class="details-control-approved" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a>`
                            }else{
                                return `<a class="details-control-approved-timecard" href="javascript:;">${full.profile_first_name+' '+full.profile_last_name}</a>`
                            }
                        }
                    },
                    
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.profile_team.team_name;
                        }
                    },
                   
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.jobs_count!=null ? full.jobs_count : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_job_revenue!=null ? full.total_job_revenue : '0.00';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.ajs!=null ? full.ajs : '';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var total_rev=0;
                            for(var el of full.jobs){
                                total_rev+=parseFloat(el.my_credit_card_tip)
                            }
                            return parseFloat(total_rev).toFixed(2);
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_my_job_revenue;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            let html='';
                            $.each(full.time_card_profile, function(index, elem){
                                html+='<p class="font-size-sm">Time In: '+moment(elem.time_in).format(moment_date_time_format)+'</p>'
                                html+='<p class="font-size-sm">Time out: '+moment(elem.time_out).format(moment_date_time_format)+'</p>'                                
                            })
                            
                            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.revenue_per_hour;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.base_revenue_share;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.bonus_base_revenue_share;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.multiplier;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_share_percentage;
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.my_rev_share;
                        }
                    },
                    
                ]
            });
            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>`;
            });


            return `<table cellpadding="5" cellspacing="0" border="0" style="width:100%;">
                <tr>
                    <td>Job id</td>
                    <td>Date</td>
                    <td>Total Job revenue</td>
                    <td>Team Members</td>
                    <td>Tip Amount</td>
                    <td>My Job Revenue</td>
                    
                    
                    <td>Action</td>
                </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-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>`;
                        //onclick="`+openModalAndShow(getWebUrl('schedule/time-sheet-edit/'+elem.id) , initializeDatatable)+`"
                    }
                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>`;
        }

        
    </script>
@endsection