@extends('layouts.master')

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

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

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

@if (auth()->user()->can('accounting.salary_invoice.create'))
    @section('content_taskbar')
        <li class="nav-item">
            <a href="{{ route('accounting.salary_invoice.create') }}" class="nav-link">
                <i class="nav-link-icon pe-7s-plus"></i>
                <span>{{ __('core.add') }}</span>
            </a>
        </li>
    @endsection
@endif



@section('main_content')
    <div class="main-card mb-3">
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ __('core.filter') }}</h5>
                <div class="row">
                    @if (auth()->user()->hasRole('Super Admin'))
                        <div class="col-12 col-md-4 mb-3">
                            <label for="business_id" class="form-label">{{ __('core.business_name') }}</label>
                            <select name="business_id" id="business_id" class="form-select form-control select_business_id filter-dropdown">
                                @foreach ($business_list as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @else
                        <input type="hidden" name="business_id" class="select_business_id"
                            value="{{ auth()->user()->business_id }}">
                    @endif

                    <div class="col-12 col-md-4 mb-3">
                        <label for="" class="form-label">{{ __('core.employee_designation') }}</label>
                        <select class="form-select employee_designation_id filter-dropdown" 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="col-12 col-md-4 mb-3">
                        <label for="user_id" class="form-label">{{ __('core.username') }}</label>
                        <select multiple class="multiselect-dropdown form-select user_id filter-dropdown" name="user_id[]" id="user_id">
                            <option value="">All Select</option>

                        </select>
                    </div>
                    <div class="col-12 col-md-12 mb-3">
                        <button class="btn btn-success" id="autoGenerateSalaryInvoice">Auto Generate Invoice</button>
                    </div>

                </div>
            </div>
        </div>
        <div class="card mb-3">
            <div class="card-body">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a data-bs-toggle="tab" href="#tab-eg10-0"
                            class="mb-2 me-2 btn btn-shadow-primary btn-primary">{{ __('core.home') }}</a>
                    </li>
                    @if (auth()->user()->can('accounting.salary_invoice.trash_view'))
                        <li class="nav-item">
                            <a data-bs-toggle="tab" href="#tab-eg10-1" class="mb-2 me-2 btn btn-shadow-danger btn-danger">
                                {{ __('core.trash') }}
                            </a>
                        </li>
                    @endif
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-eg10-0" role="tabpanel">
                        <div class="table-responsive">
                            {!! $html1->table(['style' => 'width:100%;'], true) !!}
                        </div>
                    </div>
                    <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                        <div class="table-responsive">
                            {!! $html2->table(['style' => 'width:100%;'], true) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@include('partials.js.sweet_alert')
@include('partials.js.crud')
@include('partials.js.datatable')
@include('partials.js.datatable_features')

@push('script')
    {!! $html1->scripts() !!}
    {!! $html2->scripts() !!}
    <script type="text/javascript">
        $(document).ready(function() {

            var home_table = $('#home-table').DataTable();
            var trash_table = $('#trash-table').DataTable();







            $(document).on("submit", "#modal_form", function(e) {
                e.preventDefault(); // make sure default form submit is prevented

                ModalFormSubmit("#modal_form")
                    .then(() => {
                        home_table.ajax.reload();
                        trash_table.ajax.reload();
                    });
            });




            $(".filter-dropdown").on("change", function() {
                home_table.ajax.reload();
                trash_table.ajax.reload();
            })



            setupActionButtons({
                actions: {
                    '.toggle_button': {
                        method: 'PUT',
                        confirmTitle: "{{ __('core.sure') }}",
                        confirmText: "{{ __('core.confirm_update_status') }}",
                    },
                    '.delete_button': {
                        method: 'DELETE',
                        confirmTitle: "{{ __('core.confirm_delete') }}",
                        confirmText: "{{ __('core.confirm_delete_msg') }}",
                        forceDeleteRetry: true
                    },
                    '.restore_button': {
                        method: 'POST',
                        confirmTitle: "{{ __('core.confirm_restore') }}",
                        confirmText: "{{ __('core.confirm_restore_msg') }}",
                    },
                    '.force_delete_button': {
                        method: 'DELETE',
                        icon: "error",
                        confirmTitle: "{{ __('core.confirm_delete') }}",
                        confirmText: "{{ __('core.confirm_delete_msg') }}",
                    }
                },
                onSuccess: () => {
                    home_table.ajax.reload();
                    trash_table.ajax.reload();
                },
                onError: (err) => {
                    if (!err.cancelled) {
                        console.error("Request failed", err);
                        toastr.error("Something went wrong.");
                    }
                }
            });


        });
    </script>
@endpush
@push('script')
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.colVis.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

    <script src="{{ asset('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
    <script type="text/javascript">
        $(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;
            var user_id = null
            var datatable_data_parameter = {
                business_id,
                user_id
            }

            $(".select_business_id").on("change", function() {
                business_id = $(this).val();
                loadData({
                    business_id
                });
                // $("select, input").not("[name='business_id']").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").not("[name='business_id']").val('');
                }
                updateUserSelects(business_id, employee_designation_id)
            })


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

                datatable_data_parameter = {
                    business_id,
                    user_id
                }


            })

            function updateDesignation(business_id) {
                if (!business_id) {
                    let $select = $(".employee_designation_id")
                    updateDropdown($select, [], true);
                }
                $.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(
                            'All Select')); // Add default option
                        employee_designation_list_data = data;

                        let user_id = [];
                        if (data && data.length > 0) {
                            data.map((item) => {
                                $select.append($('<option></option>').attr('value', item.user
                                    .id).text(
                                    item.user.username));
                                user_id.push(item.user.id);
                            })
                        }
                        $select.trigger("change")


                        datatable_data_parameter = {
                            business_id,
                            user_id
                        }


                    },
                    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'));
                        $select.trigger("change")

                    }
                })
            }


            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);
                }
            }









            $("#autoGenerateSalaryInvoice").on("click", function() {
                let custom_user_id = null;
                if (user_id) {
                    custom_user_id = user_id;
                }
                autoGenerateSalaryInvoice({
                    "business_id": business_id,
                    "designation_id": employee_designation_id,
                    "user_id": custom_user_id

                });
            })

            function autoGenerateSalaryInvoice(data) {
                $.ajax({
                    method: "post",
                    url: "{{ route('accounting.salary_invoice.autoGenerateSalaryInvoice') }}",
                    data: data,
                    success: function(response) {
                        console.log(response);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                })
            }


        });
    </script>
@endpush