@extends('layouts.master')

@section('title', __('accounting.salary_invoice'))

@section('content_title', __('accounting.salary_invoice'))

@section('content_summary', __('accounting.salary_invoice_summary'))

@section('content_taskbar')
    <li class="nav-item">
        <a href="{{ route('accounting.salary_invoice.index') }}" class="nav-link">
            <i class="nav-link-icon pe-7s-plus"></i>
            <span>{{ __('core.view') }}</span>
        </a>
    </li>
@endsection

@section('main_content')
    <div class="main-card mb-3 card">
        <div class="card-body">
            <div class="card-title">{{ __('accounting.create_salary_invoice') }}</div>
            <div>
                <form id="salary_invoice_form" action="{{ route('accounting.salary_invoice.store') }}" method="POST">
                    <div class="row">
                        <div class="d-flex gap-3 col-12">

                            @if (auth()->user()->hasRole('Super Admin'))
                                <div class="flex-fill mb-3">
                                    <label for="" class="form-label">{{ __('core.business_id') }}</label>
                                    <select class="form-select" name="business_id" id="business_id">
                                        @foreach ($business_list as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                            <div class="flex-fill mb-3">
                                <label for="" class="form-label">{{ __('core.employee_designation') }}</label>
                                <select class="form-select employee_designation_id" name="employee_designation_id"
                                    id="employee_designation_id">
                                    @foreach ($employee_designation_list as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="flex-fill mb-3">
                                <label for="user_id" class="form-label">{{ __('core.username') }}</label>
                                <select class="form-select user_id" name="user_id" id="user_id">
                                    <option selected>Please Select</option>

                                </select>
                            </div>
                            <div class="flex-fill mb-3">
                                <label for="salary_invoice_date" class="form-label">Select Month and Year:</label>
                                <input type="hidden" name="joining_date">
                                <input type="month" class="form-control" id="salary_invoice_date"
                                    name="salary_invoice_date">
                            </div>

                        </div>
                        <div class="col-12">
                            <table class="table table-hover  table-bordered">
                                <thead>
                                    <tr>
                                        <th>{{ __('accounting.bonus') }}</th>
                                        <th>{{ __('accounting.extra_bonus') }}</th>
                                        <th>{{ __('core.add') . ' / ' . __('core.remove') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="parent_div">
                                    <tr>

                                        <td>
                                            <select class="form-select bonus_id" name="bonus_id[]" id="bonus_id">
                                                <option selected>Please Select</option>
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control extra_bonus" name="extra_bonus[]"
                                                placeholder="Extra bonus">
                                        </td>
                                        <td><button type="button" class="btn btn-primary btn-sm add_bonus">Add</button>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot id="tableFooter" style="">
                                    <tr>
                                        <th>
                                            Amount
                                            <input type="text" class="form-control amount" id="totalAmount"
                                                name="amount" readonly="">
                                        </th>

                                        <th>
                                            Total Bonus
                                            <input type="text" class="form-control total_bonus" id="totalDiscount"
                                                name="total_bonus" readonly="">
                                        </th>

                                        <th>
                                            Total Amount
                                            <input type="text" class="form-control total_amount" id="totalRecieve"
                                                name="total_amount" readonly="">
                                        </th>
                                    </tr>


                                </tfoot>
                            </table>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {

            var business_id = "{{ auth()->user()->business_id }}";
            var employee_designation_id = null;
            var employee_designation_list_data = null;
            var bonus_list_data = null;

            $("#business_id").on("change", function() {
                business_id = $(this).val();
                updateDesignation(business_id);
                updateUserSelects(business_id, employee_designation_id)
            })
            $("#employee_designation_id").on("change", function() {
                if (!business_id) {
                    toastr.error("Please Select Business first")
                    return;
                }
                employee_designation_id = $(this).val();
                if (!employee_designation_id) {
                    $(" select input").val('').excpet("[name='business_id']")
                }
                updateUserSelects(business_id, employee_designation_id)
            })


            $(".user_id").on("change", function() {
                let user_id = $(this).val();
                let my_data = employee_designation_list_data.find(function(item) {
                    return item.user_id == user_id;
                })


                $('[name="joining_date"]').val(my_data.information.joining_date);
                // $(".amount").val(my_data
                //     .information.designation
                //     .salary_per_month).trigger("change");
                updateAmounts(my_data.information.designation.salary_per_month || 0)
                updateDataByBusinessId(business_id, my_data
                    .information.designation.designation_for, $(".parent_div"))


            })


            $(document).on("change", ".bonus_id", function() {
                let id = $(this).val();
                let my_data = bonus_list_data.find(function(item) {
                    return item.id == id;
                })


                // $(".total_bonus").val().trigger(
                //     "change");
                updateAmounts(my_data && my_data.bonus_amount ? my_data
                    .bonus_amount : 0, my_data && my_data.bonus_type ? my_data
                    .bonus_type : 1);
            })

            function updateDesignation(business_id) {
                $.ajax({
                    method: "get",
                    url: "{{ route('employees.employeeDesignationDropdown', ['business_id' => ':business_id']) }}"
                        .replace(":business_id", business_id),
                    success: function(response) {
                        let $select = $(".employee_designation_id")
                        updateDropdown($select, response, true);
                    },
                    error: function(error) {}
                })
            }

            function updateUserSelects(business_id, employee_designation_id) {
                $.ajax({
                    method: "get",
                    url: "{{ route('employees.employeeByDesignationId', ['business_id' => ':business_id', 'employee_designation_id' => ':employee_designation_id']) }}"
                        .replace(':business_id', business_id).replace(':employee_designation_id',
                            employee_designation_id), // Append the designation_id
                    success: function(response) {
                        let data = JSON.parse(response);
                        let $select = $(".user_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select')); // Add default option
                        employee_designation_list_data = data;


                        if (data && data.length > 0) {
                            data.map((item) => {
                                $select.append($('<option></option>').attr('value',
                                    item.user.id).text(
                                    item.user.username));
                            })
                        }
                    },
                    error: function(error) {
                        console.error(error);
                        let $select = $(".user_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select'));
                    }
                })
            }

            function updateDataByBusinessId(business_id, user_for, $parent) {
                $.ajax({
                    method: "GET",
                    url: "{{ route('accounting.bonuses.get_data_by_business_id', ['business_id' => ':business_id', 'user_for' => ':user_for']) }}"
                        .replace(':business_id', business_id).replace(":user_for", user_for),
                    success: function(response) {
                        let data = JSON.parse(response);
                        let $select = $parent.find(".bonus_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select')); // Add default option
                        bonus_list_data = data;
                        if (data && data.length > 0) {
                            data.map((item) => {
                                $select.append($('<option></option>').attr('value',
                                    item.id).text(
                                    item.bonus_name + " - " + item.bonus_amount));
                            })
                        }
                    },
                    error: function(error) {
                        let $select = $parent.find(".bonus_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select'));

                    }
                })
            }




            $(document).on('click', '.add_bonus', function(e) {
                let table = e.target.closest("table");
                addRow($(table), 1, e.target);
                $("#tableFooter").show();
            });

            $(document).on("click", ".remove_bonus", function() {

                updateAmounts(-parseFloat($(this).closest("tr").find(".extra_bonus").val()) || 0, "extra")
                $(this).closest("tr").remove();
                updateAmounts("demo", 'demo');
            })

            $(document).on("focusout", ".extra_bonus", function(e) {
                let amount = parseFloat(e.target.value) || 0;
                updateAmounts(amount, 'extra')
            })





            function addRow(tableBody, rows, clicked_ele = null) {
                for (let i = 0; i < rows; i++) {
                    let newRows = '';
                    if (clicked_ele) {
                        newRows = clicked_ele.closest("tr").cloneNode(true);
                        newRows.lastElementChild.innerHTML =
                            '<td><button type="button" class="btn btn-danger btn-sm remove_bonus">remove</button></td>';
                        tableBody.append(newRows);
                    } else {
                        newRows =
                            `<tr><td><select class="form-select bonus_id" name="bonus_id[]" id="bonus_id"><option selected>Please Select</option></select></td><td><input type="number" class="form-control extra_bonus" name="extra_bonus[]"placeholder="Extra bonus"></td><td><button type="button" class="btn btn-danger btn-sm remove_bonus">remove</button></td></tr>`;
                        tableBody.append(newRows);

                    }
                }
            }

            function updateAmounts(parameter_amount, type = null) {

                let amount = parseFloat($(".amount").val()) || 0;
                let total_bonus = parseFloat($(".total_bonus").val()) || 0;
                let total_amount = parseFloat($(".total_amount").val()) || 0;
                if (type != null) {
                    total_bonus = 0;
                    total_amount = 0;
                    $(".bonus_id").each(function(ele) {
                        let $parent = $(this).closest("tr");
                        let my_data = bonus_list_data.find(function(item) {
                            return $(this).val() == item
                                .id; // Use $(this).val() to get the value of the current element
                        }.bind(this));


                        if (my_data && my_data.bonus_amount) {
                            parameter_amount = my_data.bonus_amount;
                            type = my_data.bonus_type;

                        }
                        if (type == 2) {
                            total_bonus += amount * (parameter_amount / 100);
                        } else {
                            total_bonus += parameter_amount;
                        }

                        total_bonus += parseFloat($parent.find(".extra_bonus").val()) || 0;
                        total_amount = amount + total_bonus;

                    })

                    // } else if (type == "extra") {
                    //     total_bonus += amount;
                    //     total_amount = total_bonus
                } else {
                    amount = parameter_amount;
                    total_amount += amount;
                }
                $(".amount").val(amount)
                $(".total_bonus").val(total_bonus)
                $(".total_amount").val(total_amount)

            }

            function updateDropdown($select, data, selected) {


                $select.empty(); // Clear the existing options
                // Add default option
                $select.append($('<option></option>').attr('value', '').text(
                    'Please Select'));
                // Add the new options
                $.each(data, function(key, value) {
                    $select.append($('<option></option>').attr('value', key).text(value));
                });

                if (selected) {
                    // Select the last option
                    $select.find('option:first').prop('selected', true);
                }
            }


        })



        $(document).ready(function() {
            $(document).on('submit', 'form#salary_invoice_form', function(e) {
                e.preventDefault();
                $(this).find('button[type="submit"]').attr('disabled', false);
                var data = $(this).serialize();

                $.ajax({
                    method: $(this).attr('method'),
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    success: function(result) {
                        $("#salary_invoice_form").find('.text-danger').remove();
                        if (result.success == true) {
                            $("#salary_invoice_form").parent().closest('.modal').modal(
                                "hide");
                            toastr.success(result.msg);
                            window.location.href =
                                "{{ route('accounting.salary_invoice.index') }}";
                        } else {
                            toastr.error(result.msg);
                            if (result.details) {
                                if (result.details.salary_invoice_name) {
                                    document.getElementById("salary_invoice_name_msg")
                                        .innerText = result
                                        .details.salary_invoice_name[0];
                                } else {
                                    document.getElementById("salary_invoice_name_msg")
                                        .innerText = '';
                                }
                            }
                        }
                    },
                    error: function(response) {
                        // Clear previous error messages
                        $("#salary_invoice_form").find('.text-danger').remove();

                        if (response.status === 422) {
                            // Validation errors
                            var errors = response.responseJSON.errors;
                            for (var field in errors) {
                                // Find the input field and add the error message
                                let key = field;
                                let parts = key.split('.');
                                let input_name = parts[0]; // "input field name value"
                                let index = parts[1];
                                if (index) {
                                    var $input = $('[name="' + input_name + '[]"]')[index];
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input.parentElement.appendChild(span);
                                } else {
                                    var $input = $('[name="' + field + '"]');
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input[0].parentElement.appendChild(span);
                                }
                                toastr.error(errors[field][0]);

                            }
                        } else {
                            toastr.error('An unexpected error occurred.');
                        }

                        // Re-enable submit button
                    }
                });
            });
        })
    </script>
@endpush