@extends('layouts/contentLayoutMaster')

@section('title', 'Payroll Details')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/tables/datatable/buttons.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/css/extensions/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
@endsection
@section('content')
<style>
    .select2-container
    {
        max-width:250px !important;
    }
</style>
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    @if ($message = Session::get('success'))
                        <div class="demo-spacing-0 my-2">
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <div class="alert-body">{{ $message }}</div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    @endif
                    <div class="card-header border-bottom">
                        <h4 class="card-title">
                            Payroll Calculation Details
                        </h4>
                        {{-- @if ($paymentProcess->status == 0)
                            <a class="add-new-btn btn btn-primary mt-2 mr_30px" href="#" data-bs-toggle="modal"
                                data-bs-target="#addModal">Add</a>
                        @endif --}}
                    </div>
                    <div class="card-datatable table-responsive">
                        <table class="table" id="payments">
                            <thead>
                                <tr>
                                    <td colspan="2" style="padding-left:15px">
                                        {{-- <label for="vendor">Select Vendor</label> --}}
                                        <select class="select2 search-input" id="employee">
                                            <option value="">Select Employee</option>
                                            @foreach ($payments as $payment)
                                                <option value="{{ $payment['employee_code'] }}">{{ $payment['employee_name'] .' '. $payment['employee_code'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                </tr> 
                                <tr>
                                    <th>Employee Code</th>
                                    <th>Employee</th>
                                    <th>Category</th>
                                    <th>Type</th>
                                    <th>Fixed Salary (Rs)</th>
                                    <th>Milk Incentive (Rs)</th>
                                    <th>Seasonal Incentive (Rs)</th>
                                    <th>Gross Salary (Rs)</th>
                                    {{-- <th>Remaining Dues</th> --}}
                                    <th>Deductions</th>
                                    <th>Additions</th>
                                    <th>Total Payable (Rs)</th>
                                    <th>Remarks</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->

    <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-sm-5 pb-5">
                    <div class="text-center mb-2">
                        <h1 class="mb-1">Update Payments</h1>
                    </div>
                    <small class="d-block mb-1 text-danger">Note : Addition and deduction amount will only be reflected in Total Payable.</small>
                    <form class="form" action="#" id="editForm" method="POST">
                        @csrf
                        <input type="hidden" name="id" id="id">
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label" for="addition">Addition</label>
                                <input type="text"  id="addition" class="form-control" placeholder="addition"
                                    name="addition" value="" />
                                <span class="text-danger addition"></span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label" for="deduction">Deduction</label>
                                <input type="text"  id="deduction" class="form-control"
                                    placeholder="deduction" name="deduction" value="" />
                                <span class="text-danger deduction"></span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-1">
                                <label class="form-label" for="others">Remarks</label>
                                <input type="text" id="remarks" class="form-control" placeholder="remarks"
                                    name="remarks" value="" />
                                <span class="text-danger remarks"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <button type="submit" id="updateForm" class="btn btn-primary me-1">Submit</button>
                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    {{-- <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-sm-5 pb-5">
                    <div class="text-center mb-2">
                        <h1 class="mb-1">Add Payment For Supplier</h1>
                    </div>

                    <form class="form" id="createForm" method="POST">
                        @csrf
                        <div class="row">
                            <input type="hidden" name="id" value="{{ $paymentProcess->id }}">
                            <div class="col-12">
                                <label class="form-label" for="supplier">Supplier</label>
                                <select name="supplier" class="form-select select3" required>
                                    <option value="" selected disabled>Select Supplier</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}">
                                            {{ $supplier->code . ' ' . $supplier->business_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <div>
                                    <label class="form-label" for="name-column">Other Incentives</label>
                                    <input type="text" required id="other_incentives-column" class="form-control"
                                        placeholder="Other Incentives" name="other_incentives" />
                                    <span class="text-danger create_name"></span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="name-column">Remarks</label>
                                    <input type="text" required id="remarks-column" class="form-control"
                                        placeholder="Remarks" name="remarks" />
                                    <span class="text-danger create_name"></span>

                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary me-1">Submit</button>
                                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div> --}}
@endsection

@section('vendor-script')
    {{-- vendor files table data --}}
    <script src="{{ asset('vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('vendors/js/tables/datatable/buttons.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('/js/custom.js') }}"></script>
    <script>
        $(".select2").select2({});
        $("#supplier").select2({});
        $(".select3").select2({
            dropdownParent: $('#addModal .modal-content')
        });

        var payments = 'null';
        var baseUrl = '{{ URL::to('/') }}';
        let row;
        var columnsArray = [{
            // Actions
            targets: 12,
            title: 'Actions',
            orderable: false,
            sortable: false,
            visible: true
        }, {
            targets: 12,
            data: "_id",
            render: function(data, type, row, meta) {
                var showButton = '<a title="View" href="' + baseUrl + '/employee-payroll-details/' + row['_id'] +
                    '" target="_blank" class="btn btn-icon btn-primary mr_5px"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></a>';
                @if ($paymentProcess->status == 0)
                    var editButton =
                        '<a title="Edit" data-bs-toggle="modal" data-bs-target="#editModal" class="editable btn btn-icon btn-secondary" value="' +
                        row['_id'] +
                        '"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M12 20h9"></path><path d="M16.5 3.5l4 4L7 21H3v-4L16.5 3.5z"></path></svg></a>';
                    return showButton + editButton;
                @endif
                return showButton;
            }
        }];

        var columns = [{
                data: 'employee_code'
            },
            {
                data: 'employee'
            },
            {
                data: 'employee_category',
            },
            {
                data: 'employee_type',
            },
            {
                data: 'fixed_salary',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return Math.round(data);
                    }
                    return data;
                }
            },
            {
                data: 'milk_incentive',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return Math.round(data);
                    }
                    return data;
                }
            },
            {
                data: 'seasonal_incentive',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return Math.round(data);
                    }
                    return data;
                }
            },
            
            {
                data: 'gross_salary',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return Math.round(data);
                    }
                    return data;
                }
            },
            // {
            //     data: 'remaining_dues',
            //     render: function(data, type, row) {
            //         if (type === 'display') {
            //             return Math.round(data);
            //         }
            //         return data;
            //     }
            // },
            {
                data: 'deduction',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return Math.round(data);
                    }
                    return data;
                }
            },
            {
                data: 'addition',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return Math.round(data);
                    }
                    return data;
                }
            },
            {
                data: 'payable_amount',
                render: function(data, type, row) {
                    if (type === 'display') {
                        return Math.round(data);
                    }
                    return data;
                }
            },
            {
                data: 'remarks'
            },
        ];

        var dataTable = $('#payments').DataTable({
            processing: true,
            data: JSON.parse(payments),
            columns: columns,
            columnDefs: columnsArray,
            dom: '<"d-flex justify-content-between align-items-center header-actions text-nowrap mx-1 row mt-75"' +
                '<"col-sm-12 col-lg-4 d-flex justify-content-center justify-content-lg-start" l>' +
                '<"col-sm-12 col-lg-8"<"dt-action-buttons d-flex align-items-center justify-content-lg-end justify-content-center flex-md-nowrap flex-wrap"<"me-1"f>>>' +
                '><"text-nowrap" t>' +
                '<"d-flex justify-content-between mx-2 row mb-1"' +
                '<"col-sm-12 col-md-6"i>' +
                '<"col-sm-12 col-md-6"p>' +
                '>',
            language: {
                paginate: {
                    // remove previous & next text from pagination
                    previous: '&nbsp;',
                    next: '&nbsp;'
                }
            }
        });

        $(document).on('submit', '#editForm', function(e) {
            $('.text-danger').text('')
            e.preventDefault();
            let data = $(this).serialize();
            $.ajax({
                url: '{{ route('employee.payment.update') }}',
                method: 'POST',
                data: data,
                success: function(response) {
                    if (response.success) {
                        var currentPage = dataTable.page();

                        var rowData = row.data();
                        rowData['addition'] = response.payment.addition;
                        rowData['deduction'] = response.payment.deduction;
                        rowData['remarks'] = response.payment.remarks;

                        // rowData['gross_salary'] = (response.payment.gross_salary + response.payment.addition) - response.payment.deduction;
                        rowData['payable_amount'] = (response.payment.payable_amount + response.payment.addition) - response.payment.deduction;
                        // rowData['total_payable_without_expenses'] = (response.payment.total_payable_without_expenses + response.payment.addition) - response.payment.deduction;


                        // Update the DataTable row with the new data
                        row.data(rowData).draw();
                        dataTable.page(currentPage).draw('page');
                        $('#editModal').modal('toggle');
                        Swal.fire(
                            'Done!',
                            response.message,
                            'success'
                        )
                    } else {
                        $('.edit_' + response.key).text(response.message)
                    }
                }
            });
        });

        function editRecord(id, addition, deduction, remarks) {
            $("#id").val(id);
            $("#addition").val(addition);
            $("#deduction").val(deduction);
            $("#remarks").val(other_incentives);
            var row = dataTable.row($(this).closest('tr'));
            var rowIndex = row.index();
        }

        $('#payments tbody').on('click', '.editable', function() {
            row = dataTable.row($(this).closest('tr'));
            var rowData = row.data();
            $("#addition").val(0);
            $("#deduction").val(0);
            $("#remarks").val('');
            var id = rowData['_id'];
            // var addition = rowData['addition'];
            // var deduction = rowData['deduction'];
            // var remarks = rowData['remarks'];

            $("#id").val(id);
            // $("#addition").val(addition);
            // $("#deduction").val(deduction);
            // $("#remarks").val(remarks);
        });

        // Event listener for Supplier filter
        $('#employee').on('change', function() {
            var vendorId = $(this).val();
            dataTable.column(0).search(vendorId).draw(); // Assuming the column index is 1
        });

        // $(document).on('submit', '#createForm', function(e) {
        //     $('.text-danger').text('')
        //     e.preventDefault();
        //     let data = $(this).serialize();
        //     $.ajax({
        //         url: '{{ route('payment-calculation.store') }}',
        //         method: 'POST',
        //         data: data,
        //         success: function(response) {
        //             if (response.success) {
        //                 $('#supplier').val('');
        //                 $('#other_incentives-column').val('');
        //                 $('#remarks-column').val('');

        //                 $('#addModal').modal('toggle');
        //                 Swal.fire(
        //                     'Done!',
        //                     response.message,
        //                     'success'
        //                 )
        //             } else {
        //                 $('.create_' + response.key).text(response.message)
        //             }
        //         }
        //     });
        // });
    </script>
@endsection