@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 Route</h3>
        </div>
        <div class="card-toolbar">
        
            <!--begin::Button-->
            <a href="{{ route('route.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 Route
            </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 ($routes as $route)
                    <option value="{{ $route->job_date }}" @if($route->job_date == $current_date) selected @endif >{{ $common->show_formatted_date($route->job_date) }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="active-tab" data-toggle="tab" href="#pending">
                    <span class="nav-text">Jobs needing Approval</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="archive-tab" data-toggle="tab" href="#approved">
                    <span class="nav-text">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>Total jobs</th>  
                        <th>Pay Rate</th> 
                        <th>Total Bill Hours</th>
                        <th>Drive Time Before</th>
                        <th>Drive Time After</th>
                        <th>Drive Time Additional</th>
                        <th>Meeting Hours</th>
                        <th>Total Hourly Rate</th>
                        <th>Total Tips</th>
                        <th>Fuel Reimbursment</th>
                        <th>Total Income</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>Total jobs</th>  
                        <th>Pay Rate</th> 
                        <th>Total Bill Hours</th>
                        <th>Drive Time Before</th>
                        <th>Drive Time After</th>
                        <th>Drive Time Additional</th>
                        <th>Meeting Hours</th>
                        <th>Total Hourly Rate</th>
                        <th>Total Tips</th>
                        <th>Fuel Reimbursment</th>
                        <th>Total Income</th>
                    </tr>
                </thead>
            </table>
            <!--end: Datatable-->
        </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 Routes</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" />

@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>
@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','.disable-profile', approveHandler);

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

            $('body').on('click', '.delete-btn', function(){
                let route_id = $(this).attr('data-id');
                let total_member = $(this).attr('data-total');
                total_member = (total_member > 1) ? ' Also this route associate with another '+(total_member-1)+' members, which will be deleted.': '';
                Swal.fire({
                    title: "Are you sure?",
                    text: "This Route will be delete, and you can not retrive one!" + total_member,
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Delete it!",
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            url: "{{route('route.delete')}}",
                            type: 'delete',
                            dataType: 'json',
                            data: {route_id:route_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(){
                initializeDatatablePending();
                initializeDatatableApproved();
            })
        })

        function approveHandler() {
            var profileId = $(this).attr('data-id');
            var date=current_date;
            if($("#filter_date").val()!=""){
                date=$("#filter_date").val()
            }
                Swal.fire({
                    title: "Are you sure?",
                    text: "This Route 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: "{{route('route.approve')}}",
                            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(){
                                initializeDatatablePending();
                                initializeDatatableApproved();
                            }
                        }); 
                    }
                });
        }

        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({
                '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('route.ajax.list')}}",
                    "data":{status:1,selectedDate: date},
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            return `<a class="details-control" href="javascript:;">${full.profile_last_name+' '+full.profile_first_name}</a>`
                        }
                    },
                                       
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.routes_count!=null ? full.routes_count : '';
                        }
                    },  
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.pay_rate!=null ? full.pay_rate : '0.00';
                        }
                    },                  
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_hrs_display!=null ? full.total_hrs_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.before_drive_time_display!=null ? full.before_drive_time_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.after_drive_time_display!=null ? full.after_drive_time_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.addl_drive_time_display!=null ? full.addl_drive_time_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.addl_hours!=null ? full.addl_hours : '0.00';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_hourly_rate_display!=null ? full.total_hourly_rate_display : '0.00';
                        }
                    },                   
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_my_credit_card_tip_display!=null ? full.total_my_credit_card_tip_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_reimbursement_display!=null ? full.total_reimbursement_display : '0.00';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_income_display!=null ? full.total_income_display : '0.00';
                        }
                    },                   
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            var html = '';
                            
                            html += `
                            <a href="javascript:" class="btn btn-md btn-light-success disable-profile" data-toggle="tooltip" title="Approve Routes" data-id="${full.id}">Approve</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({
                '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('route.ajax.approved.list')}}",
                    "data":{status:1,selectedDate: date},
                    "dataSrc": "lists"
                },
                "columns": [
                    
                    {
                        sortable: true,
                        "render": function(data, type, full, meta) {
                            return `<a class="details-control-approved" href="javascript:;">${full.profile_last_name+' '+full.profile_first_name}</a>`
                        }
                    },
                                       
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.routes_count!=null ? full.routes_count : '';
                        }
                    },  
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.pay_rate!=null ? full.pay_rate : '0.00';
                        }
                    },                  
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_hrs_display!=null ? full.total_hrs_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.before_drive_time_display!=null ? full.before_drive_time_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.after_drive_time_display!=null ? full.after_drive_time_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.addl_drive_time_display!=null ? full.addl_drive_time_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.addl_hours!=null ? full.addl_hours : '0.00';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_hourly_rate_display!=null ? full.total_hourly_rate_display : '0.00';
                        }
                    },                   
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_my_credit_card_tip_display!=null ? full.total_my_credit_card_tip_display : '0.00';
                        }
                    }, 
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_reimbursement_display!=null ? full.total_reimbursement_display : '0.00';
                        }
                    },
                    {
                        sortable: false,
                        "render": function(data, type, full, meta) {
                            return full.total_income_display!=null ? full.total_income_display : '0.00';
                        }
                    },                   
                    
                ]
            });
            return ajax_datatable_approved_list;
        }

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

            $.each(d.routes, function(index, elem){
                html+=`
                <tr>
                    <td>${ moment(elem.job_date).format(moment_date_format) }</td>
                    <td>${elem.job_type_display}</td>
                    <td>${elem.customer_name}</td>
                    <td>${elem.zipcode!=null ? elem.zipcode : ''}</td>
                    <td>${elem.number_of_team_member}</td>
                    <td>${elem.my_credit_card_tip_display}</td>
                    <td>${elem.bill_hours}</td>
                    <td>
                        <a href="${getWebUrl('route/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>
                    `;
                    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>
                    <th>Date</th>                    
                    <th>Job Type</th>
                    <th>Customer Name</th>
                    <th>Job Zipcode</th>
                    <th>Number of Members</th>
                    <th>Tip Amount</th>
                    <th>Bill Hours</th>
                    <th>Action</th>
                </tr>
                ${html}
            </table>`;
        }
 
    </script>
@endsection