@extends('layouts.authenticated')
@section('title','Payslip')
@section('payslip','active')
@section('style')
    <style>
        th, td {
            white-space: nowrap;
        }

        .btn-send {
            background: #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">Payslip</h3>
                            </div>
                            <div class="card-body">
                                <table id="example1" class="table stripe row-border order-column"
                                       style="width: 100%">
                                    <thead>
                                    <tr>
                                        <th><input name="select_all" class="selectall" value="1" type="checkbox"> To
                                            send
                                        </th>
                                        <th>Employee Name</th>
                                        <th>Employee Number</th>
                                        <th>Gross Income</th>
                                        <th>Total Deductions</th>
                                        <th>Net Income</th>
                                        <th>Pay Period</th>
                                        <th>Designated Email</th>
                                        <th>Processing Status</th>
                                        <th>Delivery Status</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @for($i = 0;$i <= 100; $i++)
                                        <tr>
                                            <td><input class="selectrow" type="checkbox"></td>
                                            <td>Jonathan N. Gonzales</td>
                                            <td>001</td>
                                            <td>15,000</td>
                                            <td>2,500</td>
                                            <td>13,500</td>
                                            <td>1</td>
                                            <td>jgonzales@gmail.com</td>
                                            <td>Success</td>
                                            <td>DRAFT</td>
                                        </tr>
                                    @endfor
                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div id="modal-add" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Send E-Payslip</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Confirm Send?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success btn-confirm">Confirm</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection
@section('customjs')
    <script>
        $(document).ready(function () {
            /*     var table = $("#example1").DataTable({
                     mark: true,
                     scrollY: "500px",
                     scrollX: true,
                     scrollCollapse: true,
                     paging: false,
                     fixedColumns: {
                         iLeftColumns: 2
                     },
                     columnDefs: [
                         {orderable: false, targets: 0}
                     ],
                     'order': [1, 'asc'],
                     dom: '<"toolbar">frtip',
                 });*/
            $("#example1").DataTable({
                /* dom: 'Bflrtip',*/
                "mark": true,
                /*     "responsive": true,
                     "lengthChange": false,
                     "autoWidth": false,*/
                "scrollY": "500px",
                "scrollX": true,
                "scrollCollapse": true,
                "paging": true,
                "fixedColumns": {
                    "iLeftColumns": 2
                },
                "columnDefs": [
                    {
                        "orderable": false,
                        "targets": 0
                    }
                ],
                'order': [1, 'asc'],
                buttons: [{
                    text: '<i class="fas fa-envelope-open-text" data-toggle="tooltip" title="Send Email"/></i> Send',
                    className: "btn-send",
                    autoClose: 'true',
                    action: function (e, dt, node, config) {
                        $('#modal-add').modal('show')
                    }
                }, {
                    extend: 'collection',
                    className: "btn-primary",
                    text: '<i class="fas fa-file-export" data-toggle="tooltip" title="Send Email"/></i> Export',
                    buttons:
                        [{
                            extend: "pdf",
                            className: "btn-primary",
                            text: '<i class="fas fa-file-pdf" data-toggle="tooltip" title="Send Email"/></i> .pdf',
                        }, {
                            extend: "csv",
                            className: "btn-primary",
                            text: '<i class="fas fa-file-excel" data-toggle="tooltip" title="Send Email"/></i> .csv'
                        }],
                },
                    {
                        extend: 'colvis',
                        className: "btn-primary",
                        text: '<i class="fas fa-columns" data-toggle="tooltip" title="Select columns"/></i> Column Visibility',
                    }],
                "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>>",
            });


            $('thead input[name="select_all"]').on('click', function (e) {
                if (this.checked) {
                    console.log(1)
                    $('.selectrow:not(:checked)').trigger('click');
                    $('thead input[name="select_all"]').removeClass('unselectall').addClass('selectall');
                } else {
                    console.log(2)
                    $('.selectrow:checked').trigger('click');
                    $('thead input[name="select_all"]').removeClass('selectall').addClass('unselectall');
                }
            });
        });
    </script>
@endsection