@extends('master')
@section('content')
    <section>
        <div class="container-fluid">
            <div class="card mb-4">
                <div class="card-header with-border">
                    <h3 class="card-title text-center"> {{ __('Payment History') }} </h3>
                </div>
                <span id="general_result"></span>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <form method="post" id="filter_form" class="form-horizontal">
                                @csrf
                                <div class="row">
                                    {{-- <div class="col-md-4">
                                        <div class="form-group">
                                            <label class=" fs-5 fw-bold mb-2"
                                                for="company_id">{{ trans('Company') }}</label>
                                            <select class="form-select form-select-solid dynamic" data-control="select2"
                                                name="filter_company" id="company_id" data-first_name="first_name"
                                                data-last_name="last_name" data-placeholder="Company" data-column="1"
                                                tabindex="-1" aria-hidden="true">
                                                <option value="0">{{ __('All Companies') }}</option>
                                                @foreach ($companies as $company)
                                                    <option value="{{ $company->id }}">{{ $company->company_name }}
                                                    </option>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div> --}}

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class=" fs-5 fw-bold mb-2"
                                                for="employee_id">{{ trans('Employee') }}</label>
                                            <select class="form-select form-select-solid default_emp" data-control="select2"
                                                name="filter_employee" id="employee_id"
                                                data-placeholder="{{ trans('Employee') }}" tabindex="-1"
                                                aria-hidden="true">
                                                <option value="0">{{ __('All Employees') }}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class=" fs-5 fw-bold mb-2"
                                                for="month_year">{{ __('Select Month') }}</label>
                                            <input class="form-select form-select-solid month_year"
                                                placeholder="{{ __('Select Month') }}" readonly id="month_year"
                                                name="month_year" type="text" value="">

                                        </div>
                                    </div>


                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="form-actions text-center mt-5">
                                                <button type="submit" id="filterSubmit"
                                                    class="filtering btn btn-primary"><i class="fa fa-check-square-o"></i>
                                                    {{ trans('Search') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-header border-0 pt-5 p-0">
                    <div class="container-fluid">
                        <div class="card-title text-center">
                            <h3>{{ __('Payment History') }} <span id="details_month_year"></span></h3>
                        </div>
                        <div class="container-fluid"><span id="general_result"></span></div>
                    </div>
                </div>
                <div class="card-body py-4">
                    <div class="table-responsive">
                        <table id="payslips-table" class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                            <thead>
                                <tr class="text-start text-muted text-uppercase fw-bolder fs-7 gs-0">
                                    <th>Payslip Number</th>
                                    <th>Bank Account</th>
                                    <th>{{ trans('Employee') }}</th>
                                    <th class="text-center">Net Salary</th>
                                    <th class="text-center">Salary Month</th>
                                    <th>{{ __('Payment Date') }}</th>
                                    <th class="not-exported">{{ trans('action') }}</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('page_script')
    <script nonce="{{ $cspNonce }}">
        (function($) {
            "use strict";
            $(document).ready(function() {

                fill_datatable();

                function fill_datatable(filter_company = '', filter_employee = '', filter_month_year = '') {
                    $('#details_month_year').html($('#month_year').val());
                    var table_table = $('#payslips-table').DataTable({

                        responsive: true,
                        fixedHeader: {
                            header: true,
                            footer: true
                        },
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ route('payment_history.index') }}",
                            data: {
                                filter_company: filter_company,
                                filter_employee: filter_employee,
                                filter_month_year: filter_month_year,
                                "_token": "{{ csrf_token() }}"
                            },
                        },
                        columns: [{
                                data: 'payslip_number',
                                name: 'payslip_number',
                            },
                            {
                                data: 'bank_account',
                                name: 'bank_account',
                            },
                            {
                                data: 'employee_name',
                                name: 'employee_name',
                            },
                            {
                                data: 'salary_details',
                                name: 'salary_details',
                            },
                            {
                                data: 'month_year',
                                name: 'month_year',
                            },
                            {
                                data: 'created_at',
                                name: 'created_at',

                            },
                            {
                                data: 'action',
                                name: 'action',
                                orderable: false
                            }
                        ],


                        "order": [],
                        'language': {
                            'lengthMenu': '_MENU_ {{ __('records per page') }}',
                            "info": '{{ trans('Showing') }} _START_ - _END_ (_TOTAL_)',
                            "search": '{{ trans('Search') }}',
                            'paginate': {
                                'previous': '{{ trans('Previous') }}',
                                'next': '{{ trans('Next') }}'
                            }
                        },
                        'columnDefs': [{
                            "orderable": false,
                            'targets': [0, 3, 4, 5],
                            "className": "text-center"
                        }, ],


                        'select': {
                            style: 'multi',
                            selector: 'td:first-child'
                        },
                        'lengthMenu': [
                            [10, 25, 50, -1],
                            [10, 25, 50, "All"]
                        ],
                        dom: '<"row"lfB>rtip',
                        buttons: [{
                                extend: 'pdf',
                                text: '<i title="export to pdf" class="fa fa-file-pdf"></i>',
                                exportOptions: {
                                    columns: ':visible:Not(.not-exported)',
                                    rows: ':visible'
                                },
                            },
                            {
                                extend: 'csv',
                                text: '<i title="export to csv" class="fa fa-file-csv"></i>',
                                exportOptions: {
                                    columns: ':visible:Not(.not-exported)',
                                    rows: ':visible'
                                },
                            },
                            {
                                extend: 'print',
                                text: '<i title="print" class="fa fa-print"></i>',
                                exportOptions: {
                                    columns: ':visible:Not(.not-exported)',
                                    rows: ':visible'
                                },
                            }
                        ],
                    });
                }
                new $.fn.dataTable.FixedHeader($('#payslips-table').DataTable());


                $('#filter_form').on('submit', function(e) {
                    e.preventDefault();
                    var filter_company = $('#company_id').val();
                    var filter_employee = $('#employee_id').val();
                    var filter_month_year = $('#month_year').val();

                    if (filter_company !== '' && filter_employee !== '' && filter_month_year !== '') {
                        $('#payslips-table').DataTable().destroy();
                        fill_datatable(filter_company, filter_employee, filter_month_year);
                    } else {
                        alert('{{ __('Select Both filter option') }}');
                    }
                });
            });


            $('.dynamic').change(function() {
                if ($(this).val() !== '') {
                    let value = $(this).val();
                    let first_name = $(this).data('first_name');
                    let last_name = $(this).data('last_name');
                    let _token = $('input[name="_token"]').val();
                    $.ajax({
                        url: "{{ route('dynamic_employee') }}",
                        method: "POST",
                        data: {
                            value: value,
                            _token: _token,
                            first_name: first_name,
                            last_name: last_name
                        },
                        success: function(result) {

                            $('#employee_id').html(result);

                        }
                    });
                }
            });



            $('.close').on('click', function() {
                $('#payslips-table').DataTable().ajax.reload();
            });
        })(jQuery);
    </script>
@endsection