@include('new_layouts.header')
    <!-- <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div >
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                        {{ __('My Details') }}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-body">
            <div >
                <div class="card"> -->
                    <div class="row g-0">
                    @include('new_layouts.usersidebar')
                        <div class="col d-flex flex-column">
                            <div class="card-body">
                            <div class="col-sm-12 col-lg-12 col-xl-12 col-md-12 mt-4">
        <div class="card">
            <div class="card-body">
                <form>
                    <div class="d-flex align-items-center justify-content-start">
                        <h4>{{ __('Find Payslip') }}</h4>
                    </div>

                    <div class="d-flex align-items-center justify-content-end">
                        <div class="col-xl-2 col-lg-3 col-md-6 col-sm-12 col-12 mx-2">
                            <div class="btn-box">
                                <select class="form-control month_date " name="year" tabindex="-1" aria-hidden="true">
                                    <option value="--">--</option>
                                    @foreach($month as $k=>$mon)
                                        @php
                                            $selected = ((date('m')-1) == $k) ? 'selected' :'';
                                        @endphp
                                        <option value="{{$k}}" {{ $selected }} >{{$mon}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-3 col-md-6 col-sm-12 col-12 mx-2">
                            <div class="btn-box">
                                {{ Form::select('year', $year, null, ['class' => 'form-control year_date ']) }}
                            </div>
                        </div>
                       
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="table-responsive mt-4">
        <table id="pc-dt-render-column-cells" class="table card-table table-vcenter text-nowrap datatable">
            <thead>
                <tr>
                    {{-- <th>{{ __('Id') }}</th> --}}
                    <th>{{ __('Employee Id') }}</th>
                    <!-- <th>{{ __('Name') }}</th> -->
                    <!-- <th>{{ __('Payroll Type') }}</th> -->
                    <th>{{ __('Salary') }}</th>
                    <th>{{ __('Net Salary') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th>{{ __('Action') }}</th>
                </tr>
            </thead>
            <tbody class="font-style">
                
            </tbody>
        </table>
    </div>
    </div>
    </div>
<!-- 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
@include('new_layouts.footer')

<script>
    $(document).ready(function () {
        callback();

        function callback() {
            var month = $(".month_date").val();
            var year = $(".year_date").val();

            if (month == '') {
                month = '{{date('m', strtotime('last month'))}}';
                year = '{{date('Y')}}';
            }

            var datePicker = year + '-' + month;

            $.ajax({
                url: '{{ route('payslip.search_json1') }}',
                type: 'POST',
                data: {
                    "datePicker": datePicker,
                    "_token": "{{ csrf_token() }}",
                },
                success: function (data) {


                    var datatable_data = {
                        data: data
                    };

                    function renderstatus(data, cell, row) {
                        if (data == 'Paid')
                            return '<div class="badge bg-success p-2 px-3 rounded"><a href="#" class="text-white">' +
                                data + '</a></div>';
                        else
                            return '<div class="badge bg-danger p-2 px-3 rounded"><a href="#" class="text-white">' +
                                data + '</a></div>';
                    }

                    function renderButton(data, cell, row) {

                        var $div = $(row);
                        employee_id = $div.find('td:eq(0)').text();
                        status = $div.find('td:eq(6)').text();

                        var month = $(".month_date").val();
                        var year = $(".year_date").val();
                        var id = employee_id;
                        var payslip_id = data;


                        var clickToPaid = '';
                        var payslip = '';
                        var view = '';
                        var edit = '';
                        var deleted = '';
                        var form = '';

                        if (data != 0) {
                            var payslip =
                                '<a href="#" data-url="{{ url('payslip/pdf/') }}/' + id +
                                '/' + datePicker +
                                '" data-size="md-pdf"  data-ajax-popup="true" class="btn btn-primary" data-title="{{ __('Employee Payslip') }}">' +
                                '{{ __('Payslip') }}' + '</a> ';
                        }

                        if (status == "UnPaid" && data != 0) {
                            clickToPaid = '<a href="{{ url('payslip/paysalary/') }}/' + id +
                                '/' + datePicker + '"  class="view-btn primary-bg btn-sm">' +
                                '{{ __('Click To Paid') }}' + '</a>  ';
                        }

                        if (data != 0) {
                            view =
                                '<a href="#" data-url="{{ url('payslip/showemployee/') }}/' +
                                payslip_id +
                                '"  data-ajax-popup="true" class="view-btn gray-bg" data-title="{{ __('View Employee Detail') }}">' +
                                '{{ __('View') }}' + '</a>';
                        }


                       
                    }

                    console.clear();
                    var tr = '';
                    // <tr><td class="dataTables-empty" colspan="1">No entries found</td></tr>
                    if (data.length > 0) {
                       
                        $.each(data, function (indexInArray, valueOfElement) {
                            var status =
                                '<div class="badge bg-danger p-2 px-3 rounded"><a href="#" class="text-white">' +
                                valueOfElement[6] + '</a></div>';
                            if (valueOfElement[6] == 'Paid') {
                                var status =
                                    '<div class="badge bg-success p-2 px-3 rounded"><a href="#" class="text-white">' +
                                    valueOfElement[6] + '</a></div>';
                            }

                            var id = valueOfElement[0];
                            var employee_id = valueOfElement[1];
                            var payslip_id = valueOfElement[7];

                            if (valueOfElement[7] != 0) {
                                var payslip =
                                    '<a href="#" data-url="{{ url('payslip/pdf/') }}/' +
                                    id +
                                    '/' + datePicker +
                                    '" data-size="lg"  data-ajax-popup="true" class=" text-white" data-title="{{ __('Employee Payslip') }}">' +
                                    '{{ __('Payslip') }}' + '</a> ';
                            }
                            if (valueOfElement[6] == "UnPaid" && valueOfElement[7] != 0) {
                                var clickToPaid =
                                    '<a href="{{ url('payslip/paysalary/') }}/' + id +
                                    '/' + datePicker + '"  class="btn-sm btn btn-primary">' +
                                    '{{ __('Click To Paid') }}' + '</a>  ';
                            } else {
                                var clickToPaid = '';
                            }

                            if (valueOfElement[7] != 0 && valueOfElement[6] == "UnPaid") {
                                var edit =
                                    '<a href="#" data-url="{{ url('payslip/editemployee/') }}/' +
                                    payslip_id +
                                    '"  data-ajax-popup="true" class="btn-sm btn btn-info" data-title="{{ __('Edit Employee salary') }}">' +
                                    '{{ __('Edit') }}' + '</a>';
                            } else {
                                var edit = '';
                            }


                            var url = '{{ route('payslip.delete', ':id') }}';
                            url = url.replace(':id', payslip_id);

                            @if (\Auth::user()->type != 'employee')
                            if (valueOfElement[7] != 0) {
                                var deleted = '<a href="#"  data-url="' + url +
                                    '" class="payslip_delete view-btn btn btn-danger ms-1 btn-sm"  >' +
                                    '{{ __('Delete') }}' + '</a>';
                            } else {
                                var deleted = '';
                            }
                            @endif
                            var url_employee = valueOfElement['url'];

                            tr +=
                                '<tr> ' +
                                '<td> <a class="btn btn-outline-primary" href="' + url_employee + '">' +
                                valueOfElement[1] + '</a></td> ' +
                                // '<td>' + valueOfElement[2] + '</td> ' +
                                // '<td>' + valueOfElement[3] + '</td>' +
                                '<td>' + valueOfElement[4] + '</td>' +
                                '<td>' + valueOfElement[5] + '</td>' +
                                '<td>' + status + '</td>' +
                                '<td><div class="badge bg-danger p-2 px-3 rounded green">' + payslip + '</div></td>' +
                                '</tr>';
                        });
                    } else {
                        var colspan = $('#pc-dt-render-column-cells thead tr th').length;
                        var tr = '<tr><td class="dataTables-empty" colspan="' + colspan +
                            '">{{ __('No entries found') }}</td></tr>';
                    }

                    $('#pc-dt-render-column-cells tbody').html(tr);
                    var table = document.querySelector("#pc-dt-render-column-cells");
                    // var datatable = new simpleDatatables.DataTable(table);

                    // if (data.length > 0) {
                    //     var dataTable = new simpleDatatables.DataTable(
                    //         "#pc-dt-render-column-cells", {
                    //             data: datatable_data,
                    //             perPage: 25,
                    //             columns: [{
                    //                     select: 0,
                    //                     hidden: true
                    //                 },
                    //                 {
                    //                     select: 6,
                    //                     render: renderstatus
                    //                 },
                    //                 {
                    //                     select: 7,
                    //                     render: renderButton
                    //                 }
                    //             ]
                    //         }
                    //     );


                    //     $('[data-toggle="tooltip"]').tooltip();

                    //     if (!(data)) {
                    //         show_toastr('error',
                    //             'Employee payslip not found ! please generate first.',
                    //             'error');
                    //     }
                    // } else {

                    //     var dataTable = new simpleDatatables.DataTable(
                    //         "#pc-dt-render-column-cells", {
                    //             data: ''
                    //         }
                    //     );

                    // }
                    // dataTable.on("datatable.init");


                },
                error: function (data) {

                }

            });

        }

        $(document).on("change", ".month_date,.year_date", function () {
            callback();
        });

        //bulkpayment Click
        $(document).on("click", "#bulk_payment", function () {
            var month = $(".month_date").val();
            var year = $(".year_date").val();
            var datePicker = year + '_' + month;


        });
        $(document).on('click', '#bulk_payment',
            'a[data-ajax-popup="true"], button[data-ajax-popup="true"], div[data-ajax-popup="true"]',
            function () {
                var month = $(".month_date").val();
                var year = $(".year_date").val();
                var datePicker = year + '-' + month;

                var title = 'Bulk Payment';
                var size = 'md';
                var url = 'payslip/bulk_pay_create/' + datePicker;

                // return false;

                $("#commonModal .modal-title").html(title);
                $("#commonModal .modal-dialog").addClass('modal-' + size);
                $.ajax({
                    url: url,
                    success: function (data) {

                        // alert(data);
                        // return false;
                        if (data.length) {
                            $('#commonModal .modal-body').html(data);
                            $("#commonModal").modal('show');
                            // common_bind();
                        } else {
                            show_toastr('Error', 'Permission denied.');
                            $("#commonModal").modal('hide');
                        }
                    },
                    error: function (data) {
                        data = data.responseJSON;
                        show_toastr('Error', data.error);
                    }
                });
            });

        $(document).on("click", ".payslip_delete", function () {
            var confirmation = confirm("are you sure you want to delete this payslip?");
            var url = $(this).data('url');


            if (confirmation) {
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: "JSON",
                    success: function (data) {
                     


                        // show_toastr(data.status, data.msg, 'data.status');
                        show_toastr('Success', 'Payslip Deleted Successfully', 'success');


                        setTimeout(function() {
                            location.reload();
                        }, 800)


                    },

                });

            }
        });
    });

</script>