{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card card-custom">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <h3 class="card-label">{{$page_title}}</h3>
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <a data-href="javscript:;" onclick="reloadTbl()" class="btn btn-primary font-weight-bolder mr-5"><i class="fa fa-sync"></i> Reload Page</a>
            <!--end::Button-->
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        @if (session('status'))
        <div class="alert alert-custom alert-success fade show" role="alert">
            <div class="alert-text">{{ session('status') }}</div>
            <div class="alert-close">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true"><i class="ki ki-close"></i></span>
                </button>
            </div>
        </div>
        @endif
        <div class="row">
            <!-- Step 1 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
                <h3>Step 1</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.create.task','payrun')}}" data-type="payrun" data-reload="true" onclick="actionSync(this)" class="btn btn-primary font-weight-bolder mr-5 {{$is_sync_disabled?'disabled':''}}">
                            <i class="fa fa-sync {{$isSyncRunning ? 'fa-spin' : ''}}"></i> Sync Payroll and Payslips
                        </a>
                        <!--end::Button-->
                        <br />
                        <br />
                        <p class="text-info">
                            @if(isset($draftPayrun->updated_at) && !$isSyncRunning)
                            Last updated at: <br /> {{$draftPayrun->updated_at->format('d-m-Y h:i A')}}
                            @endif
                        </p>
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li class="text-danger"><b>It will take approx 5 minutes to sync payroll and payslips from XERO.</b>.</li>
                            <li>Once payroll created in XERO, it will auto include eligible employees for this payroll and create payslips for it.</li>
                            <li>{{ $companyName }} will fetch and store payslips data from XERO.</li>
                            <li>Click here to <a href="{{route('payruns.index')}}" target="_blank">View Payroll</a></li>
                            <li class="text-danger">Notes: You can review created payroll and payslips from Pay Employees and Payslips menu item.</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 1 End -->
            <!-- Step 2 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5 hide d-none">
                <h3>Step 2</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.load')}}" data-type="hours" data-reload="true" onclick="actionLoad(this)" class="btn btn-primary font-weight-bolder mr-5 {{$is_load_hours_disabled?'disabled':''}}">
                            <i class="fa fa-download"></i> Load Staff Data
                        </a>
                        <!--end::Button-->
                        <br />
                        <br />
                        <p class="text-info">
                            @if(isset($draftPayrun->is_load_hours_done) && ($draftPayrun->is_load_hours_done == 1) && isset($draftPayrun->timesheet_updated_at) && strtotime($draftPayrun->timesheet_updated_at) > 0)
                            Last data loaded at: <br /> {{date('d-m-Y h:i A',strtotime($draftPayrun->timesheet_updated_at))}}
                            @endif
                        </p>
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li>It will fetch staff timesheet hours for active payroll with status Draft and add into staff payslips.</li>
                            <li>Click here to <a href="{{route('payslips.index')}}" target="_blank">View Payslips</a></li>
                            <li class="text-danger">Notes: You can review staff timesheet hours from Payslips menu item and please note that it is not synced with XERO yet (Sync with XERO will be done in step 4).</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 2 End -->
            <!-- Step 2 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
                <h3>Step 2</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.load.v2')}}" data-type="hours" data-reload="true" onclick="actionLoad(this)" class="btn btn-primary font-weight-bolder mr-5 {{$is_load_hours_disabled?'disabled':''}}">
                            <i class="fa fa-download"></i> Load Staff Data V2
                        </a>
                        <!--end::Button-->
                        <br />
                        <br />
                        <p class="text-info">
                            @if(isset($draftPayrun->is_load_hours_done) && ($draftPayrun->is_load_hours_done == 1) && isset($draftPayrun->timesheet_updated_at) && strtotime($draftPayrun->timesheet_updated_at) > 0)
                            Last data loaded at: <br /> {{date('d-m-Y h:i A',strtotime($draftPayrun->timesheet_updated_at))}}
                            @endif
                        </p>
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li>It will fetch staff timesheet hours for active payroll with status Draft and add into staff payslips.</li>
                            <li>Click here to <a href="{{route('payslips.index')}}" target="_blank">View Payslips</a></li>
                            <li class="text-danger">Notes: You can review staff timesheet hours from Payslips menu item and please note that it is not synced with XERO yet (Sync with XERO will be done in step 4).</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 2 End -->
            <!-- Step 3 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5 d-none hide">
                <h3>Step 3</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.load.leave')}}" data-type="leave" onclick="actionLoad(this)" class="btn btn-primary font-weight-bolder mr-5 {{$is_load_leave_disabled?'disabled':''}}">
                            <i class="fa fa-download"></i> Load Leave Data
                        </a>
                        <!--end::Button-->
                        <br />
                        <br />
                        <p class="text-info">
                            @if(isset($draftPayrun->is_load_leave_done) && ($draftPayrun->is_load_leave_done == 1) && isset($draftPayrun->updated_at) && strtotime($draftPayrun->updated_at) > 0)
                            Last data loaded at: <br /> {{date('d-m-Y h:i A',strtotime($draftPayrun->updated_at))}}
                            @endif
                        </p>
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li>Click here to <a href="{{route('payslips.index')}}" target="_blank">View Payslips</a></li>
                            <li>It will fetch staff leave hours for active payroll with status Draft and add into staff payslips.</li>
                            <li>Notes: You can review staff leave hours from Payslips menu item and please note that it is not synced with XERO yet (Sync with XERO will be done in step 4).</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 3 End -->
            <!-- Step 3 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
                <h3>Step 3</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.load.leave.v2')}}" data-type="leave" onclick="actionLoad(this)" class="btn btn-primary font-weight-bolder mr-5 {{$is_load_leave_disabled?'disabled':''}}">
                            <i class="fa fa-download"></i> Load Leave Data V2
                        </a>
                        <!--end::Button-->
                        <br />
                        <br />
                        <p class="text-info">
                            @if(isset($draftPayrun->is_load_leave_done) && ($draftPayrun->is_load_leave_done == 1) && isset($draftPayrun->updated_at) && strtotime($draftPayrun->updated_at) > 0)
                            Last data loaded at: <br /> {{date('d-m-Y h:i A',strtotime($draftPayrun->updated_at))}}
                            @endif
                        </p>
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li>Click here to <a href="{{route('payslips.index')}}" target="_blank">View Payslips</a></li>
                            <li>It will fetch staff leave hours for active payroll with status Draft and add into staff payslips.</li>
                            <li>Notes: You can review staff leave hours from Payslips menu item and please note that it is not synced with XERO yet (Sync with XERO will be done in step 4).</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 3 End -->
            <!-- Step 4 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
                <h3>Step 4</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.create.task','sendToXero')}}" data-type="sendToXero" data-reload="true" onclick="actionSendToXero(this)" class="btn btn-success font-weight-bolder mr-5 {{$is_send_to_xero_disabled?'disabled':''}}">
                            <i class="fa fa-upload"></i> Send To Xero
                            @if($isSendToXeroRunning)
                            <i class="fa fa-spinner fa-spin"></i>
                            @endif
                        </a>
                        <!--end::Button-->
                        @if(isset($draftPayrun->send_to_xero_at) && strtotime($draftPayrun->send_to_xero_at) > 0 && !$isSendToXeroRunning)
                        <br />
                        <br />
                        <p class="text-info">
                            Last synced at: <br /> {{date('d-m-Y h:i A',strtotime($draftPayrun->send_to_xero_at))}}
                        </p>
                        @endif
                        @if(isset($isSendToXeroError) && $isSendToXeroError)
                        <p class="text-danger mt-5">
                            <b>Please resolve this error from XERO UI and click on reset payroll button to start from Step 1: </b><br /><br />
                            @php
                            $m = json_decode($isSendToXeroError,true);
                            $m = $m['msg']??"";
                            $m = explode(" | ",$m);
                            @endphp
                        <ul>
                            @foreach($m as $mv)
                            <li>{!!$mv!!}</li>
                            @endforeach
                        </ul>
                        </p>
                        @endif
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li class="text-danger"><b>It will take approx 5 minutes to send data to XERO.</b>.</li>
                            <li>It will send all payslips data into XERO (including timesheet hours and leaves).</li>
                            <li class="text-danger">Notes: You can not edit payslip after sending data to XERO. you have to reset payroll to edit payslips.</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 4 End -->
            <!-- Step 6 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
                <h3>Step 5</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        Go to XERO UI to review and download payslips
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li>Login to xero and exclude all empty payslips from the current payrun.</li>
                            <li class="text-danger">Notes: Once the empty pay slips are excluded, you can download the payslip PDF to verify the details of the employees. Once the verification is done by {{ $companyName }} team, proceed to Step 7. If any issues or modification required, proceed with Step 6.</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 6 End -->
            <!-- Step 6 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
                <h3>Step 6</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.reset')}}" onclick="resetPayRoll(this)" class="btn btn-danger font-weight-bolder mr-5 {{$is_reset_disabled?'disabled':''}}">
                            <i class="fa fa-trash"></i> Reset Payroll
                        </a>
                        <!--end::Button-->
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li>It will delete all data of Draft Payroll from {{ $companyName }}.</li>
                            <li class="text-danger">Notes: Draft payroll data will be permanently deleted from {{ $companyName }}. It will not delete payroll from XERO, you have to manually delete payroll from xero using XERO UI.</li>
                        </ul>
                    </div>

                </div>
            </div>
            <!-- Step 6 End -->
            <!-- Step 5 -->
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-5">
                <h3>Step 7</h3>
                <div class="row mt-5">
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-12 col-xs-12">
                        <!--begin::Button-->
                        <a data-href="{{route('payruns.change.status', ['action' => 'POSTED', 'id' => $draftPayrun->id??'0'])}}" onclick="actionApprove(this)" class="btn btn-success font-weight-bolder mr-5 {{$is_finalize_disabled?'disabled':''}}">
                            <i class="fa fa-check-circle"></i> Finalize Payroll
                        </a>
                        <!--end::Button-->
                    </div>
                    <div class="col-xl-10 col-lg-9 col-md-8 col-sm-12 col-xs-12">
                        <ul>
                            <li class="text-danger">Notes: This is last step once ready for the payment.</li>
                            <li>It will update the payroll status in the portal from 'Draft' to 'POSTED.' You'll need to manually finalize the payroll in XERO.</li>
                            <li>Kindly ensure that the payroll is finalized in XERO before initiating a new pay run in the portal.</li>
                            <li class="text-danger">Notes: You can not revert status from {{ $companyName }} after finalize and you can not reset payroll after marked as POSTED.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Step 5 End -->
        </div>
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">
    function reloadTbl() {
        window.location.reload();
    }

    function actionSync(ele) {
        $(ele).addClass('disabled');
        let redirectUrl = $(ele).attr('data-href');
        let pageReload = $(ele).attr('data-reload');
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {
                "_token": "{{ csrf_token() }}"
            },
            url: redirectUrl,
            success: function(data) {
                let alertMsg = deleteSuccessAlert;
                alertMsg['icon'] = 'success';
                alertMsg['text'] = data.msg;
                if (data.status) {
                    Swal.fire(alertMsg).then(function(result) {
                        if (result.value) {
                            window.location.reload();
                        }
                    });
                } else {
                    $(ele).removeClass('disabled');
                    alertMsg['icon'] = 'error';
                    Swal.fire(alertMsg);
                }
            },
            error: function() {
                let alertMsg = deleteSuccessAlert;
                alertMsg['text'] = 'Error';
                alertMsg['icon'] = 'System error, please try again!';
                Swal.fire(alertMsg);
                $(ele).removeClass('disabled');
            }
        });
    }

    function actionLoad(ele) {
        let approveAlert = deleteAlert;
        let redirectUrl = $(ele).attr('data-href');
        let dataType = $(ele).attr('data-type');
        if (dataType == "hours") {
            approveAlert['title'] = "Load Staff Data";
            approveAlert['text'] = "Are you sure you want load staff timesheet hours into payslips of draft payroll?"
        }
        if (dataType == "leave") {
            approveAlert['title'] = "Load Leave Hours";
            approveAlert['text'] = "Are you sure you want load staff leave hours into payslips of draft payroll?"
        }
        Swal.fire(approveAlert).then(function(result) {
            if (result.value) {
                $(ele).addClass('disabled');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        '_token': "{{ csrf_token() }}",
                    },
                    url: redirectUrl,
                    success: function(data) {
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['icon'] = 'success';
                        alertMsg['text'] = data.msg;
                        if (data.status) {
                            Swal.fire(alertMsg).then(function(result) {
                                if (result.value) {
                                    window.location.reload();
                                }
                            });
                        } else {
                            alertMsg['icon'] = 'error';
                            Swal.fire(alertMsg);
                            $(ele).removeClass('disabled');
                        }
                    },
                    error: function() {
                        $(ele).removeClass('disabled');
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['text'] = 'Error';
                        alertMsg['icon'] = 'System error, please try again!';
                        Swal.fire(alertMsg);
                    }
                });
            }
        });
    }

    function actionSendToXero(ele) {
        let approveAlert = deleteAlert;
        let redirectUrl = $(ele).attr('data-href');
        approveAlert['title'] = "Are you sure you want sync payroll with Xero?";
        approveAlert['text'] = "Please review all payslips data before sync payroll."
        Swal.fire(approveAlert).then(function(result) {
            if (result.value) {
                $(ele).addClass('disabled');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        '_token': "{{ csrf_token() }}"
                    },
                    url: redirectUrl,
                    success: function(data) {
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['icon'] = 'success';
                        alertMsg['text'] = data.msg;
                        if (data.status) {
                            Swal.fire(alertMsg).then(function(result) {
                                if (result.value) {
                                    window.location.reload();
                                }
                            });
                        } else {
                            $(ele).removeClass('disabled');
                            alertMsg['icon'] = 'error';
                            Swal.fire(alertMsg);
                        }
                    },
                    error: function() {
                        $(ele).removeClass('disabled');
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['text'] = 'Error';
                        alertMsg['icon'] = 'System error, please try again!';
                        Swal.fire(alertMsg);
                    }
                });
            }
        });
    }

    function actionApprove(ele) {
        let approveAlert = deleteAlert;
        let redirectUrl = $(ele).attr('data-href');
        approveAlert['title'] = "Are you sure you want mark payroll as POSTED?";
        approveAlert['text'] = "Please check all the payslips before mark payrun. Once payrun marked as POSTED it can be only changed from XERO UI!"
        Swal.fire(approveAlert).then(function(result) {
            if (result.value) {
                $(ele).addClass('disabled');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data:{
                        '_token':"{{ csrf_token() }}"
                    },
                    url: redirectUrl,
                    success: function(data) {
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['text'] = data.msg;
                        if (data.status) {
                            alertMsg['icon'] = 'success';
                            Swal.fire(alertMsg).then(function(result) {
                                if (result.value) {
                                    window.location.reload();
                                }
                            });
                        } else {
                            $(ele).removeClass('disabled');
                            alertMsg['icon'] = 'error';
                            Swal.fire(alertMsg);
                        }
                    },
                    error: function() {
                        $(ele).removeClass('disabled');
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['text'] = data.msg;
                        alertMsg['icon'] = 'System error, please try again!';
                        Swal.fire(alertMsg);
                    }
                });
            }
        });
    }

    function resetPayRoll(ele) {
        let approveAlert = deleteAlert;
        let redirectUrl = $(ele).attr('data-href');
        approveAlert['title'] = "Are you sure you want reset draft payroll?";
        approveAlert['text'] = "Please make sure that it will permanently delete draft payroll data from {{ $companyName }} and you have manually delete payroll from XERO!"
        Swal.fire(approveAlert).then(function(result) {
            if (result.value) {
                $(ele).addClass('disabled');
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data:{
                        '_token':"{{ csrf_token() }}"
                    },
                    url: redirectUrl,
                    success: function(data) {
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['icon'] = 'success';
                        alertMsg['text'] = data.msg;
                        if (data.status) {
                            Swal.fire(alertMsg).then(function(result) {
                                if (result.value) {
                                    window.location.reload();
                                }
                            });
                        } else {
                            $(ele).removeClass('disabled');
                            alertMsg['icon'] = 'error';
                            Swal.fire(alertMsg);
                        }
                    },
                    error: function() {
                        $(ele).removeClass('disabled');
                        let alertMsg = deleteSuccessAlert;
                        alertMsg['text'] = 'Error';
                        alertMsg['icon'] = 'System error, please try again!';
                        Swal.fire(alertMsg);
                    }
                });
            }
        });
    }
</script>
@endsection