@extends('master')
@section('content')
    <section class="w-100">
        <div class="container-fluid">
            <div class="card mb-4">
                <div class="card-header with-border">
                    <h3 class="card-title text-center"> {{ __('Draft Payslip') }} </h3>
                </div>
                <span id="bulk_payment_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">
                                            <select class="form-select form-select-solid default_dept"
                                                data-control="select2" name="filter_department" id="department_id"
                                                data-placeholder="Category" required tabindex="-1" aria-hidden="true">
                                                <option value="">{{ __('Select Category') }}</option>
                                                @foreach ($categories as $item)
                                                    <option value={{ $item->category_id }}>{{ $item->category_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <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 class="col-md-4">
                                        <div class="form-group">
                                            <div class="form-actions">
                                                <button id="payslip_filter" type="submit"
                                                    class="filtering btn btn-primary"> <i class="fa fa-search"></i>
                                                    {{ trans('Search') }} </button>
                                                <button id="bulk_mail_btn" type="button"
                                                    class="bulk_mail_btn btn btn-primary">
                                                    <i class="fa fa-check"></i> {{ __('SEND BULK EMAIL') }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4 mt-2 text-danger">
                                        <p id="error-text"></p>
                                    </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>{{ __('Draft Payment Info') }} <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="pay_list-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 class="not-exported">#</th> --}}
                                    <th>{{ trans('Name') }}</th>
                                    <th>{{ __('Payslip Type') }}</th>
                                    <th>{{ __('Basic Salary') }}</th>
                                    <th>{{ __('Net Salary') }}</th>
                                    <th>{{ trans('Status') }}</th>
                                    <th class="not-exported">{{ trans('action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>



        <!-- View Details -->
        @include('hr.salary.pay_list.includes.view_details_draft')
        @include('hr.salary.pay_list.includes.resend_mail')
        <!--  Generate Payment -->
        @include('hr.salary.pay_list.includes.payslip_generate_info_show')
    </section>
@endsection

@section('page_script')
    <script nonce="{{ $cspNonce }}">
        let table;

        (function($) {
            "use strict";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).ready(function() {

                fill_datatable();

                function fill_datatable(filter_company = '', filter_department = '', filter_month_year = '') {
                    $('#details_month_year').html($('#month_year').val());
                    table = $('#pay_list-table').DataTable({
                        initComplete: function() {
                            this.api().columns([1]).every(function() {
                                var column = this;
                                var select = $(
                                        '<select><option value=""></option></select>')
                                    .appendTo($(column.footer()).empty())
                                    .on('change', function() {
                                        var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                        );

                                        column
                                            .search(val ? '^' + val + '$' : '', true,
                                                false)
                                            .draw();
                                    });

                                column.data().unique().sort().each(function(d, j) {
                                    select.append('<option value="' + d + '">' + d +
                                        '</option>');
                                    $('select').selectpicker('refresh');
                                });
                            });
                        },
                        responsive: true,
                        fixedHeader: {
                            header: true,
                            footer: true
                        },

                        serverSide: true,
                        ajax: {
                            url: "{{ route('payroll.draft') }}",
                            data: {
                                filter_company: filter_company,
                                filter_department: filter_department,
                                filter_month_year: filter_month_year,
                                "_token": "{{ csrf_token() }}"
                            }
                        },

                        columns: [
                            // {
                            //     data: 'id',
                            //     orderable: false,
                            //     searchable: false
                            // },
                            {
                                data: 'employee_name',
                                name: 'employee_name'
                            },
                            {
                                data: 'payslip_type',
                                name: 'payslip_type'
                            },
                            {
                                data: 'basic_salary',
                                name: 'basic_salary',
                                render: function(data) {
                                    if (
                                        '{{ config('variable.currency_format') == 'suffix' }}'
                                    ) {
                                        return data + ' {{ config('variable.currency') }}';
                                    } else {
                                        return '{{ config('variable.currency') }} ' + data;

                                    }
                                }
                            },
                            {
                                data: 'net_salary',
                                name: 'net_salary',
                                render: function(data) {
                                    if (
                                        '{{ config('variable.currency_format') == 'suffix' }}'
                                    ) {
                                        return data + ' {{ config('variable.currency') }}';
                                    } else {
                                        return '{{ config('variable.currency') }} ' + data;

                                    }
                                }
                            },
                            {
                                data: 'status',
                                name: 'status',
                                render: function(data) {
                                    if (data == 1) {
                                        return "<td><div class = 'badge badge-success'>{{ trans('Paid') }}</div>"
                                    } else {
                                        return "<td><div class = 'badge badge-danger'>{{ trans('Unpaid') }}</div>"
                                    }
                                }
                            },
                            {
                                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],
                            },
                            // {
                            //     'render': function(data, type, row, meta) {
                            //         if (type == 'display') {
                            //             data =
                            //                 '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                            //         }

                            //         return data;
                            //     },
                            //     'checkboxes': {
                            //         'selectRow': true,
                            //         'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                            //     },
                            //     'targets': [0]
                            // }{
                            //     'render': function(data, type, row, meta) {
                            //         if (type == 'display') {
                            //             data =
                            //                 '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                            //         }

                            //         return data;
                            //     },
                            //     'checkboxes': {
                            //         'selectRow': true,
                            //         'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                            //     },
                            //     'targets': [0]
                            // }
                        ],

                        '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($('#pay_list-table').DataTable());

                $('#filter_form').on('submit', function(e) {
                    e.preventDefault();
                    var filter_company = $('#company_id').val();
                    var filter_department = $('#department_id').val();
                    var filter_month_year = $('#month_year').val();
                    if (filter_company !== '' && filter_department !== '' && filter_month_year !== '') {
                        $('#pay_list-table').DataTable().destroy();
                        fill_datatable(filter_company, filter_department, filter_month_year);
                    } else {
                        alert('{{ __('Select Both filter option') }}');
                    }
                });
            });

            $('#bulk_mail_btn').on('click', function(event) {
                event.preventDefault();

                var month_year = $("#month_year").val();
                var cat_id = $("#department_id").val();

                let target = '{{ route('salary.draft.generate') }}';


                if (month_year !== '' && cat_id !== '') {
                    $("#error-text").text("");

                    $.ajax({
                        url: target,
                        method: "POST",
                        data: {
                            cat_id: cat_id,
                            month_year: month_year
                        },
                        dataType: "json",
                        success: function(response) {
                            console.log("Data sent successfully:", response);
                            toastr.success(response?.message, "Success!");
                            table.ajax.reload();
                        },
                        error: function(xhr) {
                            console.error("Error:", xhr.responseJSON);
                            toastr.error(
                                xhr.responseJSON?.message || "An unexpected error occurred."
                            );
                        },
                    });
                } else {
                    $("#error-text").text("Plese select Category & Month-Year both.");
                }

            });

            $('.close').on('click', function() {
                $('#allowance_info').html('');
                $('#commission_info').html('');
                $('#loan_info').html('');
                $('#deduction_info').html('');
                $('#overtime_info').html('');
                $('#other_payment_info').html('');
                $('#total_salary').html('');
                $('#total_deduction').html('');
                $('#total_allowance').html('');
                $('#total_loan').html('');
                $('#total_overtime').html('');
                $('#total_other_payment').html('');
                $('#total_commission').html('');
                $('#pay_list-table').DataTable().ajax.reload();

            });
        })(jQuery);

        $(document).on('click', '#resendMailButton', function() {
            const id = $(this).data("employee-id");
            openModal(id);
        });

        // Modal function
        function openModal(id) {

            formReset();

            $("#employee_id_resend").val(id);
            $("#modalTitle").html("Resend Mail - Draft Payslip");
            $("#showModal").modal("show");
        }

        let selectedForm = $("#resendSubmitForm");

        let validate = selectedForm.validate({
            rules: {
                month_year: {
                    required: true,
                },
            },
            messages: {
                month_year: {
                    required: "Please select a month to proceed.",
                },
            },
            submitHandler: function(form) {
                form.submit(); // Submit the form if validation passes
            },
        });

        selectedForm.submit(function(e) {
            e.preventDefault();

            if (!validate.valid()) return;

            loader(selectedForm, true);

            // Setup CSRF token
            setCSRFToken();

            $(".error").remove();

            const formData = new FormData(this);

            let URL = `/salary/draft/re-generate`;

            $.ajax({
                type: "POST", // Always use POST for FormData, append _method for PUT
                url: URL,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: handleSuccessWithModal,
                error: handleError,
            });
        });

        $(document).ready(function() {
            $('[data-toggle="popover"]').popover();
        });
    </script>
@endsection