@extends('layouts.authenticated')
@section('title','Payslip')
@section('payslip','active')
@section('style')
    <style>
        tbody tr {
            cursor: pointer;
        }

        .table-striped th, .table-striped td {
            white-space: nowrap;
        }

        .btn-back {
            background: #007bff;
            border-color: #007bff;
        }

        .btn-back:hover {
            color: #fff;
            background-color: #17a2b8;
            border-color: #17a2b8;
        }

        .dt-buttons {
            margin-bottom: 1rem;
        }
    </style>
@endsection
@section('content')
    <div class="wrapper">
        <section class="content-header">
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-cyan">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fas fa-history"></i> History</h3>
                            </div>
                            <div class="card-body">
                                <table id="payslip-table" class="table table-striped ta"
                                       style="width: 100%">
                                    <thead>
                                    <tr>
                                        <th>Filename</th>
                                        <th>Uploader's Name</th>
                                        <th>Number of Employee Records</th>
                                        <th>Date Uploaded</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('customjs')
     <script>
        $(document).ready(function () {
            toastr.options = {
                "closeButton": true,
                "preventDuplicates": false,
                "tapToDismiss": false
            }

            $.fn.DataTable.ext.pager.simple_numbers = function (page, pages) {
                var numbers = [];
                //  var buttons = $.fn.DataTable.ext.pager.numbers_length;
                var buttons = 3;
                var half = Math.floor(buttons / 2);
                var _range = function (len, start) {
                    var end;

                    if (typeof start === "undefined") {
                        start = 0;
                        end = len;

                    } else {
                        end = start;
                        start = len;
                    }
                    var out = [];
                    for (var i = start; i < end; i++) {
                        out.push(i);
                    }

                    return out;
                };

                if (pages <= buttons) {
                    numbers = _range(0, pages);

                } else if (page <= half) {
                    numbers = _range(0, buttons);

                } else if (page >= pages - 1 - half) {
                    numbers = _range(pages - buttons, pages);

                } else {
                    numbers = _range(page - half, page + half + 1);
                }

                numbers.DT_el = 'span';
                return ['first', 'previous', numbers, 'next', 'last'];
            };

            var table = $("#payslip-table").DataTable({
                language: {
                    paginate: {
                        previous: 'Prev',
                    }
                },
                iDisplayLength: 10,
                mark: true,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                ajax: {
                    url: "get-history",
                },
                columns: [
                    {data: 'filename'},
                    {data: 'display_name'},
                    {data: 'no_of_records'},
                    {
                        data: "created_at",
                        render: function (data, type, row) {
                            return type === 'sort' ? data : moment(data).format('MMM. DD, YYYY hh:mm A');
                        }
                    },
                ],
                order: [3, 'desc'],
                buttons: [
                    {
                        text: '<i class="fas fa-arrow-left" data-toggle="tooltip" title="Send Email"/></i> Back',
                        className: "btn-back",
                        autoClose: 'true',
                        action: function (e, dt, node, config) {
                            window.location.href = "{{url('payslip')}}";
                        }
                    }],
                dom: "<'row'<'col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'B>>" +
                    "<'row'<'col-xs-6 col-sm-6'l><'col-xs-6 col-sm-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            });

            bsCustomFileInput.init();

        });
    </script>
@endsection